Theming

Overview

The LiveTiles Intranet Hub can be styled according to your own styling requirements. For all elements within the Hub the colors, borders, fonts etc. can be specified within the Hub configuration. This configuration can be edited in the User Interface (recommended) or directly in the JSON.

Adjusting the Theme via the User Interface

This is the recommended way to adjust your theme. The User interface makes it easy to configure your theme by picking colors using color pickers. You will get direct feedback in the page.

The colors are split into two sections:

• Brand color define the most important colors the serve as your color palette
• High level colors are more concrete and targeted to where they are applied - they are based on the brand colors.

High level colors are calculated based on the brand colors. Often there is a one to one mapping, but sometimes we do some transformation (lighten, darken, inverse, etc.). So if a brand color is adjusted, the dependent high level colors are adjusted accordingly too. If the high level colors that don't quite fit your needs, they can then be easily adjusted. In the UI every brand color list the high level colors that depend on it. If you change a brand color, the dependent high level colors will automatically be recalculated.

Fonts Multiple font styles can be specified in the Hub.json as an array of IFontStyleConfig. This font styles can be selected in the font section of the theme editor via User Interface. The selected font will be applied to the theme.

Adjusting the Theme via the JSON-Editor

As mentioned above, we recommend that you adjust your theme in the User Interface. Certain settings are currently only available in JSON. In order to specify those settings, press [CTRL] + M while being on the Hub page in your browser. This will bring up a text editor that displays the whole JSON of the Hub Configuration.

In the root element of the Hub Configuration you can find a styles property, where you can specify a styles configuration object. A complete specification for the styles configuration object can be found in our Configuration API reference defined by the IGlobalStylesConfig.

The colors can easily be edited in the UI. If you really want to tweek some colors for specific elements, you can do this in the IComponentColorsConfig. Also certain settings in regards to the borders (IBorderStylesConfig) and font (IFontStyleConfig) can also be done in the JSON.