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.
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
