It’s said that the prettiest picture wins the funding, so how can we make SharePoint look better? As always with SharePoint, it depends. In this article, I’ll show you the different objects involved in branding SharePoint as well as ways to override the way content or results are displayed on pages.
Learn the basics of SharePoint, HTML and CSS before you start
Before you look into branding your SharePoint, well you need to know how SharePoint works. My colleague Natasha wrote a great series of blogs for you to start learning SharePoint and I highly recommend you look at it to understand what it is you are branding.
Needless to say that if you are looking to brand SharePoint, it’s important to know how HTML and CSS work together. HTML is the structure of your page, where you decide to create things or objects on your page like a menu or a header and footer. And the CSS is how you are going to make these things look.
Not an expert or need to refresh your knowledge on CSS? Well I often go back to the same article again and again. It’s called 5 Steps to Drastically Improve Your CSS Knowledge in 24 Hours.
There is no point in continuing past this point in the article if you are not comfortable with HTML and CSS as it is the core in any branding on the web, including SharePoint. Forget things like Responsive or Adaptive design at this point, focus simply on understanding these three pillars. Eventually you may want to learn and use Javascript or jQuery libraries to add animations and such.
Brand your Team Site with CSS overrides
Before starting to look at the different ways of customizing the look and feel of your site, it’s easier to override what is already there. As mentioned earlier, CSS is the style we give to our existing HTML structure and if you look at our default SharePoint team site we can see that one obviously exists.
Finding the CSS classes to override
The trick is to first inspect what we plan to design and test our changes quickly and easily. Depending on the browser you are using, you can launch the “developer tools” by pressing F12 or finding it in the browser’s options. “Whoa did he just say developer?” Yes but don’t worry I am not one either so I wouldn’t tell you about it if we can’t use it easily. Once it is launched, you will usually find a lens icon in the new menu that is now onscreen or an arrow if you are using Internet Explorer. Once clicked, you can select something on the page you are on to see the CSS styles applied to it as well as test some new ones.
With this tool, I can try changes to whatever element I choose on the spot without saving any of these. If I modify the style it will only be visible to me as long as I don’t refresh the page. Let’s make some changes in the element using the developer tools.
And just like that I can test my CSS before actually creating the file or making the changes permanent. This technique is very helpful and I use it even when creating on designs within SharePoint, not just for my site.
Applying your custom CSS on your SharePoint site
Now that you found which CSS classes to override, how do you tell SharePoint to use your new CSS file? Before you do that, you need to make sure your new CSS file is in a location that everyone will have access to in Read Only at the very least. This is what the Style Library document library is for in every Site Collection. You can create a folder to organize your files for your branding such as CSS and images or create yourself a new Library somewhere. Frankly it doesn’t matter; people just need to be able to read it.
- Method 1: Change your Master Page to link your new CSS file as well so it is called after the default CSS file. With this method, your CSS will always be applied as long as the pages use this Master Page.
- Method 2: Add a reference to your CSS file or write it directly in the Content Editor or in SharePoint 2013’s Script Editor for a single page.
This will apply your overrides only on specific pages where you have changed the Script Editor, in other words where you have called your CSS. - Method 3: Call it when you need it with the different styles you can create for the various Web Parts in SharePoint like the Content Query, Content Search, Search Results or even with JSLink for libraries.
Building a complete new look with a new Master Page
The Master Page is essentially the most important file in terms of branding your SharePoint. It’s a single page where you decide on the HTML structure you will want to have or use and call the CSS to style it. Then, every single page in your Site Collection can refer to that single Master Page for the main design of your site. Of course this can change according to your needs, you can have more than one Master Page.
What’s fun is that in SharePoint 2013 and Office 365, they have introduced the Design Manager. One of the many features it offers is the ability to take a regular HTML design and convert it into a SharePoint Master Page. I have already covered the Step by Step process of converting an HTML into a SharePoint Master Page and if you are interested to learn more I am sure you will learn from it. The Design Manager is great if you are starting to brand in SharePoint, otherwise I would still recommend using Visual Studio to create them.
Using Composed Looks to apply reusable themes on your sites
Another way of branding your SharePoint is by using themes, now called Composed Looks in SharePoint 2013 and Office 365. Composed Looks allow you to create themes similar to the ones we find on WordPress if you are familiar with that. This allows Site Owners to choose from a gallery of Composed Looks and change how their site will look. You can see how to create a Composed Look for SharePoint if it’s something you think you may need.
Changing how Content Query, Content Search or Search Results are displayed
Branding SharePoint doesn’t always mean the site itself or the general look and feel. Sometimes, it’s just about changing how our news pages look or even our search results. After migrating to SharePoint 2013, you may have noticed changes to the Search Results Web Part and even a new one called Content Search. Making it a lot easier for Power Users to say what they want to show and then choose how to display them. Here is how it works.
Content Query Web Part
The Content Query does a query for the content you are looking for and displays the results using XSLT. The way it works is it relies on two files for it to function.
- ContentQueryMain.xsl
- Itemstyle.xsl
The ContentQueryMain is the container before the items will start being shown. There you can define things like the width as well as which custom Javascript or CSS files you would like to call.
The Itemstyle however is where you define how each individual results are going to be displayed. Since it’s in XSLT you will have to write the HTML but also apply your XSLT knowledge to include the values you want to show within it. It isn’t always very easy.
All Search related Web Parts
Whether we’re talking Content Search, Search Results or even Refinement Web Parts, it always works the same. The concept has been introduced in SharePoint 2013 and Office 365 and that is the use of Display Templates. The concept is very similar to what we just covered with the Content Query Web Part but without the XSLT piece. It’s nothing but HTML, CSS and Javascript should you wish to use it. To create a Display Template also means creating two different files.
- Control Display Template
- Item Display Template
Which again works just like before, the Control is the container where you will call CSS and other files as well as say where you want the items to start. And the Item Display Template defines how individual results will look like.
The difference is that we do not use XSLT in our HTML to say what values we want to include but rather Manage Properties from the Search Schema. You can find two Display Templates ready for download as well as how to create them under the appropriate categories of my article on learning SharePoint.
