Customizing Basic UI with CSS

Tutorials & Examples
1

Hi all,

my favorite UI; here a small inspiration on how to hide the default navigation and to inject a custom .css to tailor it to your taste:

2017-07-16 12_55_56-Multimedia ♫ (2) Ain't Nothing Li ....png1091×559 72 KB


The .css used:

myStyle.css (1.9 KB)

The code to inject the css and to hide the navigation:

<head>
    <style>

    </style>
</head>

<body>
    <script type="text/javascript">
        
        function addStyleSheet(filename) {
        var head = window.parent.document.head
          , link = window.parent.document.createElement('link')

          link.type = 'text/css'
          link.rel = 'stylesheet'
          link.href = filename

          head.appendChild(link)
        }
        
        function addStyleString(str) {
            var node = window.parent.document.createElement('style');
            node.innerHTML = str;
            window.parent.document.head.appendChild(node);
        }

        var _headers = window.parent.document.body.getElementsByClassName("mdl-layout__header mdl-layout__header--scroll navigation navigation-home");
        var _header = _headers[0];
        _header.style.display = "none";

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

        
       // Change the style for images ...
       // addStyleString('div > img { border-radius: 15px !important; height: 200px !important; width: 200px !important; position: relative; float: right; }');
       addStyleSheet("../static/css/myStyle.css")
    </script>
</body>

Add this as your last webelement to your sitemap:

        // Hide default navigation
	    Webview url="/static/HideHeader.html"

with kind regards,
Patrik

15 Likes
2

I am implementing this! Thanx :slight_smile:
Small suggestion: add in the begging of your post some small installation instructions:
(e.g.)
Download myStyle.css and place it in OPENHAB_CONF/html/ directory (e.g. /etc/openhab2/html/) (or even better in a subdir of html)
Create a new HideHeader.html file (maybe give a download method also) in the same dir
Add a web element to the sitemap

4 Likes
3

thanks patrik! works nice :slight_smile: i kept the menu and changed the colors a bit :wink:

myStyle.css ( place the file in html/css/myStyle.css )



/* =================================== HEADER FARBE */
.mdl-layout__header {
  background-color: #333;
}

/* =================================== HINTERGRUND FARBE  */

/*  HINTERGRUND STEUERELEMENTE */
.page-content {
  background-color: #1e1e1e;
}
/*  HINTERGRUND Links/Rechts Wrapper */
.mdl-color--grey-100 {
  background-color: #1e1e1e !important;
}

/* =================================== STEUERELEMENTE LINE-HEIGHT */

/* ZEILENHÖHE */
html.ui-layout-condensed .mdl-form__row {
    height: 45px;
}

/* =================================== STEUERELEMENTE FARBE  */

/* STEUERELEMENTE - HINTERGRUND FARBE  */
.mdl-color--white {
    background-color: #383838 !important;
}
/* STEUERELEMENTE - TEXT FARBE  */
.mdl-color-text--grey-700 {
    color: #e0e0e0 !important;
}
/* STEUERELEMENTE - Zwischenstriche Farbe */
.mdl-form__row {
    border-bottom: 1px solid #2d2d2d;
}


/* =================================== SWITCH FARBE OFF */

/* SWITCH Button Farbe */
.mdl-switch__thumb {
  background-color: #fff;
}
/* SWITCH Button Track */
.mdl-switch__track {
    background: #9b4f4f;
}
/* SWITCH Button Button-Farbe */
.mdl-switch__thumb {
  background: #5b5757;
}

/* =================================== SWITCH FARBE ON */
/* SWITCH Button Button-Farbe */
.mdl-switch.is-checked .mdl-switch__thumb {
    background: #d8d8d8;
}
/* SWITCH Button Track-Farbe*/
.mdl-switch.is-checked .mdl-switch__track {
    background: #66d693;
}
/* =================================== FRAME Rundungen */

/* Fenster / Abschnitt Rundungen */
.mdl-form {
  /*+border-radius: 10px;*/
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  -khtml-border-radius: 3px;
  border-radius: 3px;
}

/* =================================== BUTTON FARBE - OFF */

/* BUTTON SELECTED */
BUTTON.mdl-button--accent {
  border: 1px solid #5ddd90;
  /*+box-shadow: 0px 0px !important;*/
  /*-moz-box-shadow: 0px 0px !important;
  -webkit-box-shadow: 0px 0px !important;
  box-shadow: 0px 0px !important;*/
  background-color: #333 !important;
  color: #5ddd90 !important;
}
/* =================================== BUTTON FARBE - ON */

/* BUTTON DESELECTED */
.mdl-form__setpoint BUTTON, .mdl-form__rollerblind BUTTON, .mdl-form__buttons BUTTON {
  color: white;
  background-color: #545454;
  /*+border-radius: 5px;*/
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  -khtml-border-radius: 2px;
  border-radius: 2px;
}

/* =================================== BUTTON FARBE - HOVER */

/* BUTTON HOVER FARBE */
BUTTON.mdl-button:hover {
  background-color: #5ddd90;
}

IMG_0076
IMG_0076.jpg640×1136 68.5 KB
IMG_0075
IMG_0075.jpg640×1136 54.4 KB

IMG_0077
IMG_0077.jpg640×1136 128 KB
IMG_0078
IMG_0078.jpg640×1136 77.8 KB

02
Bildschirmfoto 2017-12-02 um 14.07.02.png1543×1341 197 KB

3 Likes
4

I would to use the same default style of the Basic UI for a static web page I use in my sitemap. Can anyone suggest me where to start?

1 Like
5

I would like to restyle the top frame on each page. How to do it?

This just target the apsolute top one on first page


        _navigation = window.parent.document.body.getElementsByClassName("mdl-form mdl-color--white mdl-shadow--2dp mdl-cell mdl-grid mdl-cell--12-col");
        _firstNavigation = _navigation[0];
        _firstNavigation.style.width = "30%";
        _firstNavigation.style.display = "-webkit-box";
        _firstNavigation.style.display = "-ms-flexbox";
6

Hi RiotMode,

which icon package use you for your basic ui?

Thanks!

7

What is the content of the HideHeader.html ?

i have downloaded the css file under html/css/

8

hey man , sorry for my late reply

this is the content of HideHeader.html

<head>
    <style>

    </style>
</head>

<body>
    <script type="text/javascript">

        function addStyleSheet(filename) {
        var head = window.parent.document.head
          , link = window.parent.document.createElement('link')

          link.type = 'text/css'
          link.rel = 'stylesheet'
          link.href = filename

          head.appendChild(link)
        }

        function addStyleString(str) {
            var node = window.parent.document.createElement('style');
            node.innerHTML = str;
            window.parent.document.head.appendChild(node);
        }

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

       // Change the style for images ...
       // addStyleString('div > img { border-radius: 15px !important; height: 200px !important; width: 200px !important; position: relative; float: right; }');

        addStyleSheet("../static/css/myStyle.css")
    </script>
</body>

hope that helps - good luck

9

Thanks Dude. Really cool

image
image.png1670×674 38.5 KB

1 Like
10

hi Patrick,

Very nice work, do you mind sharing how did you made the power meter? can you provide more detail?

11

it’s really nice but the rendering is different according to the operating system or browser

did i make something wrong ?

below some pic of a sitemap and a sub Frame.

Could someone share any insights?

Windows & Chrome

image
image.png1918×908 59.6 KB

image
image.png1889×576 65.2 KB

Android & Android Application

11(1)
WhatsApp Image 2018-10-16 at 20.37.11(1).jpeg899×1599 63.3 KB

11
WhatsApp Image 2018-10-16 at 20.37.11.jpeg899×1599 54.6 KB

Android & Chrome

11(3)
WhatsApp Image 2018-10-16 at 20.37.11(3).jpeg899×1599 52.9 KB
11(2)
WhatsApp Image 2018-10-16 at 20.37.11(2).jpeg899×1599 48.6 KB

12

Guys, do you have any ideas?

13

Hi!

Thanks for this great template! I like it a lot! :slight_smile:
I have one issue …
Some picture seems to be missing although i did not add one.
See the screenshots, that makes it clear :wink:
When i copy the link of that “picture” it says:
http://mini.local:8080/icon/webview?format=svg
Hope you can help.

57
572562×1892 281 KB
05
053104×1892 734 KB
15
153104×1892 734 KB
26
262562×1892 292 KB

14

I’m currently quite happy with this - just as an inspiration for a fresh look.

Font is Raleway from Google Fonts (regular and 900 weight italic)

Greenish Background Color is #39CCCC

57
Screenshot 2019-02-10 at 01.09.57.png2858×1598 291 KB

15

This looks really nice and I did a few tests now. I placed the webview element on the very bottom of my sitemap. This works, but as soon as I navigate to a subpage and reload the page in the browser it switches back to the old style.

I tried to add more webview elements to the subpages, but somehow this doesn’t work. Any ideas?

16

hey, add icon=none to the webview item in your sitemap.

17

I have the same issue as @michaeljoos, after a reload, the CSS customization is gone on subpages. And icon=“none” makes no difference (I already had that specified in the sitemap).

18

Hi there

I created the CSS file and the HTML file. Inside the sitemap, I assume in each site map, i added


sitemap lights label="Lights" {
    Frame label="Exterior Lights" {
      Switch item=NorthEastDrive_Light label="North East Drive" icon="Light"
      Switch item=NorthWestDrive_Light label="North West Drive" icon="Light"
      Switch item=NorthCarPark_Light label="North Car Park" icon="Light"
      Switch item=LaundryEntrance_Light label="Laundry Entrance" icon="Light"
      Switch item=FrontDoor_Light label="Front Door" icon="Light"
      Switch item=EntranceWest_Light label="Entrance West" icon="Light"
      Switch item=WestGarden_Light label="West Garden" icon="Light"
      Switch item=East_Light label="East" icon="Light"
      Switch item=Patio_Light label="Patio" icon="Light"
}
    Frame label="Interior Lights" {
      Switch item=WallPendant_Light label="Wall Pendant" icon="Light"
      Switch item=Bird_Light label="Bird Lights" icon="Light"
      Switch item=Node11_Sw1 label="Empty 1" icon="Light"
      Switch item=Node11_Sw2 label="Empty 2" icon="Light"
}
// Hide default navigation
            Webview url="/static/ihp-theme/HideHeader.html" icon=none
}

But it gives a broken link, icon webview? Does anyone know what im doing wrong.

Thanks

19

Try this

Webview url="/static/HideHeader.html" icon="none"
20

Same :frowning:

image
image.png1877×1016 13.8 KB