# How to address specific Main CSS Classes?

**URL:** <https://discourse.nodered.org/t/how-to-address-specific-main-css-classes/39497>\
**Category:** Dashboard\
**Created:** [21 January 2021 13:56 UTC](https://discourse.nodered.org/t/how-to-address-specific-main-css-classes/39497 "2021-01-21T13:56:24Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![Mirco\_H](https://avatars.discourse-cdn.com/v4/letter/m/779978/32.png) [@Mirco\_H](https://discourse.nodered.org/u/Mirco_H)\
**Post date:** [21 January 2021 13:56 UTC](https://discourse.nodered.org/t/how-to-address-specific-main-css-classes/39497/1 "2021-01-21T13:56:24Z")

</div>

Hey there,

I try to change some CSS on my Dashboard.  
I know i can use the Ui\_template but it's not working like it should.

Is it possible and how can I adress e.g. this Class =\> class="nr-dashboard-cardcontainer" id="Main\_CNC\_cards"` ?

Thanks for every answer.

Mirco

---

<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:** [21 January 2021 16:41 UTC](https://discourse.nodered.org/t/how-to-address-specific-main-css-classes/39497/2 "2021-01-21T16:41:26Z")

</div>

Be sure that your ui\_template for CSS is configured to be added to site head.

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

---

<div class="post-metadata">

**Author:** ![Mirco\_H](https://avatars.discourse-cdn.com/v4/letter/m/779978/32.png) [@Mirco\_H](https://discourse.nodered.org/u/Mirco_H)\
**Post date:** [27 January 2021 06:49 UTC](https://discourse.nodered.org/t/how-to-address-specific-main-css-classes/39497/3 "2021-01-27T06:49:22Z")

</div>

Thanks, I willl try it later today. Hope it will work.  
Maybe you can Answer me another Question?

I have a Rc522 RFID Card Reader on my rPi and send diffrent Messages based on which card is presented.  
The uitext node can receive them but I try to fade in/out every Message that arrives. Some Idea for a Solution?

Thanks in Advance

Mirco

---

<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:** [27 January 2021 10:24 UTC](https://discourse.nodered.org/t/how-to-address-specific-main-css-classes/39497/4 "2021-01-27T10:24:14Z")

</div>

If you want to do something like:  
fadeOut -\> change text to new payload \> fadeIn  
then it will be reasonable to make it with `ui_template` node and use `jquery fadeOut/fadeIn` chain.

But if my understanding is not correct ....

---

<div class="post-metadata">

**Author:** ![Mirco\_H](https://avatars.discourse-cdn.com/v4/letter/m/779978/32.png) [@Mirco\_H](https://discourse.nodered.org/u/Mirco_H)\
**Post date:** [27 January 2021 12:04 UTC](https://discourse.nodered.org/t/how-to-address-specific-main-css-classes/39497/5 "2021-01-27T12:04:08Z")

</div>

Yes I think you understand my Problem. Can you please show me how and in which way to use the ui\_template?  
I don't know how to address it.  
Just or in line css changes?

---

<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:** [27 January 2021 12:49 UTC](https://discourse.nodered.org/t/how-to-address-specific-main-css-classes/39497/6 "2021-01-27T12:49:19Z")

</div>

Something like this

```auto
[{"id":"e709dc02.32591","type":"inject","z":"dee586f8.76a168","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"5","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":330,"y":1340,"wires":[["c560959d.897b38"]]},{"id":"c560959d.897b38","type":"ui_template","z":"dee586f8.76a168","group":"ad9b95d4.4d2718","name":"fading text","order":12,"width":"6","height":"1","format":"<style>\n .fadingtext{\n margin: auto 15px auto 5px;\n }\n</style>\n<div class=\"fadingtext\" id=\"{{'my_'+$id}}\"></div>\n\n<script>\n(function(scope) {\n scope.visible = document.visibilityState === 'visible'\n document.addEventListener(\"visibilitychange\", function() {\n if (document.visibilityState === 'visible') {\n scope.visible = true;\n } else {\n scope.visible = false;\n }\n });\n scope.$watch('msg', function(msg) {\n if (msg) {\n if(scope.visible){\n $(\"#my_\"+scope.$id).fadeOut(function() {\n $(this).text(msg.payload)\n }\n ).fadeIn();\n }\n else{\n $(\"#my_\"+scope.$id).text(msg.payload) \n }\n }\n });\n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":530,"y":1340,"wires":[[]]},{"id":"ad9b95d4.4d2718","type":"ui_group","name":"Default","tab":"c38fb46f.de97f8","order":4,"disp":true,"width":"6","collapse":false},{"id":"c38fb46f.de97f8","type":"ui_tab","name":"Controls","icon":"dashboard","disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![Mirco\_H](https://avatars.discourse-cdn.com/v4/letter/m/779978/32.png) [@Mirco\_H](https://discourse.nodered.org/u/Mirco_H)\
**Post date:** [28 January 2021 15:56 UTC](https://discourse.nodered.org/t/how-to-address-specific-main-css-classes/39497/7 "2021-01-28T15:56:34Z")

</div>

Yes Something like this. Thank you so much! 🙂

---

<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:** [28 January 2021 16:00 UTC](https://discourse.nodered.org/t/how-to-address-specific-main-css-classes/39497/8 "2021-01-28T16:00:53Z")

</div>

Updated the flow in previous post to make things work more reliably

---

<div class="post-metadata">

**Author:** ![Mirco\_H](https://avatars.discourse-cdn.com/v4/letter/m/779978/32.png) [@Mirco\_H](https://discourse.nodered.org/u/Mirco_H)\
**Post date:** [1 February 2021 07:28 UTC](https://discourse.nodered.org/t/how-to-address-specific-main-css-classes/39497/9 "2021-02-01T07:28:56Z")

</div>

Thanks a Lot! I tested your code, now I have a little problem.  
When i access the Dashboard from my Laptop in Firefox, your code appears with fadein/out, Perfectly.  
When I access it from Pi himself, neither in Chromium nor in Firefox-esr it fades. Maybe the Browser doesn't support this or there are false preferneces:

Maybe someone can help me 🙂

Thanks in Advance

---

<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:** [2 February 2021 08:46 UTC](https://discourse.nodered.org/t/how-to-address-specific-main-css-classes/39497/10 "2021-02-02T08:46:02Z")

</div>

Can't say much, no Pi equipment available.  
You can test the `jQuery` support with your Pi by going to [jQuery Effects - Fading](https://www.w3schools.com/jquery/jquery_fade.asp) and try the examples.

---

<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:** [16 February 2021 08:46 UTC](https://discourse.nodered.org/t/how-to-address-specific-main-css-classes/39497/11 "2021-02-16T08:46:19Z")

</div>

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