Thursday, 15 December 2016

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;
}

No comments:

Post a Comment