SharePoint is like a canvas square. It can be cut into a shape to fit your business and with a little effort you can take that canvas and give it your own style.
“Style is a way to say who you are without having to speak” - Rachel Zoe
Styling SharePoint
Microsoft provide a two options for styling lists in SharePoint 2013 and Office 365. These options work with all versions of SharePoint from the free Foundation edition through to Enterprise and Cloud.
XSLT is the traditional styling technology available in SharePoint 2007, 2010, 2013 and Office 365. XSLT is used to generate customized HTML from the server. This means it doesn’t need a browser that supports JavaScript to work. XSLT can be used with Content Query Web Parts to style content that is rolled up from subsites.
JSLink was introduced with SharePoint 2013 and uses JavaScript to style list items. This gives you access to a wide range of JavaScript functions and libraries. JavaScript code runs client side (in the Browser) and is easier to debug than XSLT. JSLink isn't supported in Content Query Web Parts.
Custom master pages, page layouts and CSS (Cascading Style Sheets) can be used in conjunction with both technologies to complete the look.
Example:
In our SharePoint Knowledgebase, we have a list containing links to various resources. Out of the Box, the list is pretty plain looking.
Adding some custom styling to the list allows us to completely change the look. In this example we have used the “List” column to determine which column items appear in and applied styling to the URL and Notes.
Style tips:
“Style is very personal, it has nothing to do with fashion. Fashion is over quickly. Style is forever” - Ralph Loren
Here’s a few tips on giving your SharePoint site some style.
- Less is more – don’t go overboard with two many fonts, font sizes and colours.
- Be consistent – use the same styles site wide. Create a set of standard style components and reuse them where ever possible.
- Think globally – use master pages and a global CSS file for site wide styling.
- Images – define standards for images and aim for consistency.
- Think about the device – does the styling work for mobile users? Does it need to be touch friendly?
Where can it be used?
The most common requests we get for custom list styling is News and announcements. We have also used custom styling for dashboards driven off SharePoint lists, calendar displays and KPI indicators.
This example combines a SharePoint Blog site with a content query and custom styling can transform a fairly plain looking site into something with visual appeal.
Applying styling to a calendar item is a great way to present company events. In this example, we have used "Font Awesome" to add nice looking icons to the list view.
Using icons rather than text for items in a links list is a great way to make your site sharp and to save on screen real estate.
Style is one important aspect of developing an Intranet but it isn’t the only one. Remember, you can’t airbrush personality!
This is just a taste of the things you can do with custom styling. If you'd like to see more examples and discuss your styling ideas, give our team a call.