# Ui\_text without background

**URL:** <https://discourse.nodered.org/t/ui-text-without-background/47758>\
**Category:** Dashboard\
**Created:** [28 June 2021 20:21 UTC](https://discourse.nodered.org/t/ui-text-without-background/47758 "2021-06-28T20:21:57Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Mario](https://avatars.discourse-cdn.com/v4/letter/m/8e7dd6/32.png) [@Mario](https://discourse.nodered.org/u/Mario)\
**Post date:** [28 June 2021 20:21 UTC](https://discourse.nodered.org/t/ui-text-without-background/47758/1 "2021-06-28T20:21:57Z")

</div>

Hello,

is it possible to create a ui\_text element without a background color? I have a dashboard with a background image on which the text field no longer looks good with a white background - see image.

![Background](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/b/7b03c2bc32e3b6eb73d406c0ca0a6f3eb5bc2ce3.png)

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [28 June 2021 20:45 UTC](https://discourse.nodered.org/t/ui-text-without-background/47758/2 "2021-06-28T20:45:23Z")

</div>

add a ui\_template set to HEAD with a `<style>` tag

use CSS and appropritate selector to set it transparent e,g,

```auto
<style>
[node-id="d773305b.7df838"] {
    background-color: transparent !important;
}
</style>

```

where `d773305b.7df838` is the id of the ui\_text as can be seen in the node  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/2/62f4b63701e683dfcada8032d0771fe55758c62a.png)

---

<div class="post-metadata">

**Author:** ![Mario](https://avatars.discourse-cdn.com/v4/letter/m/8e7dd6/32.png) [@Mario](https://discourse.nodered.org/u/Mario)\
**Post date:** [29 June 2021 08:45 UTC](https://discourse.nodered.org/t/ui-text-without-background/47758/3 "2021-06-29T08:45:37Z")

</div>

> [@Steve-Mcl](#):
>
> ```auto
> <style>
> [node-id="d773305b.7df838"] {
> background-color: transparent !important;
> }
> </style>
> 
> ```

thanks for the tip, i tried it but it doesn't seem to work. in spite of the correct id the background is not hidden by ui\_text.

```auto
[{"id":"efad961e.dd6588","type":"inject","z":"44fa2542.ad5b9c","name":"jeden Tag um 1:00 Uhr aktualisieren","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"00 01 * * *","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":210,"y":120,"wires":[["fd28457f.5fb6b8"]]},{"id":"fd28457f.5fb6b8","type":"function","z":"44fa2542.ad5b9c","name":"um 1 hoch zählen und inkl. Text anzeigen","func":"//var count=context.get('count') ;\n//if (typeof count==\"undefined\")\n//count=0;\n//var count=context.get('count') || 0;\n\n//count +=1;\n//msg.payload=\"F1 \"+msg.payload+\" \"+count;\n//context.set('count',count);\n//return msg;\n\nvar local=context.get('data') || {};\nif (local.count===undefined)//test exists\n{\n local.count=0;\n}\nlocal.count +=1;\n//msg.payload=\"Unfallfreie Tage: \"+msg.payload+\" \"+local.count;\nmsg.payload=\"Unfallfreie Tage: \"+local.count;\n//msg.topic=\"Unfallfreie Tage: \"+local.count;\ncontext.set('data',local);\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":560,"y":120,"wires":[["e12219bf.8cf8d8","3093f735.fd2a58"]]},{"id":"f354c052.de3b1","type":"inject","z":"44fa2542.ad5b9c","name":"mit Festwert initialisieren","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":170,"y":220,"wires":[["5e30eeeb.846b"]]},{"id":"5e30eeeb.846b","type":"function","z":"44fa2542.ad5b9c","name":"Initialisieren","func":"//msg.payload=\"Unfallfreie Tage: 66\";\nmsg.topic=\"Unfallfreie Tage: 66\";\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":510,"y":220,"wires":[[]]},{"id":"e12219bf.8cf8d8","type":"file","z":"44fa2542.ad5b9c","name":"","filename":"/home/pi/Documents/unfallfreie Tage","appendNewline":true,"createDir":true,"overwriteFile":"true","encoding":"none","x":1090,"y":120,"wires":[[]]},{"id":"61cdbab2.51d644","type":"comment","z":"44fa2542.ad5b9c","name":"","info":"Hier wird einmalig ein Wert vorinitialisiert aber nicht um Mitternacht hoch gezählt. Dies muß über das obere Node passieren.","x":110,"y":180,"wires":[]},{"id":"702c039.6d9e2fc","type":"comment","z":"44fa2542.ad5b9c","name":"","info":"Dieses Node zählt um Mitternacht um +1 hoch und speichert dann in der Textdatei den Wert.","x":110,"y":80,"wires":[]},{"id":"7118750.cf8a08c","type":"ui_text","z":"44fa2542.ad5b9c","group":"c7548e3c.44407","order":3,"width":0,"height":0,"name":"Anzeige unfallfreie Tage","label":"","format":"<font size = 16>{{msg.payload}}","layout":"row-center","x":1130,"y":220,"wires":[]},{"id":"3093f735.fd2a58","type":"ui_template","z":"44fa2542.ad5b9c","group":"c7548e3c.44407","name":"Hintergrund ausblenden","order":3,"width":0,"height":0,"format":"<style>\n[node-id=\"7118750.cf8a08c\"] \n{\n background-color: transparent !important;\n}\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":890,"y":220,"wires":[["7118750.cf8a08c"]]},{"id":"c7548e3c.44407","type":"ui_group","name":"Dashboard","tab":"ac7cb0aa.4dc89","order":1,"disp":false,"width":9,"collapse":false},{"id":"ac7cb0aa.4dc89","type":"ui_tab","name":"Standort Rostock","icon":"dashboard","disabled":false,"hidden":false}]

```

---

<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:** [29 July 2021 08:46 UTC](https://discourse.nodered.org/t/ui-text-without-background/47758/4 "2021-07-29T08:46:08Z")

</div>

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