9/10/2018 SQL Server 2016 Reporting Services Custom Branding Example

SQL Server 2016 Reporting Services Custom Branding

Example
By: Rajendra Gupta | Read Comments (1) | Related Tips: > Reporting Services Configuration

Problem
Branding is an essential aspect of an organization. It differentiates the company from its competitors and reflects an
organization's image. Some of the important aspects of branding are the organization's logo and design templates (color
scheme). SQL Server 2016 provides several enhancements to Reporting Services and the Reporting Services web portal
is a new, updated, modern portal, which incorporates KPIs, Mobile Reports, Paginated Reports, Excel, and Power BI
Desktop files. The Reporting Services web portal now supports branding for organizations and in this tip we will cover
what can be done with branding.

Solution
Before we move on, let's look at the Reporting Services web service portal in SQL Server 2014. We do not have any
functionality available in this version to customize the web portal with a custom logo, colors, or themes.

In SQL Server 2016, the Reporting Services web portal looks like below. One of the significant enhancements to SQL
Server 2016 Reporting Services is that it now supports branding of the web portal with a logo and custom colors.

SQL Server 2016 Reporting Services Branding Overview

To brand the Reporting Services web portal, we need to create a brand package. A brand package consists of the
following files:

metadata.xml
logo.png
colors.json

https://www.mssqltips.com/sqlservertip/4567/sql-server-2016-reporting-services-custom-branding-example/ 1/18
9/10/2018 SQL Server 2016 Reporting Services Custom Branding Example

We can download a sample brand package from this link.

Metadata.xml
The metadata.xml file is used to set the name of the brand package that we want to see in the Reporting Services web
portal. It is also references an entry for the colors.json and logo.png files.

Below is the code for the Metadata.xml.

To change the name of your brand package, we need to modify the name attribute of the SystemResourcePackage
element. We can see here that this file has a reference to colors.json and logo.png files in contents. If we want to use a
logo, the logo file format should be .png. The logo file dimensions will be scaled once uploaded to the server.

It's optional to use a logo in the branding package, so if we do not want to use a logo the contents section is as below.

Colors.json
As per MSDN, 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. We can use this link to check the hex color codes.

The colors.json file looks like below:

https://www.mssqltips.com/sqlservertip/4567/sql-server-2016-reporting-services-custom-branding-example/ 2/18
9/10/2018 SQL Server 2016 Reporting Services Custom Branding Example

The colors.json file has two main categories for Reporting Service web portal:

Interface
Theme

Interface Section for colors.json

The interface section includes items that are particular to the Reporting Services web portal. The interface section further
breaks down to the following items under the interface section.

Primary
Secondary
Neutral Primary
Neutral Secondary
https://www.mssqltips.com/sqlservertip/4567/sql-server-2016-reporting-services-custom-branding-example/ 3/18
9/10/2018 SQL Server 2016 Reporting Services Custom Branding Example

Neutral Tertiary
Danger/Warning/Success
KPIs

The primary section represents button and hover colors. Below is the code in colors.json for the primary section:

In the below screenshot of the Reporting Services web portal, we can see the mapping of color codes with its look.

The secondary section provides colors for title bar, search bar, left-hand menu and text color for those items. Below is
the code in colors.json for the secondary section:

https://www.mssqltips.com/sqlservertip/4567/sql-server-2016-reporting-services-custom-branding-example/ 4/18
9/10/2018 SQL Server 2016 Reporting Services Custom Branding Example

The neutral primary section is for the home and report area backgrounds. The neutral secondary section is for text
boxes, folder backgrounds and setting menu. The neutral tertiary section provides site background settings. Below is the
code in colors.json for these items:

https://www.mssqltips.com/sqlservertip/4567/sql-server-2016-reporting-services-custom-branding-example/ 5/18
9/10/2018 SQL Server 2016 Reporting Services Custom Branding Example

There is also a color section for danger, warning and success messages.

The KPI section controls the colors for a good (1), neutral (0), neutral (-1) and none.

Below is the code in colors.json for messages and KPIs:

https://www.mssqltips.com/sqlservertip/4567/sql-server-2016-reporting-services-custom-branding-example/ 6/18
9/10/2018 SQL Server 2016 Reporting Services Custom Branding Example

Theme Section for colors.json

This group contains the themes for the SQL Server Mobile Report Publisher.

We can see the color palette contains the below items:

Background color
Data points (twelve colors lines at the bottom) with options for good (green), bad (red), and neutral (yellow).
Accent, maps, colors, panel backgrounds

In the SQL Server Mobile Report Publisher, we can see the themes as below:

https://www.mssqltips.com/sqlservertip/4567/sql-server-2016-reporting-services-custom-branding-example/ 7/18
9/10/2018 SQL Server 2016 Reporting Services Custom Branding Example

Customize Branding with Logo

To customize branding for the SQL Server 2016 Reporting Services web portal, we have to modify the metadata.xml and
colors.json files. For this demo purpose, I included the MSSQLTips logo for our Reporting Services web portal. We will be
looking at each file to do the customization.

You can find the customized branding package in the attachment section.

Metadata.xml

Below is the metadata.xml for my branding package. I have specified the name in metadata.xml as MSSQLTips.

Colors.Json

I have modified the hex code of colors in the colors.json files for different items.

https://www.mssqltips.com/sqlservertip/4567/sql-server-2016-reporting-services-custom-branding-example/ 8/18
9/10/2018 SQL Server 2016 Reporting Services Custom Branding Example

{
"name":"MSSQLTIPS",
"version":"1.0",
"interface":{
"primary":"#e0893c",
"primaryAlt":"#6a8c99",
"primaryAlt2":"#621013",
"primaryAlt3":"#e40000",
"primaryAlt4":"#e14e50",
"primaryContrast":"#fff",

"secondary":"#042200",
"secondaryAlt":"#0f4400",
"secondaryAlt2":"#155500",
"secondaryAlt3":"#217700",
"secondaryContrast":"#f49539",

"neutralPrimary":"#d8edff",
"neutralPrimaryAlt":"#c9e6ff",
"neutralPrimaryAlt2":"#aedaff",
"neutralPrimaryAlt3":"#88c8ff",
"neutralPrimaryContrast":"#0a2b4c",

"neutralSecondary":"#e9d8eb",
"neutralSecondaryAlt":"#d9badc",
"neutralSecondaryAlt2":"#b06cb5",
"neutralSecondaryAlt3":"#a75bac",
"neutralSecondaryContrast":"#250a26",

"neutralTertiary":"#f79220",
"neutralTertiaryAlt":"#f8a54b",
"neutralTertiaryAlt2":"#facc9b",
"neutralTertiaryAlt3":"#fce3c7",
"neutralTertiaryContrast":"#391d00",

"danger":"#ff0000",
"success":"#00ff00",
"warning":"#ff8800",
"info":"#00ff",
"dangerContrast":"#fff",
"successContrast":"#fff",
"warningContrast":"#fff",
"infoContrast":"#fff",

"kpiGood":"#321e94",
"kpiBad":"#883a30",
"kpiNeutral":"#d9b42c",
"kpiNone":"#333",
"kpiGoodContrast":"#fff",
"kpiBadContrast":"#fff",
"kpiNeutralContrast":"#fff",
"kpiNoneContrast":"#fff"
},
"theme":{
"dataPoints":[
"#0072c6",
"#f68c1f",

https://www.mssqltips.com/sqlservertip/4567/sql-server-2016-reporting-services-custom-branding-example/ 9/18
9/10/2018 SQL Server 2016 Reporting Services Custom Branding Example

"#269657",
"#dd5900",
"#5b3573",
"#22bdef",
"#b4009e",
"#008274",
"#fdc336",
"#ea3c00",
"#00188f",
"#9f9f9f"
],

"good":"#85ba00",
"bad":"#e90000",
"neutral":"#edb327",
"none":"#333",

"background":"#fff",
"foreground":"#222",
"mapBase":"#00aeef",
"panelBackground":"#f6f6f6",
"panelForeground":"#222",
"panelAccent":"#00aeef",
"tableAccent":"#00aeef",

"altBackground":"#f6f6f6",
"altForeground":"#000",
"altMapBase":"#f68c1f",
"altPanelBackground":"#235378",
"altPanelForeground":"#fff",
"altPanelAccent":"#fdc336",
"altTableAccent":"#fdc336"
}
}

Once we have all these files ready, zip all the files into a single zip file. We need to follow these things when creating the
zip of the branding files.

All three files should be in a folder.

There should not be any subfolders.

We might get the below error when applying the brand package if all files are not contained in a zip file.

https://www.mssqltips.com/sqlservertip/4567/sql-server-2016-reporting-services-custom-branding-example/ 10/18
9/10/2018 SQL Server 2016 Reporting Services Custom Branding Example

When we unzip and then re-zip the folder, it will create a subfolder in the package. Therefore, this does not work when we
upload the branding package.

To create a zip package, select the files:

Right click and add to zip folder:

Upload Branding Package into SSRS

Open Reporting Services web portal: http://localhost/Reports_SQL2016/

https://www.mssqltips.com/sqlservertip/4567/sql-server-2016-reporting-services-custom-branding-example/ 11/18
9/10/2018 SQL Server 2016 Reporting Services Custom Branding Example

Go to Site Settings:

From left-hand menu, click on the Branding menu item:

Click on Upload brand package and browse to the path where the zip file exists.

https://www.mssqltips.com/sqlservertip/4567/sql-server-2016-reporting-services-custom-branding-example/ 12/18
9/10/2018 SQL Server 2016 Reporting Services Custom Branding Example

Select the zip file and click open. At this point the Reporting Services web portal will refresh automatically. It will display
the new branding look for the Reporting Services web portal as per defined in the files.

If we hover the mouse over 'Upload Branding Package' its color also changes:

The Reports home page looks like this:

https://www.mssqltips.com/sqlservertip/4567/sql-server-2016-reporting-services-custom-branding-example/ 13/18
9/10/2018 SQL Server 2016 Reporting Services Custom Branding Example

We can see the below changes in the Reporting Services web portal:

MSSQLTIPS logo
The new color format for background, text, menu, etc...

We can see below the Reporting Services web portal before and after applying the branding package.

In my color.json file, I modified color codes for KPI also.

"kpiGood":"#321e94",
"kpiBad":"#883a30",

Therefore, we can see that KPIs also reflect the new color format.

https://www.mssqltips.com/sqlservertip/4567/sql-server-2016-reporting-services-custom-branding-example/ 14/18
9/10/2018 SQL Server 2016 Reporting Services Custom Branding Example

Customize Branding without a Logo

If we do not wish to include logo in the branding package, remove the logo option from the metadata.xml file.

The package folder should look like the below image without a logo file.

Zip the files (colors.json and metadata.xml) into a single file. Apply the branding package as we did above and we can see
that the Reporting Services web portal colors have been set and there is no logo on the site.

If we want to modify the text header from SQL Server Reporting Services, go to Site Settings > General tab:

https://www.mssqltips.com/sqlservertip/4567/sql-server-2016-reporting-services-custom-branding-example/ 15/18
9/10/2018 SQL Server 2016 Reporting Services Custom Branding Example

Change the Name. For example, I want it to display MSSQLTIPS, so make the change and click Apply.

We can see the header displays MSSQLTIPS.

https://www.mssqltips.com/sqlservertip/4567/sql-server-2016-reporting-services-custom-branding-example/ 16/18
9/10/2018 SQL Server 2016 Reporting Services Custom Branding Example

Download and Remove Custom Branding in SQL Server Reporting Services

If we want to download the branding package or remove it, we can do it from the branding menu in the site settings page.

Go to Branding menu from SSRS site settings menu:

Here we can see it shows the name of the currently installed brand package. To download the package click on download
and provide the location. If we want to remove the branding package, click on Remove.

Click yes, as we want to remove this brand package and revert to the default and the Reporting Services web portal will
return to the default settings as shown below.

SQL Server 2016 Reporting Services branding is a great enhancement to customize as needed, explore further and
customize your SSRS portal.

Next Steps
Download the branding package for this tip.
Download and explore SQL Server 2016
Check out SQL Server 2016 TIPS
Read more about What's new in Reporting Services
Read more about SQL Server Reporting Services Development Tips

https://www.mssqltips.com/sqlservertip/4567/sql-server-2016-reporting-services-custom-branding-example/ 17/18
9/10/2018 SQL Server 2016 Reporting Services Custom Branding Example

Last Update: 2016-12-08

About the author

Rajendra is a Consultant DBA with 9+ years of extensive experience in database administration including large critical OLAP, OLTP,
Reporting and SharePoint databases.

View all my tips

Related Resources
More Business Intelligence Tips...

Copyright (c) 2006-2018 Edgewood Solutions, LLC All rights reserved

Some names and products listed are the registered trademarks of their respective owners.

https://www.mssqltips.com/sqlservertip/4567/sql-server-2016-reporting-services-custom-branding-example/ 18/18