# Dashboard text node CSS help

**URL:** https://discourse.nodered.org/t/dashboard-text-node-css-help/82750
**Category:** Dashboard
**Created:** [9 November 2023 23:59 UTC](https://discourse.nodered.org/t/dashboard-text-node-css-help/82750 "2023-11-09T23:59:17Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![HaroldPetersInskipp](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/haroldpetersinskipp/32/42319_2.png) [@HaroldPetersInskipp](https://discourse.nodered.org/u/HaroldPetersInskipp)
#### Post date: [9 November 2023 23:59 UTC](https://discourse.nodered.org/t/dashboard-text-node-css-help/82750/1 "2023-11-09T23:59:17Z")

</div>

I'm using the old dashboard `text` node and have added the CSS class of `lyrics` and I'm trying to get them to display correctly from the top while centered but I am not good with CSS yet. I believe a dashboard `ui_template` node with something like:

```auto
<style>
.lyrics {
    ???
}
</style>

```

is what is needed, but I can't seem to get it correct. Any hints would be much appreciated?

---

<div class="post-metadata">

### Author: ![HaroldPetersInskipp](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/haroldpetersinskipp/32/42319_2.png) [@HaroldPetersInskipp](https://discourse.nodered.org/u/HaroldPetersInskipp)
#### Post date: [10 November 2023 00:11 UTC](https://discourse.nodered.org/t/dashboard-text-node-css-help/82750/2 "2023-11-10T00:11:13Z")

</div>

Nevermind, figured it out with just using the `ui-template` node instead.

```auto
<style>
    /* Styling for the container that holds the lyrics */

    /* Set the font family for the lyrics */
    .lyrics-container {
        font-family: Arial, sans-serif;

        /* Define the font size of the lyrics */
        font-size: 20px;

        /* Set the line height for better readability */
        line-height: 1.2;

        /* Allow line breaks to be displayed as entered in the text */
        white-space: pre-line;

        /* Position the container absolutely */
        position: absolute;

        /* Distance from the top of the container to the top of the page */
        top: 10px;

        /* Center the container horizontally using left and transform */
        left: 50%;
        transform: translateX(-50%);

        /* Make the lyrics bold for emphasis */
        font-weight: bold;
    }
</style>

<!-- Display the lyrics within the styled container -->
<div class="lyrics-container" ng-bind-html="msg.payload"></div>

```

ChatGPT to the rescue, really saves me a ton of time with Node-RED even.

---

<div class="post-metadata">

### Author: ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)
#### Post date: [10 November 2023 00:12 UTC](https://discourse.nodered.org/t/dashboard-text-node-css-help/82750/3 "2023-11-10T00:12:53Z")

</div>

Ha I was just going to post this flow for you:

```auto
[{"id":"d4c590d2e9132950","type":"inject","z":"a7f288cd13e5b960","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"hello Harold<br>how do you do<br>I really really hope this works for you.","payloadType":"str","x":330,"y":240,"wires":[["a0167b9c185ed265"]]},{"id":"228e5b3e9e8929ab","type":"ui_template","z":"a7f288cd13e5b960","group":"470f560930184392","name":"","order":1,"width":0,"height":0,"format":"<style>\n.lyrics {\n text-align: center;\n}\n</style>\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","className":"","x":400,"y":180,"wires":[[]]},{"id":"a0167b9c185ed265","type":"ui_text","z":"a7f288cd13e5b960","group":"9b206ae7211278ff","order":1,"width":"10","height":"5","name":"","label":"","format":"{{msg.payload}}","layout":"col-center","className":"lyrics","style":true,"font":"","fontSize":16,"color":"#000000","x":510,"y":220,"wires":[]},{"id":"470f560930184392","type":"ui_group","name":"Default","tab":"682b35404aa5688c","order":1,"disp":true,"width":"10","collapse":false,"className":""},{"id":"9b206ae7211278ff","type":"ui_group","name":"Default","tab":"d582cfa80fb4f717","order":1,"disp":true,"width":"12","collapse":false,"className":""},{"id":"682b35404aa5688c","type":"ui_tab","name":"Home","icon":"dashboard","order":2,"disabled":false,"hidden":false},{"id":"d582cfa80fb4f717","type":"ui_tab","name":"lyrics","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

### Author: ![HaroldPetersInskipp](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/haroldpetersinskipp/32/42319_2.png) [@HaroldPetersInskipp](https://discourse.nodered.org/u/HaroldPetersInskipp)
#### Post date: [10 November 2023 00:14 UTC](https://discourse.nodered.org/t/dashboard-text-node-css-help/82750/4 "2023-11-10T00:14:16Z")

</div>

I'll still take a look as it may be a more elegant solution, and thank you.

---

<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: [24 November 2023 00:15 UTC](https://discourse.nodered.org/t/dashboard-text-node-css-help/82750/5 "2023-11-24T00:15:12Z")

</div>

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