# Node-RED theme only for for some ui\_template nodes

**URL:** <https://discourse.nodered.org/t/node-red-theme-only-for-for-some-ui-template-nodes/38457>\
**Category:** Dashboard\
**Created:** [3 January 2021 13:27 UTC](https://discourse.nodered.org/t/node-red-theme-only-for-for-some-ui-template-nodes/38457 "2021-01-03T13:27:46Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![fermurbaa](https://avatars.discourse-cdn.com/v4/letter/f/ecccb3/32.png) [@fermurbaa](https://discourse.nodered.org/u/fermurbaa)\
**Post date:** [3 January 2021 13:27 UTC](https://discourse.nodered.org/t/node-red-theme-only-for-for-some-ui-template-nodes/38457/1 "2021-01-03T13:27:46Z")

</div>

Hi,  
I have set the site option to 'Use Angular theme in ui\_template' because I don't want the Node-RED theme generally in most ui\_templates nodes.  
Is it possible to use (or re-enable) the Node-RED theme only for some specific ui\_template nodes?

---

<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:** [3 January 2021 14:19 UTC](https://discourse.nodered.org/t/node-red-theme-only-for-for-some-ui-template-nodes/38457/2 "2021-01-03T14:19:41Z")

</div>

There isn't any options at the node's level for such treatment. I think it will be easier to use node-red theme everywhere and then override CSS where it will be needed.

---

<div class="post-metadata">

**Author:** ![fermurbaa](https://avatars.discourse-cdn.com/v4/letter/f/ecccb3/32.png) [@fermurbaa](https://discourse.nodered.org/u/fermurbaa)\
**Post date:** [3 January 2021 17:19 UTC](https://discourse.nodered.org/t/node-red-theme-only-for-for-some-ui-template-nodes/38457/3 "2021-01-03T17:19:44Z")

</div>

> [@hotNipi](#):
>
> I think it will be easier to use node-red theme everywhere and then override CSS where it will be needed.

Yes, I had thought the other way around, maybe I just had to add a class to the outermost div in the template or something like that?! But I haven't found one...

My next try is to remove the 'nr-dashboard-disabled' attribute with javascript, but I think there is maybe an much simpler solution?

 ![grafik](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/c/5ce9a93911a32139cd4e8c593faa7af486539b53.png)

---

<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:** [3 January 2021 17:38 UTC](https://discourse.nodered.org/t/node-red-theme-only-for-for-some-ui-template-nodes/38457/4 "2021-01-03T17:38:28Z")

</div>

Here is the basics how to reach elements only in one card to modify the CSS.

```auto
[{"id":"2db46e63.6938a2","type":"ui_text","z":"e8af3254.77f7e","group":"f4fa889e.bb1b78","order":0,"width":0,"height":0,"name":"","label":"TEXT NODE","format":"{{msg.payload}}","layout":"row-spread","x":390,"y":260,"wires":[]},{"id":"dc93a1bc.2787b","type":"ui_template","z":"e8af3254.77f7e","group":"f4fa889e.bb1b78","name":"","order":1,"width":0,"height":0,"format":"<div id=\"div_in_template\" ng-bind-html=\"msg.payload\"></div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":400,"y":320,"wires":[[]]},{"id":"299f66a1.806e4a","type":"inject","z":"e8af3254.77f7e","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"TEXT FOR TEMPLATE","payloadType":"str","x":210,"y":320,"wires":[["dc93a1bc.2787b"]]},{"id":"a93e3929.bd1098","type":"inject","z":"e8af3254.77f7e","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"SOMETHING","payloadType":"str","x":200,"y":260,"wires":[["2db46e63.6938a2"]]},{"id":"ef360779.612e58","type":"ui_text","z":"e8af3254.77f7e","group":"d22df206.7e25d","order":0,"width":0,"height":0,"name":"","label":"TEXT NODE","format":"{{msg.payload}}","layout":"row-spread","x":430,"y":380,"wires":[]},{"id":"ecbdc37c.df0b3","type":"ui_template","z":"e8af3254.77f7e","group":"d22df206.7e25d","name":"","order":1,"width":0,"height":0,"format":"<div id=\"div_in_template\" ng-bind-html=\"msg.payload\"></div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":440,"y":440,"wires":[[]]},{"id":"848f150e.8512c8","type":"inject","z":"e8af3254.77f7e","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"TEXT FOR TEMPLATE","payloadType":"str","x":250,"y":440,"wires":[["ecbdc37c.df0b3"]]},{"id":"98ae6c4.667e29","type":"inject","z":"e8af3254.77f7e","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"SOMETHING","payloadType":"str","x":240,"y":380,"wires":[["ef360779.612e58"]]},{"id":"e99ccfe5.5a8f","type":"ui_template","z":"e8af3254.77f7e","group":"f4fa889e.bb1b78","name":"CSS","order":2,"width":0,"height":0,"format":"<style id=\"dashboard_style_override\">\n \n #Home_Other_cards > md-card.nr-dashboard-template.visible{\n background:red;\n }\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":370,"y":180,"wires":[[]]},{"id":"f4fa889e.bb1b78","type":"ui_group","name":"Default","tab":"2055516c.c5c88e","order":1,"disp":true,"width":"6","collapse":false},{"id":"d22df206.7e25d","type":"ui_group","name":"Other","tab":"2055516c.c5c88e","order":2,"disp":true,"width":"6","collapse":false},{"id":"2055516c.c5c88e","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

```

It all depends what you are trying to do, there is a lot of selector tricks for CSS so you can reach needed elements and do what ever needed.

---

<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:** [2 February 2021 17:38 UTC](https://discourse.nodered.org/t/node-red-theme-only-for-for-some-ui-template-nodes/38457/5 "2021-02-02T17:38:37Z")

</div>

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