# Use own background color for dashboard

**URL:** <https://discourse.nodered.org/t/use-own-background-color-for-dashboard/41030>\
**Category:** Dashboard\
**Created:** [15 February 2021 14:43 UTC](https://discourse.nodered.org/t/use-own-background-color-for-dashboard/41030 "2021-02-15T14:43:27Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![sfedo](https://avatars.discourse-cdn.com/v4/letter/s/3da27b/32.png) [@sfedo](https://discourse.nodered.org/u/sfedo)\
**Post date:** [15 February 2021 14:43 UTC](https://discourse.nodered.org/t/use-own-background-color-for-dashboard/41030/1 "2021-02-15T14:43:27Z")

</div>

Hey,  
I'm trying to set my own background for h1 element for ui\_template, but the dashboard css allways overwrite it.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/c/9cbfd75387e0fac06196f9ae72e519310e3e1410.png)

why is everything that I want to customize is crossed out? how to enable my own style on ui\_template?

I need to delete somehow

```auto
.nr-dashboard-template p, .nr-dashboard-template h1, .nr-dashboard-template h2, .nr-dashboard-template h3, .nr-dashboard-template h4 {
    color: #eeeeee !important;
    background-color: #333333 !important;

```

---

<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:** [15 February 2021 15:30 UTC](https://discourse.nodered.org/t/use-own-background-color-for-dashboard/41030/2 "2021-02-15T15:30:47Z")

</div>

There was lately clean up for dashboard styles. Many `!important` statements was removed. Why those still exist, I don't know. But with latest version, for me only the `h1` ... `h4` rules are affected. Any other like margins and stuff are free to use as you like.

But let's see what @dceejay says about the `.nr-dashboard-template` `h1 ... h4`

---

<div class="post-metadata">

**Author:** ![sfedo](https://avatars.discourse-cdn.com/v4/letter/s/3da27b/32.png) [@sfedo](https://discourse.nodered.org/u/sfedo)\
**Post date:** [15 February 2021 20:41 UTC](https://discourse.nodered.org/t/use-own-background-color-for-dashboard/41030/3 "2021-02-15T20:41:10Z")

</div>

I just reinstalled nodered couple days ago, so I guess I have the latest version. But as u can see on my screenshot it affects the `<p>` tag aswell.. wich is not so nice. I can try to put into a `<span>` instead of h1 or p

---

<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:** [15 February 2021 20:45 UTC](https://discourse.nodered.org/t/use-own-background-color-for-dashboard/41030/4 "2021-02-15T20:45:19Z")

</div>

Don't guess the versions, you can look out of them. But yes, for sure the heading and paragraph tags today fight back hard. Use div - span combinations and dedicated classes and you have freedom to do anything.

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [15 February 2021 20:47 UTC](https://discourse.nodered.org/t/use-own-background-color-for-dashboard/41030/5 "2021-02-15T20:47:56Z")

</div>

Not sure. I must have put them there for a reason but not immediately recalled.

---

<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:** [15 February 2021 21:01 UTC](https://discourse.nodered.org/t/use-own-background-color-for-dashboard/41030/6 "2021-02-15T21:01:33Z")

</div>

Any user created something on top of existence of that will have to change something. And as it is "build your stuff" node, it is impossible to predict the impact. If it was my call to change it today, it would be no go. Or if, then with long therm announcement for breaking things.

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [15 February 2021 21:05 UTC](https://discourse.nodered.org/t/use-own-background-color-for-dashboard/41030/7 "2021-02-15T21:05:49Z")

</div>

I’m not proposing to change things, until I understand why in the first place 🙂

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [15 February 2021 21:33 UTC](https://discourse.nodered.org/t/use-own-background-color-for-dashboard/41030/8 "2021-02-15T21:33:03Z")

</div>

Ah right - so the theme responsible is set to

```auto
        p, h1, h2, h3, h4 {
            color: @widgetTextColor !important;
            background-color : @widgetBorderColor !important;
        }

```

So they are forced to the theme colours to try to make everything behave 🙂  
However the easy way out is to use the setting in the Site settings tab

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/c/fc241b164927c22639d7cab576051c50f46f26e2.jpeg)  
which turns off the Node-RED theme inside the template - so you can then override more easily...

---

<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:** [15 February 2021 21:35 UTC](https://discourse.nodered.org/t/use-own-background-color-for-dashboard/41030/9 "2021-02-15T21:35:21Z")

</div>

I have always forgot that option 🙂

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [15 February 2021 21:36 UTC](https://discourse.nodered.org/t/use-own-background-color-for-dashboard/41030/10 "2021-02-15T21:36:03Z")

</div>

me too (obviously...) or I would have mentioned it hours ago !

---

<div class="post-metadata">

**Author:** ![sfedo](https://avatars.discourse-cdn.com/v4/letter/s/3da27b/32.png) [@sfedo](https://discourse.nodered.org/u/sfedo)\
**Post date:** [16 February 2021 07:35 UTC](https://discourse.nodered.org/t/use-own-background-color-for-dashboard/41030/11 "2021-02-16T07:35:09Z")

</div>

thank you vwery much, this solved the problem. I've find this function before, but didnt mention to try it out. Thanks again

---

<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:** [2 March 2021 07:35 UTC](https://discourse.nodered.org/t/use-own-background-color-for-dashboard/41030/12 "2021-03-02T07:35:52Z")

</div>

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