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.
Brand your Team Site with CSS overridesBefore 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 PageThe 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 sitesAnother 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 displayedBranding 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.
- Control Display Template
- Item Display Template
If you haven't tried our popular SharePoint migration tool yet, what are you waiting for? ShareGate Desktop's UI isn't just simple and intuitive—it'S actually pleasant to use (really!).
Migrate to SharePoint or Office 365 quickly and easily, with best-in-class migration for all versions of SharePoint, unlimited data, and custom reporting. And effortlessly reorganize and restructure your content until it's exactly how you want it.
Save time and migrate with total peace of mind, then get back to business as usual. See for yourself with a free, full-featured 15-day trial.