GUI custom

[MatteoEng]

HI, I download and compiled the hifiberryos 4, I need to change the GUI and then I came here, is it possible to do it easily? Thanks

[tuomashamalainen]

Hi Matteo,

could you be a bit more specific in terms of what you would like to do?

Best,
Tuomas from Bang & Olufsen

[MatteoEng]

Hi Tuomas, I was watching for a sort of template of the web browser GUI, I didn't find anything or maybe I am just blind.
For example the background color is white, can I change it in to the code? and if I can, where? I am really not able to find something specific about the web browser

[tuomashamalainen]

Hi Matteo,

you can inspect the UI in the developer tools of the web browser, which will show you the used stylesheets. However, because of the routing on the server, these might not be easy to find in the system directories.

There is a default stylesheet that controls the general look of the user interface. This is located in /opt/beocreate/beo-views/default/beostyle2018.css. Beware, it's quite complicated, but most of the colours are managed through global variables near the top of the stylesheet.

Any changes to the opt directory are overwritten in a system update. I believe you should be able to make a copy of the stylesheet to /etc/beocreate/beo-views/default (this directory will carry over in a software update) and it will override the original stylesheet. Be advised that the styling system is currently not intended to be user-customisable so if you roll your own stylesheet, there might be instances in the future where your stylesheet may not work as expected.

FYI: in case you just want "dark mode", you can just turn it on in General -> Display.

Best,
Tuomas from Bang & Olufsen

[MatteoEng]

Oh thanks for everything, I think I will check it, thanks again Tuomas!
Really great support.

[MatteoEng]

Oh sorry Tuomas I almost forgot, last question, who generate the .css? Thanks

[tuomashamalainen]

I wrote the CSS mostly by hand, although an app called Espresso sped up the process with autocompletion.

[MatteoEng]

Yeah but I think an html or something should recall it right?

[tuomashamalainen]

The CSS gets imported in /opt/beocreate/beo-views/default/index.html.

[MatteoEng]

Thanks so much Tuomas