Use own background color for dashboard

Dashboard
1

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

image
image834Ă—299 11 KB

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

.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;
2

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

3

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

4

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.

5

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

6

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.

7

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

1 Like
8

Ah right - so the theme responsible is set to

        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 :slight_smile:
However the easy way out is to use the setting in the Site settings tab

image
image754Ă—184 31.9 KB

which turns off the Node-RED theme inside the template - so you can then override more easily...

2 Likes
9

I have always forgot that option :slight_smile:

10

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

11

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

12

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