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
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.
Custom master pages, page layouts and CSS (Cascading Style Sheets) can be used in conjunction with both technologies to complete the look.
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 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.