Continuing the discussion from How to add icon to card header. Dashboard 2:
Can we change also the color of the group Title ?
Thanks
/* define any styles here - supports raw CSS */
.v-card-title {
color: red;
}
Great it works
what about the icon color ?
Thanks a lot
Done !!!
found the tip ..
Thanks
Hello, I am currently rebuilding Dashboard1 into Dashboard2. I have painfully learned that I cannot display colored icons in the text output.
I have found this example here and now I would like to modify it so that:
a) the icons are displayed in color, and
b) not as a card header, but as a separate element within the card.
This way, I can use the pictogram to see the current state of various home automation systems at a glance - for example, green means good, red means bad, blue means off, etc.
Can anyone give me some initial guidance on how to achieve this?
[
{
"id": "2be3bc674c163d0b",
"type": "inject",
"z": "96021c4f811b5928",
"name": "",
"props": [
{
"p": "title",
"v": "Winter",
"vt": "str"
},
{
"p": "icon",
"v": "mdi-snowflake-thermometer",
"vt": "str"
},
{
"p": "color",
"v": "blue",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"x": 190,
"y": 60,
"wires": [
[
"de4a108eb3e6cdf6"
]
]
},
{
"id": "7984f3d787ad6014",
"type": "inject",
"z": "96021c4f811b5928",
"name": "",
"props": [
{
"p": "title",
"v": "Sommer",
"vt": "str"
},
{
"p": "icon",
"v": "mdi-coolant-temperature",
"vt": "str"
},
{
"p": "color",
"v": "green",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"x": 190,
"y": 120,
"wires": [
[
"de4a108eb3e6cdf6"
]
]
},
{
"id": "de4a108eb3e6cdf6",
"type": "ui-template",
"z": "96021c4f811b5928",
"group": "d0ee23241087db79",
"page": "",
"ui": "",
"name": "Card header icon and title",
"order": 1,
"width": 0,
"height": 0,
"head": "",
"format": "<template>\n <Teleport v-if=\"mounted\" :to=\"target\">\n <div class=\"v-card-item__append\">\n <v-icon aria-hidden=\"false\">{{icon}}</v-icon> \n </div>\n <div class=\"v-card-item__prepend\">\n <div class=\"v-card-title\">{{title}}</div>\n </div>\n </Teleport>\n</template>\n\n<script>\n export default {\n data() { \n return {\n mounted:false,\n target:\"\",\n icon:\"mdi-account\",\n title:\"Dynamic title\" \n }\n },\n computed: { \n \n },\n watch: {\n msg: function () {\n if(this.msg?.title != undefined){\n this.title = this.msg.title\n }\n if(this.msg?.icon != undefined){\n this.icon = this.msg.icon\n }\n }\n },\n mounted(){ \n this.target = '#nrdb-ui-group-'+this.props.group+' .v-card-item'\n this.mounted = true \n }\n }\n</script>\n<style>\n .hidden-template{\n display:none !important;\n }\n</style>\n",
"storeOutMessages": true,
"passthru": true,
"resendOnRefresh": true,
"templateScope": "local",
"className": "hidden-template",
"x": 490,
"y": 80,
"wires": [
[]
]
},
{
"id": "d0ee23241087db79",
"type": "ui-group",
"name": "Temperatur",
"page": "e68fa6b2b27f0ec4",
"width": "6",
"height": "1",
"order": 3,
"showTitle": true,
"className": "",
"visible": "true",
"disabled": "false",
"groupType": "default"
},
{
"id": "e68fa6b2b27f0ec4",
"type": "ui-page",
"name": "Teichsteuerung",
"ui": "f96401822df0a597",
"path": "/page4",
"icon": "home",
"layout": "grid",
"theme": "e69c750bbe40bb7a",
"breakpoints": [
{
"name": "Default",
"px": "0",
"cols": "3"
},
{
"name": "Tablet",
"px": "576",
"cols": "6"
},
{
"name": "Small Desktop",
"px": "768",
"cols": "9"
},
{
"name": "Desktop",
"px": "1024",
"cols": "12"
}
],
"order": 7,
"className": "",
"visible": true,
"disabled": false
},
{
"id": "f96401822df0a597",
"type": "ui-base",
"name": "My Dashboard",
"path": "/dashboard",
"appIcon": "",
"includeClientData": true,
"acceptsClientConfig": [
"ui-notification",
"ui-control"
],
"showPathInSidebar": false,
"showPageTitle": true,
"navigationStyle": "default",
"titleBarStyle": "default"
},
{
"id": "e69c750bbe40bb7a",
"type": "ui-theme",
"name": "Default Theme",
"colors": {
"surface": "#ffffff",
"primary": "#0094ce",
"bgPage": "#eeeeee",
"groupBg": "#eeeeee",
"groupOutline": "#cccccc"
},
"sizes": {
"density": "default",
"pagePadding": "12px",
"groupGap": "12px",
"groupBorderRadius": "4px",
"widgetGap": "12px"
}
}
]
Try
<template>
<Teleport v-if="mounted" :to="target">
<div class="v-card-item__append">
<v-icon aria-hidden="false" :color = "iconColour">{{icon}}</v-icon>
</div>
<div class="v-card-item__prepend">
<div class="v-card-title" >{{title}}</div>
</div>
</Teleport>
</template>
<script>
export default {
data() {
return {
mounted:false,
target:"",
icon:"mdi-account",
iconColour: 'black',
title:"Dynamic title"
}
},
computed: {
},
watch: {
msg: function () {
if(this.msg?.title != undefined){
this.title = this.msg.title
}
if(this.msg?.icon != undefined){
this.icon = this.msg.icon
}
if (this.msg?.color != undefined) {
this.iconColour = this.msg.color
}
}
},
mounted(){
this.target = '#nrdb-ui-group-'+this.props.group+' .v-card-item'
this.mounted = true
}
}
</script>
<style>
.hidden-template{
display:none !important;
}
</style>
You can also define various style classes to adjust other attributes of the icon.
