Dashboard template individual Text input manipulation

Dashboard
1

Hello,

complete CSS beginner here. I would like to assign attributes to individual nodes. Strange thing that template node doesn't assign all properties. I'm able to change font-family, font-size and background color, but unable to change Text color and adjust alignment so that Text would be above line:

image

[{"id":"16de9227c83d1c56","type":"ui_text_input","z":"b48a69981cda79b5","name":"","label":"","tooltip":"","group":"6eb635e620e400ff","order":0,"width":0,"height":0,"passthru":true,"mode":"text","delay":300,"topic":"topic","sendOnBlur":true,"className":"","topicType":"msg","x":200,"y":260,"wires":[[]]},{"id":"95dacacef10c9c0e","type":"ui_template","z":"b48a69981cda79b5","group":"6eb635e620e400ff","name":"","order":1,"width":0,"height":0,"format":"<style>\n    [node-id=\"16de9227c83d1c56\"] {\n        color: red !important;\n        background-color: green !important;\n        font-size: 40px;\n        height:unset;\n        font-family: \"Times New Roman\", serif;\n        \n    }\n</style>\n\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":200,"y":320,"wires":[[]]},{"id":"6eb635e620e400ff","type":"ui_group","name":"","tab":"3410bb34f2bc4d84","order":1,"disp":true,"width":"12","collapse":false,"className":""},{"id":"3410bb34f2bc4d84","type":"ui_tab","name":"Control","icon":"dashboard","disabled":false,"hidden":false}]

Template:

<style>
    [node-id="16de9227c83d1c56"] {
        color: red !important;
        background-color: green !important;
        font-size: 40px;
        height: unset;
        font-family: "Times New Roman", serif;
        
    }
</style>
NodeRed log 
Welcome to Node-RED

===================



5 Aug 09:36:29 - [info] Node-RED version: v3.0.2

5 Aug 09:36:29 - [info] Node.js  version: v16.16.0

5 Aug 09:36:29 - [info] Linux 5.15.0-43-generic x64 LE

5 Aug 09:36:30 - [info] Loading palette nodes

5 Aug 9:36:31 - [s7comm-Error] - Installation of Module net-keepalive failed because we might be on the wrong OS. OS=linux

5 Aug 9:36:31 - [s7comm-Info] - Debug configuration for logLevelNodeS7:{"debug":0,"silent":true}

5 Aug 9:36:31 - [s7comm-Info] - Debug configuration for logLevelNodeRED:{"debug":2,"silent":true}

5 Aug 09:36:31 - [info] Dashboard version 3.1.7 started at /ui

5 Aug 09:36:31 - [info] Settings file  : /data/settings.js

5 Aug 09:36:31 - [info] Context store  : 'default' [module=memory]

5 Aug 09:36:31 - [info] User directory : /data

5 Aug 09:36:31 - [warn] Projects disabled : editorTheme.projects.enabled=false

5 Aug 09:36:31 - [info] Flows file     : /data/flows.json

5 Aug 09:36:31 - [info] Creating new flow file

5 Aug 09:36:31 - [warn] 



---------------------------------------------------------------------

Your flow credentials file is encrypted using a system-generated key.



If the system-generated key is lost for any reason, your credentials

file will not be recoverable, you will have to delete it and re-enter

your credentials.



You should set your own key using the 'credentialSecret' option in

your settings file. Node-RED will then re-encrypt your credentials

file using your chosen key the next time you deploy a change.

---------------------------------------------------------------------



5 Aug 09:36:31 - [warn] Encrypted credentials not found

5 Aug 09:36:31 - [info] Server now running at http://127.0.0.1:8888/

5 Aug 09:36:31 - [info] Starting flows

5 Aug 09:36:31 - [info] Started flows

This problem appeared on Windows and on docker.

P.S
Could somebody give a link to guide or small example how to properly use CSS class in nodered?
image

2

Here is a small example - output text. Not sure it's "proper"!

Untitled 1

Untitled 2

[{"id":"419e8a7f494d3e4a","type":"tab","label":"Flow 2","disabled":false,"info":"","env":[]},{"id":"aad14546386feddd","type":"ui_text","z":"419e8a7f494d3e4a","group":"4e5d0bbdb2d727a5","order":1,"width":0,"height":0,"name":"Default text","label":"default text","format":"{{msg.payload}}","layout":"row-spread","className":"","x":470,"y":120,"wires":[]},{"id":"4d73043ff4547e08","type":"ui_text","z":"419e8a7f494d3e4a","group":"4e5d0bbdb2d727a5","order":2,"width":0,"height":0,"name":"Red Text","label":"Red text","format":"{{msg.payload}}","layout":"row-spread","className":"red","x":460,"y":160,"wires":[]},{"id":"ae1a7a21fc03f66e","type":"ui_text","z":"419e8a7f494d3e4a","group":"4e5d0bbdb2d727a5","order":4,"width":0,"height":0,"name":"Big Red Text","label":"Big Red text with Capitals","format":"{{msg.payload}}","layout":"row-spread","className":"big red capital","x":470,"y":240,"wires":[]},{"id":"c77d3a870ef34a76","type":"ui_text","z":"419e8a7f494d3e4a","group":"4e5d0bbdb2d727a5","order":3,"width":0,"height":0,"name":"Big Text","label":"Big text","format":"{{msg.payload}}","layout":"row-spread","className":"big","x":460,"y":200,"wires":[]},{"id":"8c02640b919b8beb","type":"ui_template","z":"419e8a7f494d3e4a","group":"4e5d0bbdb2d727a5","name":"","order":5,"width":0,"height":0,"format":"<style>\n.red p.value{\n    color: red;\n}\n\n.big p.value{\n    font-size: 2em;\n}\n\n.capital p.value{\n    text-transform: capitalize;\n}\n\n.ott p.label {\n    transform: rotate(10deg);\n}\n\n.ott p.value{\n    text-shadow: 2px 2px 5px yellow;\n    transform: rotate(-5deg);\n}\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":240,"y":140,"wires":[[]]},{"id":"da88555f317d6102","type":"inject","z":"419e8a7f494d3e4a","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"cave canem!","payloadType":"str","x":270,"y":200,"wires":[["aad14546386feddd","4d73043ff4547e08","c77d3a870ef34a76","ae1a7a21fc03f66e","aa6e981e0f2ec00e"]]},{"id":"aa6e981e0f2ec00e","type":"ui_text","z":"419e8a7f494d3e4a","group":"4e5d0bbdb2d727a5","order":4,"width":0,"height":0,"name":"OTT Text","label":"OTT text","format":"{{msg.payload}}","layout":"row-spread","className":"big red ott","x":460,"y":280,"wires":[]},{"id":"4e5d0bbdb2d727a5","type":"ui_group","name":"Demo","tab":"707295c24d7cb24f","order":1,"disp":true,"width":"10","collapse":false,"className":""},{"id":"707295c24d7cb24f","type":"ui_tab","name":"Demo","icon":"dashboard","disabled":false,"hidden":false}]
2 Likes
3

I added Text inputs and created style:

[{"id":"aad14546386feddd","type":"ui_text","z":"419e8a7f494d3e4a","group":"4e5d0bbdb2d727a5","order":1,"width":0,"height":0,"name":"Default text","label":"default text","format":"{{msg.payload}}","layout":"row-spread","className":"","x":470,"y":120,"wires":[]},{"id":"4d73043ff4547e08","type":"ui_text","z":"419e8a7f494d3e4a","group":"4e5d0bbdb2d727a5","order":2,"width":0,"height":0,"name":"Red Text","label":"Red text","format":"{{msg.payload}}","layout":"row-spread","className":"red","x":460,"y":160,"wires":[]},{"id":"ae1a7a21fc03f66e","type":"ui_text","z":"419e8a7f494d3e4a","group":"4e5d0bbdb2d727a5","order":4,"width":0,"height":0,"name":"Big Red Text","label":"Big Red text with Capitals","format":"{{msg.payload}}","layout":"row-spread","className":"big red capital","x":470,"y":240,"wires":[]},{"id":"c77d3a870ef34a76","type":"ui_text","z":"419e8a7f494d3e4a","group":"4e5d0bbdb2d727a5","order":3,"width":0,"height":0,"name":"Big Text","label":"Big text","format":"{{msg.payload}}","layout":"row-spread","className":"big","x":460,"y":200,"wires":[]},{"id":"8c02640b919b8beb","type":"ui_template","z":"419e8a7f494d3e4a","group":"4e5d0bbdb2d727a5","name":"","order":5,"width":0,"height":0,"format":"<style>\n.red p.value{\n    color: red;\n}\n\n.big p.value{\n    font-size: 2em;\n}\n\n.extrabig input{\n    font-size: 50px;\n    color: red !important;\n       }\n\n\n.capital p.value{\n    text-transform: capitalize;\n}\n\n.ott p.label {\n    transform: rotate(10deg);\n}\n\n.ott p.value{\n    text-shadow: 2px 2px 5px yellow;\n    transform: rotate(-5deg);\n}\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":240,"y":140,"wires":[[]]},{"id":"da88555f317d6102","type":"inject","z":"419e8a7f494d3e4a","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"cave canem!","payloadType":"str","x":270,"y":200,"wires":[["aad14546386feddd","4d73043ff4547e08","c77d3a870ef34a76","ae1a7a21fc03f66e","aa6e981e0f2ec00e"]]},{"id":"aa6e981e0f2ec00e","type":"ui_text","z":"419e8a7f494d3e4a","group":"4e5d0bbdb2d727a5","order":4,"width":0,"height":0,"name":"OTT Text","label":"OTT text","format":"{{msg.payload}}","layout":"row-spread","className":"big red ott","x":460,"y":280,"wires":[]},{"id":"4347dc7b77776a18","type":"ui_text_input","z":"419e8a7f494d3e4a","name":"","label":"","tooltip":"","group":"4e5d0bbdb2d727a5","order":6,"width":0,"height":0,"passthru":true,"mode":"text","delay":300,"topic":"topic","sendOnBlur":true,"className":"extrabig","topicType":"msg","x":260,"y":320,"wires":[[]]},{"id":"4e5d0bbdb2d727a5","type":"ui_group","name":"Demo","tab":"707295c24d7cb24f","order":1,"disp":true,"width":"10","collapse":false,"className":""},{"id":"707295c24d7cb24f","type":"ui_tab","name":"Demo","icon":"dashboard","disabled":false,"hidden":false}]

Now I would like to make Beg text visible in whole Input field. I noticed that it is either possible to adjust height: to bigger number than the font size or maybe disable it

image
image566Ă—535 65.3 KB

from that follows 2 questions:
1.How to disable properties (I don't know if it is the right word for it)
2.How to expand only specific group panel because adding changes all

.nr-dashboard-cardpanel {
    height: 500px;
}
4

nr-dashboard-cardpanel doesn't feel like an element you should be styling.
I would try to set the height of the md-card with class .extrabig but I'm having trouble making it work.
Maybe someone with better CSS skills can help?

5

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