Custom CSS for MainUI

Add-ons UIs
1

Hello specialists,

is there a way to create and use a custom css file for MainUI?
I also want to use a custom font for spezial icons because i easy can colorized the font icons.
I think, i can use the font via CSS by “@font-face { font-family: …}”

Attention: I know the thread of the BasicUI.

2

At present I do not believe there is an option for a user to create a site-wide css file for the MainUI.

However, you can use the stylesheet property in the config section of pages to define a style for each page. This will not impact the MainUI frame (the side panels and the top navbar) but it will control the style of everything in the page frame.
https://github.com/openhab/openhab-webui/pull/979

There’s no formal documentation on the stylesheet property yet but if search the forum you’ll find many examples now of how to use it.

3

Hmm…
is it also possible to add like this in the config of a widget or page?

@font-face {
  font-family: 'myfont';
  src: url('../font/myfont.eot?69433754');
  src: url('../font/myfont.eot?69433754#iefix') format('embedded-opentype'),
       url('../font/myfont.woff2?69433754') format('woff2'),
       url('../font/myfont.woff?69433754') format('woff'),
       url('../font/myfont.ttf?69433754') format('truetype'),
       url('../font/myfont.svg?69433754#myfont') format('svg');
  font-weight: normal;
  font-style: normal;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'myfont';
    src: url('../font/myfont.svg?69433754#myfont') format('svg');
  }
}
4

I’ve never tried. But the stylesheet property should allow for full css, so I see no reason it shouldn’t work. There’s only one way to find out…

It will, however, remained scoped at whatever level you introduce it.

5

Ok, thank you.

It is working if I put the following in the config of a widget or in the page where the widget is placed:

config:
  stylesheet: >
    @font-face {
      font-family: 'myfont';
      src: url('/static/font/myfont.eot?69433754');
      src: url('/static/font/myfont.eot?69433754#iefix') format('embedded-opentype'),
           url('/static/font/myfont.woff2?69433754') format('woff2'),
           url('/static/font/myfont.woff?69433754') format('woff'),
           url('/static/font/myfont.ttf?69433754') format('truetype'),
           url('/static/font/myfont.svg?69433754#myfont') format('svg');
      font-weight: normal;
      font-style: normal;
    } @media screen and (-webkit-min-device-pixel-ratio:0) {
      @font-face {
        font-family: 'myfont';
        src: url('/static/font/myfont.svg?69433754#myfont') format('svg');
      }
    [class^="icon-"]:before, [class*=" icon-"]:before {
      font-family: "myfont";
      font-style: normal;
      font-weight: normal;
      speak: never;
    }
    .icon-saunaoven:before { content: '\73'; } /* 's' */

Then I use the class in the widget for example:

    - component: Label
      config:
        class:
          - icon-saunaoven
1 Like