button-card thread.
Hello! My icon-colors stopped working. Can anyone help me out to fix this?
type: entities
title: Actueel vermogen
show_header_toggle: false
entities:
- entity: sensor.solaredge_actueel_vermogen_corrected
name: SolarEdge | zuid
secondary_info: last-updated
icon: mdi:lightning-bolt
style: |
:host {
{% if states('sensor.solaredge_actueel_vermogen_corrected') | float > 0 %}
--paper-item-icon-color: green;
{% else %} --paper-item-icon-color: red; {% endif %}
}
- entity: sensor.enphase_south
name: Enphase | zuid
secondary_info: last-updated
icon: mdi:lightning-bolt
style: |
:host {
{% if states('sensor.enphase_south') | float > 0 %}
--paper-item-icon-color: green;
{% else %} --paper-item-icon-color: red; {% endif %}
}
- entity: sensor.enphase_north
name: Enphase | noord
secondary_info: last-updated
icon: mdi:lightning-bolt
style: |
:host {
{% if states('sensor.enphase_north') | float > 0 %}
--paper-item-icon-color: green;
{% else %} --paper-item-icon-color: red; {% endif %}
}
- entity: sensor.schuurpanelen
- type: divider
- entity: sensor.solarpower_total
name: Totaal vermogen
secondary_info: none
icon: mdi:solar-panel
style: |
:host {
{% if states('sensor.solarpower_total') | float > 0 %}
--paper-item-icon-color: green;
{% else %} --paper-item-icon-color: red; {% endif %}
}
a. Wrong thread. So not see any theme here. b. read breaking changes from last card-mod update. c. If there are still problems after adjusting according to the breaking changes ā¦
1 Like
style: | no longer works use :
card_mod:
style: |
As @arganto mentioned, please find the correct thread going forward. It will allow for quicker responses to your issues.
1 Like
I am trying to move this card_mod from a card to my theme:
card_mod:
style:
hui-generic-entity-row $: |
.info.text-content {
overflow: visible;
margin-left: 0px;
margin-right: 0px;
}
This should work with
card-mod-row: |
hui-generic-entity-row {
#general css styling
}
hui-generic-entity-row .info.text-content {
overflow: visible;
margin-left: 0px;
margin-right: 0px;
}
Yet it does not. Has something changed or am I missing something?
Actually card_mod: fixed the issueā¦
Iām trying to make the --ha-card-box-shadow blink on certain conditions, but somehow it is blinking the whole button, is there a way to let only the box-shadow blink?
card_mod:
style: |
ha-card
{
background: rgba(0,0,0,0.7);
{% if (states('sensor.voordeur_battery') | float < 20) %}
--ha-card-box-shadow: 0px 0px 9px 2px rgb(255,0,0);
animation: blink 1s linear infinite;
@keyframes blink {
50% {opacity: 0;}
}
{% endif %}
}
{% if (states('sensor.voordeur_battery') | float < 20) %}
mushroom-shape-icon {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
{% endif %}
And for āanimatingā property XYZ you are trying to change property ABC.
Check this simple example:
type: entities
entities:
- entity: input_boolean.test_boolean
card_mod:
style: |
ha-card {
{% if is_state('input_boolean.test_boolean','on') %}
animation: border_blink 1s linear infinite;
{% endif %}
}
@keyframes border_blink {
0% {
border-color: rgba(255,0,0,1);
}
100% {
border-color: rgba(255,0,0,0);
}
}
AND - this thread is for THEMES.
Your question should be asked in a ānormalā card-mod thread. Here it is off-topic.
Sorry must have missed the fact there were several topics for Card-mod and that I had the wrong one.
I do thank you for the reply though as this finally made it work like I wanted it to work 
Although I made smaller stepts to make the box-shadow more smooth
card_mod:
style: |
ha-card
{
background: rgba(0,0,0,0.7);
{% if (states('sensor.voordeur_battery') | float < 20) %}
animation: border_blink 1s linear infinite;
{% endif %}
}
@keyframes border_blink {
0% {
--ha-card-box-shadow: 0px 0px 9px 2px rgba(255,0,0,1);
}
10% {
--ha-card-box-shadow: 0px 0px 9px 2px rgba(255,0,0,0.9);
}
20% {
--ha-card-box-shadow: 0px 0px 9px 2px rgba(255,0,0,0.8);
}
30% {
--ha-card-box-shadow: 0px 0px 9px 2px rgba(255,0,0,0.7);
}
40% {
--ha-card-box-shadow: 0px 0px 9px 2px rgba(255,0,0,0.6);
}
50% {
--ha-card-box-shadow: 0px 0px 9px 2px rgba(255,0,0,0.5);
}
60% {
--ha-card-box-shadow: 0px 0px 9px 2px rgba(255,0,0,0.4);
}
70% {
--ha-card-box-shadow: 0px 0px 9px 2px rgba(255,0,0,0.3);
}
80% {
--ha-card-box-shadow: 0px 0px 9px 2px rgba(255,0,0,0.2);
}
90% {
--ha-card-box-shadow: 0px 0px 9px 2px rgba(255,0,0,0.1);
}
100% {
--ha-card-box-shadow: 0px 0px 9px 2px rgba(255,0,0,0);
}
2 Likes
This topicās agenda is far from CLEAR.This is a technical forum with no place for clowns.
It appears youāre here to simply bash the beginners. These forums are to help folks, not belittle them. At one point you were where they are.
Please, stop making people laughing)
Telling about a proper thread is not so abusive.
Where do you place the āCompact Header Themeā file in and should it be named?
another day, another challengeā¦
I have my weather view set using this theme:
weather-background:
card-mod-theme: weather-background
card-mod-view: |
horizontal-layout {
{% if is_state('input_boolean.weer_view_background','on') %}
background: repeat url({{state_attr('camera.buienradar','entity_picture')}});
{% endif %}
}
with this view config:
title: Weer
path: weer
icon: mdi:weather-partly-cloudy
theme: weather-background
type: custom:horizontal-layout
layout:
max_cols: 2
cards:
and works perfectly.
Trying to set that same theme on a subview now doesnt work at all, probably because of the lay-out?
title: Weer cams
path: weer_cams
theme: weather-background
subview: true
cards:
- !include /config/dashboard/includes/include_weer_cameras.yaml
please have a look how to fix?
thx
while I focussed on the mode itself, and the custom: layout, I should have marked the
card-mod-view
a subview isnt a view, so I figured try:
card-mod-subview, and Bingo !
so, now my theme is
card-mod-view: &cam_background
|
horizontal-layout {
{% if is_state('input_boolean.weer_view_background','on') %}
background: repeat url({{state_attr('camera.buienradar','entity_picture')}});
{% endif %}
}
card-mod-subview: *cam_background
and its working nicely for both of them
so a hidden feature to the rescue, dont think I ever saw that before.
noted
having a long time wish for the fold-entity-row card, for the fold icon. I want it to be the former size, and use the primary color.
Since the 2.2.0 version makes the icon way too large for my taste
, I edited it locally to use:
#head :not(ha-icon) {
flex-grow: 1;
max-width: calc(100% - var(--toggle-icon-width) - 8px);
}
ha-icon {
width: var(--toggle-icon-width);
color: var(--primary-color);
cursor: pointer;
border-radius: 50%;
background-size: cover;
--mdc-icon-size: var(--toggle-icon-width);
}
which is much subtler and in balance with the other elements in Dashboard imho:
so, the only changes are
#head :not(ha-icon) {
max-width: calc(100% - var(--toggle-icon-width) - 8px);
}
ha-icon {
color: var(--primary-color);
}
its a bit of a nuisance to have to use a local resource for that, and not use the HACS version, or set a card_mod on each and every fold-entity-row card, so I was wondering if we could set that as a permanent fix on all fold-entity-row cards in card_mod_theme somehow?
- type: custom:fold-entity-row
card_mod:
style:
ha-icon:
$: |
ha-svg-icon {
color: var(--primary-color);
width: 24px;
}
.: |
#head :not(ha-icon) {
max-width: calc(100% - var(--toggle-icon-width) - 8px);
}
this works, and forgot I need to set the icon width explicitly, because this is set to 32 px in the original resource, and I edited the HACS resource tooā¦
so without any edits Id need the above card_mod. Now how to set that in the card_mod_theme?
Thank you for sharing your projects, Marius. Looks interesting, especially the card-mod-view/subview.
Can you even solve your last problem without changing all icons that are linked to ha-icon? You would need a card specific mod inside themes then, correct?
Question to all:
Is there a padding parameter for themes that will adjust padding of all cards (so including stacks)?
One of my most used card_mod tweaks is removing paddings and I would like to try and disabling it globally.
Padding often creates problems in grids for me. It messes with the layout and bloats grids vertically.
yes, that is what I am looking for.
since I have 399 fold-entity-row cards, it would only be useful if I could do it like that.
if not, editing the resource in a local file seems the way to go, especially since this is such a tiny and easy mod.
tbh, I never understood why the up/down arrows were made so ugly all of a sudden, while they were just fine before.
I am also doing this on each label:
head:
type: section
label: Automaten
card_mod: #!secret style_label_margin
style: |
.label {
margin-left: 0px !important;
}
padding: 0
(because I couldnt get that to work with an edit in the resourceā¦)
I am already using the card_mod magic
399? I donāt have that much cards in total. Not even that many entities or states or switches I am interested in 
I donāt line editing resources locally because I will have to redo it everytime I update.
But it would be pretty nice to be able to mod per card. But I have not seen this for cards that use ha-card or similar. Closest I saw so far were hui-generic-entity-row, hui-toggle-entity-row etc.