Branding the web portal

SQL Server 2016

Published: March 18, 2016

Updated: July 29, 2016

Applies To: SQL Server 2016

You can alter the appearance of the web portal by branding it to your business. This is done through a brand package. The brand package has been designed so you don’t need deep cascading style sheet (CSS) knowledge to create it.

In this topic:

A brand package for Reporting Services consists of three items and is packaged as a zip file.

  • color.json
  • metadata.xml
  • logo.png (optional)

The files must have the names listed above. The zip file can be named however you like.


The metadata.xml file allows you to set the name of the brand package, and has a reference entry for both your colors.json and logo.png files.

To change the name of your brand package, change the name attribute of the SystemResourcePackage element.

name="Multicolored example brand"  

You can optionally include a logo picture in your brand package. This item would be listed within the Contents element.

Example without a logo file.

  <Item key="colors" path="colors.json" />  

Example with a logo file.

  <Item key="colors" path="colors.json" />  
  <Item key="logo" path="logo.png" />  


When the brand package is uploaded, the server extracts the appropriate name/value pairs from the colors.json file and merges them with the master LESS stylesheet, brand.less. This LESS file is then processed and the resulting CSS file is served to the client. All colors in the stylesheet follow the six-character hexadecimal representation of a color.

The LESS stylesheet contains blocks that reference some predefined LESS variables like the following.

/* primary buttons */   
.btn-primary {   

While this resembles CSS syntax, the color values, prefixed with the @symbol, are unique to LESS. They are variables whose values are set by the json file.

For example, if the colors.json file had the following values.


The processed output would look up the @primaryButtonBg LESS variable and see that it maps to the json property called primary, which in this example is #009900. It would therefore output the proper CSS.

.btn-primary {   

All of the primary buttons would be rendered dark green with white text.

The colors.json file, for Reporting Services, has two main categories which items are grouped.

  • Interface: includes items that are specific to the Reporting Services web portal.
  • Theme: includes items that are specific to mobile reports that you create.

The interface section is broken down into the following groupings.

PrimaryButton and hover colors.
SecondaryTitle bar, search bar, left hand menu (if displayed) and text color for those items
Neutral PrimaryHome and report area backgrounds.
Neutral SecondaryText box and folder options backgrounds, and the settings menu.
Neutral TertiarySite settings backgrounds.
Danger/Warning/Success messagesColors for those messages.
KPIControls the colors for a good (1), neutral (0), neutral (-1) and none.

The first time you connect to a server with the Mobile Report Publisher, that has a brand package deployed, the theme will be added to the available themes you can use in the upper right-hand menu of the app.


You can then use that theme for any mobile reports that you create, even if they aren’t for the same server that you have the theme deployed on.

Using a logo

If you include a logo with your brand package, it will appear in the web portal in place of the name you set for the web portal in the Site Settings menu.

The file you include for the logo must use the PNG file format. The file dimensions will be scaled once uploaded to the server. It should scale to around 290px x 60px.

To add, download, or remove a brand package, you can do the following.

  1. Select the gear in the upper right.

  2. Select Site Settings.


  3. Select Branding.


Currently installed brand package will either display the name of the package that has been uploaded, or it will display None.

Upload brand package will apply the package to the web portal. You will see it take effect immediately.

You can also Download or Remove the package. Removing the package will reset the web portal to the default brand immediately.

<?xml version="1.0" encoding="utf-8"?>  
<SystemResourcePackage xmlns=""  
    name="Multicolored example brand"  
        <Item key="colors" path="colors.json" />  
        <Item key="logo" path="logo.png" />  

    "name":"Multicolored example brand",  










Community Additions