# Dashboard template individual Text input manipulation

**URL:** <https://discourse.nodered.org/t/dashboard-template-individual-text-input-manipulation/66070>\
**Category:** Dashboard\
**Created:** [5 August 2022 12:09 UTC](https://discourse.nodered.org/t/dashboard-template-individual-text-input-manipulation/66070 "2022-08-05T12:09:17Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![KarolisL](https://avatars.discourse-cdn.com/v4/letter/k/a4c791/32.png) [@KarolisL](https://discourse.nodered.org/u/KarolisL)\
**Post date:** [5 August 2022 12:09 UTC](https://discourse.nodered.org/t/dashboard-template-individual-text-input-manipulation/66070/1 "2022-08-05T12:09:17Z")

</div>

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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/b/eb0b595c65d36e3cb3addae12755620703300ce1.png)

```auto
[{"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:

```auto
<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**
>
> ```auto
> 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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/8/d892a54cba1049c74b96805a5fc5bbeead8c77c5.png)

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [5 August 2022 13:12 UTC](https://discourse.nodered.org/t/dashboard-template-individual-text-input-manipulation/66070/2 "2022-08-05T13:12:23Z")

</div>

> [@KarolisL](#):
>
> Could somebody give a link to guide or small example how to properly use CSS class in nodered?  
> ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/8/d892a54cba1049c74b96805a5fc5bbeead8c77c5.png)

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

![Untitled 1](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/3/1367a709daaceae265c9b837d2dc81fc99e7a819.jpeg)

![Untitled 2](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/1/91cea2054fdc83aa2ecd99e50a8714ad98859457.jpeg)

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

```

---

<div class="post-metadata">

**Author:** ![KarolisL](https://avatars.discourse-cdn.com/v4/letter/k/a4c791/32.png) [@KarolisL](https://discourse.nodered.org/u/KarolisL)\
**Post date:** [5 August 2022 14:59 UTC](https://discourse.nodered.org/t/dashboard-template-individual-text-input-manipulation/66070/3 "2022-08-05T14:59:34Z")

</div>

I added Text inputs and created style:

```auto
[{"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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/7/47d57f8ba8a001392933d53379ea6064545977c4.png)

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

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

```

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [6 August 2022 19:59 UTC](https://discourse.nodered.org/t/dashboard-template-individual-text-input-manipulation/66070/4 "2022-08-06T19:59:42Z")

</div>

> [@KarolisL](#):
>
> How to expand only specific group panel because adding changes all
> 
> ```auto
> .nr-dashboard-cardpanel {
> height: 500px;
> }
> 
> ```

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

---

<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:** [5 September 2022 20:00 UTC](https://discourse.nodered.org/t/dashboard-template-individual-text-input-manipulation/66070/5 "2022-09-05T20:00:14Z")

</div>

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