# Want to override .nr-dashboard-theme for custom widgets

**URL:** https://discourse.nodered.org/t/want-to-override-nr-dashboard-theme-for-custom-widgets/60783
**Category:** Dashboard
**Tags:** node-red-dashboard
**Created:** [4 April 2022 15:21 UTC](https://discourse.nodered.org/t/want-to-override-nr-dashboard-theme-for-custom-widgets/60783 "2022-04-04T15:21:44Z")
**Posts on this page:** 9
**Page:** 1

<div class="post-metadata">

### Author: ![nanomonster](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nanomonster/32/59551_2.png) [@nanomonster](https://discourse.nodered.org/u/nanomonster)
#### Post date: [4 April 2022 15:21 UTC](https://discourse.nodered.org/t/want-to-override-nr-dashboard-theme-for-custom-widgets/60783/1 "2022-04-04T15:21:44Z")

</div>

Hi. I'm fairly new to Node-red and definitely new here (I just joined...)

I apologize in advance if this is a dumb question, but I'm trying to import custom widgets code into the dashboard and I noticed that even though the dashboard columns are over 300 pixels wide, any widget that I put in is limited to 210 pixels in width, leaving a blank space to the right. Anything larger is still accessible, but via vertical and horizontal scroll bars. I'm looking for a simple way to use the whole width of the column. Can someone point me in the right direction? thanks.

 ![clipped_widget](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/4/640749397cffbfe67c66647380184bb26239c91f.jpeg)

This is the widget code:

```auto
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<figure class="highcharts-figure">
    <div id="container"></div>
</figure>
<script>
    Highcharts.chart('container', {
    chart: {
        type: 'gauge',
        plotBorderWidth: 2,
        plotBackgroundColor:
        {
            linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
            stops:[[0, '#FFF4C6'],[0.3, '#FFFFFF'],[1, '#FFF4C6']]
        },
        plotBackgroundImage: null,
        height: 180
    },
    title: {
        text: 'VU meter',
        margin: 0
    },
    pane:
    [{
        startAngle: -40,
        endAngle: 40,
        background: null,
        center: ['51%', '125%'],
        size: 200
     }],
    exporting: {enabled: false},
    tooltip: {enabled: false},
    yAxis:
    [{
        min: -20,
        max: 6,
        minorTickPosition: 'inside',
        tickAmount: 4,
        tickPosition: 'outside',
        labels: {rotation: 'auto',distance: 15},
        plotBands:
        [{
            from: 0,
            to: 10,
            color: '#bf2013',
            innerRadius: '100%',
            outerRadius: '108%'
        }],
        pane: 0,
        title:
        {
            text: 'VU<br/><span style="font-size:8px">Channel A</span>',
            y: -20
        }
    }],
    plotOptions:
    {
        gauge:
        {
            dataLabels: {enabled: false},
            dial: {radius: '110%'}
        }
    },
    series:
    [{
        name: 'Channel A',
        data: [0],
        yAxis: 0
    }]
},
// Test animation data
function (chart) {
    setInterval(function () {
        if (chart.series)
        { // the chart may be destroyed
            var left = chart.series[0].points[0],
                leftVal,
                inc = (Math.random() - 0.5) * 3;
            leftVal = left.y + inc;
            if (leftVal < -20 || leftVal > 6) {leftVal = left.y - inc;}
            left.update(leftVal, false);
            chart.redraw();
        }
    }, 1000);        
});
</script>

```

and this is the style section

```auto
.highcharts-figure,
.highcharts-data-table table
{
  min-width: 250pt;
}

```

---

<div class="post-metadata">

### Author: ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [4 April 2022 16:36 UTC](https://discourse.nodered.org/t/want-to-override-nr-dashboard-theme-for-custom-widgets/60783/2 "2022-04-04T16:36:35Z")

</div>

Hi & welcome.

Can you share a minimal flow (only the parts that demonstrate this)?

  

To export a part of a flow, select the nodes of interest, press CTRL-E, copy to clip-board, paste into a code-block (described below)

  

* * *

### CANNED TEXT...

In order to make code readable and usable it is necessary to surround your code with three backticks (also known as a left quote or backquote `````)

````auto
``` 
   code goes here 
```

````

See this post for more details - [How to share code or flow json](https://discourse.nodered.org/t/how-to-share-code-or-flow-json/506)

---

<div class="post-metadata">

### Author: ![nanomonster](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nanomonster/32/59551_2.png) [@nanomonster](https://discourse.nodered.org/u/nanomonster)
#### Post date: [4 April 2022 17:02 UTC](https://discourse.nodered.org/t/want-to-override-nr-dashboard-theme-for-custom-widgets/60783/3 "2022-04-04T17:02:08Z")

</div>

I updated my initial post.

---

<div class="post-metadata">

### Author: ![nanomonster](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nanomonster/32/59551_2.png) [@nanomonster](https://discourse.nodered.org/u/nanomonster)
#### Post date: [4 April 2022 17:09 UTC](https://discourse.nodered.org/t/want-to-override-nr-dashboard-theme-for-custom-widgets/60783/4 "2022-04-04T17:09:57Z")

</div>

oh... and I also tried/added the Master style override from hotnipi in style which I found here:([Master style override](https://discourse.nodered.org/t/master-style-override/39227))

---

<div class="post-metadata">

### Author: ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)
#### Post date: [4 April 2022 17:32 UTC](https://discourse.nodered.org/t/want-to-override-nr-dashboard-theme-for-custom-widgets/60783/5 "2022-04-04T17:32:54Z")

</div>

> [@nanomonster](#):
>
> I updated my initial post.

If you had done as @Steve-Mcl asked and posted an export of your flow, we could tell:

- If your VU meter is embedded in a standard ui-template node.
- How wide in Node-red "units" the dashboard group is.
- How wide and tall in Node-red "units" the template node is.

But since you didn't I can only guess that it's because the template node does not have a specified width, or it is specified but not wide or tall enough.

I'm not sure you have shared enough CSS to style both width and height either.

---

<div class="post-metadata">

### Author: ![nanomonster](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nanomonster/32/59551_2.png) [@nanomonster](https://discourse.nodered.org/u/nanomonster)
#### Post date: [4 April 2022 19:11 UTC](https://discourse.nodered.org/t/want-to-override-nr-dashboard-theme-for-custom-widgets/60783/6 "2022-04-04T19:11:48Z")

</div>

Thank you guys for your answers. I thought I did what @Steve-Mcl asked... There's not much more to the flow than what I posted, except for the addition of the Master style override code...

In any event, here's the entire flow.

```auto
[{"id":"40431dee4eec0901","type":"ui_template","z":"ac25c7797589190c","group":"01fe50e9e4a3d0e9","name":"Vu-meter","order":2,"width":"4","height":"4","format":"<script src=\"https://code.highcharts.com/highcharts.js\"></script>\n<script src=\"https://code.highcharts.com/highcharts-more.js\"></script>\n<figure class=\"highcharts-figure\">\n <div id=\"container\"></div>\n</figure>\n<script>\n Highcharts.chart('container', {\n chart: {\n type: 'gauge',\n plotBorderWidth: 2,\n plotBackgroundColor:\n {\n linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },\n stops:[[0, '#FFF4C6'],[0.3, '#FFFFFF'],[1, '#FFF4C6']]\n },\n plotBackgroundImage: null,\n height: 180\n },\n title: {\n text: 'VU meter',\n margin: 0\n },\n pane:\n [{\n startAngle: -40,\n endAngle: 40,\n background: null,\n center: ['51%', '125%'],\n size: 200\n }],\n exporting: {enabled: false},\n tooltip: {enabled: false},\n yAxis:\n [{\n min: -20,\n max: 6,\n minorTickPosition: 'inside',\n tickAmount: 4,\n tickPosition: 'outside',\n labels: {rotation: 'auto',distance: 15},\n plotBands:\n [{\n from: 0,\n to: 10,\n color: '#bf2013',\n innerRadius: '100%',\n outerRadius: '108%'\n }],\n pane: 0,\n title:\n {\n text: 'VU<br/><span style=\"font-size:8px\">Channel A</span>',\n y: -20\n }\n }],\n plotOptions:\n {\n gauge:\n {\n dataLabels: {enabled: false},\n dial: {radius: '110%'}\n }\n },\n series:\n [{\n name: 'Channel A',\n data: [0],\n yAxis: 0\n }]\n},\n// Let the music play\nfunction (chart) {\n setInterval(function () {\n if (chart.series)\n { // the chart may be destroyed\n var left = chart.series[0].points[0],\n leftVal,\n inc = (Math.random() - 0.5) * 3;\n leftVal = left.y + inc;\n if (leftVal < -20 || leftVal > 6) {leftVal = left.y - inc;}\n left.update(leftVal, false);\n chart.redraw();\n }\n }, 1000); \n});\n</script>\n\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":260,"y":120,"wires":[[]]},{"id":"91e7f6944ce30bc7","type":"inject","z":"ac25c7797589190c","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":100,"y":120,"wires":[["40431dee4eec0901"]]},{"id":"23eee029701484ed","type":"ui_template","z":"ac25c7797589190c","group":"","name":"Master style override","order":1,"width":0,"height":0,"format":"<style>\n.highcharts-figure,\n.highcharts-data-table table\n{\n min-width: 250pt;\n}\n\nbody.nr-dashboard-theme {\n background-color: #333333;\n font-family: Calibri;\n}\nbutton, html, input, select, textarea {\n font-family: Calibri;\n}\nbody.nr-dashboard-theme md-content md-card {\n background-color: #33333300;\n color: #d0d0d0;\n}\n\nbody.nr-dashboard-theme md-toolbar {\n background-image: linear-gradient(to right, #404040, #737373);\n box-shadow: 0px 1px 20px #0000008a;\n}\n.nr-dashboard-theme ui-card-panel {\n background-image: linear-gradient(to bottom right, #404040, #737373);\n border: 1px solid #555555;\n box-shadow: 0 0 20px #00000066;\n}\n\n.nr-dashboard-theme ui-card-panel p.nr-dashboard-cardtitle {\n color: #2eb82e;\n text-shadow: 0 0 2px black;\n}\n\n.nr-dashboard-theme .nr-dashboard-form-button {\n background-image: linear-gradient(to bottom right, #8a8a8a6e, #00000070);\n background-color: #00ad03;\n color: #d0d0d0;\n text-shadow: 0 0 2px #525252;\n border-radius:6px;\n}\n\n.nr-dashboard-theme .nr-dashboard-button .md-button {\n background-image: linear-gradient(to bottom right, #8a8a8a6e, #00000070);\n background-color: #00ad03;\n color: #d0d0d0;\n text-shadow: 0 0 2px #525252;\n border-radius:6px;\n}\n.nr-dashboard-theme .nr-dashboard-button .md-button:hover {\n background-color: #00de00;\n}\n\n.nr-dashboard-theme .nr-dashboard-switch md-switch .md-thumb {\n background-image: linear-gradient(to bottom right, #48b349, #115009);\n}\n.nr-dashboard-button .md-button {\n box-shadow: 0 1px 3px 0 rgba(0,0,0,.26)!important;\n width: 100%!important;\n height: 100%!important;\n margin: 0!important;\n min-width: 0!important;\n min-height: 0!important;\n}\n.nr-dashboard-theme .nr-dashboard-slider .md-thumb:after {\n background-image: linear-gradient(to bottom right, #48b349, #115009);\n border-style: none;\n}\n.nr-dashboard-theme .nr-dashboard-numeric .value {\n background-color: #33333300;\n color:#d0d0d0;\n}\n\n.nr-dashboard-numeric .value {\n font-weight: 700;\n text-align: center;\n border: 0;\n}\n\n\n.nr-dashboard-form {\n display: inline-block;\n width: 100%;\n overflow-y: visible;\n}\n#SETTINGS_TEATED_cards {\n min-height: 300px;\n}\n\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"global","className":"","x":120,"y":60,"wires":[[]]},{"id":"01fe50e9e4a3d0e9","type":"ui_group","name":"Vu-meter","tab":"fe9c1c2dd62aa177","order":1,"disp":true,"width":"6","collapse":false,"className":""},{"id":"fe9c1c2dd62aa177","type":"ui_tab","name":"Meters","icon":"dashboard","order":5,"disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

### Author: ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)
#### Post date: [4 April 2022 19:18 UTC](https://discourse.nodered.org/t/want-to-override-nr-dashboard-theme-for-custom-widgets/60783/7 "2022-04-04T19:18:37Z")

</div>

Your template is set to 4 units wide, 4 units high.  
Default unit size is 48px.

Change the template to 6x5.

---

<div class="post-metadata">

### Author: ![nanomonster](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nanomonster/32/59551_2.png) [@nanomonster](https://discourse.nodered.org/u/nanomonster)
#### Post date: [4 April 2022 19:22 UTC](https://discourse.nodered.org/t/want-to-override-nr-dashboard-theme-for-custom-widgets/60783/8 "2022-04-04T19:22:47Z")

</div>

I knew it had to be something simple... but I just couldn't figure it out! 😵‍💫  
thanks !

---

<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: [18 April 2022 19:22 UTC](https://discourse.nodered.org/t/want-to-override-nr-dashboard-theme-for-custom-widgets/60783/9 "2022-04-18T19:22:53Z")

</div>

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