Theme Configuration

1 Adaption of the Dashboard Optic
- 1.1 Login
  - 1.1.1 Background Color, Frames and Positions
  - 1.1.2 Logo
  - 1.1.3 Font
- 1.2 Background
  - 1.2.1 The general background
  - 1.2.2 Container
- 1.3 The Navigation Bar
  - 1.3.1 The Menu-Item Font
  - 1.3.2 The Font and Background Color while Moving the Mouse
  - 1.3.3 The Navigation Bar in General
- 1.4 Header
  - 1.4.1 Logo
  - 1.4.2 The Log-out Button
- 1.5 Widgets
  - 1.5.1 Header
  - 1.5.2 The Background and the Height of the Header
  - 1.5.3 The Background and Frames of the Widgets
  - 1.5.4 Area Encompassing all Widgets
- 1.6 Widget for Tables
  - 1.6.1 Changing the Row Color Depending on Mouse Position
  - 1.6.2 Changing the Colors of Selected Rows
- 1.7 Dashboards Navigation
  - 1.7.1 Selection of a Dashboard
- 1.8 Dashboards Settings
  - 1.8.1 Container for Configuration
  - 1.8.2 My Dashboard

Adaption of the Dashboard Optic

This chapter enables the user to change the look of the dashboard by editing the theme.css file. This file is saved on the server in the Dashboard folder. Graphical elements, e.g., the logo of a company, are saved in the directory dashboard/img. Additional features can be added to the CSS instructions at any time.

Login

Background Color, Frames and Positions

The color of the background and the frame, as well as the position of the login window, can be adapted via the following entry:

.login-panel {
background-color: #ffffff;
border-color: #91c81f;
border-style: solid;
height: 200px;
margin: 220px auto 0;
padding: 40px;
width: 360px;
}

Logo

The logo itself as well as its size and position can be adapted via this entry:

.login-panel-panel-for-image {
background-image: url("img/logo-login.png");
background-repeat: no-repeat;
float: right;
height: 39px;
width: 151px;
}

Font

The color and the style as well as the size of the font can be adapted using this entry:

.login-panel-panel-for-text {
color: #00267f;
float: left;
font-family: Arial,FreeSans,Helvetica,sans-serif;
font-size: 14px;
font-weight: bold;
height: 50px;
padding-bottom: 10px;
width: 204px;
}

Background

The general background

The background can be changed via this entry:

For example, in the following screenshot the attribute of the background color was changed.

Container

The settings for the Dashboard and the individual widgets are stored in the container (the grey-colored area in the example above). The color of the background, as well as its position, can be adapted using this entry:

The Navigation Bar

The Menu-Item Font

The font color and weight of the items in the menu “Dashboards” and “Layout” as well as “Add Widgets” can be changed in this entry:

The Font and Background Color while Moving the Mouse

The font and the background color while moving the mouse over individual items of the menu can be changed the following way:

The Navigation Bar in General

Settings regarding the color of the frame and the background as well as the position of the entire navigation bar can be adapted here:

Header

Logo

The logo and its position can be adapted using this entry:

The Log-out Button

Different settings, for instance, the position of the button for logout and the logged-in user as well as the language settings, can be changed here:

Widgets

Header

By accessing the following entry the color, the font style, size, and weight used in the header can be changed:

The Background and the Height of the Header

The color of the background, as well as the height of the header, can be changed here:

The Background and Frames of the Widgets

The color of the background and the frames of individual widgets can be adapted in the following way:

Area Encompassing all Widgets

In addition, the area in which widgets are supposed to be displayed can be edited (i.e., the color of the background and the frames as well as position):

Widget for Tables

Changing the Row Color Depending on Mouse Position

This selector can be used to set a different color for the rows of a table if the mouse is being moved over the table:

Changing the Colors of Selected Rows

The command to change the color of rows while they are being selected can be entered the following way:

Dashboards Navigation

Selection of a Dashboard

The adaption of the background and font color, as well as the position of unselected Dashboards, can be made via this entry:

In turn, the color specification of the background and the font, as well as the position of selected Dashboards, can be conducted as follows:

The color of the background while moving the mouse over the Dashboard can be determined using this entry:

Dashboards Settings

If changes occur here, the modifications have direct effects on dashboards, widgets, and variables:

Container for Configuration

With this entry the color of the background and the frame, as well as the position of the container for configuring different dashboards, can be arranged:

My Dashboard

Via this entry, the formatting of the lettering “My Dashboards” can be adapted: