What I found out as part of my learning process is that is pretty much impossible to get it perfect on the first try because you will need to get the CSS of the HTML Template working with the SharePoint CSS. It is a very iterative process. In this section I will document several of the sort of things I found out that will help you get the CSS working.
So if you followed along in the last section, you will know we have a screen like this. There are several things you will immediately see an issue – like:
- Where is the scroll bar?
- The right border is gone?
- Etc.
Before we go off trying to fix things, I found the best way to investigate issues with CSS is to us Internet Explorer. Just go to Tools >> Developer Tools. What I do a lot is:
- Press the “Select Element by Click” button. This freezes the screen and then allows me to mouse over areas of the screen. It will highlight CSS with a blue box around it.
- I think click on an area of interest, and the DOM tree goes directly to the place.
- I then even have the ability to tweak the CSS style on the right to see if making a change will give me the intended result.
For what I need to do, I find this to be the perfect tool.
It is going to be hard for me to document each and every little change I made to the CSS and Master Page to show you how I got it to work. As well, I mentioned this is not production ready so I bet there are other potential things that would have to be worked out. What I will cover is some major ones I had to do and will hopefully help you when you need to do this for your web site.
Here is the original CSS I have for my HTML template. We will be making several changes to it. I am providing this for comparison purposes.
body { margin:40px; font-size:0.9em; line-height:14px; font-family:Tahoma, Arial; font-size:11px; border:1px solid #000; background: url(images/bckg.jpg) repeat-x #0A8FDE; }
a { color:#10639a; text-decoration:none;}
a:hover { text-decoration:underline;}
p { padding: 0 10px 5px 10px; }
h1 { font-family: "Myriad Pro", "Trebuchet MS", Arial; margin:0; padding:10px 0 0 10px; text-transform:uppercase; font-size:18px; color:#10639a; }
#header { background:url(images/header_bckg.jpg) no-repeat top right #0EA5FE;}
#logo { padding:50px 60px 0 40px; height:130px; background:url(images/head_bckg.jpg) no-repeat #0EA5FE; }
#logo a{ font-family: "Myriad Pro", "Trebuchet MS", Arial; color:#fff; text-decoration:none; font-weight:bold; font-size:20px; text-transform:uppercase; letter-spacing:5px; }
#logo_text { float:right; width:200px; font-size:10px; color:#fff; line-height:12px; padding-top:5px; }
#menu { background: url(images/menu_bckg.gif) repeat-x #fff; height:40px; padding-top:10px;}
#menu_list {width:600px; margin:0 auto;}
#menu a { display:block; color:#000000; float:left; font-size:14px; text-transform:uppercase; font-weight:bold; text-decoration:none; margin:0 20px; padding-top:12px; font-family: "Myriad Pro", "Trebuchet MS", Arial;}
#menu a:hover{ color:#078DE2;}
.splitter { display:block; float:left;}
.item img { background-color:#FFFFFF; padding:6px; border:1px solid #d0d0d0;}
.item a { display:block; float:left; font-size:12px; color:#bd131d;}
.description { display:block; float:right; width:220px; padding: 10px 20px 30px 0; line-height:12px;}
p.additional { margin:0 10px; color:#9c9c9c; font-size:10px; line-height:12px; border-top:1px solid #bdbdbd; padding: 10px 0; font-weight:normal;}
#text { margin: 0 292px 0 0; background:url(images/content.gif); padding:10px;}
#text li {list-style:none; padding-left:20px; background:url(images/li.gif) no-repeat 0px 4px;line-height:18px;}
#sidebar { float:right; width:245px; padding: 20px 20px 0 30px; font-size:10px; }
#sidebar a{ font-weight:bold; }
#sidebar h1 { font-family: "Myriad Pro", "Trebuchet MS", Arial; margin:0; padding:0 0 20px 0; text-transform:uppercase; color:#000;}
#main { float:left; background:url(images/sidebar_bckg.gif) no-repeat top right #fff; }
#footer {font-family: "Myriad Pro", "Trebuchet MS", Arial; background:url(images/footer_bckg.gif) repeat-x #000; height:55px; clear:both; }
#left_footer { float:left; padding:20px 0 0 30px; color:#fff; font-size:12px;}
#left_footer a { color:#fff;}
#left_footer a:hover { text-decoration:none;}
#right_footer { float:right; padding:20px 30px 0 0; color:#fff; font-size:12px; text-align:right;}
#right_footer a { color:#fff;}Now I will document my notes on what I had to do to get this template completely working.
- Moved the CSS that was in the master page to my HTML template CSS file to consolidate things.
- Removed <div id="main"> from the master page and from the CSS file. It was basically loading in an image that I did not need.
- Removed the #text li from the CSS because it was interfering with application pages and is not needed for what I am doing.
- In the HTML template CSS, I removed the margin 40px from the body attribute. Now I have back the scroll bar and now the page is taking up the screen. However I do not have the nice borders on the left and right. Still more work to be done.
- Next I need to make some modifications to show the search box and the tagging controls better. It is much easier now to place them given I have the CSS worked. I simply went back to the master page and added a HTML table to right justify it and make it appear on the same line.
- I also added a breadcrumb control which is was part of the SP 2007 by added <asp:SiteMapPath runat="server"/> to the master page. I also added some CSS to make it present well.
- Then I decided to click around some more in my basic site with almost no content. Most everything was working.
- Then I decided to add a blog site template. I turned on publishing and found this issue. I used the IE Developer tool and found ms-blogRightZone was the problem. I overrode in my CSS file to have a white background but again it was not perfect. A longer term solution would be that I am going to have to make the blog text area thinner so the ms-blogRightZone does not float off too far to the right.
Final Code
Here is the final master page code that I created.
<!-- ===== 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"> <!-- control width --> <div class="masterPageWidth"> <!-- 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="text" > <!-- s4-ca is the main body div --> <div class="s4-ca"> <table width="100%" class="s4-notdlg"> <tr> <td width="90%"> <div id="breadcrumb"> <asp:SiteMapPath runat="server"/> </div> </td> <td align="right"> <!-- 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> </td> <td nowrap> <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> </td> </tr> </table> <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> <!-- 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> </div> <!-- ===== End scrolling body area with these two previous div's ================================================ -->
Here is the final CSS that I modified through the process:
body { font-size:0.9em; line-height:14px; font-family:Tahoma, Arial; font-size:11px; border:1px solid #000; background: url(images/bckg.jpg) repeat-x #0A8FDE; }
a { color:#10639a; text-decoration:none;}
a:hover { text-decoration:underline;}
p { padding: 0 10px 5px 10px; }
h1 { font-family: "Myriad Pro", "Trebuchet MS", Arial; margin:0; padding:10px 0 0 10px; text-transform:uppercase; font-size:18px; color:#10639a; }
#header { background:url(images/header_bckg.jpg) no-repeat top right #0EA5FE;}
#logo { padding:50px 60px 0 40px; height:130px; background:url(images/head_bckg.jpg) no-repeat #0EA5FE; }
#logo a{ font-family: "Myriad Pro", "Trebuchet MS", Arial; color:#fff; text-decoration:none; font-weight:bold; font-size:20px; text-transform:uppercase; letter-spacing:5px; }
#logo_text { float:right; width:200px; font-size:10px; color:#fff; line-height:12px; padding-top:5px; }
#menu { background: url(images/menu_bckg.gif) repeat-x #fff; height:40px; padding-top:10px;}
#menu_list {width:600px; margin:0 auto;}
#menu a { display:block; color:#000000; float:left; font-size:14px; text-transform:uppercase; font-weight:bold; text-decoration:none; margin:0 20px; padding-top:12px; font-family: "Myriad Pro", "Trebuchet MS", Arial;}
#menu a:hover{ color:#078DE2;}
.splitter { display:block; float:left;}
.item img { background-color:#FFFFFF; padding:6px; border:1px solid #d0d0d0;}
.item a { display:block; float:left; font-size:12px; color:#bd131d;}
.description { display:block; float:right; width:220px; padding: 10px 20px 30px 0; line-height:12px;}
p.additional { margin:0 10px; color:#9c9c9c; font-size:10px; line-height:12px; border-top:1px solid #bdbdbd; padding: 10px 0; font-weight:normal;}
#text { margin: 0 0 0 0; background:url(images/content.gif); padding:10px; }
#sidebar { float:right; width:245px; padding: 20px 20px 0 30px; font-size:10px; }
#sidebar a{ font-weight:bold; }
#sidebar h1 { font-family: "Myriad Pro", "Trebuchet MS", Arial; margin:0; padding:0 0 20px 0; text-transform:uppercase; color:#000;}
#footer {font-family: "Myriad Pro", "Trebuchet MS", Arial; background:url(images/footer_bckg.gif) repeat-x #000; height:55px; clear:both; }
#left_footer { float:left; padding:20px 0 0 30px; color:#fff; font-size:12px;}
#left_footer a { color:#fff;}
#left_footer a:hover { text-decoration:none;}
#right_footer { float:right; padding:20px 30px 0 0; color:#fff; font-size:12px; text-align:right;}
#right_footer a { color:#fff;}
/* Control Page Width */
.masterPageWidth { width: 960px; margin: auto; background-color:white; }
#breadcrumb { font-family: "Myriad Pro", "Trebuchet MS", Arial; margin:0; text-transform:uppercase; font-size:18px; color:#10639a; }
/* fix scrolling on list pages */
#s4-bodyContainer { position: relative; }
/* hide body scrolling (SharePoint will handle) */
body { height:100%; overflow:hidden; width:100%; }
/* popout breadcrumb menu needs background color for firefox */
.s4-breadcrumb-menu { background:#F2F2F2; }
/* if you want to change the left nav width, change this and the margin-left in .s4-ca */
body #s4-leftpanel { /* width:155px; */ }
/* body area normally has a white background */
.s4-ca { background:transparent none repeat scroll 0 0; /* margin-left:155px; */ }
/*Fix some issues with the dialog boxes*/
.ms-dialog .masterPageWidth { width:auto !important; }
.ms-dialog body { background-color: white; background-image: none; }
/* make the background white*/
#s4-leftpanel { background-color:white; }
/* right zone override for the blog*/
.ms-blogRightZone { background-color:white; }Conclusions
You can probably click around in a bunch more places and find more issues with my template. All of them should be easy to fix with some CSS changes. This is why I said I am not building a production ready branding implementation but this will show you how to start one.
Interesting Note
This is the second time I have done this template; and the third time I have done some real branding into SharePoint. One interesting thing that I did not encounter this time around was the double vertical scrollbar appearing. I cannot replicate the scenario right now but it is worth noting. Below is a somewhat related thing I ran into earlier. You may recall I lost the vertical scroll bar completely (screenshot below). Notice how the scroll bar is directly tied to the ribbon. In this case I had some CSS in the HTML template that was pushing the ribbon off the screen which subsequently pushed the scrollbar off to the right making it inaccessible.
One interesting thing to take note of is the screenshot below. This is a screen shot after I fixed my custom CSS to show the ribbon correctly. You may not have ever noticed but in SharePoint 2010 the scrollbar does not go all the way up; it stops at the ribbon. SharePoint 2010 takes over the way the scrollbar is displayed to ensure that top ribbon is always displayable to the user. When implementing your custom templates and CSS you will have to make modifications to accommodate this.
