92% of Branding SharePoint is CSS, So Why Are You Living in a Master Page?
So, seriously? Why is all the hype about master page this and master page that. All of your branding should be coming from CSS! Master pages have their place in the world and are certainly useful. Just make sure all the pretty is in your CSS file.
Here is a summary of the CSS session at SPTechCon.
To start off with…
We are going to take blah gross SharePoint:
And turn it into this:
(Dear BBC, we are only using your site cause we heart Sherlock and several other of your awesome shows! This is for educational use only and I promise no harm will come to dear Watson from this example.)
We will focus on the site wrapper design, not the content design.
Step 1: Hide the stuff you don’t need
The first step I always take is to hide all of the SharePoint components that I won’t be using in the design. This gets things out of the way and ensures that future CSS isn’t potentially effected when you remove something later. Get rid of it now and be done with it. I use Firefox Inspector and Firebug to locate the correct CSS classes and IDs to target the appropriate elements on the page. Here is our first block of CSS:
/* Hide unnecessary page elements */
.ms-siteicon-img, /* Image set as SharePoint site logo in Settings */
#suiteBarLeft, /*Suite Bar Left (SharePoint text and links) */
#ms-help, /* Help icon */
#fullscreenmodebox, /* Focus on Content icon */
.right-wp-zone-col, /* Content area - right column */
.ms-core-listMenu-horizontalBox .ms-listMenu-editLink, /* Global navigation "Edit Links" when managed navigation is in use */
.ms-core-listMenu-verticalBox .ms-listMenu-editLink /* Current navigation "Edit Links" when managed navigation is in use */ {
display: none;
}
#RibbonContainer-TabRowRight /* Share, Follow, Edit links */ {
display: none !important; /* !important needed to override SharePoint inline style */
}
Here is the result:
Step 2: Lay in some of the base layout and the page background
Next we are going to add our background color and image as well as knock out the overlay color added by SharePoint. We are also going to ditch the content area floats and switch to a centered, fixed width display:
/* Web page background */
body {
background: #000;
}
#s4-workspace {
background: #131517 url("http://classcdn.s3.amazonaws.com/images/sherlock-bkgd.jpg") no-repeat center -1px;
}
/* Remove OOTB shading on s4-workspace */
.ms-core-overlay {
background-color: transparent;
}
/* Page content area */
#contentBox {
margin: 15px auto 0; /* Top margin creates space between header area and content area; left/right margin centers element on page */
background: #131517;
width: 956px; /* Fixed width value (976px) minus padding value */
padding: 10px;
}
.col-fluid-1,
.col-fluid-2 {
float: none;
margin-right: 0;
}
Now we have this:
Step 3: Format the suite bar and ribbon area
My favorite part of this trick is the first style statement. At the bottom of the following code block the welcome menu and site actions icon is absolute positioned, which allows us to reduce the height of the suite bar to the bare minimum (which is the first style statement), freeing up more screen real estate.
/* Reduce height of area to minimum required */
#suiteBar {
height: auto;
}
/* Ribbon background and border */
.ms-cui-topBar2 {
background: #000;
border-bottom: 1px solid #666;
}
.ms-cui-topBar2,
.ms-cui-topBar2.ms-browseTabContainer {
border-bottom: 1px solid #666;
}
/* Move Suite Bar Right (Sign In/Welcome/Site Actions/Help) back to right side after hiding Suite Bar Left */
#suiteBarRight {
position: absolute; /* Remove from content flow and create precise placement based on parent container */
right: 0; /* Position from right */
background: transparent; /* Remove OOTB background */
top: 0;
z-index: 2;
}
Step 4: Format the header area
There are a couple of neat things going on here. First we need to undo the crazy that SharePoint creates by setting a bunch of DIVs to table related display properties. And yes I literally put “undo the crazy” in all my production code notes. Then we switch out the SharePoint logo for a custom one, in this case the BBC logo. The original logo was hidden back in step one. If a user were to set a logo image via Site Settings, it will be completely ignored and our new logo will stay firmly in place. Then finally we do some formatting for the page title, Sherlock.
/* Undo the crazy that SharePoint creates with table display set to DIVs*/
#s4-titlerow .ms-table,
#s4-titlerow .ms-tableRow,
#s4-titlerow .ms-tableCell {
display: block;
}
/* Wrapper around site logo wrapper */
#titleAreaBox {
margin: 0; /* Remove OOTB margin */
}
/* Site logo wrapper */
#siteIcon {
float: none; /* Remove OOTB float - this allows title row elements to return to typical block elements along with the table display changes above */
text-align: left; /* Alter OOTB alignment */
margin-top: 35px;
position: absolute;
left: 50%;
margin-left: -565px;
}
/* Add new logo image */
.ms-siteicon-a {
background: #df180e url('http://classcdn.s3.amazonaws.com/images/bbc_one.png') no-repeat right; /* Logo image */
width: 173px; /* Width of logo image */
max-width: 173px; /* Duplicate the width value */
height: 56px; /* Height of logo image */
max-height: 56px; /* Duplicate the height value */
}
/* Page title text */
#pageTitle {
position: absolute;
top: 50px;
left: 50%;
margin-left: -375px;
font-family: 'Gill Sans MT', Arial, sans-serif;
font-size: 52px;
color: #fff;
font-weight: normal;
}
Step 5: Top navigation bar and search
Via absolute positioning, we are going to move the top navigation to the right place and do some basic formatting and add the borders. We are going to use absolute positioning again (seeing a theme here?) to get the search to the right place and add a white background back to the search area. By default the search is transparent in SharePoint 2013.
/* Top nav bar placement & formatting */
.ms-breadcrumb-top > .ms-core-navigation {
background: #000;
display: block;
height: 41px;
position: absolute;
top:0;
width: 100%;
border-bottom: #666 1px solid;
text-align: center;
}
.ms-core-listMenu-horizontalBox {
margin-left: 40px;
}
/* Nav item text formatting */
.ms-core-listMenu-horizontalBox li.static > .ms-core-listMenu-item {
height: 16px;
color: white;
font-family: Arial, Helvetica, freesans, sans-serif;
font-size: 13px;
font-weight: bold;
margin-right: 0;
padding: 12px 15px;
border-right: #666 1px solid;
}
/* Search box placement */
.ms-mpSearchBox.ms-floatRight {
float: none;
position: absolute;
top: 8px;
left: 50%;
margin-left: 228px;
}
/* Search background */
.ms-srch-sb {
background: #fff;
}
/* Remove default border */
.ms-srch-sb-border,
.ms-srch-sb-border:hover {
border-color: transparent;
}
/* Modify default formatting for input */
.ms-srch-sb input {
width: 170px;
color: black;
font-family: Arial, Helvetica, freesans, sans-serif;
font-size: 13px;
font-weight: bold;
}
Step 6: Convert the quick launch to horizontal navigation
This one always elicits at least one “ohhh” and “ahhhh” from the crowd. Just because the quick launch is vertical by default doesn’t mean it has to stay that way. You can alter the orientation via a control setting in the master page, or just do a little CSS magic. We end this code block with hiding the Site Contents link that shows by default in the left nav.
/* Quick Launch placement & formatting */
#sideNavBox {
float: none;
width: 976px;
height: 44px;
margin: 10px auto 0;
background: rgba(66, 55, 55, 0.8);
}
.ms-core-sideNavBox-removeLeftMargin {
margin-left: 0;
}
/* Convert to horizontal nav bar */
.ms-core-listMenu-verticalBox ul li {
float: left;
}
/* Nav item text formatting */
#s4-workspace .ms-core-listMenu-verticalBox ul li a {
font-family: Arial, Helvetica, freesans, sans-serif;
font-size: 16px;
height: 20px;
padding: 12px 15px;
color: rgb(214, 211, 175);
}
/* Nav item selected and hover effect */
#s4-workspace .ms-core-listMenu-verticalBox ul li.selected > a,
#s4-workspace .ms-core-listMenu-verticalBox ul li a:hover {
background: rgba(31, 26, 26,.3);
color: #fff;
}
/* Hide "Site Contents" link */
#s4-workspace .ms-core-listMenu-verticalBox > a {
display: none;
}
Step 7: Add the OTHER logo
It isn’t just BBC, it is BBC One and there is a separate logo for the “One”. Since we have already used the SharePoint logo we need to get a little creative to add in the second logo image. Through use of a :before pseudo element, we can add the logo in front of the top navigation bar.
/* Add BBC logo before navigation */
.ms-core-listMenu-horizontalBox:before {
content: "";
position: absolute;
margin-left: -260px;
top: 0;
background: url("http://classcdn.s3.amazonaws.com/images/bbc-blocks-light.png") no-repeat 0 8px;
display: block;
width: 94px;
height: 41px;
border-right: #666 1px solid;
}
Step 8: Clean up the top navigation bar
The top nav bar is looking good, but it could look better. It needs a border on the far left of the bar (currently it looks a little off kilter with no border to the left of “News”). Also if you have a drop down menu, the text has been centered and is no longer left aligned as it should be from a previous style statement addition. Plus the drop down arrow is the default black arrow from SharePoint which doesn’t look that great on a dark background.
The left border can be fixed by using the :first-child pseudo class. We will only target the first child list item (News) and add the border. That way we skip adding it to all of the list items.
The drop down menu text alignment can be fixed by targeting only the dynamic menus (SharePoint’s term for drop down or fly out menus).
And finally we can hide the default arrow image that SharePoint uses and utilize a font icon instead. This allows us to scale the “image” and recolor it as we see fit. In this example we will use Font Awesome, and you need to add a reference to the font at the top of your CSS file @import. Be sure to check to see what the latest version of Font Awesome is as it does get updated frequently. Below it is set to version 4.3.0.
/* Font Awesome is a free font. http://fontawesome.io/ */
@import "//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css";
.ms-core-listMenu-horizontalBox > ul > li.static:first-child > .ms-core-listMenu-item {
border-left: #666 1px solid;
}
/* Remove default image and formatting for dynamic menu drop downs */
.ms-core-listMenu-horizontalBox .dynamic-children.additional-background {
padding-right: 0;
background: none;
}
/* Insert new icon for dynamic menu drop downs */
.ms-core-listMenu-horizontalBox .dynamic-children.additional-background:after {
content: "\f0d7";
font-family: FontAwesome;
padding-left: 10px;
font-size: .7em;
}
/* Correct text alignment of dynamic pop up menu nav items */
.ms-core-listMenu-verticalBox .ms-core-listMenu-item, ul.dynamic .ms-core-listMenu-item {
text-align: left;
}
/* Adjust placement of dynamic pop up menu */
ul.dynamic {
margin-top: 7px;
margin-left: -5px;
}
Step 9: Add the color changing hover effect for the top navigation
You can’t tell by the original screenshot, but when you visit the BBC One site and hover over the top navigation items there is hover effect that is color specific based on which item you are hovering over.
We can do this effect with CSS and combination of a pseudo class (:hover), a pseudo element (:after) and attribute selectors. This method does rely on you knowing the target URLs for the navigation items and faith that they won’t change. The :hover and :after adds the bottom bar while the attribute selector changes the color based on which page the navigation item links to.
/* Hover effect for nav bar */
.ms-core-listMenu-horizontalBox li.static > .ms-core-listMenu-item {
position: relative;
}
.ms-core-listMenu-horizontalBox li.static > .ms-core-listMenu-item:hover:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
display: block;
height: 4px;
background: #fff;
}
.ms-core-listMenu-horizontalBox li.static > .ms-core-listMenu-item[href*="news"]:hover:after {
background: #871308;
}
.ms-core-listMenu-horizontalBox li.static > .ms-core-listMenu-item[href*="sport"]:hover:after {
background: #FFF000;
}
.ms-core-listMenu-horizontalBox li.static > .ms-core-listMenu-item[href*="weather"]:hover:after {
background: #6AB0D7;
}
.ms-core-listMenu-horizontalBox li.static > .ms-core-listMenu-item[href*="shop"]:hover:after {
background: #1B80E2;
}
Step 10: Replace the search magnifying glass icon
Why stop at the top nav bar drop down arrow? We can also switch in a new icon for search, again using Font Awesome.
/* Hide default Search icon */
.ms-srch-sb-searchImg {
display: none;
}
/* Insert new search icon */
.ms-srch-sb-searchLink:before {
content: "\f002";
font-family: FontAwesome;
font-size: 1rem;
display: inline-block;
padding: 1px;
color: #2F373F;
}
Step 11: Whoify your site
No need to limit our creativity to Sherlock. We can also extend our mad CSS skills to Dr. Who. The only challenge is the Dr. Who page has a few differences from Sherlock:
But no matter, we can still handle everything in a single CSS file. Using an attribute selector and the SharePoint form tag, which contains an action attribute that reflects the name of our page, we can create the design variation. Both Who and who are used in the code block below since CSS is case sensitive and a user could manually key in the URL to the page.
form[action$="Who.aspx"] #s4-workspace,
form[action$="who.aspx"] #s4-workspace {
background: #101010 url("http://classcdn.s3.amazonaws.com/images/drwho-bkgd.jpg") no-repeat center 42px;
}
form[action$="Who.aspx"] #contentBox,
form[action$="who.aspx"] #contentBox {
background: #18242B;
margin-top: 5px;
color: #fff;
}
form[action$="Who.aspx"] #pageTitle,
form[action$="who.aspx"] #pageTitle {
width: 100%;
background: url("http://classcdn.s3.amazonaws.com/images/drwho-hdr.png") no-repeat center;
height: 170px;
text-indent: -99999px;
top: 50px;
left: 50%;
margin-left: -50%;
}
form[action$="Who.aspx"] #sideNavBox,
form[action$="who.aspx"] #sideNavBox {
background: rgba(34,53,62, 0.8);
margin-top: 100px;
}
form[action$="Who.aspx"] #s4-workspace .ms-core-listMenu-verticalBox ul li a,
form[action$="who.aspx"] #s4-workspace .ms-core-listMenu-verticalBox ul li a {
color: #BBDEDE;
}
form[action$="Who.aspx"] #s4-workspace .ms-core-listMenu-verticalBox ul li.selected > a,
form[action$="who.aspx"] #s4-workspace .ms-core-listMenu-verticalBox ul li.selected > a,
form[action$="Who.aspx"] #s4-workspace .ms-core-listMenu-verticalBox ul li a:hover,
form[action$="who.aspx"] #s4-workspace .ms-core-listMenu-verticalBox ul li a:hover {
background: rgba(19, 26, 29,.3);
color: #fff;
}
The final code
Here is the link to the final CSS code file from the session that has everything integrated in nicely as well as some bonus responsive design at the end.
Thanks for attending!