ha, that is actually a cool idea!
Iāve added that to my card now. literally the first change since years (well, other than the move to a new collector)
Only need to adapt that icon to reflect the trash type
1 Like
card_mod:
style:
hui-card-features:
$:
hui-card-feature:
$:
hui-climate-fan-modes-card-feature:
$:
ha-control-select:
$:
div:nth-child(2) ha-attribute-icon:
$:
ha-icon:
$:
ha-svg-icon:
$: |
path {
d: path("M12 20V4L9 7") !important;
stroke: #292929 !important;
stroke-width: 3.5 !important;
stroke-linecap: round !important;
stroke-linejoin: round !important;
}
.
div:nth-child(3) ha-attribute-icon:
$:
ha-icon:
$:
ha-svg-icon:
$: |
path {
d: path("M8 8C8 6.97631 8.39052 5.95262 9.17157 5.17157C10.7337 3.60947 13.2663 3.60947 14.8284 5.17157C16.3905 6.73366 16.3905 9.26632 14.8284 10.8284L9.17157 16.4853C8.42143 17.2354 8 18.2528 8 19.3137L8 20L16 20") !important;
stroke: #292929 !important;
stroke-width: 3.5 !important;
stroke-linecap: round !important;
stroke-linejoin: round !important;
}}
.: |
.option.selected {color: black! important}
Regarding the sections headings:
I used the following code in the headings card and it works. But how can I apply it globally through my theme - only for the heading cards? I canāt get my head around the code in the theme yamlā¦
type: heading
icon: ""
heading: Schnellzugriff
heading_style: title
grid_options:
columns: full
rows: 1
tap_action:
action: none
card_mod:
class: class-section-heading-no-color
style: |
.container {
background: transparent;
margin-bottom: 20px !important;
--ha-heading-card-title-color: #fafafa !important;
--ha-heading-card-title-font-size: 20px !important;
--ha-heading-card-title-font-weight: bold !important;
--ha-heading-card-title-letter-spacing: -0.05vw !important;
--ha-heading-card-subtitle-color: #efefef !important;
--ha-heading-card-subtitle-font-size: 10px !important;
}
Hi,
Iām trying to create a template for styling chips to not repeat code, but the styles in chips are not applied.
template:
button_card_templates:
bubble_chip:
variables:
color: '252, 199, 55'
isEnable: false
card_mod:
style: |
ha-card {
--chip-background: rgba('" + variables.color + ", " + (variables.isEnable ? "1" : ".5") + "');
padding: 5px !important;
border-radius: 100% !important;
}
usage:
type: custom:mushroom-chips-card
chips:
- type: template
template: bubble_chip
tap_action:
action: toggle
icon: mdi:lamp
entity: light.men_cave_ceiling_light
variables:
isEnable: is_state('light.men_cave_ceiling_light', 'on')
Can someone help?
Iām new in HA
button_card_templates is used for custom:button-cardā¦ not mushroom
funny to see you use my class there 
you can probably leave that out, if you have not defined that in your card-mod themes.
on the other hand, defining those classes is what you are after.
In the card-mod theme thread did we post how to do that, so hop over and search a bit
1 Like
omg so glad Iām not alone. I think we nabbed a version that he quickly pulled back or somethingā¦
1 Like
Seems I missed nothing here.
2 great news:
ā ā_renderEntityā fix became official;
ā āha-entity-markerā got itās āentityIdā property exposed (otherwise I was not able to access it even in an external js).
struggling with modding my statistics graph cards headersā¦
not sure if it is because I am still using the 3.5.0 card-mod version, or the HA update to 2025.1 (havent found a merged pr in the card yet)
would appreciate if anyone of you could have a look in the statistics graph, and be able to set a mod like this
# card-header in $
style:
$: |
.card-header {
background: var(--background-color-off);
font-weight: 400 !important;
font-size: 20px !important;
color: var(--text-color-off) !important;
padding: 0px 12px !important;
margin: 0px 0px 16px 0px !important;
}
.: |
.card-header ha-icon-button {
--card-mod-icon-color: var(--primary-color);
{{'display: none' if is_state('input_boolean.hide_history_graph_link','on')}};
}
which is what I Am still able to do in the inspectorā¦
there are several 3.5.0 challenges I hope will be fixed in a future update, but this one seems to me should be doable already.
Unless a reall bug in card-mod 3,5,0 of course.
so, please see if 3.4.4 can do what I need? thanks
btw, the history and statics graph cards have different structures, which is unfortunate. Maybe Ill open a FR to align those
update
nevermind, I downgraded and that made it clear immediately that 3.4.0 still does work on that
making that either a bug in 3.5.0, or a required syntax change Ive not yet foundā¦
Iām trying to modify simple-weather-card:
in the way to put some custom text (marked red) basically translation weather info, and also is it possible somehow to change individual small icons (marked blue). If I put the card_mod option (below) all small icons are the same.
type: custom:simple-weather-card
entity: weather.home
name: CITY
primary_info:
- wind_bearing
- wind_speed
secondary_info:
- humidity
- precipitation_probability
card_mod:
style: |
.weather__icon {
{% set condition = states(config.entity) %}
{% if condition == 'partlycloudy' and is_state('sun.sun', 'below_horizon') %}
{% set condition = condition + '-night' %}
{% endif %}
background-image: url("/local/weather_icons/{{ condition }}.svg") !important;
}
.weather__icon--small {
background-image: url("/local/weather_icons/windy.svg") !important;
}
This modification (with animated weather icons) was made by the user: rhysb so all the credits to himā¦
1st post as usual?
no, that is the thing.
this is what I used before, see the paste of the yaml.
with 3.5.0 this no longer works.
It might be why Thomas retracted it, it could also be we need another mod in that version. Not sure yet.
Well, not tried it)))
yeah. I know, living on the edgeā¦
I liked the features of 3.5.0 so much, I didnt want to go back, and figured it would a mere fx for some well known card_mods.
Itās turned out to be a bit more complex than hoped for, but now Ive gone this far, going back would even be more of a day job.
So it gave me the opportunity to take apart some heavy stacked and complex cards.
however, several simple things remain unsolved. l
like setting box-shadow: none to an auto-entities inside an entities cardā¦
Ill await what Card-mod will do the next few days/weeks, and if nothing comes of that, Ill have to reconsiderā¦
First I wanted to install 3.5.0 for testing, but it was deleted from github.
Can you share a code somewhere?
I thought about testing 3.5.0 as well, but if the changes will not stay after re-releasing it, I donāt have time and mind for redoing so many things perhaps again. So Iām now on 2025.1 with 3.4.4 and stay for the meantime with that.
Iām having an issue where text-content:not(.info) is not formatting in the default entities card.
Attempted:
title: Temps
type: entities
entities:
- entity: sensor.central_bee_current_temperature
card_mod:
style:
hui-generic-entity-row:
$: |
text-content:not(.info) {
color: green;
}
But nothing changes.
Canāt seem to find my mistake as it looks correct with other peopleās examples.
EDIT: Looks like there was another person with the same issue a few weeks back, donāt see a resolution (Iām on a PC)
Compare with an ATTENTION your code with an example from the 1st post ā link at the bottom ā Entities
lol, I was missing the period before text-content:not(.info)
.text-content:not(.info)
Thank you!
Hi Thomas,
I would like to use your card-mod.
Just want to increase the font size
What do i do wrong?
type: tile
entity: sensor.wvwfdsae118877_battery_cruising_range
name: Range
vertical: true
card_mod:
style: |
ha-card {
font-size: 4em;
}