Like I mentioned, I downloaded a HTML template for free from the web with the plan to bring the template completely into SharePoint. Here the template I picked – it has a cool ocean theme. One thing I knew right off the bat was that I would remove the stuff on the far right – not needed for my purposes.
2 – Create the Site
When I got started I created a new web application and site collection. I selected a Team Site template as my site collection. I could have picked an Enterprise Wiki (which I have done and this approach works just fine with). Really at the end the day, we just need to turn on some Features to make sure SharePoint has what we need. Since I picked a team site I decided to activate some Features that will help with publishing. I activated:
- Site Collection Features >> SharePoint Server Publishing Infrastructure and Publishing Approval Workflow
- Site Features >> SharePoint Server Publishing
What is a Master Page? The simplest definition is that the Master Page is the chrome of SharePoint. All it is all the elements that surround the page. For instance the top banner, left hand navigation and the footer would be part of the Master Page. If it is on the master page, it will be rendered on every page. So it is a good place to apply logos, theme colors, core navigation, search boxes, etc. If you want a full definition the book I referenced will provide you all the details.
Next download the start master page from this codeplex project – http://startermasterpages.codeplex.com/. This is the best place to start from.
- Open up SharePoint Designer on a site that you want to brand.
- Go to Masters Pages and create a blank Master Page.
- Then right click on it and select Edit in Advanced mode.
- The copy and paste all the in stuff in the _starter_publishing.master in the new master page.
- Then I checked in the master page a major version and then published it.
- Then go to Site Settings >> Look and Feel >> Master page. Set decided to set both the Site Master Page and System Master Page to the new master page I created.
4 – Merge in HTML Template
Now we need to take the HTML template above and merge it into the Master Page. There several steps we need to take care of.
- Open up SharePoint designer >> select the Master Page >> right click and select Edit in Advanced mode.
- Search for the word “SiteName” and replace it with appropriate text. There should only be four places. Make sure you take note of what you do here because this will dictate where you load various files. In my case, I am calling it “BrandingBlog”.
- Next we need to start taking the core HTML out of the template and move it into master page. I will be honest, this can be a complex process for me to type up (and I am doing this on my spare time too). I highly recommend you read the SharePoint 2010 Branding book. Basically what we need to do is take the HTML template and merge it with the content place holders as defined in the starter master page. In the starter master page you will see a tag called <div id="MSO_ContentDiv" runat="server">. We will be doing all of our work within this.
- IMPORTANT note there is an attribute called s4-notdlg that needs to be utilized. This attribute must be added to the HTML elements you are adding to the master page so they do not show up on pop-up windows.
<div ID="s4-workspace" class="s4-nosetwidth"> <!-- NOTE: s4-nosetwidth is used when you are setting a fixed page width in css, remove for 100% --> <div ID="s4-bodyContainer"> <!-- id="mso_contentdiv" required, helps SharePoint put the web part editing pane in the main body on the right, you can move the ID if needed --> <div id="MSO_ContentDiv" runat="server"> <!-- link back to homepage, SiteLogoImage gets replaced by the Site Icon, you can hard code this so that its not overridden by the Site Icon or even remove --> <div class="s4-notdlg"><!-- NOTE: any time you see s4-notdlg, this element will be hidden from SharePoint dialog windows --> <SharePoint:SPLinkButton runat="server" NavigateUrl="~sitecollection/"> <SharePoint:SiteLogoImage LogoImageUrl="/Style Library/BrandingBlog/logo.png" runat="server"/> </SharePoint:SPLinkButton> </div> <!-- search box loads from delegate, style with CSS --> <div class="s4-notdlg"> <asp:ContentPlaceHolder id="PlaceHolderSearchArea" runat="server"> <SharePoint:DelegateControl runat="server" ControlId="SmallSearchInputBox" Version="4"/> </asp:ContentPlaceHolder> </div> <!-- top navigation area --> <div class="s4-notdlg"> <!-- top navigation publishing data source --> <PublishingNavigation:PortalSiteMapDataSource ID="topSiteMap" runat="server" EnableViewState="false" SiteMapProvider="GlobalNavigation" StartFromCurrentNode="true" StartingNodeOffset="0" ShowStartingNode="false" TrimNonCurrentTypes="Heading"/> <!-- top navigation menu (set to use the new Simple Rendering) --> <SharePoint:AspMenu ID="TopNavigationMenuV4" EncodeTitle="false" Runat="server" EnableViewState="false" DataSourceID="topSiteMap" AccessKey="<%$Resources:wss,navigation_accesskey%>" UseSimpleRendering="true" UseSeparateCss="false" Orientation="Horizontal" StaticDisplayLevels="1" MaximumDynamicDisplayLevels="1" SkipLinkText="" CssClass="s4-tn"> </SharePoint:AspMenu> </div> <!-- page editing status bar --> <div class="s4-notdlg"> <div id="s4-statusbarcontainer" class="s4-notdlg"> <div id="pageStatusBar" class="s4-status-s1"></div> </div> </div> <!-- styles needed to have left nav to the left of the main area --> <div id="s4-leftpanel" class="s4-notdlg"> <!-- The quick launch bar / left navigation --> <asp:ContentPlaceHolder id="PlaceHolderLeftNavBar" runat="server"> <PublishingNavigation:PortalSiteMapDataSource ID="SiteMapDS" runat="server" EnableViewState="false" SiteMapProvider="CurrentNavigation" StartFromCurrentNode="true" StartingNodeOffset="0" ShowStartingNode="false" TrimNonCurrentTypes="Heading"/> <SharePoint:AspMenu ID="CurrentNav" EncodeTitle="false" runat="server" EnableViewState="false" DataSourceID="SiteMapDS" UseSeparateCSS="false" UseSimpleRendering="true" Orientation="Vertical" StaticDisplayLevels="2" MaximumDynamicDisplayLevels="0" CssClass="s4-ql" SkipLinkText="<%$Resources:cms,masterpages_skiplinktext%>"/> </asp:ContentPlaceHolder> <!-- The small menu attached Quick Launch bar. Used only on very specific pages --> <asp:ContentPlaceHolder id="PlaceHolderLeftActions" runat ="server"/> </div> <!-- s4-ca is the main body div --> <div class="s4-ca"> <div class="s4-notdlg"> <!-- links for I like it and Tags and Notes --> <!-- use ControlID="GlobalSiteLink3" for larger icons or remove this line entirely for no icons --> <SharePoint:DelegateControl ControlId="GlobalSiteLink3-mini" Scope="Farm" runat="server"/> </div> <div class="s4-notdlg"> <!-- page title --> <asp:ContentPlaceHolder id="PlaceHolderPageTitleInTitleArea" runat="server" /> </div> <!-- place a table around this to handle funky markup in _Layouts/areacachesettings.aspx (if you want) --> <asp:ContentPlaceHolder id="PlaceHolderPageDescription" runat="server" /> <div> <!-- page content loads from the pages and pages layout --> <asp:ContentPlaceHolder id="PlaceHolderMain" runat="server"/> </div> </div> <!-- footer - this is purely optional --> <div class="s4-notdlg" style="clear: both;"> © Copyright 2010 SiteName </div> <!-- the developer dashboard can be turned on by administrators and shows debuging and performance info for the page --> <div id="DeveloperDashboard" class="ms-developerdashboard"> <SharePoint:DeveloperDashboard runat="server"/> </div> </div> </div> </div>
Here is the HTML from the template. What need need to do next is start merging this HTML into the master page
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <!-- header --> <div id="header"> <div id="menu"> <div id="menu_list"> <a href="#">Home</a> <img src="images/splitter.gif" class="splitter" alt="" /> <a href="#">About Us</a> <img src="images/splitter.gif" class="splitter" alt="" /> <a href="#">Services</a> <img src="images/splitter.gif" class="splitter" alt="" /> <a href="#">Pricing</a> <img src="images/splitter.gif" class="splitter" alt="" /> <a href="#">Contacts</a> </div> </div> </div> <div id="logo"> <div id="logo_text"> <a href="#">Website name</a> <br/><br/> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque lobortis nibh eu mauris. Morbi arcu tortor, auctor et, facilisis nec, egestas sit amet, enim. </div> </div> <!--end header --> <!-- main --> <div id="main"> <div id="sidebar"> <h1>Lorem Ipsum</h1> <div class="item"><a href="#"><img src="images/picture.jpg" alt=" " /></a> <span class="description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus ornare condimentum.</span> </div> <div class="item"><a href="#"><img src="images/picture.jpg" alt=" " /></a> <span class="description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus ornare condimentum.</span> </div> </div> <div id="text" > <h1>Welcome</h1> <p><strong>Russo</strong> is a free template released by <a href="http://www.realitysoftware.ca">Reality Software</a> under the <a href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution 3.0</a> license, which means you can use it in any way you want provided you keep the link to the author intact.</p> <ul> <li>Lorem ipsum dolor sit amet.</li> <li>Consectetuer adipiscing elit.</li> <li>Maecenas ac lacus. Etiam quis ante.</li> <li>Nullam accumsan metus sit amet est.</li> <li>Nullam diam. Nunc ac ipsum at nisl pretium congue.</li> </ul> <h1>Lorem ipsum dolor</h1> <p><strong>Lorem ipsum</strong> dolor sit amet, consectetuer adipiscing elit. Phasellus ornare condimentum sem. Nullam a eros. Vivamus vestibulum hendrerit arcu. Integer a orci. Morbi nonummy semper est. Donec at risus sed velit porta dictum. Maecenas condimentum orci aliquam nunc. Morbi nonummy tellus in nibh. Suspendisse orci eros, dapibus at, ultrices at, egestas ac, tortor. Suspendisse fringilla est id erat. Praesent et libero. Proin nisi felis, euismod a, tempus varius, elementum vel, nisl. Fusce non magna sit amet enim suscipit feugiat. Fusce et leo.</p> <p><strong>Pellentesque eu massa.</strong> Praesent sed enim sed ante tempus mollis. Vestibulum est. Aenean pellentesque fringilla orci. Vestibulum tellus velit, tristique at, malesuada in, tempus sed, urna. Fusce pharetra. In elit libero, eleifend blandit, egestas nec, lacinia sit amet, mauris. Sed nec tortor nec metus interdum tempor. Aliquam convallis faucibus turpis. Sed lacinia nibh. Etiam blandit odio in metus. Sed quis nibh eu velit ullamcorper vulputate. Nulla facilisi. Aenean eget massa dignissim orci aliquet laoreet. Nulla nisi nisl, blandit vel, pharetra ac, interdum quis, tellus. Nam tincidunt porta mauris. In aliquet turpis sit amet erat. Aenean volutpat felis eu odio.</p> <p> </p> <p class="additional">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque lobortis nibh eu mauris. Morbi arcu tortor, auctor et, facilisis nec, nulla neque nisl, luctus sit amet, varius ac, tincidunt utproin dignissim sapien et urna. Morbi orci nisi, feugiat rutrum, tempus a, Curabitur eu nisl. Vivamus venenatis venenatis pede. Curabitur nibh mauris, pharetra quis, mattis sed, malesuada vitae, sem. Mauris pede iaculis eget, dapibus ac, neque. Sed libero lectus, bibendum ac, volutpat at, convallis nec, mi.</p> </div> </div> <!-- end main --> <!-- footer --> <div id="footer"> <div id="left_footer">© Copyright 2008 <b>Russo</b></div> <div id="right_footer"> <!-- Please do not change or delete this link. Read the license! Thanks. :-) --> Design by <a href="http://www.realitysoftware.ca" title="Website Design"><strong>Reality Software</strong></a> </div> </div> <!-- end footer --> </body> </html>
The first trick I learned after doing this a few times is do not bite off more than you can chew. This is an iterative process. First I flat out copy and paste all the HTML from within the <Body> template directly blow <div id="MSO_ContentDiv" runat="server">.
If you are interested you can go back to SharePoint and refresh the page and you will see all you HTML has now been added to the master page. When you scroll down you will see all the SharePoint elements and controls. Now we have a bunch of work.
The following are the steps I went through to get the page to set up:
- Took the Top Navigation Are tags from the starter page and replaced it into the <div id="menu_list"> list of the template. I also added class="s4-notdlg" to <div id="header">
- Next I made some modifications to the logo section and again added class="s4-notdlg" to <div id="Logo">.
- Next I moved the “page editing status bar” from the starter master page to be right after the Logo section. This just shows messages to the user about the state of the web page.
- Next I move the left hand navigation section from the from the starter master page to be next. One thing is my website will not need the left hand navigation however there are times when it must be displayed to the user. So there is an approach where you can take the left hand navigation section from the starter page and then use some CSS to show it when required. Review the code below for details.
- Next in the HTML template there is a second called sidebar. Since I am not using it, I removed it completely.
- Next I move the <div class="s4-ca"> section from the starter master page into the <div id="text"> tag of HTML template. I remove all the test content that was part of the template.
- Next I remove the footer section in the starter master page because my HTML template has a nice footer section which I can use.
- I subsequently moved the Developer Dashboard section from the starter master page to be right under the footer.
- There are sections from the starter page that I need to deal with. First there is a tag with SPLinkButton which has <SharePoint:SiteLogoImage />. This would be used in situations where I have a site logo and when the user clicks on the site logo they are taken back to the home page. I am going to remove this because I do not need it right now. The second is the PlaceHolderSearchArea. I will just quickly move this up within the <div class="s4-ca"> tag.
Next we need to do some work to get the css and images up for the template.
- I go to View All Site Content >> Style Library >> and created a new folder called BrandingBlog.
- Next I put the custom css file into BrandingBlog folder.
- Finally I created a folder called “images” underneath BrandingBlog and uploaded all image files that are part of the template.
This is the page that was rendered. As you can see I not out of the woods yet and have a bunch of css work we need to do. In the next section, I am going to walk through the CSS work I had to do, to get the site to look like the screenshot I provided in the introduction. Some of the tricks I will teach you will hopefully save you some time for other HTML templates you may pull into SharePoint 2010.
Also, here is the master page if you were following along with all the previous steps. As you can see the HTML template has been merged with the started template. We are not done yet. We still need to get this working correctly and changes to the master page will have to be made.
<!-- ===== Start Scrolling Body Area ============================================================ --> <!-- these two div id's are used to setup the main scrolling page area, they should stay if you are sticking the ribbon to the top --> <div ID="s4-workspace" class="s4-nosetwidth"> <!-- NOTE: s4-nosetwidth is used when you are setting a fixed page width in css, remove for 100% --> <div ID="s4-bodyContainer"> <!-- id="mso_contentdiv" required, helps SharePoint put the web part editing pane in the main body on the right, you can move the ID if needed --> <div id="MSO_ContentDiv" runat="server"> <!-- header --> <div id="header" class="s4-notdlg"> <div id="menu"> <div id="menu_list"> <!-- top navigation area --> <div class="s4-notdlg"> <!-- top navigation publishing data source --> <PublishingNavigation:PortalSiteMapDataSource ID="topSiteMap" runat="server" EnableViewState="false" SiteMapProvider="GlobalNavigation" StartFromCurrentNode="true" StartingNodeOffset="0" ShowStartingNode="false" TrimNonCurrentTypes="Heading"/> <!-- top navigation menu (set to use the new Simple Rendering) --> <SharePoint:AspMenu ID="TopNavigationMenuV4" EncodeTitle="false" Runat="server" EnableViewState="false" DataSourceID="topSiteMap" AccessKey="<%$Resources:wss,navigation_accesskey%>" UseSimpleRendering="true" UseSeparateCss="false" Orientation="Horizontal" StaticDisplayLevels="1" MaximumDynamicDisplayLevels="1" SkipLinkText="" CssClass="s4-tn"> </SharePoint:AspMenu> </div> </div> </div> </div> <div id="logo" class="s4-notdlg"> <div id="logo_text"> <a href="/SitePages/Home.aspx">Branding Blog</a> <br/><br/> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque lobortis nibh eu mauris. Morbi arcu tortor, auctor et, facilisis nec, egestas sit amet, enim. </div> </div> <!-- page editing status bar --> <div class="s4-notdlg"> <div id="s4-statusbarcontainer" class="s4-notdlg"> <div id="pageStatusBar" class="s4-status-s1"></div> </div> </div> <!-- styles needed to have left nav to the left of the main area --> <div id="s4-leftpanel" class="s4-notdlg"> <!-- The quick launch bar / left navigation --> <asp:ContentPlaceHolder id="PlaceHolderLeftNavBar" runat="server"> <style type="text/css"> /* hide the left nav and titles for pages that don't override the left nav bar */ #s4-leftpanel { display: none; } .s4-ca { margin-left:0px; } </style> </asp:ContentPlaceHolder> <!-- The small menu attached Quick Launch bar. Used only on very specific pages --> <asp:ContentPlaceHolder id="PlaceHolderLeftActions" runat ="server"/> </div> <!--end header --> <!-- main --> <div id="main"> <div id="text" > <!-- s4-ca is the main body div --> <div class="s4-ca"> <!-- search box loads from delegate, style with CSS --> <div class="s4-notdlg"> <asp:ContentPlaceHolder id="PlaceHolderSearchArea" runat="server"> <SharePoint:DelegateControl runat="server" ControlId="SmallSearchInputBox" Version="4"/> </asp:ContentPlaceHolder> </div> <div class="s4-notdlg"> <!-- links for I like it and Tags and Notes --> <!-- use ControlID="GlobalSiteLink3" for larger icons or remove this line entirely for no icons --> <SharePoint:DelegateControl ControlId="GlobalSiteLink3-mini" Scope="Farm" runat="server"/> </div> <div class="s4-notdlg"> <!-- page title --> <asp:ContentPlaceHolder id="PlaceHolderPageTitleInTitleArea" runat="server" /> </div> <!-- place a table around this to handle funky markup in _Layouts/areacachesettings.aspx (if you want) --> <asp:ContentPlaceHolder id="PlaceHolderPageDescription" runat="server" /> <div> <!-- page content loads from the pages and pages layout --> <asp:ContentPlaceHolder id="PlaceHolderMain" runat="server"/> </div> </div> </div> </div> <!-- end main --> <!-- footer --> <div id="footer" class="s4-notdlg"> <div id="left_footer">© Copyright 2008 <b>Russo</b></div> <div id="right_footer"> <!-- Please do not change or delete this link. Read the license! Thanks. :-) --> Design by <a href="http://www.realitysoftware.ca" title="Website Design"><strong>Reality Software</strong></a> </div> </div> <!-- end footer --> <!-- the developer dashboard can be turned on by administrators and shows debuging and performance info for the page --> <div id="DeveloperDashboard" class="ms-developerdashboard"> <SharePoint:DeveloperDashboard runat="server"/> </div> </div> </div> </div> <!-- ===== End scrolling body area with these two previous div's ============================================================ -->
