Stylesheet for "site <head> section" with classes & sub-classes

General
1

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

[{"id":"99cfa91925e450ee","type":"ui_template","z":"7c6ad896ba8a384a","group":"1ee7777a616ea4cf","name":"test CSS","order":1,"width":8,"height":2,"format":"<head>\n    <style>\n        * {\n            box-sizing: border-box;\n        }\n\n        .container {\n            width: 100%;\n            font-size: 80%;\n        }\n\n        .topic {\n            font-size: 95%;\n            font-weight: 500;\n            color: #00cc66;\n        }\n\n        .val {\n            width: 20%;\n            text-align: right;\n            font-weight: 700;\n            background-color: #333333;\n            float: left;\n        }\n        .accum {\n            width: 20%;\n            text-align: right;\n            font-weight: 700;\n            background-color: #333333;\n            float: left;\n        }\n\n        .units {\n            height: 0.8em;\n            line-height: 2.5em;\n            text-align: center;\n            padding: 0;\n            margin: 0;\n            float: right;\n            font-size: 65%;\n        }\n\n        .box {\n            width: 60%;\n            background-color: #544e4e;\n            float: left;\n        }\n\n        .levelBox {\n            padding-top: 7px;\n            padding-bottom: 7px;\n        }\n\n        .levelGreen {\n            background-color: #00B33C;\n        }\n\n        .levelRed {\n            background-color: red;\n        }\n\n    </style>\n</head>\n\n<body>\n\n    <p style=\"font-size: 100%; text-align: center;\">{{msg.title}}</p>\n\n    <div class=\"container\">\n\n        <p><span class=\"topic\">{{msg.topic}}</span></p>\n        <div class=\"val\">\n            <span>{{msg.val}}&nbsp</span>\n            <span class=\"units\">{{msg.valunit}}&nbsp</span>\n        </div>\n        <div class=\"box\">\n            <div class=\"levelBox levelRed\" style=\"width:{{msg.valperc}};\"></div>\n        </div>\n        <div class=\"accum\">\n            <span>{{msg.accum}}&nbsp</span>\n            <span class=\"units\">{{msg.accumunit}}&nbsp</span>\n        </div>\n\n\n    </div>\n \n</body>\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}]
2

Separate the style from the html and javascript, then you can place the css in the head.

p.s. Do not use <head> or <body> tags in the ui-template node, as they are already added by the dashboard.
e.g.

[{"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":"<p style=\"font-size: 100%; text-align: center;\">{{msg.title}}</p>\n\n    <div class=\"container\">\n\n        <p><span class=\"topic\">{{msg.topic}}</span></p>\n        <div class=\"val\">\n            <span>{{msg.val}}&nbsp</span>\n            <span class=\"units\">{{msg.valunit}}&nbsp</span>\n        </div>\n        <div class=\"box\">\n            <div class=\"levelBox levelRed\" style=\"width:{{msg.valperc}};\"></div>\n        </div>\n        <div class=\"accum\">\n            <span>{{msg.accum}}&nbsp</span>\n            <span class=\"units\">{{msg.accumunit}}&nbsp</span>\n        </div>\n\n\n    </div>\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":"  <style>\n        * {\n            box-sizing: border-box;\n        }\n\n        .container {\n            width: 100%;\n            font-size: 80%;\n        }\n\n        .topic {\n            font-size: 95%;\n            font-weight: 500;\n            color: #00cc66;\n        }\n\n        .val {\n            width: 20%;\n            text-align: right;\n            font-weight: 700;\n            background-color: #333333;\n            float: left;\n        }\n        .accum {\n            width: 20%;\n            text-align: right;\n            font-weight: 700;\n            background-color: #333333;\n            float: left;\n        }\n\n        .units {\n            height: 0.8em;\n            line-height: 2.5em;\n            text-align: center;\n            padding: 0;\n            margin: 0;\n            float: right;\n            font-size: 65%;\n        }\n\n        .box {\n            width: 60%;\n            background-color: #544e4e;\n            float: left;\n        }\n\n        .levelBox {\n            padding-top: 7px;\n            padding-bottom: 7px;\n        }\n\n        .levelGreen {\n            background-color: #00B33C;\n        }\n\n        .levelRed {\n            background-color: red;\n        }\n\n    </style>","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}]
3

@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 <head> and <body>, I didn't know that. :slight_smile:

4

The apply a uniquie id to the class referencing.
e.g.

[{"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":"<style>\n        * {\n            box-sizing: border-box;\n        }\n\n        .{{msg.id}}container {\n            width: 100%;\n            font-size: 80%;\n        }\n\n        .{{msg.id}}topic {\n            font-size: 95%;\n            font-weight: 500;\n            color: #00cc66;\n        }\n\n        .{{msg.id}}val {\n            width: 20%;\n            text-align: right;\n            font-weight: 700;\n            background-color: #333333;\n            float: left;\n        }\n        .{{msg.id}}accum {\n            width: 20%;\n            text-align: right;\n            font-weight: 700;\n            background-color: #333333;\n            float: left;\n        }\n\n        .{{msg.id}}units {\n            height: 0.8em;\n            line-height: 2.5em;\n            text-align: center;\n            padding: 0;\n            margin: 0;\n            float: right;\n            font-size: 65%;\n        }\n\n        .{{msg.id}}box {\n            width: 60%;\n            background-color: #544e4e;\n            float: left;\n        }\n\n        .{{msg.id}}levelBox {\n            padding-top: 7px;\n            padding-bottom: 7px;\n        }\n\n        .{{msg.id}}levelGreen {\n            background-color: #00B33C;\n        }\n\n        .{{msg.id}}levelRed {\n            background-color: red;\n        }\n\n    </style>\n    \n    <p style=\"font-size: 100%; text-align: center;\">{{msg.title}}</p>\n\n    <div class=\"{{msg.id}}container\">\n\n        <p><span class=\"{{msg.id}}topic\">{{msg.topic}}</span></p>\n        <div class=\"{{msg.id}}val\">\n            <span>{{msg.val}}&nbsp</span>\n            <span class=\"{{msg.id}}units\">{{msg.valunit}}&nbsp</span>\n        </div>\n        <div class=\"{{msg.id}}box\">\n            <div class=\"{{msg.id}}levelBox {{msg.id}}levelRed\" style=\"width:{{msg.valperc}};\"></div>\n        </div>\n        <div class=\"{{msg.id}}accum\">\n            <span>{{msg.accum}}&nbsp</span>\n            <span class=\"{{msg.id}}units\">{{msg.accumunit}}&nbsp</span>\n        </div>\n\n\n    </div>\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.

5

@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?

6

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

7

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

8

@E1cid Yes, I think I finally found it now. At least I think it is working as it should. Here is what I meant,

[{"id":"3eec247ab797738d","type":"ui_template","z":"7c6ad896ba8a384a","group":"4bf25a0f46ff12fc","name":"css head","order":21,"width":0,"height":0,"format":"<style>\n    .levelbar { * { box-sizing: border-box; }\n        .container {\n            width: 100%;\n            font-size: 80%;\n        }\n        .topic {\n            font-size: 95%;\n            font-weight: 500;\n            color: #00cc66;\n        }\n        .val {\n            width: 20%;\n            text-align: right;\n            font-weight: 700;\n            background-color: #333333;\n            float: left;\n        }\n        .accum {\n            width: 20%;\n            text-align: right;\n            font-weight: 700;\n            background-color: #333333;\n            float: left;\n        }\n        .units {\n            height: 0.8em;\n            line-height: 2.5em;\n            text-align: center;\n            padding: 0;\n            margin: 0;\n            float: right;\n            font-size: 65%;\n        }\n        .box {\n            width: 60%;\n            background-color: #544e4e;\n            float: left;\n        }\n\n        .levelBox {\n            padding-top: 7px;\n            padding-bottom: 7px;\n        }\n\n        .levelGreen {\n            background-color: #00B33C;\n        }\n\n        .levelRed {\n            background-color: red;\n        }\n    }\n\n    .anotherobject {\n        .container {background-color: black;}\n        .accum {background-color: black;}\n        .levelBox {background-color: black;}\n        .units {background-color: black;}\n        .box {background-color: yellow;}    \n    }\n\n</style>","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":"<p style=\"font-size: 100%; text-align: center;\">{{msg.title}}</p>\n\n<div class=\"levelbar container\">\n\n    <p><span class=\"levelbar topic\">{{msg.topic}}</span></p>\n    <div class=\"levelbar val\">\n        <span>{{msg.val}}&nbsp</span>\n        <span class=\"levelbar units\">{{msg.valunit}}&nbsp</span>\n    </div>\n    <div class=\"levelbar box\">\n        <div class=\"levelbar levelBox levelRed\" style=\"width:{{msg.valperc}};\"></div>\n    </div>\n    <div class=\"levelbar accum\">\n        <span>{{msg.accum}}&nbsp</span>\n        <span class=\"levelbar units\">{{msg.accumunit}}&nbsp</span>\n    </div>\n\n\n</div>\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.

9

Output using your nested css

chrome_screenshot_1674932466307
chrome_screenshot_16749324663072048×1058 99 KB

I am no expert in css but i think this is more correct. Please some one correct me if i am wrong please.

<style>
         .levelbar * {
            box-sizing: border-box;
        }

         .levelbar .container {
            width: 100%;
            font-size: 80%;
        }

         .levelbar .topic {
            font-size: 95%;
            font-weight: 500;
            color: #00cc66;
        }

         .levelbar .val {
            width: 20%;
            text-align: right;
            font-weight: 700;
            background-color: #333333;
            float: left;
        }

         .levelbar .accum {
            width: 20%;
            text-align: right;
            font-weight: 700;
            background-color: #333333;
            float: left;
        }

         .levelbar .units {
            height: 0.8em;
            line-height: 2.5em;
            text-align: center;
            padding: 0;
            margin: 0;
            float: right;
            font-size: 65%;
        }

         .levelbar .box {
            width: 60%;
            background-color: #544e4e;
            float: left;
        }

         .levelbar .levelBox {
            padding-top: 7px;
            padding-bottom: 7px;
        }

         .levelbar .levelGreen {
            background-color: #00B33C;
        }

         .levelbar .levelRed {
            background-color: red;
        }
    
</style>

Output

chrome_screenshot_1674932363414
chrome_screenshot_16749323634142048×983 91.5 KB

You may find more css experts on stackoverflow.

10

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.

11

@E1cid Both options seem to work well. Look at this example with both options. It just a question now, what is the best solution.

[{"id":"3eec247ab797738d","type":"ui_template","z":"7c6ad896ba8a384a","group":"4bf25a0f46ff12fc","name":"css head","order":21,"width":0,"height":0,"format":"<style>\n    .levelbar * {\n        box-sizing: border-box;\n    }\n\n    .levelbar .container {\n        width: 100%;\n        font-size: 80%;\n    }\n\n    .levelbar .topic {\n        font-size: 95%;\n        font-weight: 500;\n        color: #00cc66;\n    }\n\n    .levelbar .val {\n        width: 20%;\n        text-align: right;\n        font-weight: 700;\n        background-color: #333333;\n        float: left;\n    }\n\n    .levelbar .accum {\n        width: 20%;\n        text-align: right;\n        font-weight: 700;\n        background-color: #333333;\n        float: left;\n    }\n\n    .levelbar .units {\n        height: 0.8em;\n        line-height: 2.5em;\n        text-align: center;\n        padding: 0;\n        margin: 0;\n        float: right;\n        font-size: 65%;\n    }\n\n    .levelbar .box {\n        width: 60%;\n        background-color: #544e4e;\n        float: left;\n    }\n\n    .levelbar .levelBox {\n        padding-top: 7px;\n        padding-bottom: 7px;\n    }\n\n    .levelbar .levelGreen {\n        background-color: #00B33C;\n    }\n\n    .levelbar .levelRed {\n        background-color: red;\n    }\n\n    .anotherobject \n    .anotherobject .container {background-color: black;}\n    .anotherobject .accum {background-color: black;}\n    .anotherobject .levelBox {background-color: black;}\n    .anotherobject .units {background-color: black;}\n    .anotherobject .box {background-color: yellow;}\n    \n</style>","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":"<p style=\"font-size: 100%; text-align: center;\">{{msg.title}}</p>\n\n<div class=\"levelbar container\">\n\n    <p><span class=\"levelbar topic\">{{msg.topic}}</span></p>\n    <div class=\"levelbar val\">\n        <span>{{msg.val}}&nbsp</span>\n        <span class=\"levelbar units\">{{msg.valunit}}&nbsp</span>\n    </div>\n    <div class=\"levelbar box\">\n        <div class=\"levelbar levelBox levelRed\" style=\"width:{{msg.valperc}};\"></div>\n    </div>\n    <div class=\"levelbar accum\">\n        <span>{{msg.accum}}&nbsp</span>\n        <span class=\"levelbar units\">{{msg.accumunit}}&nbsp</span>\n    </div>\n\n\n</div>\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":"<style>\n    .levelbar { * { box-sizing: border-box; }\n        .container {\n            width: 100%;\n            font-size: 80%;\n        }\n        .topic {\n            font-size: 95%;\n            font-weight: 500;\n            color: #00cc66;\n        }\n        .val {\n            width: 20%;\n            text-align: right;\n            font-weight: 700;\n            background-color: #333333;\n            float: left;\n        }\n        .accum {\n            width: 20%;\n            text-align: right;\n            font-weight: 700;\n            background-color: #333333;\n            float: left;\n        }\n        .units {\n            height: 0.8em;\n            line-height: 2.5em;\n            text-align: center;\n            padding: 0;\n            margin: 0;\n            float: right;\n            font-size: 65%;\n        }\n        .box {\n            width: 60%;\n            background-color: #544e4e;\n            float: left;\n        }\n\n        .levelBox {\n            padding-top: 7px;\n            padding-bottom: 7px;\n        }\n\n        .levelGreen {\n            background-color: #00B33C;\n        }\n\n        .levelRed {\n            background-color: red;\n        }\n    }\n\n    .anotherobject {\n        .container {background-color: black;}\n        .accum {background-color: black;}\n        .levelBox {background-color: black;}\n        .units {background-color: black;}\n        .box {background-color: yellow;}    \n    }\n\n</style>","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}]
12

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

13

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

14

@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???

15

Did you refresh the browser?

16

@E1cid Right!!! Stupid!!! :smile:

17

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

[{"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":"    <p style=\"font-size: 100%; text-align: center;\">{{msg.title}}</p>\n\n    <div id=\"levelbar\">\n\n        <div class=\"container\">\n            <p><span class = \"topic\">{{msg.topic}}</span></p>\n            <div class = \"val\">\n                <span>{{msg.val}}&nbsp</span>\n                <span class = \"units\">{{msg.valunit}}&nbsp</span>\n            </div>\n            <div class = \"box\">\n                <div class = \"levelBox\" style=\"background-color:{{msg.color}}; width:{{msg.valperc}};\"></div>\n            </div>\n            <div class = \"accum\">\n                <span>{{msg.accum}}&nbsp</span>\n                <span class = \"units\">{{msg.accumunit}}&nbsp</span>\n            </div>\n\n            <p><span class = \"topic\">{{msg.topic}}</span></p>\n            <div class = \"val\">\n                <span>{{msg.val}}&nbsp</span>\n                <span class = \"units\">{{msg.valunit}}&nbsp</span>\n            </div>\n            <div class = \"box\">\n                <div class = \"levelBox\" style=\"background-color:{{msg.color}}; width:{{msg.valperc}};\"></div>\n            </div>\n            <div class = \"accum\">\n                <span>{{msg.accum}}&nbsp</span>\n                <span class = \"units\">{{msg.accumunit}}&nbsp</span>\n            </div>\n            \n        </div>\n    </div>\n\n<!-- <div class=\"levelbar levelBox\" style=\"background-color:{{msg.color}}; width:{{msg.valperc}};\"></div> -->\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":"<style>\n#levelbar { * { box-sizing: border-box;  } }\n\n    #levelbar .container {\n        width: 100%;\n        font-size: 80%;\n    }\n\n    #levelbar .topic {\n        font-size: 95%;\n        font-weight: 500;\n        color: #00cc66;\n    }\n\n    #levelbar .val {\n        width: 20%;\n        text-align: right;\n        font-weight: 700;\n        background-color: #333333;\n        float: left;\n    }\n\n    #levelbar .accum {\n        width: 20%;\n        text-align: right;\n        font-weight: 700;\n        background-color: #333333;\n        float: left;\n    }\n\n    #levelbar .units {\n        height: 0.8em;\n        line-height: 2.5em;\n        text-align: center;\n        padding: 0;\n        margin: 0;\n        float: right;\n        font-size: 65%;\n    }\n\n    #levelbar .box {\n        width: 60%;\n        background-color: #544e4e;\n        float: left;\n    }\n\n    #levelbar .levelBox {\n        padding-top: 7px;\n        padding-bottom: 7px;\n    }\n}\n\n\n    .anotherobject .anotherobject .container {\n        background-color: black;\n    }\n\n    .anotherobject .accum {\n        background-color: black;\n    }\n\n    .anotherobject .levelBox {\n        background-color: black;\n    }\n\n    .anotherobject .units {\n        background-color: black;\n    }\n\n    .anotherobject .box {\n        background-color: yellow;\n    }\n</style>","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}]
18

Or you could have the best of both worlds. :grinning:

[{"id":"66008618e96a63c4","type":"ui_template","z":"cbf497889c72d4b4","group":"c2b8581bd452b94e","name":"css head","order":9,"width":0,"height":0,"format":"<style>\n    .showbar * {\n        box-sizing: border-box;\n    }\n\n    .showbar .container {\n        width: 100%;\n        font-size: 80%;\n    }\n\n    .showbar .topic {\n        font-size: 95%;\n        font-weight: 500;\n        color: #00cc66;\n    }\n\n    .showbar .val {\n        width: 20%;\n        text-align: right;\n        font-weight: 700;\n        background-color: whitesmoke;\n        float: left;\n    }\n\n    .showbar .accum {\n        width: 20%;\n        text-align: right;\n        font-weight: 700;\n        background-color: whitesmoke;\n        float: left;\n    }\n\n    .showbar .units {\n        height: 0.8em;\n        line-height: 2.5em;\n        text-align: center;\n        padding: 0;\n        margin: 0;\n        float: right;\n        font-size: 65%;\n    }\n\n    .showbar .box {\n        width: 60%;\n        background-color: #544e4e;\n        float: left;\n    }\n\n    .showbar .levelBox {\n        padding-top: 7px;\n        padding-bottom: 7px;\n    }\n\n    .showbar .levelGreen {\n        background-color: #00B33C;\n    }\n\n    .showbar .levelRed {\n        background-color: red;\n    }\n\n    /* Switch Background */\n    .switch-blue{\n    background: blue !important;\n    width: 30% !important;\n    \n    }\n    \n    .switch-blue > p {\n    color: white;\n    }\n    \n    /* Switch When Off */\n    .switch-blue > md-switch .md-thumb{\n    background: #00B33C !important;\n    \n    }\n    \n    /* Switch When On */\n    .switch-blue > md-switch.md-checked .md-thumb{\n    background: red !important;\n    \n    }\n    \n</style>","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":"<p style=\"font-size: 100%; text-align: center;\">{{msg.title}}</p>\n\n<div class=\"showbar container\">\n\n    <p><span class=\"showbar topic\">{{msg.topic}}</span></p>\n    <div class=\"showbar val\">\n        <span>{{msg.val}}&nbsp</span>\n        <span class=\"showbar units\">{{msg.valunit}}&nbsp</span>\n    </div>\n    <div class=\"showbar box\">\n        <div class=\"showbar levelBox\" style=\"background-color:{{msg.color}}; width:{{msg.valperc}};\"></div>\n    </div>\n    <div class=\"showbar accum\">\n        <span>{{msg.accum}}&nbsp</span>\n        <span class=\"showbar units\">{{msg.accumunit}}&nbsp</span>\n    </div>\n\n\n</div>","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":true,"templateScope":"local","className":"showbar","x":3170,"y":4040,"wires":[[]],"info":"<p style=\"font-size: 100%; text-align: center;\">{{msg.title}}</p>\r\n\r\n<div class=\"showbar container\">\r\n\r\n    <p><span class=\"showbar topic\">{{msg.topic}}</span></p>\r\n    <div class=\"showbar val\">\r\n        <span>{{msg.val}}&nbsp</span>\r\n        <span class=\"showbar units\">{{msg.valunit}}&nbsp</span>\r\n    </div>\r\n    <div class=\"showbar box\">\r\n        <div class=\"showbar levelBox levelRed\" style=\"width:{{msg.valperc}};\"></div>\r\n    </div>\r\n    <div class=\"showbar accum\">\r\n        <span>{{msg.accum}}&nbsp</span>\r\n        <span class=\"showbar units\">{{msg.accumunit}}&nbsp</span>\r\n    </div>\r\n\r\n\r\n</div>"},{"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.

19

@Buckskin Yes, indeed a good solution too.

20

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