Make a custom theme and only apply it to those views.
Where is the app-toolbar in the inspector?
review needed indeedā¦ after updating to todays card-mod 3.0.9, the badges arenāt styled anymore at allā¦
not really sure if this is related, but there is only 1 error in the inspector:
Could not load content for webpack://home-assistant-frontend/chunk.bcc24dc7f2504ad36740.js (HTTP error: status code 404, net::ERR_UNKNOWN_UR
I think you didnāt configure card-mod to load properly.
yes, you are right! its back, was just going to type I had it configured as always, when I noticed the edit in the resources file had accidentally erased the type: module lineā¦
my bad 
sorry.
I tried that but itās not working either when applying to a specific dashboard. I created a new thread since it is now OT from this thread. Set paper-font-body1_-_font-size in theme to 24px?
Try adding it at the bottom, like this
style:
$: |
.mdc-dialog {
backdrop-filter: blur(17px);
-webkit-backdrop-filter: blur(17px);
background: rgba(0,0,0,0.25);
}
.mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
background: none !important;
box-shadow: none;
border-radius: 0px;
}
.: |
:host {
--secondary-background-color: none !important;
}
Hello I need some help on a card for my hp printer.
why am I posting this here you might ask, wellā¦ Itās because I have a printer with a black and a cyan/magenta/yellow cartridge and I would like to add some kind of rainbow color āfillā to the ācustom: bar-cardā
for that cartridge.
I thought I could have just used css as follows:
....
entities:
- color: black
entity: sensor.hp_printer_inkcartridge_black
name: K
- color: #grad {
background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}
entity: sensor.hp_printer_inkcartridge_cyanmagentayellow
name: CMY
height: 150px
....
but it aint workingā¦
I am not really great with coding or scripting, iām learning.
I would really appreciate the help.
Thanks
Donāt worry, everyone is! Eventually youāll pick up the syntax. In this case, color is a field provided by the custom card. First of all, try setting it to linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet). Does that work?
let me try thatā¦
I love this community itās very active and generous.
Iāve learned so much in the short time iwas here.
Iāll get back to you
thanks
It almost works perfect thanks, the only thing is that the ācolorā needs to not fill the whole ācontainerā but only up to the current percentage of ink that is contained in the said cartridge.
I should also NOT use a card with some transparency i am realising !
hereās all the code I have for the card up to now, itās a work in progress 
type: 'custom:bar-card'
columns: '2'
direction: up
entities:
- color: black
entity: sensor.hp_printer_inkcartridge_black
name: K
- color: 'linear-gradient(to top, red,orange,yellow,green,blue,indigo,violet)'
entity: sensor.hp_printer_inkcartridge_cyanmagentayellow
name: CMY
height: 150px
min: 0
max: 100
padding: 0 px
target: 20
title_position: bottom
align: center-split
icon_position: inside
unit_of_measurement: '%'
width: 50%
title: HP Deskjet 3050A
icon: 'mdi:water-outline'
severity:
- from: '100'
icon: 'mdi:water-outline'
to: '30'
- icon: 'mdi:water-alert-outline'
from: '29'
to: '20'
- to: '0'
icon: water-plus-outline
from: '19'
animation:
state: 'on'
thank you
Youāll need to use card-mod, then. I donāt have the most time at the moment, but Iāll get back to you fairly soon.
Ok thank you, that is very much appreciated.
Thanks
Hi All,
Huge kudos to the developer and contributers for this card-mod module. Itās amazing!
My apologies if this has been asked, but I canāt seem to find it.
I am wanting to use card mod to add a box-shadow around a card element for a light that changes colour based on the current colour state of the light entity.
I just canāt work out a variable or some form of simple way to capture the current colour state of the entity and feed that into the style command.
Anybody got any tips they could please share?
Iāve seen pictures of this a few times on this thread. Check this post for example (simply searching for box-shadow).
Hi,
I am trying to rotate an icon 90Āŗ,
with this code:
I made this other code:
- entity: sensor.test_empty_value
name: false
unit: false
icon: 'mdi:link'
tap_action:
action: url
url_path: xxxcc
styles:
'--paper-item-icon-transform': rotate(-90deg)
But of course it is not working, It is an icon in one of the entities in a ācustom:multiple-entity-rowā (see the post I am replying to)
Thatās because those variables arenāt just applying those values, theyāre defined by the framework.
Also this is not related to Card-mod ("styles" is a property for "multiple-entity-row").
Yo used that in the Prost I was mentioning before and I thought I could use something like that to rotate it. How can I rotate it?
Entities card:
type: vertical-stack
title: Icon
cards:
- type: entities
entities:
- entity: sensor.cleargrass_1_co2
name: Colored (sensor)
style: |
:host {
--paper-item-icon-color: red;
}
- entity: sensor.cleargrass_1_co2
name: Colored (sensor)
style:
hui-generic-entity-row:
$:
state-badge:
$:
ha-icon:
$: |
ha-svg-icon {
color: red;
transform: rotate(20deg);
}
- entity: input_boolean.test_boolean
name: Colored (input_boolean)
style:
hui-generic-entity-row:
$:
state-badge:
$:
ha-icon:
$: |
ha-svg-icon {
color: red;
transform: rotate(-20deg);
}
- type: entities
title: Common styling (full path)
style:
hui-sensor-entity-row:
$:
hui-generic-entity-row:
$:
state-badge:
$:
ha-icon:
$: |
ha-svg-icon {
color: red;
transform: rotate(-45deg);
}
entities:
- entity: sensor.cleargrass_1_co2
- entity: sensor.cleargrass_1_co2
multiple-entity-row:
type: vertical-stack
title: Colored icons (diff colors)
cards:
- type: entities
entities:
- type: 'custom:multiple-entity-row'
entity: sensor.yandex_time_home_ildar
style:
hui-generic-entity-row:
'div.entity:nth-child(2) state-badge':
$:
ha-icon:
$: |
ha-svg-icon {
color: green;
transform: rotate(180deg);
}
'div.entity:nth-child(4) state-badge':
$:
ha-icon:
$: |
ha-svg-icon {
color: red;
transform: rotate(45deg);
}
$:
state-badge:
$:
ha-icon:
$: |
ha-svg-icon {
color: orange;
transform: rotate(-45deg);
}
entities:
- entity: sensor.yandex_time_home_ildar
attribute: jamsrate
name: ŠæŃŠ¾Š±ŠŗŠø
unit: ''
- entity: sensor.service_empty_value
name: false
unit: false
icon: 'mdi:car'
- entity: sensor.yandex_time_home_ildar
name: Š½Š° Š“Š¾ŃŠ¾Š³Ń
unit: ''
styles:
width: 60px
text-align: center
- entity: sensor.service_empty_value
name: false
unit: false
icon: 'mdi:car'
tap_action:
action: url
url_path: xxxcc
name: Colored all icons
unit: ''
icon: 'mdi:car'
toggle: false
show_state: false
state_header: ''
secondary_info: last-changed
