As always: First post, link to Ildas examples/tutorials and there you will find an entry for combining such things. Or search for this in this thread and you will find the same question and same answer and even more examples a lot (!) of times.
Sometimes it is really faster and more helpful to do some search and see, how the others are doing it and if the same questions has been flying around again and again.
Example: The last same question has been answered just 2d/15 posts above.
Anyone willing to look at the below and tell me where I am going astray? Problem is the text color is not changing when then the background changes to yellow. The card is showing me the output of some of the FLUME sensors. The background color will change based on the # of gallons used, this is working, problem I am having is when it turns yellow I canât read the numbers so I want the text color to change to black only when the background is yellow. this is all the code for ref. the Card Mod stuff is at the end, attempt 1 was this-
mode: horizontal
cards:
- type: custom:button-card
entity: sensor.flume_sensor_denmans_current_day
name: Today
icon: mdi:water
show_state: true
styles:
card:
- '--keep-background': 'true'
- filter: opacity(70%)
- height: 40px
icon:
- color: white
name:
- font-size: 12px
- color: white
- type: custom:button-card
entity: sensor.flume_sensor_denmans_current_week
name: This Week
icon: mdi:water
show_state: true
styles:
card:
- '--keep-background': 'true'
- filter: opacity(70%)
- height: 40px
icon:
- color: white
name:
- font-size: 12px
- color: white
- type: custom:button-card
entity: sensor.flume_sensor_denmans_current_month
name: This Month
icon: mdi:water
show_state: true
styles:
card:
- '--keep-background': 'true'
- filter: opacity(70%)
- height: 40px
icon:
- color: white
name:
- font-size: 12px
- color: white
card_mod:
style: |
ha-card {
{% set value = states('sensor.flume_sensor_denmans_current_month')|int %}
{% if value >= 0 and value <= 12000 %}
--ha-card-background: green;
{% elif value >= 12001 and value <= 15000 %}
--ha-card-background: yellow;
{% else %}
--ha-card-background: red;
{% endif %}
{% if value >= 12001 and value <= 15000 %}
color: black;
{% else %}
color: var(--accent-color);
{% endif %}
} ```
Attempt 2, Just the changed Card Mod stuff-
``` card_mod:
style: |
ha-card {
{% set value = states('sensor.flume_sensor_denmans_current_month')|int %}
{% if value >= 0 and value <= 12000 %}
--ha-card-background: green;
{% elif value >= 12001 and value <= 15000 %}
--ha-card-background: yellow;
{% else %}
--ha-card-background: red;
{% endif %}
{% if value >= 12001 and value <= 15000 %}
color: black;
{% endif %}
}
Atempt 3, also no go.
style: |
ha-card {
{% set value = states('sensor.flume_sensor_denmans_current_month')|int %}
{% if value >= 0 and value <= 12000 %}
--ha-card-background: green;
{% elif value >= 12001 and value <= 15000 %}
--ha-card-background: yellow;
{% else %}
--ha-card-background: red;
{% endif %}
}
.card-content {
color: var(--accent-color);
}
.card-content.yellow {
color: black;
}
Good morning!
Does anyone know how to add a shadow to the image in the weather card?
And: Can I reduce the spcing in between the Text and the temperture?
Thanky you, a lot, and all the best!
used someone code for a thermostat for a room, but it put a green bar below and I canât remove it.
type: custom:stack-in-card
keep:
margin: false
box_shadow: false
background: false
cards:
Please post your code based off #11
Hi there,
Since I updated to 2024.02, some of the card_mod configurations are not being applied, in this case on the Tile card, mainly this one:
card_mod:
style:
.icon-container .icon$: |
.shape {
border-radius: 15px !important;
This should make the icon containers almost square, with a round of 15px at the corners but now they are all round. I suppose this is being ignored.
Someone have some pointers on how to solve this?
Thanks.
Pedro.
Hello everyone,
Iâm currently using a dashboard that is made up of various custom cards. My goal for 2024 is to move the whole thing back a little more towards standard 
And to explore the possibilities with the standard cards + Card_Mod where necessary.
I currently have some problems where I hope you can help me
I would like to use a tile card and display only one icon. The Problem is the GAP for the Name stays there.
- type: tile
icon: mdi:home-outline
entity: zone.home
hide_state: true
show_entity_picture: false
vertical: false
card_mod:
style:
ha-tile-info$: |
.primary {
visibility: hidden;
}
Is there a better way to achieve my goal?
Unfortunately, the problem here is that Iâm missing the icon background, which I personally like the look and feel of.
Does anyone here have an example of how I can implement a corresponding icon background with card mod? (It is the standard button card, not a custom version)
Thx in advance
What do you consider an icon background? color?
Sorry, that it was not clear - i mean the circle behind the icon as the tile card has it (so yes a different color)
i hope its clearer now
This will change the background of the icon or what is called the shape color.
type: tile
entity: light.bed_lights
card_mod:
style: |
ha-card {
--tile-color: red !important;
}
Add background: to adjust the card color
type: tile
entity: light.bed_lights
card_mod:
style: |
ha-card {
--tile-color: red !important;
background: grey !important;
}
Great, thx a lot
But one more question, is it possible to geht this shape color on the button card?
yesâŚ
show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: light.patio_spot_2
card_mod:
style: |
ha-card {
background: deepskyblue;
}
Check out this post for a lot of solid infio
You are just touching the surface of what can be doneâŚ
thx for the linkâŚ
yes i see⌠a big mountain in front of me
in evening i will have a look at the links, but perhaps you can have a quick look - whats wrong at this statement
show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: light.office
card_mod:
style: |
ha-card {
--tile-color: red !important;
}
i thougt there would be a red shape color around the icon. But no shape color in red 
The invisible shape around the icon is actually a square, but I suppose you could color it and add a radius.
If anybody is looking for how to override the colours for an alarm control panel tile card, hereâs one way to do it: Card-mod for Tile card: icon & tile color - #52 by parautenbach.
Thanks for the help, @Ildar_Gabdullin!
Newbie to card mod and css styles here. Iâve been playing around with some room cards using a combination of button card/mushroom. Following along with the ideas from https://www.youtube.com/watch?v=RSQwxuAm
I am having a lot of trouble adding in a background image to my card. Trialing first with the first card in the vertical stack below (Master).
Havenât been able to get it to work under card mod or styles:. Also had trouble with the parameters under the button card itself. Hoping just a newbie mistake but I would appreciate if anyone has any suggestions.
type: vertical-stack
cards:
- square: false
type: grid
cards:
- type: custom:button-card
name: Master
icon: mdi:bed-king-outline
entity: none
card_mod:
style: |
ha-card > div {
padding: 0px 0px 0px!important;
}
ha-card {
padding: 10px 10px!important;
border: none;
border-radius: 10px;
background-image: url("/local/background/MasterBW.jpg")
box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.0);
}
custom_fields:
btn:
card:
type: custom:mushroom-chips-card
chips:
- type: template
tap_action:
action: toggle
icon: mdi:lightbulb-outline
entity: light.philips_bulb_1
card_mod:
style: |
ha-card {
--chip-background: {{ 'rgba(255,255,255,0.7)' if is_state('light.philips_bulb_1', 'on') else 'rgba(0,0,0,0.1)' }};
border: none;
padding: 0px!important;
border-radius: 10px!important;
}
- type: template
tap_action:
action: toggle
icon: mdi:led-strip-variant
entity: light.philips_strip_1
card_mod:
style: |
ha-card {
--chip-background: {{ 'rgba(255,255,255,0.7)' if is_state('light.philips_strip_1', 'on') else 'rgba(0,0,0,0.1)' }};
border: none;
padding: 0px!important;
border-radius: 10px!important;
}
- type: template
tap_action:
action: toggle
icon: mdi:television
entity: media_player.bedroom_tv
card_mod:
style: |
ha-card {
--chip-background: {{ 'rgba(255,255,255,0.7)' if is_state('media_player.bedroom_tv', 'on') else 'rgba(0,0,0,0.1)' }};
border: none;
padding: 0px!important;
border-radius: 10px!important;
}
styles:
grid:
- grid-template-areas: '"n btn" "s btn" "i btn"'
- grid-template-columns: 1fr min-content
- grid-template-rows: min-content min-content 1fr
card:
- padding: 10px 10px 10px 10px
- height: 132px
custom_fields:
btn:
- justify-content: end
- align-self: start
name:
- justify-self: start
- align-self: start
- font-size: 18px
- font-weight: 500
- color: light-grey
state:
- min-height: 80px
- justify-self: start
- align-self: start
- font-size: 14px
- opacity: '1'
img_cell:
- position: absolute
- width: 60px
- height: 60px
- left: 0
- bottom: 0
- margin: 0 0 10px 10px
- background: rgba(0,0,0,0.1)
- border-radius: 10px
icon:
- width: 50px
- color: light-grey
- opacity: '1'
show_state: true
- type: custom:button-card
name: Living
icon: mdi:sofa-outline
entity: none
card_mod:
style: |
ha-card > div {
padding: 0px 0px 0px!important;
}
ha-card {
padding: 10px 10px!important;
border: none;
border-radius: 10px;
background-color: rgba(0,0,0,0.1);
box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.0);
}
custom_fields:
btn:
card:
type: custom:mushroom-chips-card
chips:
- type: template
tap_action:
action: toggle
icon: mdi:bullhorn-outline
entity: switch.neo_siren_1_alarm
card_mod:
style: |
ha-card {
--chip-background: {{ 'rgba(255,255,255,0.7)' if is_state('switch.neo_siren_1_alarm', 'on') else 'rgba(0,0,0,0.1)' }};
border: none;
padding: 0px!important;
border-radius: 10px!important;
}
- type: template
tap_action:
action: toggle
icon: mdi:led-strip-variant
entity: light.philips_strip_2
card_mod:
style: |
ha-card {
--chip-background: {{ 'rgba(255,255,255,0.7)' if is_state('light.philips_strip_2', 'on') else 'rgba(0,0,0,0.1)' }};
border: none;
padding: 0px!important;
border-radius: 10px!important;
}
styles:
grid:
- grid-template-areas: '"n btn" "s btn" "i btn"'
- grid-template-columns: 1fr min-content
- grid-template-rows: min-content min-content 1fr
card:
- padding: 10px 10px 10px 10px
- height: 132px
custom_fields:
btn:
- justify-content: end
- align-self: start
name:
- justify-self: start
- align-self: start
- font-size: 18px
- font-weight: 500
- color: light-grey
state:
- min-height: 80px
- justify-self: start
- align-self: start
- font-size: 14px
- opacity: '0.7'
img_cell:
- justify-content: start
- position: absolute
- width: 60px
- height: 60px
- left: 0
- bottom: 0
- margin: 0 0 10px 10px
- background: rgba(0,0,0,0.1)
- border-radius: 10px
icon:
- width: 40px
- color: light-grey
- opacity: '1'
- padding: 10px
show_state: true
columns: 2
Hey there:
Can anyone help me reducing the space in between the icon and the primary info of the entity in this entity-filter card?
Is there a way to change the color of the switches at the end of the rows (without changing the theme)?
Many thanks in advance!
I just started having an issue with text sizing and line spacing after a recent update. (Not sure which one.)
About a year ago, I created a card with the help of this forum that gives me a weather forecast with variable font sizing based on the length of the forecast. For example, âSunny. High near 70.â will be in a larger font than âA chance of rain showers after 1am. Mostly cloudy, with a low around 40. Chance of precipitation is 50%. New rainfall amounts less than a tenth of an inch possible.â
Hereâs the code:
- type: custom:mushroom-template-card
primary: ''
secondary: >-
{{ state_attr('weather.knyc_daynight',
'forecast')[0].detailed_description }}
icon: ''
entity: weather.knyc_daynight
tap_action:
action: more-info
fill_container: true
multiline_secondary: true
view_layout:
grid-area: m2
card_mod:
style: |
ha-card {
--card-secondary-font-size: calc((-0.0035 * {{ state_attr('weather.knyc_daynight', 'forecast')[0].detailed_description | length }} * 1em) + 2.1em);
--card-secondary-font-weight: bold;
margin: -7px -2px;
}
Itâs been working fine for the better part of a year, but now Iâm getting output that looks like this:
I see that some other people have recently posted similar issues regarding line spacing (what changed?), but their solutions involve specifying a static line height. Is there an easy way to fix this given the variable font size?
is this still supposed to work?
Ive tried it with:
type: media-control
entity: media_player.googlehome_slaapkamer
card_mod:
style: |
.background.no-image > * {
background-color: green;
}
as a longstanding wish to finally color those idle players, but there is no result:
trying this in inspector makes it happen on background: green, and no !important is required, as it doesnât make a difference, cant touch it.
Anyone succeed in coloring the idle background?
silly thing is some colors can be set, only in hex, and none of the theme variables seem to do anything.
Is this a special card�
using my older
type: media-control
entity: media_player.googlehome_slaapkamer
card_mod:
style: |
.player {
background-color: var(--primary-color);
}
kind of works, but, as before, loses the player icon
and setting the opacity on the background kills the colorâŚ
