# Centre Dashboard Text

**URL:** <https://discourse.nodered.org/t/centre-dashboard-text/74690>\
**Category:** Dashboard\
**Tags:** node-red-dashboard\
**Created:** [4 February 2023 11:44 UTC](https://discourse.nodered.org/t/centre-dashboard-text/74690 "2023-02-04T11:44:19Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![03397](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/03397/32/75347_2.png) [@03397](https://discourse.nodered.org/u/03397)\
**Post date:** [4 February 2023 11:44 UTC](https://discourse.nodered.org/t/centre-dashboard-text/74690/1 "2023-02-04T11:44:19Z")

</div>

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.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/1/6118df079ed6cd431e10b6fd8d0644c1059348b8.png)

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [4 February 2023 11:57 UTC](https://discourse.nodered.org/t/centre-dashboard-text/74690/2 "2023-02-04T11:57:57Z")

</div>

Hi @03397

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

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

```

---

<div class="post-metadata">

**Author:** ![03397](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/03397/32/75347_2.png) [@03397](https://discourse.nodered.org/u/03397)\
**Post date:** [4 February 2023 11:59 UTC](https://discourse.nodered.org/t/centre-dashboard-text/74690/3 "2023-02-04T11:59:40Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [4 February 2023 12:16 UTC](https://discourse.nodered.org/t/centre-dashboard-text/74690/4 "2023-02-04T12:16:52Z")

</div>

This bit of code is a template node.

```auto
[{"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.

---

<div class="post-metadata">

**Author:** ![03397](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/03397/32/75347_2.png) [@03397](https://discourse.nodered.org/u/03397)\
**Post date:** [4 February 2023 12:17 UTC](https://discourse.nodered.org/t/centre-dashboard-text/74690/5 "2023-02-04T12:17:44Z")

</div>

@jbudd

I have created a  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/d/4d7a09f4fe3bae02db4396d84ef20bc6c522a214.png)  
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?

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [4 February 2023 12:27 UTC](https://discourse.nodered.org/t/centre-dashboard-text/74690/6 "2023-02-04T12:27:05Z")

</div>

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

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

```

1. 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.

---

<div class="post-metadata">

**Author:** ![03397](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/03397/32/75347_2.png) [@03397](https://discourse.nodered.org/u/03397)\
**Post date:** [4 February 2023 17:10 UTC](https://discourse.nodered.org/t/centre-dashboard-text/74690/7 "2023-02-04T17:10:43Z")

</div>

@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  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/9/c9191527923a4c2ee20d286da5353b4a9da96a8b.png)

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/6/66868b925362e818fae58ae9e0423d64d1e78583.png)

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [4 February 2023 19:27 UTC](https://discourse.nodered.org/t/centre-dashboard-text/74690/8 "2023-02-04T19:27:39Z")

</div>

I was tricked by not rereshing the browser!

 ![Untitled 2](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/f/7f4223170e281ad76827d25534325c734231ef11.jpeg)

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.

---

<div class="post-metadata">

**Author:** ![03397](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/03397/32/75347_2.png) [@03397](https://discourse.nodered.org/u/03397)\
**Post date:** [4 February 2023 19:50 UTC](https://discourse.nodered.org/t/centre-dashboard-text/74690/9 "2023-02-04T19:50:39Z")

</div>

> [@jbudd](#):
>
> **.middle .nr-dashboard-cardtitle**

Thanks that did the trick

---

<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:** [18 February 2023 19:50 UTC](https://discourse.nodered.org/t/centre-dashboard-text/74690/10 "2023-02-18T19:50:55Z")

</div>

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