Dashboard 2 font size and background color

Dashboard
1

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.

<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
image397Ă—1246 27.3 KB

2

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:

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

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

1 Like
4

Hi Joe,

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

<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
smoke-1400Ă—1249 28.8 KB

smoke-2
smoke-2405Ă—1252 30 KB

5

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.

6

CR? Not sure what you are referring to?

Maybe a Breakpoint? If so, <br />

7

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

8

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

<span v-html="msg.payload"></span>
1 Like
9

perfect!!

image

many thanks, especially on sunday!

1 Like