Update:
Following a cue from Github I removed the card-mod entry from configuration.yaml, restarted and reloaded without cache, and the problem stopped happening. Then added the entry back, did the rest and the problem still doesn’t happen. Not sure what was going on.
frontend:
extra_module_url:
- /hacsfiles/lovelace-card-mod/card-mod.js
Using a custom button card hack using HTML elements:
Using markdown tables specifically:
The latter only works again from v3.4.0 of card-mod. See this issue.
Hello,
just a beginner question.
I have a card defined:
type: entity
entity: sensor.esphome_web_a567a4_oven_temperature
card_mod:
style: |
.value {
font-size: 34px !important;
font-weight: bold;
}
ha-card {
color: green;
}
also I have a slider (helper) with ID input_number.temperatureslider1
how can I dynamically change the text color of the card based on value in temperatureslider1 ?
I mean, I would like to see the actual temperature green on background if (temperature < temperatureslider1) and red on background if (temperature >= temperatureslider1).
Thx for any help.
A common schema:
some_dom_path {
{% if ..... -%}
css_prop_a: value_1;
css_prop_b: value_2;
{%- elif ... -%}
css_prop_a: value_3;
css_prop_b: value_4;
{%- else -%}
css_prop_a: value_5;
css_prop_b: value_6;
{%- endif %}
css_prop_x: value_7;
}
You mean for example:
type: entity
entity: sensor.esphome_web_a567a4_oven_temperature
card_mod:
style: |
.value {
font-size: 34px !important;
font-weight: bold;
}
ha-card {
{% if (sensor.esphome_web_a567a4_oven_temperature <= input_number.temperatureslider1) -%}
color: green;
{%- else -%}
color: red;
{%- endif %}
}
?
{% if states('sensor.esphome_web_a567a4_oven_temperature')|float(default=0) <=
states('input_number.temperatureslider1')|float(default=0) -%}
Thank you very much. And I apologize for an off-topic question.
Best regards
PavelK
BTW, it works now. Thanks again. As a total noob in HA, I did not know that things like Templates and/or Jinja exists. 
I have been trying to combine the third example on the post above and this other post to change the fill color of the chip buttons in a conditional row inside an entities card, but for the life of me I can’t get it to work. The style doesn’t take effect. However, using the browser inspector the color does change for the same --ha-assist-chip-filled-container-color property that appears on the first post.
type: entities
entities:
- entity: input_select.car_service_reset_drop_down_mirage
name: ' '
- type: conditional
conditions:
- entity: input_select.car_service_reset_drop_down_mirage
state_not: Select
row:
type: buttons
entities:
- entity: input_button.car_service_reset_mirage
name: Reset (Hold)
show_name: true
show_icon: false
tap_action:
action: none
hold_action:
action: call-service
service: input_button.press
target:
entity_id: input_button.car_service_reset_mirage
card_mod:
style:
hui-buttons-base $: |
ha-assist-chip {
--ha-assist-chip-filled-container-color: teal;
}
title: Reset Service
show_header_toggle: true
card_mod:
style:
hui-buttons-row $ hui-buttons-base $: |
Worked! Thanks!
i tried to modify the color icon of Est.PM 2.5, but it doesn’t change…where i am wrong?
cards:
- type: tile
entity: sensor.aria_pm25
name: PM 2.5
show_entity_picture: false
- type: tile
entity: sensor.aria_voc_index
name: VOC Index
icon: mdi:chart-bell-curve-cumulative
- type: tile
name: Est.PM 2.5
show_entity_picture: false
entity: sensor.aria_esterna_inquinata
icon: mdi:liquid-spot
card_mod:
style: |
ha-card {
{% if is_state(input_boolean.aria_esterna_inquinata, 'on') %}
color:var(--green-color);
{% elif is_state(input_boolean.aria_esterna_moderatamente_inquinata, 'on') %}
color:var(--orange-color);
{% elif is_state(input_boolean.aria_esterna_buona, 'on') %}
color:var(--green-color);
{% endif %}
}```1st post → link at the bottom → Tiles
I’m facing an issue where my modified cards look great on Android and tablets but don’t render right on iPhones (yeah we are a mixed household lol). Half the card is missing. My guess is that my card mod code is hyper targeted to what I see in Chrome and probably not generic enough. I saw something about reliability of paths on the official docs on github. Before I go crazy rechecking everything, does anyone know if this is a known issue with a simple fix or I need to play with shadow root paths? Thanks!
P.S. one of the biggest source of complexity now is shoving two mini graph cards in a mushroom template card to display humidity and temp trends for past 24 hours. If you know a simpler way to add charts to mushroom template pls let me know. Right now I need to do a lot of resizing and play with translate and margins.
In this way?
i dont’ undertood when i wrong
type: horizontal-stack
cards:
- type: tile
entity: sensor.aria_pm25
name: PM 2.5
show_entity_picture: false
- type: tile
entity: sensor.aria_voc_index
name: VOC Index
icon: mdi:chart-bell-curve-cumulative
- type: tile
name: Est.PM 2.5
show_entity_picture: false
entity: sensor.aria_esterna_inquinata
icon: mdi:liquid-spot
card_mod:
style: |
ha-card {
{% if is_state(input_boolean.aria_esterna_inquinata, 'on') %}
--tile-color: red !important;
{% elif is_state(input_boolean.aria_esterna_moderatamente_inquinata, 'on') %}
--tile-color: orange !important;
{% elif is_state(input_boolean.aria_esterna_buona, 'on') %}
--tile-color: green !important;
{% endif %}
}```What is likely causing your issue is just that browsers have different CSS variable support, interpret variables differently, and make different assumptions to what defaults should be.
Chrome(Chromium Browsers)/Android uses Webkit, iPhone also uses Webkit, but the implementation is different, and firefox uses the Gecko engine.
The issue wont be with card mod or the elements you have selected as this will be static, it will be with the variables you have chosen to use. So look into finding out what variables may need 2 different variables declared to work nicely accross browsers.
Very interesting insight, thank you! I’ll look into that
type: picture-elements
image: local/3D/base.png
card_mod:
style: |
ha-card {
mediaquery:
'(max-width: 40px)':
--fan-transform-style: scale(2.0,5.0) translate(-50%,-50%);
--sensor-transform-style: scale(3.5,1.5) translate(-50%, -50%);
--other-transform-style: scale(5.0,1.0) translate(-50%,-50%);
}
code check on mediaquery with card-mod:
all 3 will also work if i were to remove the following from above:
mediaquery:
'(max-width: 40px)':
Does this work for you?
type: horizontal-stack
cards:
- type: tile
entity: sensor.aria_pm25
name: PM 2.5
show_entity_picture: false
- type: tile
entity: sensor.aria_voc_index
name: VOC Index
icon: mdi:chart-bell-curve-cumulative
- type: tile
name: Est.PM 2.5
show_entity_picture: false
entity: sensor.aria_esterna_inquinata
icon: mdi:liquid-spot
card_mod:
style:
ha-tile-icon$: |
.shape {
{% if is_state('input_boolean.aria_esterna_inquinata', 'on') %}
background: red !important
{% elif is_state('input_boolean.aria_esterna_moderatamente_inquinata', 'on') %}
background: orange !important
{% elif is_state('input_boolean.aria_esterna_buona', 'on') %}
background: green !important
{% endif %}
}
Can you share any resource in the www that mediaquery is working at all in CSS with such notation?
That does not appear to be the correct format for a mediaquery.
The below should work:
card_mod:
style: |
@media (max-width: 40px) {
ha-card {
--fan-transform-style: scale(2.0,5.0) translate(-50%,-50%);
--sensor-transform-style: scale(3.5,1.5) translate(-50%, -50%);
--other-transform-style: scale(5.0,1.0) translate(-50%,-50%);
}
}