user css

User defined css

As the AvNav frontend is completely browser based (single page app with reactjs) you can adapt its appearance with css.

There is a file user.css intended to be used for your css rules. This file is located next to user.js in BASEDIR/user/viewer. (BASEDIR is /home/pi/avnav/data on a pi).

Via the Files/Download page and the subpage you can select the file to edit it.

By clicking the file and selecting "Edit" in the dialog you can start the editor. During the first start a template has been created that already contains an example.

Since Version 20210619 the name of the current layout is assigned as a CSS class to the application. All special characters will be replaced by "_". The layout user.default will become the CSS class user_default. Using this feature you can define different CSS for different layouts (e.g. for different devices).

.user_default .widget .COG {
color: green;
}
.user_special .widget .COG {
color: red;
}

A proven workflow is the usage of your browser's developer tools (Chrome, Firefox,...), selecting the elements you would like to adapt and testing your changes.

Afterwards you can directly copy the values to user.css and (after saving) test them by reloading the AvNav page.