Customizing Basic UI with CSS

There is also a way to hide the web frame entirely; sorry - I’ll have to look up how this is done. I’ll post the solution once I’m at home again.

It is along those lines (add this to the actual frame html):

    // Hide the last web element of the page ...
        _webViewElements = window.parent.document.body.getElementsByClassName("mdl-form__row mdl-form__row--height-auto mdl-cell mdl-cell--12-col ");
        _lastWebViewElement = _webViewElements[_webViewElements.length - 1];
        _lastWebViewElement.style.display = "none";

Sorry was that directed at me? :slight_smile:

Is the CSS also meant to fix this, which looks different to the Dark Theme

Anyone know how to get rid of this page???

Have you set a default sitemap… Configuration> Services> UI> Basic UI> Configure> Default Sitemap?

Yes, i assume this is how its done

EDIT: FIXED, Capital H for home :confused:

1 Like

Thanks Scott! that fixed that. Still cant get the CSS to load though :confused:
I have the custom css file, the sitemap webview url and the .html file

Very cool! Does it also word for the iOS app?

Well, I tried it that too.
But I get an error 404:

Problem accessing /static/basicuiinjector.html. Reason:
Not Found

I put the file in /etc/openhab2/html/ -> created -> “static” folder…
anything I could have done wrong?

Oh and since then the basic UI is showing.

SSE subscription failed: running in fallback

I’m on openhabian on rpi3 OHv2.4

Also is there no way to edit the vanilla CSS script which is loaded for basicui, I can’t seem to find that

btw:
Originally I was using “CSS and Javascript Injection”-plugin from google Chrome to archive that for any Internet page.

Hi all

Is it possivle to change the font too? if yes, how can I do this?

THX

What exactly and where did you make the changes for the colors?

Go in the CSS file and look for the colorcodes,

they will look something like this:

/* SWITCH Button Track */
.mdl-switch__track {
    background: #9b4f4f;

This is the color code : #9b4f4f

Just play with it and refresh your sitemap, you will find out for what it is.

Thanks for the help sir

1 Like