“CSS scares me!” – How to Move Past the Intimidation and Implement Custom CSS in SharePoint

Be it clowns, creepy movies, dark basements with a single dingy light bulb or the next presidential candidate, we all have our fears. What I don’t want anyone to be afraid of is adding some custom CSS to their SharePoint site. With the push to not use custom master pages in SharePoint Online / Office 365, more and more people are looking for alternatives on how to pull off small tweaks (and even big ones) in their SharePoint site user interface that doesn’t involve custom master pages.

CSS isn’t for everybody, but…

I loooooove CSS and would happily pack a picnic for a sunny afternoon leaning against a tree whispering sweet nothings to CSS code – ok that is a bit much but you get my drift. CSS is a great tool to quickly and efficiently make UI modifications that range anywhere from changing out a logo, to completely hiding something from web site users.  But when you aren’t used to it, CSS can be weird and intimidating and flat out just look a little funny.   I don’t want to push anyone to use something that they aren’t comfortable with. However…

There is only so much you can do with SharePoint Site Settings

While it would be nice, there just isn’t a setting available via the browser for everything you may want to change about the SharePoint UI.  Most customizations require custom code.

CSS is a low impact solution

Quick to pull together, implement and apply, CSS is an ideal solution for many UI changes and challenges in SharePoint.  Other code languages can have a steeper learning curve, can be more involved to implement, and can have a farther reaching impact across your SharePoint site. CSS files are small, fast to download and easy to update on the fly. You don’t have to package anything up, deploy anything, redeploy anything, etc. CSS can simply just be easier to manage. Plus while CSS gone awry may make things look funny or seemingly disappear from your user interface, it won’t break your site like other custom code solutions can.

It’s time to take the plunge

You don’t have to learn CSS in order to implement CSS snippets that have been written by other individuals. Any familiarity that you have or gain will certainly help, but it isn’t required. You can know what a car engine looks like without knowing how to put a new one in a vehicle.

Easiest way to implement custom CSS in your SharePoint site

If you are running publishing sites on SharePoint Online/Office 365 or on-premises with SharePoint 2013, you have access to a handy setting that will allow you to link to a CSS file if your choosing.

If you are running top-level non-publishing sites (such as Team Sites), you have to either edit the master page or use a more advanced code method to add a CSS file to your site. The exception would be if you are wanting single page changes. In that case you can add custom CSS via the Script Editor web part.

  • JavaScript injection, Delegate Control and Custom Action – if you aren’t comfy with code, none of these may be for you as they are all advanced techniques.
  • Script Editor Web Part – if you have changes on one or maybe a few pages, you can use this web part to add CSS. The problem is the CSS will only be applied to that single SharePoint web page, so this isn’t a good solution for an entire site that needs changes.
  • Edit the master page – I know this is what you may want to avoid, but honestly this is the easiest and quickest solution.

Bottom line is that SharePoint non-publishing sites aren’t set up well to handle CSS additions unless you get into customizing your master page – which out of the three options really is the fastest and most efficient.

Child team sites under a publishing site are the exception to this rule. Since they are a child of a publishing site, they can inherit the CSS settings from the parent site.

Are you unsure if you have a publishing site or not? Jump to Step 3.1 and 3.2 below.  If you don’t see “Master page” in the Site Settings, you don’t have a publishing site.

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: Apply the CSS file

  1. Go to Site actions -> Site settings.
  2. Select Master page under the Look and Feel column.
  3. Expand the Alternate CSS URL section at the bottom of the page.
  4. Select the Specify a CSS file to be used by this site and all sites that inherit from it radio button.
  5. Select the Browse button. Navigate to the location of your CSS file and select the file.  The modal window will automatically open the Style Library for you.
    If you added the CSS file on the web server, you will need to manually enter in the URL based on where you saved the file. For example if you added the file to the suggested location above, you would enter in /_layouts/1033/styles/CUSTOM FOLDER/FILE_NAME.css.
  6. Select Insert.
  7. Optionally check to Reset all subsites to inherit this alternate CSS URL (on-premises only).
  8. Select OK in the Site Master Page Settings screen.
  9. 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 file, go to the location where you saved the 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.

Want to edit your master page?

Be sure to check out Part 2: “CSS scares me!” – Implement Custom CSS in SharePoint Master Pages.

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.  🙂