Branding your SharePoint site with an alternate style sheet

donnasresources@gmail.com

Maybe the out-of-the-box composed looks that give you new look with “one click” (Site Settings > Look and Feel > Change the look) just don’t give you enough choice for brand customization. And maybe you just don’t want to spend time to learn the complicated process necessary for modifying the .spcolor and .spfont files that drive these composed looks to enter your own exact branding parameters. If so, then this relatively simple method for achieving exact branding settings on your site is for you!

This method helps you achieve your branding look through the creation of a new style sheet in the Assets Directory and telling your SharePoint site to use this sheet as an alternate CSS sheet. After that is set up, snippets of CSS code in operation are copied to your style sheet using Code Inspector as your investigative tool. These snippets are then modified to your exact branding specifications.

Step 1:  Create a new alternate CSS style sheet:

  1. Open your site using SP Designer.
  2. Click on Site Assets (A) on the left hand side menu.
  3. Use the Asset (B) button located on the Ribbon to choose CSS (C) file.
  4. Give this new CSS file a meaningful name.
Figure 1: Starting a new style sheet with SharePoint Designer

Step 2:  Attach this new style sheet to your site:

  1. From the gear menu of your SharePoint site, select Site Settings.
  2. Under the “Look and Feel” category on the right, choose Master Page.
  3. Scroll to the bottom section for setting an Alternate CSS URL.  Select Specify a CSS file to  be used for this site and all sites that inherit it.  Then Browse to the style sheet file you created in Step 1.
Specifying an alternate CSS file in SharePoint at donnasresources.com
Figure 2: Specifying an alternate CSS style sheet

Step 3:  Add styles to the style sheet:

  1. On your site in the browser, hover over the element of which you would like to modify properties.
  2. Right click and choose Inspect Element.
  3. The lower half of your screen opens up the Code Inspector.  The CSS is on the lower right hand side. When you find the style you wish to modify, go to the small expand/collapse arrow on the left of that style group, right click on it and choose Copy Rule.
  4. Go to SharePoint Designer and paste this code into your CSS file. Then modify specific CSS attributes as needed.
Using code inspector to see the CSS in operation on a SharePoint element
Figure 3: Where to right click in Code Inspector so you can copy the CSS in operation

Example 1: Change font

To change the font, copy the group of CSS that contains the font-family attribute that comes first in the code inspector. Paste that line of code into the CSS file. Modify it by adding your desired font as the first font listed in the font-family list.

For example, if you want Garamond font, modify the CSS copied from font-family line (as shown in Figure 3) to look like this:

font-family: Garamond, “Sego UILight”, “Segoe UI”, “Segoe”, Tahoma , Helvetica, Arial, sans-serif;

Example 2: Add a Background Image

To add a background image to your page, first add the image to your Site Assets either through the regular browser interface or through SharePoint Designer.

Then type in your style sheet this line of CSS in a new line. Substitute Tulips.jpg with the exact name of your image file you added to your site assets.

.ms-backgroundImage                  {

                                background-image: url(‘Tulips.jpg’);

                                }