Centre Dashboard Text

[03397]

Guys, I want to canter the text of my dashboard tab(Heating Upstairs) see below.
I have find some info about using CSS styling but nothing worked.

[jbudd]

Hi @03397

Try a ui-template node wih type "Added to site head section"

<style>
.nr-dashboard-cardtitle {
    text-align: center;
}
</style>

[03397]

Hey @jbudd
Can you please more specific since I am new to node red.
Where should I ass this code?

[jbudd]

This bit of code is a template node.

[{"id":"53aa8b27e79c1b87","type":"ui_template","z":"54d6c9226d7cb4f6","group":"3ce32370.c60f1c","name":"","order":8,"width":0,"height":0,"format":"<style>\n    .nr-dashboard-cardtitle {\n        text-align: center;\n    }\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","className":"","x":720,"y":560,"wires":[[]]},{"id":"3ce32370.c60f1c","type":"ui_group","name":"Espresso","tab":"d74bbed4.c2cfb","order":1,"disp":true,"width":"3","collapse":false,"className":""},{"id":"d74bbed4.c2cfb","type":"ui_tab","name":"Kitchen","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

Copy it from here and import it into your Node-red flow (CTRL-i or use the hamburger menu)
You don't need to connect any wires to it.
Since it inserts that bit of CSS in the site header, it will affect all dashboard tabs.
So if you have many tabs, you only need to put this into one of them, it doesn't matter which one.

[03397]

@jbudd

I have created a

and I have not connected it anywhere. After I use the code and change to Added to site head section this is a universal change.

How can I apply this only to Heating Upstairs Dashboard?

[jbudd]

If the CSS is in the site head, it applies to all tabs.
If you change the template type to "Widget in group" and choose any group, it will apply to all groups on the same tab as that group.

Heating Upstairs is the name of a dashboard group?
If you want it to apply only to selected groups:

1. Change the CSS selector to .nr-dashboard-cardtitle .middle

<style>
    .nr-dashboard-cardtitle .middle{
        text-align: center;
    }
</style>

2. Edit the dashboard group and put middle in the class field.

In this case I think it's better if the template is in the site head section, but it doesn't really matter.
You may need to refresh the browser or clear cache to see any difference.

[03397]

@jbudd
Thanks for the info.
The individual dashboard group did not work in centering the text.
I have put the style under the template and I have edited the class under the dashboard group and entered the middle under class

[jbudd]

I was tricked by not rereshing the browser!

Looking in the browser development toolbox I see that the custom class "middle" is applied to the div nr-dashboard-cardpanel and the title in div nr-dashboard-cardtitle is within that div.

So the CSS selector has to be .middle .nr-dashboard-cardtitle rather than the other way round.

[03397]

@jbudd

.middle .nr-dashboard-cardtitle

Thanks that did the trick