# How to make a style variable in css ui-tample node

**URL:** <https://discourse.nodered.org/t/how-to-make-a-style-variable-in-css-ui-tample-node/99231>\
**Category:** General\
**Tags:** dashboard-2, ui-template\
**Created:** [1 October 2025 14:02 UTC](https://discourse.nodered.org/t/how-to-make-a-style-variable-in-css-ui-tample-node/99231 "2025-10-01T14:02:18Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![kelvin\_S](https://avatars.discourse-cdn.com/v4/letter/k/5fc32e/32.png) [@kelvin\_S](https://discourse.nodered.org/u/kelvin_S)\
**Post date:** [1 October 2025 14:02 UTC](https://discourse.nodered.org/t/how-to-make-a-style-variable-in-css-ui-tample-node/99231/1 "2025-10-01T14:02:18Z")

</div>

Dear all,

I'm making a dashboard and i have a line that can visualize when energy is flowing,

ui-template code:

```auto
<div style="position: relative; width: 190px; height: 40px;">
  <div class="energy-line" style="position: absolute; width: 190px; height: 5px; background-color: #888;">
    <div class="glow-dot" style="animation-delay: 0s;"></div>
    <div class="glow-dot" style="animation-delay: 0.2s;"></div>
    <div class="glow-dot" style="animation-delay: 0.4s;"></div>
    <div class="glow-dot" style="animation-delay: 0.6s;"></div>
    <div class="glow-dot" style="animation-delay: 0.8s;"></div>
    <div class="glow-dot" style="animation-delay: 1s;"></div>
    <div class="glow-dot" style="animation-delay: 1.2s;"></div>
    <div class="glow-dot" style="animation-delay: 1.4s;"></div>
    <div class="glow-dot" style="animation-delay: 1.6s;"></div>
    <div class="glow-dot" style="animation-delay: 1.8s;"></div>
  </div>
</div>

<style>
  .energy-line {
    position: relative;
    overflow: hidden;
  }

  .glow-dot {
    position: absolute;
    top: -3px;
    left: -10px;
    width: 10px;
    height: 10px;
    background-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 5px 3px rgba(0, 148, 206, 0.8);
    border-radius: 50%;
    animation: energy-flow 2s linear infinite;
    display: block; //how to change this parameter with un injection node??\\
  }

  @keyframes energy-flow {
    from {
      left: -10px;
    }

    to {
      left: 190px;
    }
  }
</style>

```

problem is i want to switch the line on en off on demand.

the style parameter i want to use for that would be .glow-dot display.  
block means on and none means off,

I would love to do that with un injection node, using msg.payload.

but what ever i try it is not working.

who could help me? i'm using dashboard 2.0

---

<div class="post-metadata">

**Author:** ![omrid](https://avatars.discourse-cdn.com/v4/letter/o/77aa72/32.png) [@omrid](https://discourse.nodered.org/u/omrid)\
**Post date:** [1 October 2025 15:37 UTC](https://discourse.nodered.org/t/how-to-make-a-style-variable-in-css-ui-tample-node/99231/2 "2025-10-01T15:37:20Z")

</div>

You can bind the element style to a data variable in your data area, so that it changes dynamically per the data you set in the variable, by using `:style` instead of `style`.

```auto
// HTML
<v-btn :style="{ backgroundColor: buttonColor }">Click Me</v-btn>

// JS
data() {
  return {
    buttonColor: xxx //set this dynamically
  }
}

```

---

<div class="post-metadata">

**Author:** ![kelvin\_S](https://avatars.discourse-cdn.com/v4/letter/k/5fc32e/32.png) [@kelvin\_S](https://discourse.nodered.org/u/kelvin_S)\
**Post date:** [6 October 2025 08:38 UTC](https://discourse.nodered.org/t/how-to-make-a-style-variable-in-css-ui-tample-node/99231/3 "2025-10-06T08:38:41Z")

</div>

Dear Omrid,

could you give me an example with my code instead of a generic one?

I'm still not able to make it switch off en on

kind regards Kelvin\_S

---

<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:** [6 October 2025 10:22 UTC](https://discourse.nodered.org/t/how-to-make-a-style-variable-in-css-ui-tample-node/99231/4 "2025-10-06T10:22:14Z")

</div>

The better way to do this is design your classes to target elements and ADD/REMOVE the parent class (v1)

Alternatively, you can use `msg` props and apply the class per element (harder to maintain) (v2)

![chrome_WRty8t2mbo](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/0/60a41c24eff3360a1c7d7fac309ced5fddc06e3b.gif)

Example Flow (use `CTRL-I` to import)

```json
[{"id":"0dd806ee26fa4c52","type":"ui-template","z":"a95e9b94b8531275","group":"e1c6e6cb771c2108","page":"","ui":"","name":"","order":2,"width":0,"height":0,"head":"","format":"<div style=\"position: relative; width: 190px; height: 40px;\">\n <div class=\"energy-line\" style=\"position: absolute; width: 190px; height: 5px; background-color: #888;\">\n <div :class=\"msg?.payload === true ? 'glow-dot' : ''\" style=\"animation-delay: 0s;\"></div>\n <div :class=\"msg?.payload === true ? 'glow-dot' : ''\" style=\"animation-delay: 0.2s;\"></div>\n <div :class=\"msg?.payload === true ? 'glow-dot' : ''\" style=\"animation-delay: 0.4s;\"></div>\n <div :class=\"msg?.payload === true ? 'glow-dot' : ''\" style=\"animation-delay: 0.6s;\"></div>\n <div :class=\"msg?.payload === true ? 'glow-dot' : ''\" style=\"animation-delay: 0.8s;\"></div>\n <div :class=\"msg?.payload === true ? 'glow-dot' : ''\" style=\"animation-delay: 1s;\"></div>\n <div :class=\"msg?.payload === true ? 'glow-dot' : ''\" style=\"animation-delay: 1.2s;\"></div>\n <div :class=\"msg?.payload === true ? 'glow-dot' : ''\" style=\"animation-delay: 1.4s;\"></div>\n <div :class=\"msg?.payload === true ? 'glow-dot' : ''\" style=\"animation-delay: 1.6s;\"></div>\n <div :class=\"msg?.payload === true ? 'glow-dot' : ''\" style=\"animation-delay: 1.8s;\"></div>\n </div>\n</div>\n","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":2280,"y":1440,"wires":[[]]},{"id":"aba8e40397501c8c","type":"inject","z":"a95e9b94b8531275","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"true","payloadType":"bool","x":2110,"y":1420,"wires":[["0dd806ee26fa4c52"]]},{"id":"d2f691ed89666e26","type":"inject","z":"a95e9b94b8531275","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"false","payloadType":"bool","x":2110,"y":1460,"wires":[["0dd806ee26fa4c52"]]},{"id":"65f8825abfc91437","type":"comment","z":"a95e9b94b8531275","name":"V2 - use payload to condition application of styles","info":"","x":2220,"y":1380,"wires":[]},{"id":"fbbb671ac878f4b1","type":"ui-template","z":"a95e9b94b8531275","group":"e1c6e6cb771c2108","page":"","ui":"","name":"","order":1,"width":0,"height":0,"head":"","format":"<div style=\"position: relative; width: 190px; height: 40px;\">\n <div class=\"energy-line\" style=\"position: absolute; width: 190px; height: 5px; background-color: #888;\">\n <div style=\"animation-delay: 0s;\"></div>\n <div style=\"animation-delay: 0.2s;\"></div>\n <div style=\"animation-delay: 0.4s;\"></div>\n <div style=\"animation-delay: 0.6s;\"></div>\n <div style=\"animation-delay: 0.8s;\"></div>\n <div style=\"animation-delay: 1s;\"></div>\n <div style=\"animation-delay: 1.2s;\"></div>\n <div style=\"animation-delay: 1.4s;\"></div>\n <div style=\"animation-delay: 1.6s;\"></div>\n <div style=\"animation-delay: 1.8s;\"></div>\n </div>\n</div>\n","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":2280,"y":1280,"wires":[[]]},{"id":"f5b0d6b0d66d09ae","type":"inject","z":"a95e9b94b8531275","name":"power-on","props":[{"p":"ui_update.class","v":"power-on","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":2120,"y":1260,"wires":[["fbbb671ac878f4b1"]]},{"id":"43842466d5f67121","type":"ui-template","z":"a95e9b94b8531275","group":"","page":"","ui":"03482f22997a66ac","name":"Styles","order":0,"width":0,"height":0,"head":"","format":"\n.energy-line {\n position: relative;\n overflow: hidden;\n}\n\n/* target via power-on class and selectors - v1 */\n.power-on .energy-line > div {\n position: absolute;\n top: -3px;\n left: -10px;\n width: 10px;\n height: 10px;\n background-color: rgba(255, 255, 255, 0.5);\n box-shadow: 0 0 5px 3px rgba(0, 148, 206, 0.8);\n border-radius: 50%;\n animation: energy-flow 2s linear infinite;\n display: block;\n}\n\n/* applied manually v2 */\n.glow-dot {\n position: absolute;\n top: -3px;\n left: -10px;\n width: 10px;\n height: 10px;\n background-color: rgba(255, 255, 255, 0.5);\n box-shadow: 0 0 5px 3px rgba(0, 148, 206, 0.8);\n border-radius: 50%;\n animation: energy-flow 2s linear infinite;\n display: block;\n}\n\n@keyframes energy-flow {\n from {\n left: -10px;\n }\n\n to {\n left: 190px;\n }\n}","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"site:style","className":"","x":2090,"y":1160,"wires":[[]]},{"id":"482d604a41e78e76","type":"comment","z":"a95e9b94b8531275","name":"V1 - add/remove class","info":"","x":2140,"y":1220,"wires":[]},{"id":"56a508ad831ffd27","type":"inject","z":"a95e9b94b8531275","name":"power-off","props":[{"p":"ui_update.class","v":"power-off","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":2120,"y":1300,"wires":[["fbbb671ac878f4b1"]]},{"id":"5287694cbe1d19a3","type":"comment","z":"a95e9b94b8531275","name":"Define CSS separatly so it \\n can be used in other templates","info":"","x":2170,"y":1100,"wires":[]},{"id":"e1c6e6cb771c2108","type":"ui-group","name":"test","page":"cf478244c05a3ad7","width":"12","height":1,"order":1,"showTitle":false,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"03482f22997a66ac","type":"ui-base","name":"My Dashboard","path":"/dashboard","appIcon":"","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"headerContent":"page","navigationStyle":"default","titleBarStyle":"default","showReconnectNotification":true,"notificationDisplayTime":1,"showDisconnectNotification":true,"allowInstall":false},{"id":"cf478244c05a3ad7","type":"ui-page","name":"Tasks","ui":"03482f22997a66ac","path":"/pagex","icon":"home","layout":"grid","theme":"6cf98fc8cedde7c6","breakpoints":[{"name":"Default","px":"0","cols":"3"},{"name":"Tablet","px":"576","cols":"6"},{"name":"Desktop","px":"1024","cols":"12"}],"order":1,"className":"","visible":true,"disabled":false},{"id":"6cf98fc8cedde7c6","type":"ui-theme","name":"Green","colors":{"surface":"#ffffff","primary":"#01bb0c","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#b1dd8c"},"sizes":{"density":"comfortable","pagePadding":"12px","groupGap":"12px","groupBorderRadius":"9px","widgetGap":"18px"}},{"id":"be814b4cb5622085","type":"global-config","env":[],"modules":{"@flowfuse/node-red-dashboard":"1.28.0"}}]

```

---

<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:** [4 January 2026 10:22 UTC](https://discourse.nodered.org/t/how-to-make-a-style-variable-in-css-ui-tample-node/99231/5 "2026-01-04T10:22:15Z")

</div>

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