which exactly?
And how is the card_mod block starting?
2024.7.0
Hereās the entire themes.yaml file where itās contained.
Iāve actually decided to redo my wall mounted tablets just using the built in Home Assistant features, so this wonāt be an issue for me anymore but just posting this for anyone else might have an issue (saw a few post in the release comments of 2024.7.0 mentioning similar issues).
Iām having an issue with mushroom cards on my dash that have a background image. After upgrading to 2024.7.0 the background image no longer displays, does anybody have any suggestions?
HA 2024.6.4
HA 2024.7.0
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Hallway
secondary: >-
{{ states('sensor.hallway_temperature') | round (1) }}Ā°C - {{
states('sensor.hallway_humidity')}}%
icon: none
entity: light.hallway_lamp
tap_action:
action: navigate
navigation_path: /home-v2/hallway
icon_color: '{{ "orange" if is_state("light.hallway_lamp", "on") else "disabled" }}'
fill_container: true
layout: horizontal
multiline_secondary: false
card_mod:
style:
mushroom-state-info$: |
.primary {
text-shadow: 0px 0px 5px black;
--card-primary-font-weight: 350;
--card-primary-color: white;
--card-primary-font-size: 20px;
align-items: end;
margin-top: 175px;
inline-size: 180px;
height: 25px;
}
.secondary {
--card-secondary-font-size: 13px;
text-shadow: 0px 0px 5px black;
--card-secondary-color: white;
--card-secondary-font-weight: 320;
margin-top: -2px;
}
.: |
:host {
background: url('/local/images/areas/hallway.PNG') center;
background-size: cover;
background-blend-mode: overlay;
#filter: grayscale(70%);
background-color: rgba(var(--rgb-card-background-color), 0.0);
--mush-icon-size: 0px;
height: 220px;
margin-left: -15px !important;
margin-top: -70px !important;
}
mushroom-shape-icon {
--shape-color: rgba(var(--rgb-{{ 'orange' if is_state('light.hallway_lamp', 'on') else 'disabled' }}), 0.4) !important;
}
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: binary_sensor.front_door
state: 'on'
chip:
type: template
entity: binary_sensor.front_door
icon_color: red
icon: mdi:door-open
tap_action:
action: more-info
hold_action:
action: none
- type: conditional
conditions:
- entity: lock.front_door
state: unlocked
chip:
type: template
entity: lock.front_door
icon_color: red
icon: mdi:lock-open-variant
tap_action:
action: more-info
hold_action:
action: none
- type: template
entity: light.hallway_lamp
icon: >-
{{ 'mdi:lightbulb' if expand(area_entities('Hallway')) |
selectattr('domain','eq','light') | selectattr('state','eq','on') |
list | count > 0 else 'mdi:lightbulb-outline' }}
icon_color: >
{% set lights_in_hallway = expand(area_entities('Hallway')) |
selectattr('domain', 'eq', 'light') | list %} {{ 'orange' if
lights_in_hallway | selectattr('state', 'eq', 'on') | list | count > 0
else 'grey' }}
content: >-
{{ expand(area_entities('Hallway')) |
selectattr('domain','eq','light') | selectattr('state','eq','on') |
list | count }}
tap_action:
action: call-service
service: light.toggle
target:
area_id: hallway
hold_action:
action: more-info
alignment: end
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: -15px;
margin-top: -10px;
}
card_mod:
style: |
ha-card {
height: 180px;
width: 180px;
margin-left: auto;
margin-right: auto;
{% if is_state('light.hallway_lamp', 'on') %}
#box-shadow: 0 0 20px rgba(245, 173, 66, 0.5);
#border-radius: 10px;
#background: rgba(245, 173, 66, 0.3); {% endif %}
}
1 Like
@UberDudePL - did you find a solution for this?
Other than the whole vertical stack, or a footer which covers the bottom card?
Thanks
I too have an issue after updating. not much of a CSS guy, and it is a borrowed yaml code so no idea whats wrong.
what i did notice is that the "
margin-left:...
margin-top:...
are not working as expectedā¦
hope that someone could shed light on this since my entire dash is now f*cked =]
It seems 2024.7 has broken card-mod in some ways. My sticky cards donāt stick anymore. Reverting back to 2024.6 works again like normal.
Anyone knows if there is a workaround or bugged?
2 Likes
Could someone enlighten me on how to add some custom text on a Mini graph card? Iād like to add some text, at the top, centered, about where the āaverageā data is.
Hey, nope. Amended only the homepage to have it hovering over last card
Howe can i change the color of the title Speedtest and center the title?
type: custom:stack-in-card
title: Speedtest
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 160px
margin: '-4px -4px -8px -4px'
cards:
- type: custom:stack-in-card
cards:
- type: custom:mushroom-entity-card
entity: sensor.speedtest_download
icon: mdi:download
icon_color: blue
tap_action:
action: none
hold_action:
action: none
primary_info: name
secondary_info: state
name: Download
card_mod:
style: |
ha-card {
margin-right: -8px;
}
- type: custom:mushroom-entity-card
entity: sensor.speedtest_ping
icon: mdi:lan-pending
icon_color: green
tap_action:
action: none
hold_action:
action: none
primary_info: name
secondary_info: state
name: Ping
card_mod:
style: |
ha-card {
margin-right: -8px;
}
- type: custom:mushroom-entity-card
entity: sensor.speedtest_upload
icon: mdi:upload
icon_color: red
tap_action:
action: none
hold_action:
action: none
primary_info: name
secondary_info: state
name: Upload
card_mod:
style: |
ha-card {
margin-right: -8px;
}
How can I apply styles to two different levels of shadow roots? Iām trying to apply styles to elements under both.
hui-card-features$:
hui-cover-position-card-feature$:
**HERE**
ha-control-slider$:
**AND HERE**
But I donāt know how to splice this together in a valid way, I just donāt know the correct syntax here. My thinking was either of these two but neither work:
hui-card-features$:
hui-cover-position-card-feature$: |
div.container {
padding: 0 !important;
}
ha-control-slider$: |
.slider .slider-track-bar {
border-radius: 10px !important;
}
OR
hui-card-features$:
hui-cover-position-card-feature$: |
div.container {
padding: 0 !important;
}
hui-card-features$:
hui-cover-position-card-feature$:
ha-control-slider$: |
.slider .slider-track-bar {
border-radius: 10px !important;
}
This will color it yellow and center it. It isnāt as straight forward as usually because the header is in a shadow root:
type: custom:stack-in-card
title: Speedtest
card_mod:
style:
$: |
h1.card-header {
color: #FF0;
display: flex;
justify-content: center;
}
Apparently this is how itās done:
hui-card-features$:
hui-cover-position-card-feature$:
.: |
div.container {
}
ha-control-slider$: |
div#slider {
}
I got it installed but itās not getting recognized as a valid card. Also, it was last updated over 4 years ago.
There must be an easier way with card-mod, and I need it for over a hundred cards
seeing what you want to show there, Id personally start with simplifying your card itself.
you seem to have a lot of nested custom cards while to the eye, this could all be done with core cards, maybe adding the custom hui-element card to have tiles inside an entities card.
If youād manage that, it would be as simple as setting a card_mod on the title of the top entities cardā¦
also, ( and this is just some yaml saving, not modding), since you have this on all your Tiles:
tap_action:
action: none
hold_action:
action: none
primary_info: name
secondary_info: state
card_mod:
style: |
ha-card {
margin-right: -8px;
}
you can list that on the top item, create an anchor and copy it for the others. Makes the card much more readable
- type: entities
title: Speedtest
entities:
- entity: sensor.speedtest_download
#icon: mdi:download
color: blue
name: Download
<<: &card_config
type: custom:hui-element
card_type: tile
tap_action:
action: none
hold_action:
action: none
primary_info: name
secondary_info: state
card_mod:
style: |
ha-card {
margin: -8px;
box-shadow: none;
}
- entity: sensor.speedtest_ping
# icon: mdi:lan-pending
color: green
name: Ping
<<: *card_config
- entity: sensor.speedtest_upload
# icon: mdi:upload
color: red
name: Upload
<<: *card_config
(didnt set the colors correctly in above config, those are for mushroom, which I dont use, and not for Tile. Just for illustrative purposes, you can make that work easily)
nevermind, it was too easy not to change it for you 
Ill leave the title for you, and if youāre still lost, just check Ildars post at the top of this thread, its all in there
btw note that you dont need to set an icon, only if you want to change the icon the entity already has set, in your case, just the ping sensor
cut it short, my advise: make the card as short and simple as can be
all of a sudden I notice my cameras in an iframe no longer to use the mod that worked before:
type: entities
title: Weer cameras
card_mod:
class: class-header-no-margin
entities:
- type: custom:fold-entity-row
head:
type: section
label: Knmi
card_mod: &label
style: |
.label {
margin-left: 0px !important;
}
padding: 0
entities:
- type: custom:hui-element
card_type: picture-entity
entity: camera.weerkaart_nl
show_name: false
show_state: false
<<: &style
card_mod:
style: |
ha-card {
box-shadow: none;
margin: 8px -16px -16px -16px;
}
- type: custom:fold-entity-row
head:
type: section
label: Roosendaal Br
card_mod: *label
padding: 0
entities:
- type: custom:hui-element
card_type: iframe
aspect_ratio: 100%
url: !secret roosendaal_br
<<: *style
did iframe change its properties? must check, this is a post to get back toā¦
update
and backā¦
had to change/move some of the margins to the fold itself )and ofc then take those out of the mod on the iframe, only keep the box-shadow on that element)
Only need to try to get the bottom title of that iframe, which now is cut off:
type: entities
title: Weer cameras
card_mod:
class: class-header-no-margin
entities:
- type: custom:fold-entity-row
head:
type: section
label: Knmi
card_mod: &label
style: |
.label {
margin-left: 0px !important;
}
padding: 0
entities:
- type: custom:hui-element
card_type: picture-entity
entity: camera.weerkaart_nl
show_name: false
show_state: false
<<: &style
card_mod:
style: |
ha-card {
box-shadow: none;
margin: 8px -16px -16px -16px;
}
- type: custom:fold-entity-row
card_mod: &iframe
style: |
div#items {
margin: 16px -16px -16px -16px;
}
head:
type: section
label: Roosendaal Br
card_mod: *label
padding: 0
entities:
- type: custom:hui-element
card_type: iframe
aspect_ratio: 100%
url: !secret roosendaal_br
card_mod: &style_iframe
style: |
ha-card {
box-shadow: none;
}
Tank you I gone give a try
Something is broken with 2024.7.0 (and later)
This code, that was working perfectly to have 3 cards 2/5,2/5,1/5 is working in 2024.6.4, but in 2024.7.0 and 2024.7.1, the cards are 1/3,1/3,1/3
type: custom:mod-card
card_mod:
style:
hui-horizontal-stack-card $: |
div#root > :first-child {
width: 39.719%;
flex: 0 0 39.719%;
}
div#root > :nth-child(2) {
width: 39.688%;
flex: 0 0 39.688%;
}
div#root > :last-child {
width: 19.612%;
flex: 0 0 19.612%;
}
card:
...
Now should be like
div#root > :last-child > * {
You are an experienced user! You could have noticed a change in Code inspector ))
2 Likes
It seems Iām not. I always rely on all your tutorial that Iāve in favorite in chrome, right here
Then it is more about try and error, with a lot of tears. And Iām always very bad with the shadow things.
2 Likes