关于Power BI报表服务器如何设置主题颜色,官网页面上讲解的比较粗略。但是在SQL Server 报表服务器上则有相对详尽的说明。这里转载一篇其他人写的说明。
SSRS 2016 Brand Package breakdown
BY CRAIG · PUBLISHED 6TH MAY 2016 · UPDATED 4TH JANUARY 2019
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