SharePoint Online - Branding with CSS

-----------------------------------------------------------------------------------------
This post is related to a larger group of posts called Migrate SharePoint to Office 365 - Planning & Steps
-----------------------------------------------------------------------------------------

I've gone with a Publishing Site Collection so that I can use the 'Alternate CSS URL' in Site Settings > Master Page.

First off, thanks to the following websites which helped get me started:
Here's what the end result will look like (if you have the same fonts):


Now for the CSS...

/* Design By : Brett Randall */
/*     Design Colours: Greens/Greys/Blues */
/*     Last Modified : 28/02/2017 */
/*     Description: CSS to rebrand SharePoint Online Publishing Site Collection that is using seattle.master */

/* TABLE OF CONTENTS
-- -- -- -- -- -- -- -- -- -- -- -- -- -- --
/* WEB FONTS & STYLES
/* LAYOUT & OVERALL PAGE
/* RIBBON & SUITE BAR
/* HEADER
/* NAVIGATION (TOP NAV BAR)
/* SEARCH
/* NAVIGATION (SIDE NAV/QUICK LAUNCH)
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- */

/* WEB FONTS & STYLES
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- */
@font-face {
  font-family: 'MuseoSans100Regular';
  src: url('../Fonts/museosans_100-webfont.eot'); /* IE9 Compat Modes */
  src: url('../Fonts/museosans_100-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../Fonts/museosans_100-webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('../Fonts/museosans_100-webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
}

@font-face {
  font-family: 'MuseoSans300Regular';
  src: url('../Fonts/museosans_300-webfont.eot'); /* IE9 Compat Modes */
  src: url('../Fonts/museosans_300-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../Fonts/museosans_300-webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('../Fonts/museosans_300-webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
}

@font-face {
  font-family: 'MuseoSans500Regular';
  src: url('../Fonts/museosans_500-webfont.eot'); /* IE9 Compat Modes */
  src: url('../Fonts/museosans_500-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../Fonts/museosans_500-webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('../Fonts/museosans_500-webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
}

.ms-rtestate-field h1 {
    font-size: 39px;
    font-weight:300;
    font-family: MuseoSans300Regular, Arial, "Helvetica Neue", Helvetica, sans-serif;
    line-height: 60px;
    color: #666;
}

.ms-rtestate-field h2 {
    font-size: 24px;
    line-height: 30px;
    font-weight: normal;
    font-family: MuseoSans300Regular, Arial, "Helvetica Neue", Helvetica, sans-serif;
    color: #666;
}

.ms-rtestate-field h3 {
    font-family: MuseoSans300Regular, Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 18px;
    line-height: 30px;
    color: #666;
}

.ms-rtestate-field h4 {
    line-height: 20px;
    font-family: MuseoSans500Regular, Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 14px;
    font-weight: normal;
    font-style: italic;
    color: #666;
}

h1.ms-rteElement-H1B{
  color:#84BD00;
  font-size: 39px;
  font-weight: normal;
  font-family: MuseoSans300Regular, Arial, "Helvetica Neue", Helvetica, sans-serif;
  line-height: 60px;
}

h2.ms-rteElement-H2B {
  color:#FF8F1C;
  font-size: 24px;
  line-height: 30px;
  font-weight: normal;
  font-family: MuseoSans300Regular, Arial, "Helvetica Neue", Helvetica, sans-serif;
}

h3.ms-rteElement-H3B{
  color:#84BD00;
  font-family: MuseoSans300Regular, Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: 18px;
  line-height: 30px;
}

h4.ms-rteElement-H4B{
  color:#84BD00;
  line-height: 20px;
  font-family: MuseoSans500Regular, Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: 14px;
  font-weight:normal;
  font-style:italic;
}

.ms-rteElement-P{
   color:#666;
}

/* LAYOUT  & OVERALL PAGE
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- */

/* Hide unnecessary page elements */
.ms-siteicon-img,  /* Image set as SharePoint site logo in Settings */
.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 */
#fullscreenmodebox  /* Focus on Content icon */
{
display: none;
}

/* Alter Suite Bar color */
#suiteBarTop > div,
#suiteBarTop #O365_TopMenu {
  background: #333;
}

/* Ensuring a gap between side nav & page content */
#contentBox{
    padding-left:12px;
}

/* RIBBON & SUITE BAR
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- */

/* Hide unnecessary page elements */
.o365cs-nav-header16 .o365cs-nav-o365Branding{ display:none !important; } /* O365 Suite Bar - Remove "Office 365" & "SharePoint Text & links */
.o365cs-nav-centerAlign::after{content:"Put Company Slogan Here"; font-size:20px; color:white;line-height: 48px; font-style: italic;} /* O365 Suite Bar - Add Mission Statement */

/* HEADER
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- */

/* Add padding to the header area */
#s4-titlerow {
  padding: 10px;
}

/* Site logo wrapper */
#siteIcon {
    margin-right: 0px;
    margin-top: 10px;
}

/* Add new logo image */
.ms-siteicon-a {
    background: #fff url('../Images/siteIcon.png') no-repeat right;  /* Logo image */
    width: 210px; /* Width of logo image */
    max-width: 210px; /* Duplicate the width value */
    height: 52px; /* Height of logo image */
    max-height: 52px; /* Duplicate the height value */
}

/* Wrapper around site logo wrapper */
#titleAreaBox {
    margin: 0;  /* Remove OOTB margin */
}

/* Page title text */
#pageTitle {
    margin-top: 10px;
    margin-left: 12px;
    font-family: MuseoSans300Regular, Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 39px;
    color: #84BD00;
    font-weight: normal;  
}

/* NAVIGATION (TOP NAV BAR)
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- */

/* Placement & Formatting */
.ms-breadcrumb-top > .ms-core-navigation {
    background: #FFF;
    display: block;
    height: 41px;
    width: 100%;
    text-align: left;
}

.ms-core-listMenu-horizontalBox {
    margin-left: 10px;
}

/* Item text formatting */
.ms-core-listMenu-horizontalBox li.static > .ms-core-listMenu-item {
    background-color: rgb(132, 189, 0);
    height: 16px;
    color: #FFF;
    font-family: MuseoSans300Regular, Arial, Helvetica, freesans, sans-serif;
    font-size: 13px;
    font-weight: normal;
    margin-right: 0;
padding: 10px 10px;
    border: 0px;
    border-right: #FFF 3px solid;
}

/* Hover */
.ms-core-listMenu-horizontalBox li.static > .ms-core-listMenu-item:hover {
    background-color: #999;
    color: #fff;
}
/* Hide the down arrow for drop down nav */
.ms-core-listMenu-horizontalBox .dynamic-children.additional-background{padding-right:0px; background-image: none;}

/* 2nd Level Nav modifications */
ul.dynamic{
    background-color: #666;
    color: #fff;  
    margin-left:3px;
    margin-top:2px;
    padding: 4px 0px;
    border: 0px;
    border-radius: 4px;
    min-width:213px; /* ensures div is as wide as the a{} nav tiles */
}

/* 2nd Level a{} tiles */
ul.dynamic > li.dynamic a{
    background-color: rgb(132, 189, 0);
    width: 190px;
    padding:10px;
    padding-left: 13px;
    color:#fff;
}

ul.dynamic > li.dynamic a:hover{
    color:#fff;
    background-color: #999;
}

/* SEARCH
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- */

/* Width of entire Search Box */
.ms-mpSearchBox{
    width: 259px;
    background: rgb(233, 234, 232);
    border-radius:4px;
}

/* Modify default formatting for input */
.ms-srch-sb input {
    width: 187px;
    font-size: 14px;
    color: #000;
}

.ms-srch-sb, .ms-srch-sb:hover{
    padding-top: 5px;
    padding-bottom: 5px;
    background: #fff;
    border: 0px;
    border-radius:4px;
}

#searchInputBox{
    float:left;
    margin: 10px;
}

/* NAVIGATION (SIDE NAV/QUICK LAUNCH)
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- */

/* Add colour to Quick Launch (side nav bar) */
#sideNavBox{
    background-color: #F4F4F4;
}

.ms-core-listMenu-verticalBox {
    background-color: #F4F4F4;
}

/* Folders/Headings */
.ms-core-listMenu-verticalBox > .ms-core-listMenu-root > li > .ms-navedit-linkNode{
    background: linear-gradient(-90deg, #D7F1F7, #84BD00 );
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#84BD00, endColorstr=#D7F1F7, GradientType=1); /* Gradient workaround for IE9+ */
    font-size:14px;
    padding-left: 10px;
    padding-top: 7px;
    padding-bottom: 7px;
    color: #000;
    font-family: MuseoSans300Regular, Arial, Helvetica, freesans, sans-serif;
    font-weight: normal;
    border-bottom: 1px #F4F4F4 solid;
}

.ms-core-listMenu-item:visited{
    color: #000;
}

.ms-core-listMenu-heading{
    font-weight:bold;
}

li > a.ms-core-listMenu-item.ms-core-listMenu-selected:hover, li > a.ms-core-listMenu-item:hover, .ms-core-listMenu-heading:hover{
    background-color:#999;
    color:#fff;
}

.ms-core-listMenu-verticalBox li.static > ul.static > li.static > .ms-core-listMenu-item{
    padding-top:7px;
    padding-bottom:7px;
    padding-left:20px;
}

li > a.ms-core-listMenu-item.ms-core-listMenu-selected{
    background-color: #84BD00;
    color: #000;
}

.ms-core-listMenu-item, .ms-core-listMenu-item:link{
    color:#000;
}

Comments

  1. Hi Brett,

    Thank you for the great post on branding with CSS. It really helped me out for branding our sites. I am noticing some issues on our collaboration site recently. Can you please help me with the below?

    We recently migrated from SharePoint 2010 to SharePoint Online. The Global Navigation in one of our sites has many links to other sites. With this, we are getting a horizontal scroll bar.

    I would like to know how we can wrap the Global Navigation Menu in SPO. Please help advise your thoughts.

    Thank you.

    ReplyDelete
    Replies
    1. Hi Subhash, first thing I'd say is if you can, use modern team sites instead and convince the business they don't need a fully customised look/feel.

      If that's not possible, I'm not certain but I'd say focus on this particular piece of CSS , probably need to modify the display: setting & width.

      /* NAVIGATION (TOP NAV BAR)
      -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- */

      /* Placement & Formatting */
      .ms-breadcrumb-top > .ms-core-navigation {
      background: #FFF;
      display: block;
      height: 41px;
      width: 100%;
      text-align: left;
      }

      Delete
  2. Hi Baretta,
    Thank you very much for your post it really helped me a lot. I have one question though, i couldn't resize the site logo image even if i kept playing with this section. Any ideas please?
    .ms-siteicon-a {
    background: #fff url('../Images/siteIcon.png') no-repeat right; /* Logo image */
    width: 100px; /* Width of logo image */
    max-width: 100px; /* Duplicate the width value */
    height: 52px; /* Height of logo image */
    max-height: 52px; /* Duplicate the height value */

    Thank you.

    ReplyDelete
    Replies
    1. Hey, sorry only just saw this. I personally wouldn't use my advice on this post anymore. Stick with 'Themes' and the Modern Way of doing things in SharePoint, no more custom code!

      Save yourself lots of time and pain :)

      Delete

Post a Comment

Popular posts from this blog

SharePoint - Field type [FieldName] is not installed properly. Go to the list settings page to delete this field.

Export Group Membership From Active Directory Using Power Query

Office 365 Groups - Quickly find the GUID of a O365 Group