blog.atwork.at

news and infos about microsoft, technology, cloud and more

How to brand a SharePoint Online Site with CSS

Do you want to change the design of your SharePoint site easily? This is just a quick introduction how to customize a SharePoint 2013 Site (SP on premises or Office 365) with custom CSS. With custom branding you can completely change the design of a SharePoint site, like in this sample of a Contoso SPO site.

contoso1

The steps to accomplish custom branding with CSS are:

  1. You need to be a site administrator (to activate the features and have full access to the site)
  2. The default site settings show not many options for Look and Feel.
    My demo site starts with the URL https://[tenant].sharepoint.com/sites/design1 so the URL for the Site Settings is similar like here:
    https://[tenant].sharepoint.com/sites/design1/_layouts/15/start.aspx#/_layouts/15/settings.aspx
    image
  3. So first open Site Collection Administration / Site collection features.
    The page Site Settings : Site Collection Features follows, the URL goes like here:
    https://[tenant]sharepoint.com/sites/design1/_layouts/15/start.aspx#/_layouts/15/ManageFeatures.aspx?Scope=Site
  4. Active the SharePoint Server Publishing Infrastructure feature:
    image
    This usually can take some minutes… When this is done the feature looks like here:
    image
  5. No go back to Site Settings and open Site Actions / Manage site features.
    (Alternatively you can simply delete the ?Scope=Site parameter from the Site Collection feature URL)
    image
  6. Now active the SharePoint Server Publishing feature in the Site:image
    After the activation the feature looks like here:
    image
  7. When going back to the Site Settings the result is that the Look and Feel group includes more options.
    image
  8. We are almost done. Now it´s possible to open the Master page settings.
    https://[tenant].sharepoint.com/sites/design1/_layouts/15/ChangeSiteMasterPage.aspx
    In here the Master Page for this site can be selected.
    The important part is the Alternate CSS URL below.
    image
  9. When opening the Alternate CSS URL group you can specify your own customized CSS file.image
  10. When clicking Browse you can upload your own CSS file and then select it (as shown above).
    In this sample the path to the CSS file goes like /sites/design1/Style Library/mystyle.css
    image

 

That´s it!

Now you can start designing the various elements in your SPO site with your own CSS file (f.e. mystyle.css). You can also upload this CSS file with SharePoint Designer directly.

The good news about this method is that you have no need to edit the masterpage (especially when working with Office 365 you are safe for coming updates…).

Happy branding!

Loading