Support

Lorem ipsum dolor sit amet:

24h / 365days

We offer support for our customers

Mon - Fri 8:00am - 5:00pm (GMT +1)

Get in touch

Cybersteel Inc.
376-293 City Road, Suite 600
San Francisco, CA 94102

Have any questions?
+44 1234 567 890

Drop us a line
info@yourdomain.com

About us

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec.

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''.

InfoFabrik GmbH

Wir wollen, dass alle Unternehmen, Institutionen und Organisationen, die Daten auswerten, selbständig und zeitnah genau die Informationen erhalten, die sie für ein erfolgreiches Arbeiten benötigen.

InfoFabrik GmbH
Klingholzstr. 7
65189 Wiesbaden
Germany

+49 (0) 611 580 66 25

Kontaktieren Sie uns

Bitte addieren Sie 1 und 8.
Copyright 2007 - 2024 InfoFabrik GmbH. All Rights Reserved.

Auf unserer Website setzen wir Cookies und andere Technologien ein. Während einige davon essenziell sind, dienen andere dazu, die Website zu verbessern und den Erfolg unserer Kampagnen zu bewerten. Bei der Nutzung unserer Website werden Daten verarbeitet, um Anzeigen und Inhalte zu messen. Weitere Informationen dazu finden Sie in unserer Datenschutzerklärung. Sie haben jederzeit die Möglichkeit, Ihre Einstellungen anzupassen oder zu widerrufen.

Datenschutzerklärung Impressum
You are using an outdated browser. The website may not be displayed correctly. Close