Master style override

[Josov]

I created my dashboard using the Master Style Override node from @hotNipi . It looks really great until I updated a number of nodes in the palette. Now it looks like this:

The node I use to obtain the effect is here (Master style override):

<style>
body.nr-dashboard-theme {
 background-color: #333333;
 font-family: Calibri;
}
button, html, input, select, textarea {
 font-family: Calibri;
}
body.nr-dashboard-theme md-content md-card {
 background-color: #33333300;
 color: #d0d0d0;
}

body.nr-dashboard-theme md-toolbar {
 background-image: linear-gradient(to right, #404040, #737373);
 box-shadow: 0px 1px 20px #0000008a;
}
.nr-dashboard-theme ui-card-panel {
 background-image: linear-gradient(to bottom right, #404040, #737373);
 border: 1px solid #555555;
 box-shadow: 0 0 20px #00000066;
}

.nr-dashboard-theme ui-card-panel p.nr-dashboard-cardtitle {
 color: #2eb82e;
 text-shadow: 0 0 2px black;
}

.nr-dashboard-theme .nr-dashboard-form-button {
 background-image: linear-gradient(to bottom right, #8a8a8a6e, #00000070);
 background-color: #00ad03;
 color: #d0d0d0;
 text-shadow: 0 0 2px #525252;
 border-radius:6px;
}

.nr-dashboard-theme .nr-dashboard-button .md-button {
 background-image: linear-gradient(to bottom right, #8a8a8a6e, #00000070);
 background-color: #00ad03;
 color: #d0d0d0;
 text-shadow: 0 0 2px #525252;
 border-radius:6px;
}
.nr-dashboard-theme .nr-dashboard-button .md-button:hover {
 background-color: #00de00;
}

.nr-dashboard-theme .nr-dashboard-switch md-switch .md-thumb {
 background-image: linear-gradient(to bottom right, #48b349, #115009);
}
.nr-dashboard-button .md-button {
 box-shadow: 0 1px 3px 0 rgba(0,0,0,.26)!important;
 width: 100%!important;
 height: 100%!important;
 margin: 0!important;
 min-width: 0!important;
 min-height: 0!important;
}
.nr-dashboard-theme .nr-dashboard-slider .md-thumb:after {
 background-image: linear-gradient(to bottom right, #48b349, #115009);
 border-style: none;
}
.nr-dashboard-theme .nr-dashboard-numeric .value {
 background-color: #33333300;
 color:#d0d0d0;
}

.nr-dashboard-numeric .value {
 font-weight: 700;
 text-align: center;
 border: 0;
}


.nr-dashboard-form {
 display: inline-block;
 width: 100%;
 overflow-y: visible;
}
#SETTINGS_TEATED_cards {
 min-height: 260px;
}

</style>

How should I fix this?

[hotNipi]

For the contrib-ui widgets it is now given more freedom to be styled. But as freedom given the responsibility comes alongside.

To make contrib-ui widgets having no background as all other widgets are made, you'll need to add

.nr-dashboard-theme .nr-dashboard-template {
    background-color: #33333300;
}

[Josov]

Great, it works again as before!
Thank you @hotNipi !

[jacco]

Can you share the way how you put the temperatuur and time in the upper right corner?

Thanks,

[Josov]

Yes, i can. I used a template node with the following code:

<script id="titleScript" type="text/javascript">
    //
    if(/Android|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){
        // Talking to phone or tablet
        $('#clock').remove();
        var toolbar = $('.md-toolbar-tools');
        var div = $('<div/>');
        var q = $('<p/ id="clock">');
        $('#titleScript').parent().hide();
        div.append(q);
        div[0].style.margin = '5px 5px 5px auto';
        toolbar.append(div);
        //
        function displayTitle(lh) {
            q.text(lh); 
        }
        function upTime() {
            var d = new Date();
            q.text(d.toLocaleTimeString('nl-NL',{hour:'2-digit',minute:'2-digit'}));
        }
        //
        (function(scope) {
            scope.$watch('msg.payload', function(data) {});
            setInterval(upTime,10000);
        })(scope);
    } else {
        // Talking to real hardware
        $('#clock').remove();
        var toolbar = $('.md-toolbar-tools');
        var div = $('<div/>');
        var p = $('<p/ id="clock">');
        var t1 = "komt";
        var t2 = "komt";
        $('#titleScript').parent().hide();
        div.append(p);
        div[0].style.margin = '5px 5px 5px auto';
        toolbar.append(div);
        //
        function displayTitle(lh) {
            p.text(lh); 
        }
        function upTime() {
            var d = new Date();
            p.text("Temperatuur buiten: " + t1 + "°C, -binnen: " + t2 + "°C,  actuele tijd: " + d.toLocaleTimeString('nl-NL',{ hour:'2-digit',minute:'2-digit'}));
        }
        //
        (function(scope) {
            scope.$watch('msg.payload', function(data) {
                t1 = data.t1;
                t2 = data.t2;
            });
            setInterval(upTime,10000);
        })(scope);
    }
</script>

The content of function node "t1" could look like this:

var new_msg = {payload: {t1: "", t2: ""}};
new_msg.payload.t1 = global.get ('outside_temp');
new_msg.payload.t2 = msg.payload;
return new_msg;

That's all. I'd like to hear about improvements.

[jacco]

Thanks, for sharing.