Customizing Basic UI with CSS

basicui
Tags: #<Tag:0x00007fd30e261ab8>

(Patrik Gfeller) #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:



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


Basic UI:; dark theme
Music/Player control for basic UI (Squeezebox)
Extending Classic UI
Examples of your Basic UI
Map files
iCloud device data integration in openHAB
(Angelos) #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


(Philipp) #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;
}


Creating Links to external URLs or other Sitemaps in BasicUI
Creating Links to external URLs or other Sitemaps in BasicUI
(Riccardo Rossi) #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?


(glufonec) #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";

(Gravidi) #6

Hi RiotMode,

which icon package use you for your basic ui?

Thanks!


(Nakh Home) #7

What is the content of the HideHeader.html ?

i have downloaded the css file under html/css/