Customizing Basic UI with CSS

Tutorials & Examples
21

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.

22

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";
23

Sorry was that directed at me? :slight_smile:

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

image
image.png2381×987 16.1 KB

24

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

25

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

26

Yes, i assume this is how its done

EDIT: FIXED, Capital H for home :confused:

image
image.png1062×782 11.7 KB

1 Like
28

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

29

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

30

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.

31

Hi all

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

THX

33

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

34

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.

35

Thanks for the help sir

1 Like
36

Thank you, I know that example. But I can’t implement it because I’m a new user and I don’t have a sitemap, only the overview page.
(see on top of Sitemaps | openHAB)

So where can I inject the CSS by using the overview page?

37

Thank you for this, I had totally missed it!

If anyone landing in this post will later need this, in my case I had to slightly modify the script, like so:

// Mobile
 _webViewElements = window.parent.document.body.getElementsByClassName("mdl-form__row");
_lastWebViewElement = _webViewElements[_webViewElements.length - 1];
//_lastWebViewElement.style.display = "none";
_lastWebViewElement.classList.add("noDisplay");

// Tablet / Desktop
_lastWebViewElement2 = _webViewElements[_webViewElements.length - 2];
_lastWebViewElement2.classList.add("noDisplay");

in order to hide the last TWO elements, instead of just the last one. This is because in my tablet I had 2 divs to hide, instead of just one. The .noDisplay class fires an additional rule in the css file:

/* =================================== ELEMENTS TO HIDE */
.noDisplay {
  display: none;
}

Also, since I use the openHAB app on my mobile, I added a “visibility” parameter in the sitemap, in order to always hide the webview, otherwise every time I loaded the page, the webview was appearing for a few seconds with an holizontal scrollbar:

Webview url="/static/....html" icon="none" visibility=[iF520_Generale<0]

Here I reused the value of the Item iF520_Generale, which is a power measurement that never goes < 0.

Consider you have to add this line in every sub-page of your sitemap, otherwise if you refresh the subpage, the style is not applied.