uDocs Unicon™

Theming guide for eLux 7

The look and feel of eLux 7 can be modified to realize corporate identity requirements to some extent.

This guide shows,

  • how these modifications can be achieved to create themes for eLux 7
  • where to place the required files and configurations
  • how to activate a theme

Components of a theme

A theme consists of a couple of predefined components. The configuration and the naming of the files follow some defined conventions.

Component Requirements Information
name   The name of the theme
accentColor Hex RGB color value (e.g. #RRGGBB) The main color, which is used on different parts of the theme throughout eLux 7
desktopBackgroundImage JPG image, i.e. Full-HD resolution image The background image for the desktop
productImage 330x330 px The company/CI logo (shown also during the boot process)
brandImage Height: 32px, width: Can vary The company/CI brand image

Creating a custom theme

To create a custom theme, follow the following steps:

Create the theme configuration file

Each theme requires a configuration file for the theme, called config.json.

{
  "name": "my-theme",
  "accentColor": "#CD5767",
  "desktopBackgroundImage": {"type": "jpg", "scaling": "crop"},
  "productImage": {"type": "png", "scaling": "contain"},
  "brandImage": {"type": "png", "scaling": "contain"}
} 
<!--NeedCopy-->

Note:

The name of the theme and the accent color need to be defined by the theme requirements. The config file must be named config.json by convention.

Prepare the theme files

Prepare the image files for the desktop background, product image, and brand image, according to the requirements.

Note:

The file names for the images must be named desktopBackgroundImage.jpg, productImage.png and brandImage.png by convention.

Create the theme folder

Create the folder for your theme on eLux 7 using Scout Board and a custom command.

```mkdir /setup/elux/themes/my-theme


> **Note:**
>
> The default theme with all its files is located at `/setup/elux/themes/unicon_default` in case a template is needed.

### Transfer the theme files to eLux 7

Transfer all the theme related files to eLux 7 in Scout Board, using the advanced file entries.

| Local theme file | Destination theme file on eLux 7 |
| --- | --- |
| `config.json` | `/setup/elux/themes/my-theme/config.json` |
| `desktopBackgroundImage.jpg` | `/setup/elux/themes/my-theme/desktopBackgroundImage.jpg` |
| `productImage.png` | `/setup/elux/themes/my-theme/productImage.png` |
| `brandImage.png` | `/setup/elux/themes/my-theme/brandImage.png` |

> **Note**
>
> After applying the configuration, reboot the endpoint, so that all the configuration and theme files are being transferred.

### Set the theme

Once you have transferred all the required files to eLux 7, the theme needs to be activated.

For setting the active theme on eLux 7, the following custom command needs to be sent to eLux from Scout Board:

```ucsettingsctl -o Desktop -v CurrentTheme=my-theme<!--NeedCopy-->

After applying the theme, the corresponding values and files will be used by the system and shown accordingly.

eLux 7 theming 1

eLux 7 theming 2

Theming guide for eLux 7