# Moving font underneath logo

**URL:** <https://discourse.nodered.org/t/moving-font-underneath-logo/51093>\
**Category:** Dashboard\
**Created:** [16 September 2021 08:23 UTC](https://discourse.nodered.org/t/moving-font-underneath-logo/51093 "2021-09-16T08:23:23Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Sirhc](https://avatars.discourse-cdn.com/v4/letter/s/b77776/32.png) [@Sirhc](https://discourse.nodered.org/u/Sirhc)\
**Post date:** [16 September 2021 08:23 UTC](https://discourse.nodered.org/t/moving-font-underneath-logo/51093/1 "2021-09-16T08:23:23Z")

</div>

Hello

I want to move this font underneath my logo in the following button:

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/0/e06f84b66d97259be20c2cc3dd58d6081216bf92.png)

Does anyone know how to do this?

---

<div class="post-metadata">

**Author:** ![Gunner](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gunner/32/43582_2.png) [@Gunner](https://discourse.nodered.org/u/Gunner)\
**Post date:** [16 September 2021 08:39 UTC](https://discourse.nodered.org/t/moving-font-underneath-logo/51093/2 "2021-09-16T08:39:40Z")

</div>

Done 😛

![Untitled](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/7/7743c66cd83543565125291f0a0d001ca1abb6ce.png)

Now, if you can supply more info than just a picture about your flow and such, perhaps we can assist in that fashion as well 🙂

Although if you are looking for multi-line text on a `ui_button` or something... not sure if that is possible.

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [16 September 2021 08:51 UTC](https://discourse.nodered.org/t/moving-font-underneath-logo/51093/3 "2021-09-16T08:51:24Z")

</div>

> [@Gunner](#):
>
> multi-line text on a `ui_button` or something... not sure if that is possible

Look at this thread

> [@Q: Tiles type panels](https://discourse.nodered.org/t/q-tiles-type-panels/35245):
>
> I have a play with the Dashboard and it fine for a basic design i have ended up with but i'd like to get a little bit more elegant. Used the Switch node to do this. [Screenshot 2020-11-02 213735] but i'd like to try make it look like this if its possible.. Not to fussed about the - + bit.. just more doing the tile effect. probably lots of clever CCS no doubt. [Screenshot 2020-11-02 214023] Any pointers if its even possible. ta I've tried doing it as a Button in separate groups .. but i…

---

<div class="post-metadata">

**Author:** ![Gunner](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gunner/32/43582_2.png) [@Gunner](https://discourse.nodered.org/u/Gunner)\
**Post date:** [16 September 2021 09:09 UTC](https://discourse.nodered.org/t/moving-font-underneath-logo/51093/4 "2021-09-16T09:09:59Z")

</div>

Of course... I keep forgetting... a little CSS and almost anything is possible, and better than my photo editing 😛

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

```auto
[{"id":"fbdc8e1c.ca83b","type":"ui_button","z":"6c4cbb0934064826","name":"","group":"110f893b.a0f1d7","order":1,"width":2,"height":2,"passthru":false,"label":"Rear Yard","tooltip":"","color":"","bgcolor":"","icon":"","payload":"trigger","payloadType":"str","topic":"trigger","topicType":"str","x":880,"y":480,"wires":[["f0d5c694acb55ad6"]]},{"id":"13d9bcd2.5331a3","type":"ui_template","z":"6c4cbb0934064826","group":"110f893b.a0f1d7","name":"","order":3,"width":4,"height":1,"format":"<style>\n\n #Dashboard_STYLED_cards > md-card > button {\n padding-top: 10px !important;\n position: relative;\n text-align: center;\n line-height: 24px;\n display: flex;\n align-items: center;\n flex-direction: column;\n color: #00ff00;\n }\n \n\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":880,"y":440,"wires":[[]]},{"id":"f0d5c694acb55ad6","type":"toggle","z":"6c4cbb0934064826","name":"","onOffTopic":"","onValue":"true","onType":"bool","offValue":"false","offType":"bool","toggleTopic":"","toggleValue":"trigger","toggleType":"str","passOnOff":"","x":1030,"y":480,"wires":[["96004ed99158fb76"]]},{"id":"96004ed99158fb76","type":"ui_led","z":"6c4cbb0934064826","order":2,"group":"110f893b.a0f1d7","width":2,"height":2,"label":"","labelPlacement":"left","labelAlignment":"left","colorForValue":[{"color":"#808080","value":"false","valueType":"bool"},{"color":"#ffff00","value":"true","valueType":"bool"}],"allowColorForValueInMessage":false,"shape":"circle","showGlow":true,"name":"","x":1170,"y":480,"wires":[]},{"id":"cdd40e8b84cc1ae7","type":"inject","z":"6c4cbb0934064826","name":"","props":[{"p":"ui_control","v":"{\"icon\":\"fa-4x fa-lightbulb-o\"}","vt":"json"},{"p":"topic","vt":"str"},{"p":"payload"}],"repeat":"","crontab":"","once":true,"onceDelay":"0.1","topic":"","payload":"1","payloadType":"str","x":730,"y":480,"wires":[["fbdc8e1c.ca83b"]]},{"id":"110f893b.a0f1d7","type":"ui_group","name":"STYLED","tab":"7179c13.0628d4","order":13,"disp":true,"width":4,"collapse":false},{"id":"7179c13.0628d4","type":"ui_tab","name":"Dashboard","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![Gunner](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gunner/32/43582_2.png) [@Gunner](https://discourse.nodered.org/u/Gunner)\
**Post date:** [16 September 2021 10:05 UTC](https://discourse.nodered.org/t/moving-font-underneath-logo/51093/5 "2021-09-16T10:05:23Z")

</div>

> [@Gunner](#):
>
> a little CSS and almost anything is possible

Unfortunately, a little CSS is all I understand at this time ☹

As soon as I tried to copy this method into my own tabs and on other buttons, it stopped working. I tried various methods of linking the template to a specific button ID, but that didn't work either.

Anyhow, this is not my topic/issue/need so I will let it go on my end 😛

---

<div class="post-metadata">

**Author:** ![Sirhc](https://avatars.discourse-cdn.com/v4/letter/s/b77776/32.png) [@Sirhc](https://discourse.nodered.org/u/Sirhc)\
**Post date:** [16 September 2021 10:08 UTC](https://discourse.nodered.org/t/moving-font-underneath-logo/51093/6 "2021-09-16T10:08:51Z")

</div>

I had a read of that thread, but I'm struggling to understand it.

This is my flow:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/7/a737df29635cd4a548c12eb7afe812ebec8e1761.png)

The dashboard is called "Main". Do I just insert a template node with the following code:

> #Dashboard\_MAIN\_cards \> md-card \> button { padding-top: 10px !important; position: relative; text-align: center; line-height: 24px; display: flex; align-items: center; flex-direction: column; }

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [16 September 2021 10:35 UTC](https://discourse.nodered.org/t/moving-font-underneath-logo/51093/7 "2021-09-16T10:35:54Z")

</div>

The card's selector name follow logic :  
`#Tabname_Groupname_cards`

So for following  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/5/5504f3fb44f7936cbf452b32079c14477015916f.png)

The selector will be  
`#Home_Stuff_cards`

All names are connected with underscore  
If you have spaces in those names, you'll need to replace them with underscores too

---

<div class="post-metadata">

**Author:** ![Sirhc](https://avatars.discourse-cdn.com/v4/letter/s/b77776/32.png) [@Sirhc](https://discourse.nodered.org/u/Sirhc)\
**Post date:** [16 September 2021 12:11 UTC](https://discourse.nodered.org/t/moving-font-underneath-logo/51093/8 "2021-09-16T12:11:27Z")

</div>

Thanks for the help!

---

<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:** [16 October 2021 12:12 UTC](https://discourse.nodered.org/t/moving-font-underneath-logo/51093/9 "2021-10-16T12:12:01Z")

</div>

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