SSRS 2016 Brand Package breakdown
Reading Time: 4 minutes
Starting with SQL Server 2016 you have the ability to customise the SSRS Report Manager’s look & feel. This comes in the form of applying a “Brand Package”. Its not free reign over the css for the site but its a giant leap in the right direction for the BI platform.
There is a great technet blog post that goes through the customising process & elements but I wanted to go into greater detail and define what every element in the JSON file affects on the page so I painstakingly documented the effects of changing each element & re-uploading to Report Manager.
Ill explain all of the elements found in the JSON file in the table below then present views of Report Manager annotated with these elements to better explain what they affect.
The Brand Package
As the technet blog post explains, a brand package consists of 3 elements:
- Json file (colors.json)
- An XML file (metadata.xml)
- png file (logo.png) – This is optional & can be defined in the XML file.
File names can also be defined in the xml file but these must be contained within a ZIP file to be accepted as a Brand package by SSRS.
I found that if you work with a logo file of less than 100 pixels high, it will automatically be resized up so this is a minimum size Id recommend, to get a clear image.
Attribute |
Type |
Description |
Noted on Image |
| name:”Default brand”, | Package Name | Carries through into SSRS & Mobile Report Palette picker | |
| version:”1.0″, | |||
| interface:{ | |||
| primary:”#bb2124″, | Button | Main button Natural colour. Eg. Upload Brand Package | Image 2 |
| primaryAlt:”#d31115″, | Button | Main button hover colour | Image 2 |
| primaryAlt2:”#671215″, | Button | Title Bar buttons hover colour. Eg. Settings, Download, Help | Image 1 |
| primaryAlt3:”#bb2124″, | Button | Active button colour for Home page only. Eg. Favourites/Browse | Image 1 |
| primaryAlt4:”#00abee”, | Link | Home & Edit colours in Settings menu & Breadcrumb? | Image 1 |
| primaryContrast:”#fff”, | Button Text | Main button text colour. Applies to natural & hover states. Eg. Upload Brand Package | Image 2 |
| secondary:”#000″, | Background | Title menu background colour. | Image 1 |
| secondaryAlt:”#444″, | Background | Second title bar & Left hand menu (where active) | Image 1 & 2 |
| secondaryAlt2:”#555″, | Button | Left hand menu active selection & hover colour. | Image 2 |
| secondaryAlt3:”#777″, | Unknown. No visible changes | ||
| secondaryContrast:”#fff”, | Text | Left hand menu text, title bar buttons & second title bar text colours. | Image 1 & 2 |
| neutralPrimary:”#fff”, | Background | Third title bar background, Folder & report icon background. Also Mobile Report Icon background | Image 1 |
| neutralPrimaryAlt:”#f4f4f4″, | Background | Home page & report folder background colour. NOT settings menus | Image 1 |
| neutralPrimaryAlt2:”#e3e3e3″, | Line | Title Bar dividing line colour | Image 1 |
| neutralPrimaryAlt3:”#c8c8c8″, | Unknown. No visible changes | ||
| neutralPrimaryContrast:”#000″, | Text | Third title bar text, folder text and Home page “section title” text colour. Also folder border colour. | Image 1 |
| neutralSecondary:”#fff”, | Background | Text box backgrounds, Security & schedule pages background, tooltip(title bar buttons) background | Image 2 |
| neutralSecondaryAlt:”#eaeaea”, | Background | Dropdown menu divider lines. Folder elipses pop up partial background | Not Shown |
| neutralSecondaryAlt2:”#b7b7b7″, | Line | Text box border | Image 2 |
| neutralSecondaryAlt3:”#acacac”, | Text | Dropdown menu Title text colours, folder/section counts | Image 1 |
| neutralSecondaryContrast:”#000″, | Text | Text box text colour, folder elipses pop up text colour | Image 2 |
| neutralTertiary:”#b7b7b7″, | Text | Breadcrumb folder indicator colour “>” | Not Shown |
| neutralTertiaryAlt:”#c8c8c8″, | Line/Button | Apply button (greyed out), Cancel Button hover & “Properties page” button borders | Not Shown |
| neutralTertiaryAlt2:”#eaeaea”, | Line/Background | Settings page background, Security page button background & line divider | Image 2 |
| neutralTertiaryAlt3:”#fff”, | Background | Download/Remove button background colour | Image 2 |
| neutralTertiaryContrast:”#222″, | Text | Settings pages text and header colours | Image 2 |
| danger:”#bb2124″, | Report colours | Not Shown | |
| success:”#2b3″, | Report colours | Not Shown | |
| warning:”#f0ad4e”, | Report colours | Not Shown | |
| info:”#5bc0de”, | Report colours | Not Shown | |
| dangerContrast:”#fff”, | Report colours | Not Shown | |
| successContrast:”#fff”, | Report colours | Not Shown | |
| warningContrast:”#fff”, | Report colours | Not Shown | |
| infoContrast:”#fff”, | Report colours | Not Shown | |
| kpiGood:”#4fb443″, | KPI Colour | KPI colouring. Fairly self explanatory | Image 1 |
| kpiBad:”#de061a”, | KPI Colour | KPI colouring. Fairly self explanatory | Image 1 |
| kpiNeutral:”#d9b42c”, | KPI Colour | KPI colouring. Fairly self explanatory | Not Shown |
| kpiNone:”#333″, | KPI Colour | KPI colouring. Fairly self explanatory | Not Shown |
| kpiGoodContrast:”#fff”, | KPI Colour | KPI colouring. Contrasting colour. Fairly self explanatory | Not Shown |
| kpiBadContrast:”#fff”, | KPI Colour | KPI colouring. Contrasting colour. Fairly self explanatory | Not Shown |
| kpiNeutralContrast:”#fff”, | KPI Colour | KPI colouring. Contrasting colour. Fairly self explanatory | Not Shown |
| kpiNoneContrast:”#fff” | KPI Colour | KPI colouring. Contrasting colour. Fairly self explanatory | Not Shown |
| }, | |||
| theme:{ | Header for the theme details. You can see this from the Mobile report Palette drop down | ||
| dataPoints:[ | |||
| #0072c6, | Mobile Palette | These are visualised when choosing a mobile report palette | Not Shown |
| #f68c1f, | Mobile Palette | These are visualised when choosing a mobile report palette | Not Shown |
| #269657, | Mobile Palette | These are visualised when choosing a mobile report palette | Not Shown |
| #dd5900, | Mobile Palette | These are visualised when choosing a mobile report palette | Not Shown |
| #5b3573, | Mobile Palette | These are visualised when choosing a mobile report palette | Not Shown |
| #22bdef, | Mobile Palette | These are visualised when choosing a mobile report palette | Not Shown |
| #b4009e, | Mobile Palette | These are visualised when choosing a mobile report palette | Not Shown |
| #008274, | Mobile Palette | These are visualised when choosing a mobile report palette | Not Shown |
| #fdc336, | Mobile Palette | These are visualised when choosing a mobile report palette | Not Shown |
| #ea3c00, | Mobile Palette | These are visualised when choosing a mobile report palette | Not Shown |
| #00188f, | Mobile Palette | These are visualised when choosing a mobile report palette | Not Shown |
| #9f9f9f | Mobile Palette | These are visualised when choosing a mobile report palette | Not Shown |
| ], | |||
| good:”#85ba00″, | Mobile Palette | These are visualised when choosing a mobile report palette | Not Shown |
| bad:”#e90000″, | Mobile Palette | These are visualised when choosing a mobile report palette | Not Shown |
| neutral:”#edb327″, | Mobile Palette | These are visualised when choosing a mobile report palette | Not Shown |
| none:”#333″, | Mobile Palette | Not Shown | |
| background:”#fff”, | Mobile Charts | Background colour for mobile reports | Not Shown |
| foreground:”#222″, | Mobile Charts | Foreground colour for mobile reports | Not Shown |
| mapBase:”#00aeef”, | Mobile Charts | Map chart type base colour (shades off this) | Not Shown |
| panelBackground:”#f6f6f6″, | Mobile Charts | Not Shown | |
| panelForeground:”#222″, | Mobile Charts | Not Shown | |
| panelAccent:”#00aeef”, | Mobile Charts | Not Shown | |
| tableAccent:”#00aeef”, | Mobile Charts | Not Shown | |
| altBackground:”#f6f6f6″, | Mobile Charts | Alternate background colour for mobile reports | Not Shown |
| altForeground:”#000″, | Mobile Charts | Alternate foreground colour for mobile reports | Not Shown |
| altMapBase:”#f68c1f”, | Mobile Charts | Alternate Map chart type base colour (shades off this) | Not Shown |
| altPanelBackground:”#235378″, | Mobile Charts | Not Shown | |
| altPanelForeground:”#fff”, | Mobile Charts | Not Shown | |
| altPanelAccent:”#fdc336″, | Mobile Charts | Not Shown | |
| altTableAccent:”#fdc336″ | Mobile Charts | Not Shown |
Image 1
Image 2
Check out my other posts on SQL Server Reporting Services
Thanks Craig, some observations through trial and error with the September 2019 release:
primary: also bar to left of selected item in left nav pane
primaryContrast: also text in fourth title bar menu (file, view, edit in desktop etc), also ‘add comment’ header
secondaryAlt: also radio button and radio fill colour in settings
secondaryAlt2: not left hand menu active selection and hover colour. Hover on second title bar buttons (favourites, browse, new, manage folder etc) and settings/download/help dropdown menu headers
secondaryContrast: also search box text and icon, also comments button text
neutralPrimary: also fourth title bar button hover (file, view, edit in desktop etc) and comments pane background (just immediate area around comments box and buttons)
neutralPrimaryAlt: also third/fourth title bar background, comments pane background (except immediate area around comments box and buttons), line under comment box header
neutralPrimaryContrast: also active report name in breadcrumbs
neutralSecondaryAlt2: also setting form button border, fourth title bar perimeter border
neutralSecondaryAlt3: not dropdown menu title text colours. also comment text box border
neutralSecondaryContrast: also active icon colour (setting/download/help buttons)
neutralTertiary: also ‘add comment’ attach file button colour
neutralTertiaryAlt2: also folder elipses pop up hover background
neutralTertiaryContrast: also ‘add comment’ button text
Hope this helps someone out there!
Alex
Been scratching my head on how to change File, View. Edit in Desktop. This helped me!!! Thanks Alex!
You are a god among men! I’ve really needed this and been unable to find it. Thanks!
Thanks Jon, glad you got some use out of it.
Very useful Mr Porteous! Thanks.
Thanks Stephen, long time no speak! I hope you’re well! Tell me you know about SQLGLA and you’ll make it along on the 14th September?
All good thanks, only found out about it today and I have just signed up for 14th September.
Great post Craig. I’ve added a bit to what you already have in one of my posts. Feel free to check it out here: http://www.victorrocca.com/report-server-2016-custom-branding