# Dashboard 2 font size and background color

**URL:** <https://discourse.nodered.org/t/dashboard-2-font-size-and-background-color/90395>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [24 August 2024 09:11 UTC](https://discourse.nodered.org/t/dashboard-2-font-size-and-background-color/90395 "2024-08-24T09:11:00Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![juntiedt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/juntiedt/32/58357_2.png) [@juntiedt](https://discourse.nodered.org/u/juntiedt)\
**Post date:** [24 August 2024 09:11 UTC](https://discourse.nodered.org/t/dashboard-2-font-size-and-background-color/90395/1 "2024-08-24T09:11:00Z")

</div>

below, my working template in DB-2.  
Now I want to change the size of the text and the icon to be bigger and I want to change the background color. Field size 4x2.  
Any help appreciated.

```auto
<template>
    <div>
        <center> 
            <div :style="{color: msg.color || 'black', margin: 'auto' }">
                <i :class="['mdi', msg.icon || 'mdi-help']" aria-hidden="true"></i>
                {{ msg.payload }}
            </div>
        </center>
    </div>
</template>

<script>
    export default {
  data() {
    return {
    };
  }
}
</script>

```

I want that the icon and text fills the whole width (see picture)

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

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [25 August 2024 06:52 UTC](https://discourse.nodered.org/t/dashboard-2-font-size-and-background-color/90395/2 "2024-08-25T06:52:53Z")

</div>

Are you wanting to change those things based on something in `msg`, or just have them applied all of the time?

If the latter, you can add some CSS in a `<style>` block at the bottom of your template, e.g:

```auto
<style>
.my-class {
    font-size: 2rem; /* 2 x the standard font-size */
    background-color: red;
    text-align: center;
}
</style>

```

You can then attach the `my-class` to your template with:

```html
<template>
    <div class="my-class">
        <div :style="{color: msg.color || 'black', margin: 'auto' }">
            <i :class="['mdi', msg.icon || 'mdi-help']" aria-hidden="true"></i>
            {{ msg.payload }}
        </div>
    </div>
</template>

```

Note too that I also removed the `<center>` block as you can use `text-align: center` in the CSS instead.

---

<div class="post-metadata">

**Author:** ![juntiedt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/juntiedt/32/58357_2.png) [@juntiedt](https://discourse.nodered.org/u/juntiedt)\
**Post date:** [25 August 2024 10:01 UTC](https://discourse.nodered.org/t/dashboard-2-font-size-and-background-color/90395/4 "2024-08-25T10:01:58Z")

</div>

Hi Joe,

many thanks for your support!  
I have added some lines with the help of the internet.

```auto
<template>
    <div class="my-class">
        <div :style="{color: msg.color || 'black', margin: 'auto' }">
            <i :class="['mdi', msg.icon || 'mdi-help']" aria-hidden="true"></i>
            {{ msg.payload }}
        </div>
    </div>
</template>

<script>
    export default {
  data() {
    return {
    };
  }
}
</script>

<style>
    .my-class {
        font-size: 2rem;
        /* 2 x the standard font-size */
        background-color: "#2F2D2D";
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;        
    }
</style>

```

now it looks perfect!

 ![smoke-1](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/5/958a9fdf5b59dc53fd29ffbd57f7b7c0ebc535be.png)  
 ![smoke-2](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/3/43ea48f1a3ab1cc5d074dc69c07c3c96473b39fb.png)

---

<div class="post-metadata">

**Author:** ![juntiedt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/juntiedt/32/58357_2.png) [@juntiedt](https://discourse.nodered.org/u/juntiedt)\
**Post date:** [25 August 2024 11:08 UTC](https://discourse.nodered.org/t/dashboard-2-font-size-and-background-color/90395/5 "2024-08-25T11:08:55Z")

</div>

one last question:

I want to have a CR after Alarm!!! in "Alarm!!! no smoke detected".

I tried \n, hex code, etc. but it does not work.

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [25 August 2024 11:16 UTC](https://discourse.nodered.org/t/dashboard-2-font-size-and-background-color/90395/6 "2024-08-25T11:16:01Z")

</div>

CR? Not sure what you are referring to?

Maybe a Breakpoint? If so, `<br />`

---

<div class="post-metadata">

**Author:** ![juntiedt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/juntiedt/32/58357_2.png) [@juntiedt](https://discourse.nodered.org/u/juntiedt)\
**Post date:** [25 August 2024 12:47 UTC](https://discourse.nodered.org/t/dashboard-2-font-size-and-background-color/90395/7 "2024-08-25T12:47:37Z")

</div>

yes, I want a new line or break in my payload like so:

payload: "Alarm!!!  
smoke detected"

But it does not work.  
this is what I get :

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

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [25 August 2024 13:01 UTC](https://discourse.nodered.org/t/dashboard-2-font-size-and-background-color/90395/8 "2024-08-25T13:01:05Z")

</div>

want to inject HTML with your `msg.payload`, you can tell Vue to parse it like so:

```auto
<span v-html="msg.payload"></span>

```

---

<div class="post-metadata">

**Author:** ![juntiedt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/juntiedt/32/58357_2.png) [@juntiedt](https://discourse.nodered.org/u/juntiedt)\
**Post date:** [25 August 2024 13:53 UTC](https://discourse.nodered.org/t/dashboard-2-font-size-and-background-color/90395/9 "2024-08-25T13:53:39Z")

</div>

perfect!!

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/9/99abbce3f57e849436da0cfafc7f70ae5db13d0e.png)

many thanks, especially on sunday!

---

<div class="post-metadata">

**Author:** ![rafasimple](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rafasimple/32/80215_2.png) [@rafasimple](https://discourse.nodered.org/u/rafasimple)\
**Post date:** [21 March 2025 15:48 UTC](https://discourse.nodered.org/t/dashboard-2-font-size-and-background-color/90395/10 "2025-03-21T15:48:35Z")

</div>

Hi, Joe. Do you know if col span works, I need to increase the size of the raws depending of the registers of another table. Example:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/5/c536a886a1671c3c9938888a806308fd2455039f.jpeg)

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [21 March 2025 17:03 UTC](https://discourse.nodered.org/t/dashboard-2-font-size-and-background-color/90395/11 "2025-03-21T17:03:28Z")

</div>



---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [21 March 2025 17:03 UTC](https://discourse.nodered.org/t/dashboard-2-font-size-and-background-color/90395/12 "2025-03-21T17:03:58Z")

</div>

Closed. Topic is solved. Latest comment is unrelated.