How to create and use a custom frontail theme

Tutorials & Examples Solutions
, ,
1

I started out with openhabian, and a very useful tool that came with it is frontail (github).

It hosts a webserver on port 9001 and shows logs. Basically it is a tail -f with a UI.

I embedded the frontail webpage in my habpanel, but wanted to change the css so it would integrate nicely.

This was quite a search, because it wasn’t documented anywhere and I couldn’t find anything about it on google.

I added it to the README.md and created a pull request on github, but in the meantime this is the way to go:

The .css files frontail uses, are located at /usr/lib/node_modules/frontail/web/assets/styles.
If for any reason your system uses a different location, I found it out by doing a sudo find / -iname styles/dark.css

You could edit the already included default.css, dark.css or openhab.css, but a better option is to create a new .css file, i.e. custom.css and let it inherit from one of the 3 other .css files using @import 'default.css';, @import 'dark.css'; or @import 'openhab.css'; at the top of your new file.
This way you only have to add/override the style definitions you want.

You can tell frontail which theme to use on start with the -t option: frontail -t custom

On openhabian, frontail is started with a service.
You’ll have to edit the service definition and restart:

  1. sudo nano /etc/systemd/system/frontail.service
  2. At the ExecStart line, look for -t openhab and change it to
    -t your_css_file_name_without_.css
    (-t custom for custom.css)
  3. Exit using CRTL+X and save changes.
  4. It is necessary to reload the daemon: sudo systemctl daemon-reload
  5. Restart frontail sudo service frontail restart

An example theme to go with @gman his HABPanel RELOADED theme:

@import 'dark.css';

body {
  background-color: #212124;
  border-left: 5px solid #4F6949;
  border-bottom: 1px solid #4F6949;
  border-bottom-left-radius: 30px;
  padding-bottom: 1em;
}

.navbar {
  background-color: #4F6949;
}

.line {
  color: #55a53a95 !important;
  background-color: #212124 !important;
  border-color: #55a53a60 !important;
  font-size: 1.2em !important;
  padding-left: 2em;
}

.line span {
  color: #55a53a95 !important;
}

.line-selected {
  background-color: #55a53a54 !important;
  border-color: #55a53a60 !important;
  font-size: 1.2em !important;
  padding-left: 2em
}

.line-selected span {
  color: #55a53a95 !important;
}

Note: The !important keywords are necessary, because for certain log entries (i.e. ‘received command’) frontail dynamically adds a style tag to elements.
It looks like this is configured specifically for Openhab, but I haven’t found where yet. If someone could elaborate, please do!

habpanel%20log%20viewer
habpanel log viewer.PNG1920×911 80.7 KB

11 Likes
2

Hello,

Thanks for the good direction, but how can I differentiate warnings from info? Both are currently displayed “white” as set. Can i separate the Warnings with a red color?

.line span {
  color: #FFFFFF !important;
}

.line-selected span {
  color: #FFFFFF !important;
}