# Help with styling UI gauges with function

**URL:** https://discourse.nodered.org/t/help-with-styling-ui-gauges-with-function/37730
**Category:** General
**Created:** [18 December 2020 22:20 UTC](https://discourse.nodered.org/t/help-with-styling-ui-gauges-with-function/37730 "2020-12-18T22:20:26Z")
**Posts on this page:** 12
**Page:** 2

<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: [19 December 2020 16:35 UTC](https://discourse.nodered.org/t/help-with-styling-ui-gauges-with-function/37730/21 "2020-12-19T16:35:28Z")

</div>

> [@Tomadoggy](#):
>
> Do you have any ideas about changing the background color?

If you share the `ui_template` what you are using for style override then I can take a look

---

<div class="post-metadata">

### Author: ![Tomadoggy](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/tomadoggy/32/34065_2.png) [@Tomadoggy](https://discourse.nodered.org/u/Tomadoggy)
#### Post date: [19 December 2020 16:46 UTC](https://discourse.nodered.org/t/help-with-styling-ui-gauges-with-function/37730/22 "2020-12-19T16:46:44Z")

</div>

Thank you, this is the file I have in use:

```auto
<style>
/*
It is reasnoble to declare the colors as CSS variables
so they can be easily called by name where needed.

You can see that in many places the variables are not used. Change it!
*/

:root {
  --color-green-primary: rgb(51, 204, 51);
  --color-green-secondary: rgb(26, 101, 26);
  --color-red-primary: rgb(255, 0, 0);
  --color-red-secondary: rgba(153,0,0,1);
  --color-gray-primary:rgba(40,40,40,1);
  --color-gray-secondary:rgba(65,65,65,1);
  /*--color-text-primary: rgb(230, 226, 209); kind of tanish*/
  --color-text-primary: rgb(255, 255, 255);
  --color-widget-border: rgb(84, 78, 78);
}

/*
All CSS adjustments are commented out.
Turn rules on one by one and see the changes.
Don't use too many elements because it wil be confusing
Start with simple elements like text, slider or button

Many of elements like buttons have states, 
those rules must be found and adjusted also.
*/

/*
.masonry-container {
    position: relative;
    width: 100%;
    height:100%;
    margin: 0 auto;
    background: rgb(255,0,0);
    background: linear-gradient(180deg, var(--color-gray-primary) 0%, var(--color-gray-secondary) 100%);
}
*/

.nr-dashboard-cardcontainer {
    position: relative;
    /*box-shadow: inset 1px 1px 4px 0px #000000bb;*/
    border-radius: 15px;
}

/*border radius of cards #33333300
*/

.nr-dashboard-theme ui-card-panel {
    background-color: #404040;
    color:var(--color-text-primary);
    border-radius: 15px;
    box-shadow: 0 0 8px 0px #00000080;
}

body.nr-dashboard-theme md-content md-card {
    background-color: #33333300;
    color: var(--color-text-primary);
    text-shadow: 4px 2px 4px #00000045;
    box-shadow: 0 -1px 5px 1px #00000045;
    border-radius: 12px;
    border: 1px solid var(--color-widget-border);
}

/*
.nr-dashboard-theme ui-card-panel p.nr-dashboard-cardtitle {
    color: var(--color-text-primary);
}
*/

.md-button {
    display: inline-block;
    position: center;
    cursor: pointer;
    min-height: 36px;
    min-width: 88px;
    line-height: 36px;
    vertical-align: middle;
    align-items: center;
    text-align: center;
    border-radius: 12px;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    outline: none;
    border: 0;
    padding: 0 6px;
    margin: 6px 8px;
    background: transparent;
    color:var(--color-text-primary);
    white-space: nowrap;
    text-transform: uppercase;
    font-weight: 500;
    font-size: 14px;
    font-style: inherit;
    font-variant: inherit;
    font-family: inherit;
    text-decoration: none;
    overflow: hidden;
    transition: box-shadow .4s cubic-bezier(.25,.8,.25,1),background-color .4s cubic-bezier(.25,.8,.25,1);
}

/*
.nr-dashboard-theme .nr-dashboard-button .md-button {
    background-color: #88888800;
    color:var(--color-text-primary);
}
*/

/*
.nr-dashboard-theme .nr-dashboard-button .md-button:hover {
    background-color: #88888855;
}
*/

/*
md-slider .md-thumb {
    z-index: 1;
    position: absolute;
    left: -10px;
    top: 14px;
    width: 20px;
    height: 20px;
    border-radius: 20px;
    -webkit-transform: scale(.7);
    transform: scale(.7);
    transition: all .4s cubic-bezier(.25,.8,.25,1);
    box-shadow: 0 0 6px #00000070;
}

*/

/*
Advanced stuff - dynamic change of card CSS

Classes here can be used to make colored stripe at the top of card
Usage is not in here, but they are added to md-card when needed within another template

.carderr {
    background: rgb(255,0,0);
    background: linear-gradient(180deg, var(--color-red-primary) 0px, var(--color-red-secondary) 3px, rgba(80,80,80,1) 4px, rgba(45,45,45,1) 100%);
}
.cardok {
    background: rgb(39,255,0);
    background: linear-gradient(180deg, var(--color-green-primary) 0px, var(--color-green-secondary) 3px, rgba(70,70,70,1) 4px, rgba(40,40,40,1) 100%);
}
*/

</style>

```

---

<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: [19 December 2020 16:55 UTC](https://discourse.nodered.org/t/help-with-styling-ui-gauges-with-function/37730/23 "2020-12-19T16:55:02Z")

</div>

The `contrib-ui-` dashboard widgets are created on top of template which is so to say "do your stuff" thing. So it is treated more freely and not forced to use all the same properties like other stuff has.

To make it same as others:

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

```

Or just make the background color for them transparent:

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

```

I use the last one because of I'm playing with widget background color to indicate latest input for some my gauges (if last input was higher than previous, add a bit green, if opposite, add a bit red, but if it is same, stay default)

---

<div class="post-metadata">

### Author: ![Tomadoggy](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/tomadoggy/32/34065_2.png) [@Tomadoggy](https://discourse.nodered.org/u/Tomadoggy)
#### Post date: [19 December 2020 18:24 UTC](https://discourse.nodered.org/t/help-with-styling-ui-gauges-with-function/37730/24 "2020-12-19T18:24:44Z")

</div>

@hotNipi the transparent worked perfectly, so many thanks to you! Took a while to reply...I was deep in another Rabbit hole, really liking node red and finding myself a bit consumed.

---

<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: [19 December 2020 18:33 UTC](https://discourse.nodered.org/t/help-with-styling-ui-gauges-with-function/37730/25 "2020-12-19T18:33:29Z")

</div>

Keep going. The right path is always uphill 🙃

---

<div class="post-metadata">

### Author: ![Tomadoggy](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/tomadoggy/32/34065_2.png) [@Tomadoggy](https://discourse.nodered.org/u/Tomadoggy)
#### Post date: [19 December 2020 18:38 UTC](https://discourse.nodered.org/t/help-with-styling-ui-gauges-with-function/37730/26 "2020-12-19T18:38:12Z")

</div>

> [@dceejay](#):
>
> If anyone wants to dig in the source the card-size for the gauge is set in `node-red-dashboard/src/components/ui-component/templates/gauge.html` and then the gauge in `/node-red-dashboard/src/components/ui-gauge/ui-gauge.html`  
> but then as we said the library itself has some things inside it - which we try to configure in `node-red-dashboard/src/components/ui-gauge/ui-gauge.js`

I have been unable to locate the directorie(s) you are referencing here on my Pi...any guidance?

---

<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: [19 December 2020 18:40 UTC](https://discourse.nodered.org/t/help-with-styling-ui-gauges-with-function/37730/27 "2020-12-19T18:40:24Z")

</div>

Yeah , it is source code to investigate if you find it interesting and maybe provide better solution than the current is.

---

<div class="post-metadata">

### Author: ![Tomadoggy](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/tomadoggy/32/34065_2.png) [@Tomadoggy](https://discourse.nodered.org/u/Tomadoggy)
#### Post date: [19 December 2020 18:42 UTC](https://discourse.nodered.org/t/help-with-styling-ui-gauges-with-function/37730/28 "2020-12-19T18:42:08Z")

</div>

OK, so I guess I understand it is no where on my local machine. Where might I get a copy to investigate?

---

<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: [19 December 2020 18:42 UTC](https://discourse.nodered.org/t/help-with-styling-ui-gauges-with-function/37730/29 "2020-12-19T18:42:57Z")

</div>

> **[node-red/node-red-dashboard](https://github.com/node-red/node-red-dashboard)**
>
> A dashboard UI for Node-RED. Contribute to node-red/node-red-dashboard development by creating an account on GitHub.

---

<div class="post-metadata">

### Author: ![Tomadoggy](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/tomadoggy/32/34065_2.png) [@Tomadoggy](https://discourse.nodered.org/u/Tomadoggy)
#### Post date: [19 December 2020 18:46 UTC](https://discourse.nodered.org/t/help-with-styling-ui-gauges-with-function/37730/30 "2020-12-19T18:46:59Z")

</div>

Ahhh...of course, thank you!

---

<div class="post-metadata">

### Author: ![Tomadoggy](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/tomadoggy/32/34065_2.png) [@Tomadoggy](https://discourse.nodered.org/u/Tomadoggy)
#### Post date: [21 December 2020 15:41 UTC](https://discourse.nodered.org/t/help-with-styling-ui-gauges-with-function/37730/31 "2020-12-21T15:41:52Z")

</div>

> [@hotNipi](#):
>
> A bit higher, not touching the bottom edge.

Just some feedback on the gauge icon. It appears that the icon placement within the gauge is not dependent upon the actual gauge itself or the site widget size (which I have changed around to see effects). You can see the various pad from the bottom changing depending upon the icon chosen in the image below. Certainly not an issue for me...just FYI.

 ![gaugeicons](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/3/836c8e93d17e9fb87b430f3e27eaa2fc7b47ad85.png)

---

<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: [19 February 2021 15:42 UTC](https://discourse.nodered.org/t/help-with-styling-ui-gauges-with-function/37730/32 "2021-02-19T15:42:06Z")

</div>

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

[Previous page](https://discourse.nodered.org/t/help-with-styling-ui-gauges-with-function/37730.md?page=1)