# Stylesheet for "site \ section" with classes & sub-classes **URL:** \ **Category:** General\ **Created:** [28 January 2023 16:09 UTC](https://discourse.nodered.org/t/stylesheet-for-site-head-section-with-classes-sub-classes/74308 "2023-01-28T16:09:00Z")\ **Posts on this page:** 20\ **Page:** 1

**Author:** ![henkkas](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/henkkas/32/39844_2.png) [@henkkas](https://discourse.nodered.org/u/henkkas)\ **Post date:** [28 January 2023 16:09 UTC](https://discourse.nodered.org/t/stylesheet-for-site-head-section-with-classes-sub-classes/74308/1 "2023-01-28T16:09:00Z")

I have made a template object "levelbar". This object is working fine for me. But now I want to make it universally applicable, not only in one place but in several flows. So I want de style sheet migrate from "Widget in a group" to ."site section". Can anybody tell me what is the best way to make a "style"-object for this kind of template nodes, so I don't need a style sheet within de template node anymore? ![afbeelding](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/c/9c13dea8d318729a495e7c5e98ef894b787a215a.png) ```auto [{"id":"99cfa91925e450ee","type":"ui_template","z":"7c6ad896ba8a384a","group":"1ee7777a616ea4cf","name":"test CSS","order":1,"width":8,"height":2,"format":"\n \n\n\n\n\n

\n\n

\n {{msg.val}} \n {{msg.valunit}} \n

\n {{msg.accum}} \n {{msg.accumunit}} \n

\n\n\n

\n \n\n\n","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":true,"templateScope":"local","className":"","x":960,"y":1220,"wires":[[]]},{"id":"dae74185e46cfec7","type":"function","z":"7c6ad896ba8a384a","name":"Prepare levelbar","func":"let val = msg.payload;\nlet scale = 2000;\nlet perc = (val / scale * 100).toString() + \"%\";\n\n\nmsg.title = \"test levelbar\";\nmsg.topic = \"Flow\";\nmsg.val = val;\nmsg.valperc = perc;\nmsg.valunit = \"L/h\";\nmsg.accum = 23.5;\nmsg.accumunit = \"m³\";\n\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":780,"y":1220,"wires":[["99cfa91925e450ee"]]},{"id":"4fe7e9250730fc37","type":"ui_slider","z":"7c6ad896ba8a384a","name":"","label":"slider","tooltip":"","group":"1ee7777a616ea4cf","order":2,"width":8,"height":1,"passthru":true,"outs":"all","topic":"topic","topicType":"msg","min":0,"max":"2000","step":1,"className":"","x":590,"y":1220,"wires":[["dae74185e46cfec7"]]},{"id":"1ee7777a616ea4cf","type":"ui_group","name":"Test CSS","tab":"ad12ad91.ab672","order":1,"disp":true,"width":"8","collapse":false,"className":""},{"id":"ad12ad91.ab672","type":"ui_tab","name":"Test","icon":"dashboard","disabled":false,"hidden":false}] ``` ---

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\ **Post date:** [28 January 2023 16:33 UTC](https://discourse.nodered.org/t/stylesheet-for-site-head-section-with-classes-sub-classes/74308/2 "2023-01-28T16:33:37Z")

Separate the style from the html and javascript, then you can place the css in the head. p.s. Do not use \ or \ tags in the ui-template node, as they are already added by the dashboard. e.g. ```auto [{"id":"4fe7e9250730fc37","type":"ui_slider","z":"da8a6ef0b3c9a5c8","name":"","label":"slider","tooltip":"","group":"1ee7777a616ea4cf","order":2,"width":8,"height":1,"passthru":true,"outs":"all","topic":"topic","topicType":"msg","min":0,"max":"2000","step":1,"className":"","x":170,"y":4100,"wires":[["dae74185e46cfec7"]]},{"id":"dae74185e46cfec7","type":"function","z":"da8a6ef0b3c9a5c8","name":"Prepare levelbar","func":"let val = msg.payload;\nlet scale = 2000;\nlet perc = (val / scale * 100).toString() + \"%\";\n\n\nmsg.title = \"test levelbar\";\nmsg.topic = \"Flow\";\nmsg.val = val;\nmsg.valperc = perc;\nmsg.valunit = \"L/h\";\nmsg.accum = 23.5;\nmsg.accumunit = \"m³\";\n\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":360,"y":4100,"wires":[["99cfa91925e450ee"]]},{"id":"99cfa91925e450ee","type":"ui_template","z":"da8a6ef0b3c9a5c8","group":"1ee7777a616ea4cf","name":"html ","order":1,"width":8,"height":2,"format":"

\n\n

\n {{msg.val}} \n {{msg.valunit}} \n

\n {{msg.accum}} \n {{msg.accumunit}} \n

\n\n\n

\n \n\n","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":true,"templateScope":"local","className":"","x":530,"y":4100,"wires":[[]]},{"id":"a3f824caf938809a","type":"ui_template","z":"da8a6ef0b3c9a5c8","group":"2d4fe667.28f8ba","name":"css head","order":21,"width":0,"height":0,"format":" ","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","className":"","x":520,"y":4040,"wires":[[]]},{"id":"1ee7777a616ea4cf","type":"ui_group","name":"Test CSS","tab":"ad12ad91.ab672","order":1,"disp":true,"width":"8","collapse":false,"className":""},{"id":"2d4fe667.28f8ba","type":"ui_group","name":"demo","tab":"1caa8458.b17814","order":2,"disp":true,"width":"12","collapse":false},{"id":"ad12ad91.ab672","type":"ui_tab","name":"Test","icon":"dashboard","disabled":false,"hidden":false},{"id":"1caa8458.b17814","type":"ui_tab","name":"Demo","icon":"dashboard","order":1,"disabled":false,"hidden":false}] ``` ---

**Author:** ![henkkas](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/henkkas/32/39844_2.png) [@henkkas](https://discourse.nodered.org/u/henkkas)\ **Post date:** [28 January 2023 16:50 UTC](https://discourse.nodered.org/t/stylesheet-for-site-head-section-with-classes-sub-classes/74308/3 "2023-01-28T16:50:56Z")

@E1cid That's indeed the shortest way to do that. But what I was looking for is a way to make this object and items in the style sheet "unique" to this object, so somehow to reference to this object's style sheet. If there are other templates that refer to class "units" for instance, the will use these properties also, which is undesirable. By the way, thanks for the tip about `` and ``, I didn't know that. 🙂 ---

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\ **Post date:** [28 January 2023 17:29 UTC](https://discourse.nodered.org/t/stylesheet-for-site-head-section-with-classes-sub-classes/74308/4 "2023-01-28T17:29:17Z")

The apply a uniquie id to the class referencing. e.g. ```auto [{"id":"4fe7e9250730fc37","type":"ui_slider","z":"da8a6ef0b3c9a5c8","name":"","label":"slider","tooltip":"","group":"1ee7777a616ea4cf","order":2,"width":8,"height":1,"passthru":true,"outs":"all","topic":"topic","topicType":"msg","min":0,"max":"2000","step":1,"className":"","x":170,"y":4100,"wires":[["dae74185e46cfec7"]]},{"id":"dae74185e46cfec7","type":"function","z":"da8a6ef0b3c9a5c8","name":"Prepare levelbar","func":"let val = msg.payload;\nlet scale = 2000;\nlet perc = (val / scale * 100).toString() + \"%\";\n\nmsg.id = \"my_uniquie_id\";\nmsg.title = \"test levelbar\";\nmsg.topic = \"Flow\";\nmsg.val = val;\nmsg.valperc = perc;\nmsg.valunit = \"L/h\";\nmsg.accum = 23.5;\nmsg.accumunit = \"m³\";\n\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":360,"y":4100,"wires":[["99cfa91925e450ee"]]},{"id":"99cfa91925e450ee","type":"ui_template","z":"da8a6ef0b3c9a5c8","group":"1ee7777a616ea4cf","name":"html ","order":1,"width":8,"height":2,"format":"\n \n

\n\n

\n {{msg.val}} \n {{msg.valunit}} \n

\n {{msg.accum}} \n {{msg.accumunit}} \n

\n\n\n

\n \n\n","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":true,"templateScope":"local","className":"","x":530,"y":4100,"wires":[[]]},{"id":"1ee7777a616ea4cf","type":"ui_group","name":"Test CSS","tab":"ad12ad91.ab672","order":1,"disp":true,"width":"8","collapse":false,"className":""},{"id":"ad12ad91.ab672","type":"ui_tab","name":"Test","icon":"dashboard","disabled":false,"hidden":false}] ``` If I understand you correctly. ---

**Author:** ![henkkas](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/henkkas/32/39844_2.png) [@henkkas](https://discourse.nodered.org/u/henkkas)\ **Post date:** [28 January 2023 18:06 UTC](https://discourse.nodered.org/t/stylesheet-for-site-head-section-with-classes-sub-classes/74308/5 "2023-01-28T18:06:13Z")

@E1cid Thank you, but no, that was not what I was looking for. Your early solution was the direction I wanted to go, but now I want to reference this object within the CSS head in a unique way with some reference to it there from within the html template node. Is that possible? ---

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\ **Post date:** [28 January 2023 18:10 UTC](https://discourse.nodered.org/t/stylesheet-for-site-head-section-with-classes-sub-classes/74308/6 "2023-01-28T18:10:56Z")

Really think you have to describe with examples what you are attempting to do, as i am unsure. ---

**Author:** ![henkkas](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/henkkas/32/39844_2.png) [@henkkas](https://discourse.nodered.org/u/henkkas)\ **Post date:** [28 January 2023 18:25 UTC](https://discourse.nodered.org/t/stylesheet-for-site-head-section-with-classes-sub-classes/74308/7 "2023-01-28T18:25:16Z")

@E1cid I want to create in the CSS head a main-class `levelbar`, with sub-classes `.unit`,`.container`, `.topic` etc... So theses sub-classes then belong to the main-class `levelbar`. Then in the html template node I refer to main-class `levelbar` and sub-class `.unit` or something.... The sub-classes ONLY belong to main-class `levelbar`. I don't know how to explain it better. I saw some examples about `"sections"` ???, which I did't understand and didn't work. Also I saw examples with CSS style sheet `#SomeReferenceName` also didn't work. So, that's why I asked this question here. I know where I want to go, just don't know how to get there...🙂 ---

**Author:** ![henkkas](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/henkkas/32/39844_2.png) [@henkkas](https://discourse.nodered.org/u/henkkas)\ **Post date:** [28 January 2023 18:40 UTC](https://discourse.nodered.org/t/stylesheet-for-site-head-section-with-classes-sub-classes/74308/8 "2023-01-28T18:40:06Z")

@E1cid Yes, I think I finally found it now. At least I think it is working as it should. Here is what I meant, ```auto [{"id":"3eec247ab797738d","type":"ui_template","z":"7c6ad896ba8a384a","group":"4bf25a0f46ff12fc","name":"css head","order":21,"width":0,"height":0,"format":"","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","className":"","x":600,"y":1420,"wires":[[]]},{"id":"54b465757ca6de18","type":"ui_slider","z":"7c6ad896ba8a384a","name":"","label":"slider","tooltip":"","group":"1ee7777a616ea4cf","order":2,"width":8,"height":1,"passthru":true,"outs":"all","topic":"topic","topicType":"msg","min":0,"max":"2000","step":1,"className":"","x":250,"y":1460,"wires":[["e924fea8c8864148"]]},{"id":"e924fea8c8864148","type":"function","z":"7c6ad896ba8a384a","name":"Prepare levelbar","func":"let val = msg.payload;\nlet scale = 2000;\nlet perc = (val / scale * 100).toString() + \"%\";\n\n\nmsg.title = \"test levelbar\";\nmsg.topic = \"Flow\";\nmsg.val = val;\nmsg.valperc = perc;\nmsg.valunit = \"L/h\";\nmsg.accum = 23.5;\nmsg.accumunit = \"m³\";\n\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":440,"y":1460,"wires":[["65ae56c6f9c56a44"]]},{"id":"65ae56c6f9c56a44","type":"ui_template","z":"7c6ad896ba8a384a","group":"1ee7777a616ea4cf","name":"html ","order":1,"width":8,"height":2,"format":"

\n\n

\n {{msg.val}} \n {{msg.valunit}} \n

\n {{msg.accum}} \n {{msg.accumunit}} \n

\n\n\n

\n\n\n","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":true,"templateScope":"local","className":"","x":610,"y":1460,"wires":[[]]},{"id":"4bf25a0f46ff12fc","type":"ui_group","name":"demo","tab":"5b9deea7450bedb7","order":2,"disp":true,"width":"12","collapse":false},{"id":"1ee7777a616ea4cf","type":"ui_group","name":"Test CSS","tab":"ad12ad91.ab672","order":1,"disp":true,"width":"8","collapse":false,"className":""},{"id":"5b9deea7450bedb7","type":"ui_tab","name":"CSS Head","icon":"dashboard","order":1,"disabled":false,"hidden":false},{"id":"ad12ad91.ab672","type":"ui_tab","name":"Test","icon":"dashboard","disabled":false,"hidden":false}] ``` Please comment, if this is the right way to go, or not. ---

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\ **Post date:** [28 January 2023 19:03 UTC](https://discourse.nodered.org/t/stylesheet-for-site-head-section-with-classes-sub-classes/74308/9 "2023-01-28T19:03:43Z")

Output using your nested css ![chrome_screenshot_1674932466307](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/c/5c159ef432b907da1b702f636dd5275e900b485d.png) I am no expert in css but i think this is more correct. Please some one correct me if i am wrong please. ```auto ``` Output ![chrome_screenshot_1674932363414](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/4/c481253b65f8368f1df3d692a389b77b218172d1.png) You may find more css experts on stackoverflow. ---

**Author:** ![henkkas](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/henkkas/32/39844_2.png) [@henkkas](https://discourse.nodered.org/u/henkkas)\ **Post date:** [28 January 2023 19:20 UTC](https://discourse.nodered.org/t/stylesheet-for-site-head-section-with-classes-sub-classes/74308/10 "2023-01-28T19:20:59Z")

> [@E1cid](#): > > You may find more css experts on stackoverflow That is strange, with me it seems to work perfectly. I saw this example in stackoverflow. > Look at the bottom of the page!!! Never the less, I will try your solution too. ---

**Author:** ![henkkas](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/henkkas/32/39844_2.png) [@henkkas](https://discourse.nodered.org/u/henkkas)\ **Post date:** [28 January 2023 19:26 UTC](https://discourse.nodered.org/t/stylesheet-for-site-head-section-with-classes-sub-classes/74308/11 "2023-01-28T19:26:38Z")

@E1cid Both options seem to work well. Look at this example with both options. It just a question now, what is the best solution. ```auto [{"id":"3eec247ab797738d","type":"ui_template","z":"7c6ad896ba8a384a","group":"4bf25a0f46ff12fc","name":"css head","order":21,"width":0,"height":0,"format":"","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","className":"","x":600,"y":1420,"wires":[[]]},{"id":"54b465757ca6de18","type":"ui_slider","z":"7c6ad896ba8a384a","name":"","label":"slider","tooltip":"","group":"1ee7777a616ea4cf","order":2,"width":8,"height":1,"passthru":true,"outs":"all","topic":"topic","topicType":"msg","min":0,"max":"2000","step":1,"className":"","x":250,"y":1460,"wires":[["e924fea8c8864148"]]},{"id":"e924fea8c8864148","type":"function","z":"7c6ad896ba8a384a","name":"Prepare levelbar","func":"let val = msg.payload;\nlet scale = 2000;\nlet perc = (val / scale * 100).toString() + \"%\";\n\n\nmsg.title = \"test levelbar\";\nmsg.topic = \"Flow\";\nmsg.val = val;\nmsg.valperc = perc;\nmsg.valunit = \"L/h\";\nmsg.accum = 23.5;\nmsg.accumunit = \"m³\";\n\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":440,"y":1460,"wires":[["65ae56c6f9c56a44"]]},{"id":"65ae56c6f9c56a44","type":"ui_template","z":"7c6ad896ba8a384a","group":"1ee7777a616ea4cf","name":"html ","order":1,"width":8,"height":2,"format":"

\n\n

\n {{msg.val}} \n {{msg.valunit}} \n

\n {{msg.accum}} \n {{msg.accumunit}} \n

\n\n\n

\n\n\n","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":true,"templateScope":"local","className":"","x":610,"y":1460,"wires":[[]]},{"id":"6a18efda44556dee","type":"ui_template","z":"7c6ad896ba8a384a","d":true,"group":"4bf25a0f46ff12fc","name":"css head","order":21,"width":0,"height":0,"format":"","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","className":"","x":440,"y":1420,"wires":[[]]},{"id":"4bf25a0f46ff12fc","type":"ui_group","name":"demo","tab":"5b9deea7450bedb7","order":2,"disp":true,"width":"12","collapse":false},{"id":"1ee7777a616ea4cf","type":"ui_group","name":"Test CSS","tab":"ad12ad91.ab672","order":1,"disp":true,"width":"8","collapse":false,"className":""},{"id":"5b9deea7450bedb7","type":"ui_tab","name":"CSS Head","icon":"dashboard","order":1,"disabled":false,"hidden":false},{"id":"ad12ad91.ab672","type":"ui_tab","name":"Test","icon":"dashboard","disabled":false,"hidden":false}] ``` ---

**Author:** ![Buckskin](https://avatars.discourse-cdn.com/v4/letter/b/b9e5f3/32.png) [@Buckskin](https://discourse.nodered.org/u/Buckskin)\ **Post date:** [29 January 2023 01:18 UTC](https://discourse.nodered.org/t/stylesheet-for-site-head-section-with-classes-sub-classes/74308/12 "2023-01-29T01:18:57Z")

Also try the `css template node` as `widget in group`, and `levelbar` in the Class property of the `html template node`, seems to work OK ---

**Author:** ![henkkas](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/henkkas/32/39844_2.png) [@henkkas](https://discourse.nodered.org/u/henkkas)\ **Post date:** [29 January 2023 06:39 UTC](https://discourse.nodered.org/t/stylesheet-for-site-head-section-with-classes-sub-classes/74308/13 "2023-01-29T06:39:53Z")

@Buckskin That's fine, but the whole idea was to make 1 standard style sheet for different objects. I don't like style sheets all over the place. This way I have got better control over all standard objects that I have and are going to make and will be located in several flows. ---

**Author:** ![henkkas](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/henkkas/32/39844_2.png) [@henkkas](https://discourse.nodered.org/u/henkkas)\ **Post date:** [29 January 2023 08:09 UTC](https://discourse.nodered.org/t/stylesheet-for-site-head-section-with-classes-sub-classes/74308/14 "2023-01-29T08:09:05Z")

@E1cid @Buckskin I am still testing and to my surprise, when I throw away all the style sheets about levelbar, the levelbar still behaves good, even when I reboot the device. I don't understand this. Is it possible that the style definition somehow is added to the **internal** node-red style??? ---

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\ **Post date:** [29 January 2023 08:14 UTC](https://discourse.nodered.org/t/stylesheet-for-site-head-section-with-classes-sub-classes/74308/15 "2023-01-29T08:14:38Z")

Did you refresh the browser? ---

**Author:** ![henkkas](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/henkkas/32/39844_2.png) [@henkkas](https://discourse.nodered.org/u/henkkas)\ **Post date:** [29 January 2023 08:19 UTC](https://discourse.nodered.org/t/stylesheet-for-site-head-section-with-classes-sub-classes/74308/16 "2023-01-29T08:19:13Z")

@E1cid Right!!! Stupid!!! 😄 ---

**Author:** ![henkkas](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/henkkas/32/39844_2.png) [@henkkas](https://discourse.nodered.org/u/henkkas)\ **Post date:** [29 January 2023 12:05 UTC](https://discourse.nodered.org/t/stylesheet-for-site-head-section-with-classes-sub-classes/74308/17 "2023-01-29T12:05:09Z")

@E1cid @Buckskin Well, this is the best solution I can find. I tried nesting the style sheet in many ways, but that didn't work out well. ```auto [{"id":"54b465757ca6de18","type":"ui_slider","z":"7c6ad896ba8a384a","name":"","label":"slider","tooltip":"","group":"1ee7777a616ea4cf","order":2,"width":8,"height":1,"passthru":true,"outs":"all","topic":"val","topicType":"str","min":0,"max":"2000","step":1,"className":"","x":270,"y":1100,"wires":[["e924fea8c8864148"]]},{"id":"e924fea8c8864148","type":"function","z":"7c6ad896ba8a384a","name":"Prepare levelbar","func":"if (msg.topic == \"color\") {\n context.set('color', msg.payload);\n return;\n}\n\nlet val = msg.payload;\nlet scale = 2000;\nlet perc = (val / scale * 100).toString() + \"%\";\n\nmsg.title = \"test levelbar\";\nmsg.topic = \"Flow\";\nmsg.val = val;\nmsg.valperc = perc;\nmsg.valunit = \"L/h\";\nmsg.accum = 23.5;\nmsg.accumunit = \"m³\";\nmsg.color = context.get('color');\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":460,"y":1100,"wires":[["65ae56c6f9c56a44","f32302f1bf0812c7"]]},{"id":"65ae56c6f9c56a44","type":"ui_template","z":"7c6ad896ba8a384a","group":"1ee7777a616ea4cf","name":"html ","order":1,"width":8,"height":4,"format":"

\n\n

\n {{msg.val}} \n {{msg.valunit}} \n

\n {{msg.accum}} \n {{msg.accumunit}} \n

\n\n

\n {{msg.val}} \n {{msg.valunit}} \n

\n {{msg.accum}} \n {{msg.accumunit}} \n

\n \n

\n\n\n","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":false,"templateScope":"local","className":"","x":630,"y":1100,"wires":[[]]},{"id":"acefb41055b12bdc","type":"ui_switch","z":"7c6ad896ba8a384a","name":"color","label":"switch","tooltip":"","group":"1ee7777a616ea4cf","order":3,"width":2,"height":1,"passthru":true,"decouple":"false","topic":"color","topicType":"str","style":"","onvalue":"red","onvalueType":"str","onicon":"","oncolor":"","offvalue":"#00B33C","offvalueType":"str","officon":"","offcolor":"","animate":false,"className":"","x":290,"y":1180,"wires":[["e924fea8c8864148"]]},{"id":"f32302f1bf0812c7","type":"debug","z":"7c6ad896ba8a384a","name":"debug 60","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":600,"y":1200,"wires":[]},{"id":"8b4aae400f851b1f","type":"ui_template","z":"7c6ad896ba8a384a","group":"3b579126a3c6b783","name":"css head","order":21,"width":0,"height":0,"format":"","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":false,"templateScope":"global","className":"","x":660,"y":1140,"wires":[[]]},{"id":"1ee7777a616ea4cf","type":"ui_group","name":"Test CSS","tab":"ad12ad91.ab672","order":1,"disp":true,"width":"8","collapse":true,"className":""},{"id":"3b579126a3c6b783","type":"ui_group","name":"Group 1","tab":"e49783f47fbb4b80","order":1,"disp":true,"width":6},{"id":"ad12ad91.ab672","type":"ui_tab","name":"Test","icon":"dashboard","disabled":false,"hidden":false},{"id":"e49783f47fbb4b80","type":"ui_tab","name":"dummy","icon":"dashboard","order":10,"disabled":false,"hidden":false}] ``` ---

**Author:** ![Buckskin](https://avatars.discourse-cdn.com/v4/letter/b/b9e5f3/32.png) [@Buckskin](https://discourse.nodered.org/u/Buckskin)\ **Post date:** [29 January 2023 18:10 UTC](https://discourse.nodered.org/t/stylesheet-for-site-head-section-with-classes-sub-classes/74308/18 "2023-01-29T18:10:56Z")

Or you could have the best of both worlds. 😀 ```auto [{"id":"66008618e96a63c4","type":"ui_template","z":"cbf497889c72d4b4","group":"c2b8581bd452b94e","name":"css head","order":9,"width":0,"height":0,"format":"","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":3160,"y":4000,"wires":[[]]},{"id":"24ab48f3506251ef","type":"ui_slider","z":"cbf497889c72d4b4","name":"","label":"slider","tooltip":"","group":"c2b8581bd452b94e","order":7,"width":8,"height":1,"passthru":true,"outs":"all","topic":"topic","topicType":"msg","min":0,"max":"2000","step":1,"className":"","x":2810,"y":4040,"wires":[["643441388c9a1662"]]},{"id":"643441388c9a1662","type":"function","z":"cbf497889c72d4b4","name":"Prepare levelbar","func":"if (msg.topic == \"color\") {\n context.set('color', msg.payload)\n return\n}\n\nlet val = msg.payload\nlet scale = 2000\nlet perc = (val / scale * 100).toString() + \"%\"\n\nmsg.title = \"test levelbar\"\nmsg.topic = \"Flow\"\nmsg.val = val\nmsg.valperc = perc\nmsg.valunit = \"L/h\"\nmsg.accum = 23.5\nmsg.accumunit = \"m³\"\nmsg.color = context.get('color')\n\nreturn msg","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":3000,"y":4040,"wires":[["3bec904d73251913"]]},{"id":"3bec904d73251913","type":"ui_template","z":"cbf497889c72d4b4","group":"c2b8581bd452b94e","name":"html ","order":6,"width":8,"height":2,"format":"

\n\n

\n {{msg.val}} \n {{msg.valunit}} \n

\n {{msg.accum}} \n {{msg.accumunit}} \n

\n\n\n

","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":true,"templateScope":"local","className":"showbar","x":3170,"y":4040,"wires":[[]],"info":"

\r\n\r\n

\r\n

\r\n {{msg.val}} \r\n {{msg.valunit}} \r\n

\r\n

\r\n {{msg.accum}} \r\n {{msg.accumunit}} \r\n

\r\n\r\n\r\n

"},{"id":"a1293c0321f74941","type":"ui_switch","z":"cbf497889c72d4b4","name":"color","label":"switch","tooltip":"","group":"c2b8581bd452b94e","order":8,"width":2,"height":1,"passthru":true,"decouple":"false","topic":"color","topicType":"str","style":"","onvalue":"red","onvalueType":"str","onicon":"","oncolor":"","offvalue":"#00B33C","offvalueType":"str","officon":"","offcolor":"","animate":false,"className":"switch-blue","x":2810,"y":4100,"wires":[["643441388c9a1662"]]},{"id":"c2b8581bd452b94e","type":"ui_group","name":"Slide Example","tab":"6ff5405c.a8e6","order":14,"disp":true,"width":8,"collapse":false,"className":""},{"id":"6ff5405c.a8e6","type":"ui_tab","name":"CSS Tester","icon":"dashboard","order":12,"disabled":false,"hidden":false}] ``` I think this is just a matter of personal preference and I find that having my own CSS styles in the head section confuses me because I forget what I have already added and where I am using them. Adding a style to the widget reminds me what style I am using in that widget. Having said that, I do put changes to Dashboard styles in the head section. ---

**Author:** ![henkkas](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/henkkas/32/39844_2.png) [@henkkas](https://discourse.nodered.org/u/henkkas)\ **Post date:** [30 January 2023 07:04 UTC](https://discourse.nodered.org/t/stylesheet-for-site-head-section-with-classes-sub-classes/74308/19 "2023-01-30T07:04:42Z")

@Buckskin Yes, indeed a good solution too. ---

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\ **Post date:** [31 March 2023 07:05 UTC](https://discourse.nodered.org/t/stylesheet-for-site-head-section-with-classes-sub-classes/74308/20 "2023-03-31T07:05:41Z")

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