Chapter 11. Theming

11. 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>
  </theme>
</configuration>

The configuration file consists of four 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.

Finally, in the last 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.