How to address specific Main CSS Classes?

Dashboard
1

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

2

Be sure that your ui_template for CSS is configured to be added to site head.

image
image649Ă—564 20.4 KB

1 Like
3

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

4

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 ....

5

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?

6

Something like this

[{"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}]
7

Yes Something like this. Thank you so much! :slight_smile:

8

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

9

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 :slight_smile:

Thanks in Advance

10

Can't say much, no Pi equipment available.
You can test the jQuery support with your Pi by going to jQuery Effects - Fading and try the examples.

11

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