Home >Tips > Modify SharePoint branding area kalmstrom.com site map icon Site map  

Modify the SharePoint Branding Area using CSS

A SharePoint tutorial by Peter Kalmstrom

In the demo below Peter Kalmstrom explains how to modify the branding area of SharePoint using two different methods. Both methods make use of a CSS file.

SharePoint branding area

Peter Kalmstrom is the CEO of kalmstrom.com Business Solutions and a Microsoft certified SharePoint specialist and trainer. He is using SharePoint 2013 for his tutorial, but the branding area modification can be done in the same way in SharePoint 2010 and 2016 on premise. This tip is no longer valid for Office 365 SharePoint.

Below are the steps for both methods. In the demo Peter shows exactly how to perform each step.

SharePoint Enterprise

Follow these steps if you are using the Enterprise version of SharePoint  
  1. Go into Site Contents >Site Assets.
  2. Either upload an existing CSS file or create a new one by opening the library with Explorer, create a new text document and give it the extension .css.
  3. If you use Office 365 or don't have access to the server, activate SharePoint Server Publishing Infrastructure in the site collection and SharePoint Server Publishing on the site.
  4. Go into Site Settings >Master page and apply the CSS file by defining it as alternate CSS. SharePoint alternate CSS
  5. Modify your CSS file as you like. To find object names and colors, open the developer tools. Select the part you want to change, to see the HTML tag for it. 
  6. Save the CSS file and refresh the SharePoint site to see the changes.

PowerShell on server

Follow these steps if you need to work on the SharePoint server

 PowerShell script
  1. Open PowerShell ISE.
  2. Add the Snapin microsoft.SharePoint.Powershell and a continued Error Action.
  3. Get the URL to the site you want to change into the variable myWeb.
  4. Give the URL to the alternate CSS file to the web object myWeb.
  5. Update the myWeb object and run the script.
  6. Refresh the SharePoint page to confirm that the branding area has been changed according to your CSS file.