By Cathy Dew
SharePoint Branding: Designing for both Classic and Modern Interfaces
When it comes to SharePoint site creation, you have a lot of different tools at your disposal. For instance, if you are building a team site, you can completely customize the content that shows up on that site—from the text on the page to the apps that are active on the site.
What many enterprises don’t realize about their SharePoint intranets, though, is the amount of branding that is possible in SharePoint. With branding, you can tweak the layouts, themes, colors, logos, and overall “look” of your SharePoint sites. In short, branding gives you more control over the SharePoint user experience—something that most teams want, but aren’t sure how to achieve. This article will explain how to brand your SharePoint experience, both in the SharePoint “Modern” interface and the SharePoint “Classic” interface.
For a deep dive into all that SharePoint has to offer and how we can assist you with any functions and capabilities, check out our topic page SharePoint Consulting: Experts reveal SharePoint mysteries, eliminate confusion.
A Note about Publishing Features
If you want to brand your SharePoint site—whether with logos, custom themes, or other unique flourishes—you need to start by activating Publishing Features in SharePoint. By default, your site will not have these features enabled. SharePoint site collections always start out set up for collaboration sites (team sites, department sites, document libraries, etc.) instead of for publishing.
Since many businesses use their SharePoint intranets for collaborative purposes, many teams don’t even know about Publishing Features. You need to activate Publishing Features if you intend to use SharePoint as a CMS, but you will also need them for SharePoint branding. With the Publishing Features enabled, subsites within your SharePoint site collection will be able to inherit color, logo, theme, and branding from the parent site. This inheritance is crucial for any successful SharePoint branding campaign.
Additionally, branding is something that needs to be done for each site collection (and for some sub-sites) you create. Therefore, once you decide to change the look and feel of SharePoint you are going to need to make those changes each time you create a new Team Site, Department, or Corporate site collection in order to keep everything looking the same.
Minimal Branding Options
SharePoint offers you some very quick and basic tools and options to brand your sites. The Theme / Color Pallet tool, along with uploading your own logo can be the quickest way to brand SharePoint with your company’s marketing look and feel. There are two locations where you’ll need to update the Theme’s when using Office 365. The first is for the Office 365 look and feel, the second is for SharePoint’s look and feel.
To update the Office 365 color scheme, you need to logged into Office 365 as a Office 365 Global Administrator. Then go to the Office 365 Admin Center and drill down to Settings :: Organization profile :: Manage custom themes for your organization.
From here you can provide a corporate logo, make the logo clickable, set a background image, and update the accent and navigation bar colors for the Office 365 “suite” bar.
One additional option is you have the ability to prevent users from making changes from your settings. The one caveate to the override control is that the high contrast color options are still available for those employees that need them, e.g. someone who is color blind.
The next step is to update SharePoint’s themes with your corporate look and feel. You will find that under the site collection’s Site Settings :: Look and Feel :: Change the Look. You’ll be presented with a selection of pre-set themes that you can take as is, or change as needed to build a custom theme.The theme editor gives you control of the background, colors, site layout, and fonts.
.png.aspx?lang=en-US)
Uploading Alternate Style Sheets
Tweaking the layout of your SharePoint pages requires HTML skills. Tweaking the theme and color palettes of your pages after selecting a base theme, meanwhile, demands CSS coding. Alternate style sheets are the driver behind color changes, font changes, and other theme changes to your page. You would use an alternate style sheet if you wanted to keep your master page but wanted to override individual CSS codes in the master to tweak the theme and look of the page. Replacing existing CSS code with your own alternative code is a relatively easy way to brand your SharePoint sites because you are only tweaking elements that are already there instead of completely reinventing the wheel.
To start looking for CSS styles to override, open the developer tools for your SharePoint site. (This step is usually accomplished by hitting the F12 key.) Click the lens icon on the right side of the developer menu. This tool lets you click on any part of your page to see what CSS styles are active—and what CSS styles you need to override to brand the page to your liking. You can also test alternative styles, to see how they look. Once you know what you want to do as far as customization is concerned, you can create your own CSS files and upload them as alternate stylesheets to change the look of a SharePoint site.
SharePoint provides you with a quick and painless way to link to an Alternate Style Sheet once Publishing in enabled. First upload your CSS file to a central location like /SiteAssets/_shared/css. (Note that this location should be accessible by all visitors to your Site Collection.) Then open Site Settings, and go to Look & Feel :: Site Master Pae Settings :: Alternate CSS URL.
Enter in the path to the Alternate Style Sheet and click “OK”. Your new CSS classes should be immediately available and any overrides you have created will be visible. Additionally any web parts or display templates that use the new classes you put in there will also render accordingly.
Implement SharePoint Branding with the Help of a SharePoint Expert
Do you need help learning how to customize and brand your SharePoint site? The processes described above can be involved—particularly for first-timers. At 2Plus2, we’d be happy to walk you through the steps for any of the customization strategies discussed above. From designing master pages and custom layouts to using custom web parts to tweak the look of your SharePoint sites, our SharePoint experts can help you get a handle on all the main SharePoint branding tools.
Go online to schedule a free consultation with our team or call 510-652-7700 today.
Sources: