Basic Branding Options for a SharePoint 2013 Site

There are a number of basic branding options available by default in SharePoint 2013. These options allow us to easily change the look and feel of an ‘out of the box’ SharePoint 2013 site. Very elegant and interesting default themes are made possible with the use of HTML5.

You can quickly look at the available default SharePoint 2013 themes by navigating to the ‘Settings’ gear icon in the top right corner of you site, choosing ‘Site settings’ and then under ‘Look and Feel’ choose ‘Change the look.’

In this view it is possible to quickly try out a theme, in addition to making some high level modifications to colours, site layout (the master page), fonts, and images.

After making some changes to the default theme, click ‘Try it out’ to get a preview of your site. You will have additional options to keep the now changed theme, or to try another theme.

When changing your website’s default image make sure it is large enough to be viewable, and do not use images that require repeating as they are unsupported.

Composed looks

If you’ve done quite a bit of customization to a default theme, it can be further saved as a separate theme, and reusable for other sites or sub-sites. To do this navigate to the ‘Settings’ gear icon, then ‘Site settings’ and under ‘Web Designer Galleries’ and select ‘Composed looks.’

Next, in the upper left hand corner select the ‘List’ tab on top ribbon, and choose ‘Quick Edit.’

Copy the values in the ‘Current’ row (i.e. ‘Master Page URL,’ ‘Theme URL,’ ‘Image URL,’ etc.) to an empty row, and give it a new ‘Name.’ When done click ‘Stop editing this list’ and save the changes made. In the above example ‘Current’ does not have any values as no customizations have been made to the current theme.

Alternatively, to create a new theme instead of choosing ‘Quick Edit’ click on ‘New Item’ above the list of themes.

072214_2223_BasicBrandi5.png

From now on when you visit ‘Change the look’ your new customized theme will be available to be chosen and applied. This is a very neat feature of SharePoint 2013, and is a giant leap ahead when compared to the less robust styling and rebranding options available in SharePoint 2010.

Device Channels

Device channels are used to display a site differently depending on the type of device used to access it. For example, if we need to create a site specific for iPhones, we would use device channels.

To create a device channel navigate to the ‘Settings’ gear icon, ‘Site settings,’ ‘Look and Feel’ and click on ‘Device Channels’

In the above example there have been some basic test values inputted to create a channel. To find appropriate values for different fields (i.e. Android, iPhone, iPad, etc.) visit this MSDN link. Once complete click ‘Save.’

To activate a device channel navigate to the ‘Settings’ gear icon, then ‘Site settings’ and under ‘Look and Feel’ choose ‘Master page.’ There should be a drop-down specific to the device being configured.

An issue may arise if your site is currently configured to use ‘Mobile Browser View.’ To disable this navigate to the ‘Settings’ gear icon, ‘Site settings,’ ‘Site Actions,’ and click ‘Manage site features.’ Scroll down to ‘Mobile Browser View’ and choose ‘Deactivate.’

Now go back to ‘Site Master Page Settings’ as before, the option to set a master page for a specific device channel should no longer be greyed out.

July 23, 2014