With new features arriving nearly daily in Office 365 – SharePoint 2013 online, it is becoming a neccessity to find an alternative to using Master Pages to brand your sites.
With this in mind I decided to find solutions to the items that have been added to our current Master Page by only using Company Profile theme and Alternate CSS.
As a big company can have many site collections my two goals were:
Goal 1: Ensure changes to company wide branding can be made in one location and automatically used on all site collections.
Goal 2: When creating a new site collection or subsite, company branding can be installed by using minimal amount of effort.
Step 1: Set top bar in company theme
Using the Office 365 admin portal, go to company profile and then theme. Set company colors and logo for the top bar.
Note: As long as the Change the look feature is not used, the top bar will always display these settings for all site collections and sites, including one drive. See Extra Step: for information on how you can return the Change the look setting to its original state.
Step 2: Create a CSS file
Create a CSS file in an accessible location, such as the style library in a ContentTypeHub site collection. Add CSS conform company branding. See below for tips!
Step 3: Set Alternate CSS
Every time you create a new site collection, navigate to the site settings, and under Look and Feel select Master page.
Click open Alternate CSS URL and select Specify a CSS file to be used by this site. Add the URL of the CSS file created in step 2.
If this is an existing site collection, check Reset all subsites to inherit this atlernate CSS URL. And then click on OK.
Note: For all publishing subsites these settings will be automatically inherited. For all teamsites, you will need to Reset all subsites ever time you create a teamsite.
With the above method all changes made to one CSS and one Company Profile theme will be seen over all your site collections and subsites.
Extra Step: Reset Change the Look
For all existing site collections which have had custom branding in the form of a changed look and feel, you need to do the following before the Company Profile theme will appear:
- Go to Change the look in the Site settings.
- Change the look to the white, blue, black – Office look.
CSS tricks for company branding
Changing the color of Site contents icons
As most of the icon on the Site contents page are transparent, they display the background color (standard color is blue). To change this use:
background-color: rgb(0, 0, 0) /*Change color accordingly*/
Changing the color of Site contents Add an app
The add an app icon in Site Contents does not change automatically as this is taken from the spcommon.png. So download a version of the spcommon.png, change the colors as needed in an editor, save this file with a new name to the same location as the css file. In the css file add the following code:
Changing the color of the New/Upload/Sync icons
All the icons in document libraries and lists are done with font glyphs. To be able to change the color just add the following CSS:
color: rgb(0, 0, 0) /*Change color accordingly*/
Surpressing standard Logo and enforcing own Logo company wide
Using the same method as creating your own spcommon file, it is also possible to enforce the display of your own logo. Do this by saving a logo in the same Style library as the CSS, with pixels around 180px width and 64px height. And then including the following CSS: