Marvin Live developer guide - theme customization

This application supports overriding parts of the theme used by the web client. The purpose of this is to add to the theme and make small modifications, for instance to increase the visibility of UI elements related to security. This option was introduced in version 15.3.25 and can be enabled with the themeOverrides configuration, as described in the install guide.

Setup

Customization is done by creating a CSS file which contains the needed style definitions, and configuring the path to this file in config.json :

{
 "converterService": "http://localhost:8080/webservices/",
 "servicesDirectory": "./services/",
 "port": 8888,
 "license": ["./marvin4js-license.cxl", "./mlive-license.cxl"],
 ...
 "themeOverrides": "./customtheme.css"
}

The configured file is loaded in the web client during initial page load as a standard stylesheet and rules contained within are in effect from that point. It’s loaded as a static resource, so changes made to the file while Marvin Live is running will take immediate effect - upon refreshing the page in the browser, new rules should be available.

By inspecting the web page using a browser’s built-in developer tools, it’s easy to identify what selectors are best used. Most elements of the page have descriptive class names and helper classes are available.

Helper classes

Name

Element

Description

domain-{{domainName}}

body

A special class is added to <body> after a successful login with the name of the authentication domain as configured in config.json (install guide).

Example: .domain-internal

domainname

multiple

This class name is available where the domain label is displayed (in the lounge after login, next to the room name after joining one).

Example

To customize the color of the “Marvin Live” title on the login page let’s identify the CSS selector to the title first:

images/download/attachments/49013804/Screen_Shot_2015-04-03_at_11.04.45_%282%29.png

The title is in an <h1> tag and there already is a style definition with a parent .logindetails class. Extending this with an extra color rule can be done like below:

customtheme.css
.logindetails h1 {
 color: #4982d8;
}

Results

images/download/attachments/49013804/Screen_Shot_2015-04-03_at_11.08.47_%282%29.png