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.
JustinG
(JustinG)
September 14, 2022, 11:47pm
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.
openhab:main
← hubsif:stylesheet
opened 07:17PM - 26 Mar 21 UTC
Hi @ghys,
I addressed something I think many powerusers have requested for: c… ustom css stylesheets.
This first draft allows to define a stylesheet for a page, like this:
```yaml
config:
layoutType: responsive
label: stylesheet_test
sidebar: true
stylesheet: |
.myoneclass {
background-color: red;
}
.myotherclass {
font-size: 40px;
}
blocks:
...
```
The stylesheet gets added globally on pageIn and removed on pageOut (it's not scoped to the page, so it can generally also affect things like the panel, but I think powerusers can deal with that).
Please let me know if something like this is desired and if I should complete it (e.g. add to layouting). Please also share if a stylesheet per page is a good approach in your view.
Some users might also want to add a global stylesheet, so it affects all pages at once. I'm also planning on adding this (if ok by you), though the approach will definitely be different (requires a global config or a static include or similar).
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.
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');
}
}
JustinG
(JustinG)
September 15, 2022, 12:55pm
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.
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