# Ui\_template css help

**URL:** <https://discourse.nodered.org/t/ui-template-css-help/43131>\
**Category:** Dashboard\
**Created:** [24 March 2021 16:40 UTC](https://discourse.nodered.org/t/ui-template-css-help/43131 "2021-03-24T16:40:54Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![achrefnajjar](https://avatars.discourse-cdn.com/v4/letter/a/8e8cbc/32.png) [@achrefnajjar](https://discourse.nodered.org/u/achrefnajjar)\
**Post date:** [24 March 2021 16:40 UTC](https://discourse.nodered.org/t/ui-template-css-help/43131/1 "2021-03-24T16:40:54Z")

</div>

is there any documentation on how to write a css code into ui\_template

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [24 March 2021 17:00 UTC](https://discourse.nodered.org/t/ui-template-css-help/43131/2 "2021-03-24T17:00:20Z")

</div>

Do you mean documentation on how to put it into the template or do you mean documentation on what css you need to put in there?

---

<div class="post-metadata">

**Author:** ![achrefnajjar](https://avatars.discourse-cdn.com/v4/letter/a/8e8cbc/32.png) [@achrefnajjar](https://discourse.nodered.org/u/achrefnajjar)\
**Post date:** [24 March 2021 17:09 UTC](https://discourse.nodered.org/t/ui-template-css-help/43131/3 "2021-03-24T17:09:54Z")

</div>

i just want to customize my dashboard and didn't know how to style it using css

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [24 March 2021 17:25 UTC](https://discourse.nodered.org/t/ui-template-css-help/43131/4 "2021-03-24T17:25:14Z")

</div>

I was trying to determine whether you are familiar with the basics of css. If not then start here [CSS Introduction](https://www.w3schools.com/css/css_intro.asp)

---

<div class="post-metadata">

**Author:** ![achrefnajjar](https://avatars.discourse-cdn.com/v4/letter/a/8e8cbc/32.png) [@achrefnajjar](https://discourse.nodered.org/u/achrefnajjar)\
**Post date:** [24 March 2021 17:31 UTC](https://discourse.nodered.org/t/ui-template-css-help/43131/5 "2021-03-24T17:31:59Z")

</div>

yes yes i am familiar with css's basics but what i don't understand is the classes made in node-red for example `body.nr-dashboard-theme md-toolbar { background: radial-gradient(circle, rgb(45 97 186) 0%, rgb(16 16 146) 40%, rgba(2,0,36,1) 100%); color: #fff; }`  
what's the .nr and the md in md-toolbar  
and why we often write like this `.nr-dashboard-theme ui-card-panel { background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%); border: none; border-radius: 1em; box-shadow: 0 0 1em 0em rgb(0 0 100 / 50%) }`  
without the `body` in the beginning

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [24 March 2021 17:48 UTC](https://discourse.nodered.org/t/ui-template-css-help/43131/6 "2021-03-24T17:48:28Z")

</div>

You can freely delete all the body statements. It is just my laziness to not deleting them.  
And the CSS meaning of `element.class` construction as all other can be found here [CSS Selectors Reference](https://www.w3schools.com/cssref/css_selectors.asp)

---

<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:** [23 April 2021 17:49 UTC](https://discourse.nodered.org/t/ui-template-css-help/43131/7 "2021-04-23T17:49:06Z")

</div>

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