Part 2: “CSS scares me!” – Implement Custom CSS in SharePoint Master Pages

As a follow up to the previous post, “CSS scares me!” – How to Move Past the Intimidation and Implement Custom CSS in SharePoint, this second part is going to cover how to add a CSS file reference to your SharePoint master page. 

For an introduction, check out the first post.  We are going to jump right into it for this post.  Steps 1 & 2 have been repeated below for your convenience.  Also, this post is not for Design Manager!

How to add a custom CSS file to your SharePoint site

Step 1: Create the CSS file

  1. Create a CSS file. You can use simple tools like NotepadNotepad++ or TextEdit (first go to Format -> Make Plain Text so you can save a CSS file). You can use more advanced code editors like Sublime Text or SharePoint Designer, or go all out and use something like Dreamweaver. Bottom line is you don’t have to purchase software to create a CSS file. A free text editor like Notepad works just fine. All of the linked tools above are free or have an unlimited free trial (Sublime Text).
  2. Create a new file, add the CSS code and save the file, making sure it has the .CSS file extension.

Step 2: Add the CSS file to SharePoint

  1. The new CSS file can live anywhere you like within the SharePoint framework. Some suggested locations:
    • Style Library – access via Site actions -> Site content.
    • Site Assets Library – access via Site actions -> Site content.
    • SharePoint Web Server – requires access to the server. One suggested file location is TEMPLATE/LAYOUTS/1033/STYLES/CUSTOM FOLDER YOU CREATE.
  2. For Style Library or Site Assets Library, you can upload the file via a mapped network drive, via SharePoint Designer, or via direct upload through the browser.
  3. Check in and publish the file.
    • SharePoint Online/Office 365: From the web browser, select the ellipses to the right of the file name, then select the next ellipses, and choose Advanced -> Check In.  Choose the  1.0 Major version (publish) radio button option and select OK.
    • On-premises: From the web browser, select the ellipses to the right of the file name, then select the next ellipses, and choose Publish a Major Version.  Select OK in the modal window.
    • SharePoint Designer: Right click on the file and select Check In. Select the Publish a major version radio button and then select OK.

Step 3: Add a reference to the CSS file from the master page

  1. Check out (if needed) and Open the master page file applied to the web site. You can determine which file is applied by doing the following (this first method applies to publishing sites only):
    • Go to Site actions -> Site settings.
    • Select Master page under the Look and Feel column.
    • See what master page is set for Site Master Page. This is the master page being applied to your publishing web pages.
  2. Or, if you are in a non-publishing site you can do the following:
    • Open your SharePoint site in SharePoint Designer.
    • In the Site Objects navigation pane on the left, select Master Pages.
    • Right click on a master page file and see if Set as Default Master Page is grayed out. Keep doing this until you find the master page file with Set as Default Master Page already grayed out. Your winner is the same file that is applied as the master page for the site.
  3. You can open the master page file via SharePoint Designer, via a mapped network drive, or by downloading the master page file to your desktop (Site Actions -> Site Settings -> Master pages and page layouts -> locate file and select the arrow -> Download a copy) and then opening the file in a code editor of your choice. Refer back to the list in Step 1.1 for application suggestions, although I don’t suggest messing with Dreamweaver in this case.
  4. Once you have the file open, run a search/find for DeltaPlaceHolderAdditionalPageHead. You should end up here:
    <SharePoint:AjaxDelta id="DeltaPlaceHolderAdditionalPageHead" Container="false" runat="server">
  5. BEFORE that tag you need to add the following:
    <link rel="stylesheet" type="text/css" href="PATH-TO-YOUR-CSS-FILE/FILE-NAME.css" />
  6. Update the HREF path to reflect the location of your CSS file.
  7. If you added the file to the Style Library, you would enter in /Style Library/CUSTOM FOLDER (optional)/FILE-NAME.css.
    If you added the file to Site Assets, you would enter in /SiteAssets/CUSTOM FOLDER (optional)/FILE-NAME.css.
    If you added the CSS file on the web server, you would enter in /_layouts/1033/styles/CUSTOM FOLDER (optional)/FILE-NAME.css.
  8. Save your file.
  9. Check in (if needed), upload (if you downloaded a local copy) and/or publish the file (if in a publishing site).
  10. Your custom CSS will be applied to the site.

Step 4: Edit your CSS file moving forward

Any time you need to make changes to the CSS file, go to the location where you saved the CSS file. Check out the file (if in the Style Library or Site Assets Library). Make your changes and save the file. You can do this through a mapped network drive, SharePoint Designer, or by re-uploading an updated copy of the CSS file.  Check in and publish your file (see Step 2.3 above) and your changes will appear to you and all of your site users.

Starting to like CSS some?

Let me convince you even more. Check out my SharePoint CSS Experience course.  One day is spent on learning how to write CSS, and the second day is spent on totally rebranding SharePoint 2010 and 2013 using CSS only. And you won’t once touch JavaScript, master pages or anything outside of glorious CSS.  🙂

11 thoughts on “Part 2: “CSS scares me!” – Implement Custom CSS in SharePoint Master Pages”

  1. Heather,

    It seems when following through with your directions we are running into an issue. When the page loads, it is ignoring the first CSS command in our CSS file. If we place a dummy class or ID call with no attributes, the file will render correctly. This only applies to the very first css styling attribute. Any ideas?

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.