# Master style override

**URL:** <https://discourse.nodered.org/t/master-style-override/39227>\
**Category:** Dashboard\
**Created:** [16 January 2021 12:52 UTC](https://discourse.nodered.org/t/master-style-override/39227 "2021-01-16T12:52:34Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Josov](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/josov/32/6228_2.png) [@Josov](https://discourse.nodered.org/u/Josov)\
**Post date:** [16 January 2021 12:52 UTC](https://discourse.nodered.org/t/master-style-override/39227/1 "2021-01-16T12:52:35Z")

</div>

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:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/7/f795e93726682ffd81a5f241a532af83870dd830.png)

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

```auto
<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?

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [16 January 2021 13:05 UTC](https://discourse.nodered.org/t/master-style-override/39227/2 "2021-01-16T13:05:18Z")

</div>

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

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

```

---

<div class="post-metadata">

**Author:** ![Josov](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/josov/32/6228_2.png) [@Josov](https://discourse.nodered.org/u/Josov)\
**Post date:** [16 January 2021 13:33 UTC](https://discourse.nodered.org/t/master-style-override/39227/3 "2021-01-16T13:33:36Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jacco](https://avatars.discourse-cdn.com/v4/letter/j/a6a055/32.png) [@jacco](https://discourse.nodered.org/u/jacco)\
**Post date:** [17 January 2021 16:29 UTC](https://discourse.nodered.org/t/master-style-override/39227/4 "2021-01-17T16:29:50Z")

</div>

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

Thanks,

---

<div class="post-metadata">

**Author:** ![Josov](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/josov/32/6228_2.png) [@Josov](https://discourse.nodered.org/u/Josov)\
**Post date:** [8 February 2021 09:32 UTC](https://discourse.nodered.org/t/master-style-override/39227/5 "2021-02-08T09:32:01Z")

</div>

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

```auto
<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>

```

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/4/5491e8d014e78f416b2bf9c4aa177b187f4a8cb2.png)

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

```auto
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.

---

<div class="post-metadata">

**Author:** ![jacco](https://avatars.discourse-cdn.com/v4/letter/j/a6a055/32.png) [@jacco](https://discourse.nodered.org/u/jacco)\
**Post date:** [8 February 2021 10:37 UTC](https://discourse.nodered.org/t/master-style-override/39227/6 "2021-02-08T10:37:28Z")

</div>

Thanks, for sharing.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [10 March 2021 10:38 UTC](https://discourse.nodered.org/t/master-style-override/39227/7 "2021-03-10T10:38:20Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.