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 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 predefined conventions.
| Component | Requirements | Information |
|---|---|---|
| name | No spaces or special characters | 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"}
}
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
The theme files will all go into this theme folder.
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
After applying the theme, the corresponding values and files will be used by the system and shown accordingly.
