Dashboard text node CSS help

[HaroldPetersInskipp]

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:

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

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

[HaroldPetersInskipp]

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

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

[zenofmud]

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

[{"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}]

[HaroldPetersInskipp]

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