Have any questions?
+44 1234 567 890
Chapter 14. Theming
14. Theming
ReportServer Enterprise Edition comes with a simple theming mechanism that allows you to adapt the look and feel of ReportServer and easily integrate adapt it to fit your corporate identity. The theming is controlled via the configuration file /fileserver/etc/ui/theme.cf. This file could look like
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<theme type="default">
<header>
<height>40</height>
</header>
<logo>
<login>
<html><![CDATA[<i class="icon-rs-logo rs-login-logo"></i><span class="rs-login-bg"><i class="icon-rs-logo-square"></i></span>]]></html>
<width>200px</width>
</login>
<header>
<html><![CDATA[<span class="rs-header-logo"><i class="icon-rs-Report"></i><i class="icon-rs-Server"></i></span>]]></html>
<width>185px</width>
</header>
<!--<url>Some URI pointing to a Logo</url> -->
</logo>
<colors>
<color name="white" color="#FFFFFF"/>
<color name="black" color="#000000"/>
<color name="black-almost" color="#132834"/>
<color name="purple-dark" color="#3E4059"/>
<color name="purple-light" color="#DFE0EB"/>
<color name="gray-light" color="#EEEEEE"/>
<color name="gray-dark" color="#B8BDC0"/>
<color name="gray-very-dark" color="#6D708B"/>
<color name="terminal-green" color="#00B000"/>
</colors>
<colorMapping>
<map useFor="bg" colorRef="gray-dark"/>
<map useFor="bg.text" colorRef="black"/>
<map useFor="bg.light" colorRef="white"/>
<map useFor="light.text" colorRef="black"/>
<map useFor="bg.shaded" colorRef="gray-light"/>
<map useFor="shaded.text" color="#666666"/>
<map useFor="hl.dark.bg" colorRef="purple-dark"/>
<map useFor="hl.dark.text" colorRef="white"/>
<map useFor="hl.light.bg" colorRef="purple-light"/>
<map useFor="hl.light.text" colorRef="black"/>
<map useFor="header.bg" colorRef="black-almost"/>
<map useFor="header.text.active" colorRef="white"/>
<map useFor="header.text.inactive" color="#BBBBBB"/>
<map useFor="header.text.right" color="#BBBBBB"/>
<map useFor="terminal.bg" colorRef="black"/>
<map useFor="terminal.text" colorRef="terminal-green"/>
<map useFor="terminal.hl.bg" colorRef="gray-very-dark"/>
<map useFor="terminal.link" colorRef="white"/>
<map useFor="border.light" colorRef="gray-dark"/>
<map useFor="tbar.btn.bg" colorRef="gray-dark"/>
<map useFor="icon.light" color="#999999"/>
</colorMapping>
<css>
.icon-rs-Report {
color: #FFF !important;
}
</css>
<saikuCharts>
<color>#1f77b4</color>
<color>#aec7e8</color>
<color>#ff7f0e</color>
<color>#ffbb78</color>
<color>#2ca02c</color>
<color>#98df8a</color>
<color>#d62728</color>
<color>#ff9896</color>
<color>#9467bd</color>
<color>#c5b0d5</color>
<color>#8c564b</color>
<color>#c49c94</color>
<color>#e377c2</color>
<color>#f7b6d2</color>
<color>#7f7f7f</color>
<color>#c7c7c7</color>
<color>#bcbd22</color>
<color>#dbdb8d</color>
<color>#17becf</color>
<color>#9edae5</color>
</saikuCharts>
</theme>
</configuration>The configuration file consists of five parts. In the first part, you can replace the logos for the login screen, the main ReportServer screen and the documentation report. The logo used within the report documentation is either the ReportServer logo, or an image that is specified via ${logo.url} in the config.
The second part of the configuration allows to provide names for colors which can then later be used to change the color scheme of ReportServer. In part three, (colorMapping) you can tell ReportServer what colors to use for certain elements. Colors can either be set via reference to a previously named color:
<map useFor="header.text" colorRef="white"/>This sets the header.text element to the color specified as white. They can be set directly
<map useFor="lighter.bg" color="#FFFFFF"/>or they can be set by pointing to a different element. For example,
<map useFor="lighter.text" sameAs="light.text"/>ensures that any element that uses the color lighter.text uses the same color as an element using light.text. The following elements are currently available to be styled:
| bg | The background. |
| text | Text when on background (bg). |
| bg.light | Light variant of background. For example used as background of panels. |
| light.text | Text on light background. |
| bg.shaded | A shaded variant of the background. Used, for example, as the background for toolbars. |
| shaded.text | Text on shaded background. |
| bg.dark | A darker variant of the background color. |
| border.light | A color used for (thin) borders on light background. |
| header.bg | The background of the top module bar (the header). |
| header.text.active | Text color of active modules and logo. |
| header.text.inactive | Text color of inactive modules. |
| header.text.right | Text color of user name and profile. |
| h3> hl.dark.bg | A dark highlight color. |
| hl.dark.text | Text on the dark highlight. |
| hl.light.bg | A lighter highlight color. |
| hl.light.text | Text on the lighter highlight color. |
| tbar.btn.bg | Background color of buttons in toolbars. |
| terminal.bg | Background of the terminal. |
| terminal.hl.bg | highlighted background of the terminal. |
| terminal.link | Links on the terminal. |
| terminal.text | Standard text on the terminal. |
With the next versions we are planning on further fine-tuning the color classes and would be happy for any feedback you might have.
Next, in the ''css'' part of the config, you can set individual CSS rules. As these rules are inserted after any other ReportServer CSS rule, you can overwrite any ReportServer specific CSS.
Finally, in the ''saikuCharts'' section, you can change the color theme used in Saiku/Mondrian report charts. You can use either hexadecimal color notation as in the example above, or named colors from the ''colors'' list, e.g. ''purple-light''.