card-mod-badge is a STANDARD thing for card-mod themes.
But it does not work since 2024.8 - for old & new badges.
To restore this functionality for NEW badges - the hack is needed.
1 Like
O.k. I see. But as it is working directly with card-mod-view-yaml as above, I currently see no need for it. At least for my requirements. Beside it would be shorter to declare.
thanks for the idea! that didnāt work, unfortunately. oh well. i can live with it! appreciate the thought.
can confirm that to work. very nice
except for badges that have their own (extra) detail, like a border. apparently, if the custom:mod-card has been set on an individual badge the theming no longer applies.
or have any other theme set in the main config options that contains card-mod theming
had hoped I could set
.badge {
border: 2px red solid;
}
under the .content, but that too does not set. or with !important
mysterious.
wait, too soon, they kicked in after all:
only now, my background isnt showing anymoreā¦
weather-background:
card-mod-theme: weather-background
card-mod-view: &cam_background
|
vertical-layout {
{% if is_state('input_boolean.weer_view_background','on') %}
background: repeat url({{state_attr('camera.buienradar','entity_picture')}}) fixed;
{% endif %}
}
hui-sections-view {
{% if is_state('input_boolean.weer_view_background','on') %}
background: repeat url({{state_attr('camera.buienradar','entity_picture')}}) fixed;
{% endif %}
}
itās one or the other
Hi,
I was trying to edit some styles on new badges, without any success.
Tried from this post: š¹ Card-mod - Super-charge your themes! - #1765 by Ildar_Gabdullin
The part on the badges row works fine for me, however the second part with badge specific styles is not working.
Anyone can share a working example please? I am looking to update the font-family on the content.
for the badge specific mods, you should hop over to the card-mod thread where various examples have been added lately.
this thread is for theming
I meant for theme of course.
Tried many examples, for some reasons, the examples for badges row itself are working for me, but diving inside, to change font on any badge not working for me.
a right, sorry for misreading that.
what did you try, please post some yaml so we can check
my MO mostly is to first try using card-mod only on an individual, to get the elements right, and next add that to the card-mod theme settings
Did you already manage an individual badge?
Sure,
This example working for me:
card-mod-view-yaml: |
hui-sections-view:
$:
hui-view-badges $: |
@media (max-width: 450px) {
.badges {
justify-content: start !important;
}
}
However this is not working:
card-mod-view-yaml: |
hui-sections-view:
$:
hui-view-badges $:
hui-badge:
hui-entity-badge $: |
.badge {
background-color: cyan !important;
}
Took from this threadā¦
check the dom path, and check the mods from the individual badge in the card-mod thread. theyāre not on
.badge
going from the
hui-entity-badge:
$: |
but use these:
card_mod:
style:
hui-entity-badge:
$: |
ha-state-icon {
--mdc-icon-size: 24px;
/*color: {{'var(--warning-color)'
if is_state('binary_sensor.werkdag','on')}};*/
}
/*state-display {
font-size: 14px;
color: {{states('sensor.afval_kleur')}};
}*/
.: |
/*hui-entity-badge {
--ha-card-background: {{'var(--success-color)'
if is_state('binary_sensor.werkdag','off') else 'var(--card-background-color)'}};
}*/
ha-card {
border: 2px solid {{states('sensor.afval_kleur')}};
border-radius: 24px;
/*--ha-card-background: gray;*/
/*--primary-text-color: white;*/
--card-mod-icon-color: {{states('sensor.afval_kleur')}}; /*--icon-primary-color:*/
}
(all commented versions work, itās just a matter of preference which one you would use. keeping it as simple as possible)
Tried everythingā¦ itās just not working
Something I am missingā¦
card-mod-view-yaml: |
hui-sections-view:
$:
hui-view-badges $:
hui-badge:
hui-entity-badge $: |
ha-state-icon {
--mdc-icon-size: 24px;
color: red !important;
}
- type: horizontal-stack
cards:
- type: "custom:stack-in-card"
cards:
- type: custom:mushroom-template-card
primary: Energie
icon: mdi:alpha-e-circle-outline
tap_action:
action: call-service
service: input_select.select_option
service_data:
entity_id: input_select.dashboard_view # Helper entiteit
option: energie
icon_color: white
fill_container: true
card_mod:
style: |
ha-card {
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3) !important;
background-color: rgba({{ states("input_text.kleur_iconen")}},0.2) !important;
}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: climate.ruimte1
icon: mdi:fan
icon_color: white
tap_action:
action: toggle
card_mod:
style: |
ha-card {
border: none !important;
box-shadow: none !important;
}
Iāve made four of these ābuttonsā. How can I make more space between the buttons ?
try things like this:
card-mod-view-yaml: |
hui-sections-view:
$:
hui-view-badges:
$:
hui-entity-badge:
$:
ha-badge:
$: |
.badge {
border: 2px red solid !important;
}
.content {
font-size: 14px !important;
font-weight: 400;
}
.: |
ha-state-icon {
--mdc-icon-size : 24px;
}
this touches all my badges, and still leaves room for the mods on individual badges.
(was able to do this after @arganto helped me out in the regular card_mod thread on individual badges.)
please help us help you, and move this to regular card-mod thread (its not about theming)
also, provide a picture of the card, and a minimal config of cards, not all details.,ā¦)
Sticky badges
test_badges_sticky:
card-mod-theme: test_badges_sticky
card-mod-view-yaml: |
:first-child:not(hui-sections-view):
$: |
hui-view-badges {
z-index: 2;
position: sticky;
top: calc(var(--header-height) + 8px);
}
hui-sections-view:
$: |
hui-view-badges {
z-index: 2;
position: sticky;
top: var(--header-height);
}
Works at least in a Chrome+Win, iOS Companion App (iOS 15.x).
5 Likes
nice!
does it also work when you card_mod an individual badge for icon color etc?
Ive found the card_mod theme mods to be breaking when I do so. or vice versa of course
Example, I have this in card_nod theme:
card-mod-view-yaml: |
hui-sections-view:
$:
hui-view-badges:
$:
hui-entity-badge:
$: |
ha-state-icon {
--mdc-icon-size : 24px;
}
but need to repeat the icon size when I mod other stuff on an individual badge with:
type: custom:mod-card
card:
type: custom:hui-entity-badge
entity: sensor.afvalwijzer_vandaag
hold_action:
action: navigate
navigation_path: /ui-overzicht/kalender
visibility:
- condition: state
entity: sensor.afvalwijzer_vandaag
state_not: geen
card_mod:
style:
hui-entity-badge:
$:
ha-badge:
$: |
.badge {
border: 2px solid {{states('sensor.afval_kleur')}} !important;
}
.: |
ha-state-icon {
--mdc-icon-size: 24px;
color: {{states('sensor.afval_kleur')}};
}
Interesting.
Usually card-mod-theme & ānormalā card-mod may work together to style same element:
test_overwrite:
card-mod-theme: test_overwrite
card-mod-row-yaml: |
hui-generic-entity-row $: |
state-badge {
color: red;
}
type: entities
entities:
- entity: sun.sun
- entity: zone.home
card_mod:
style:
hui-generic-entity-row $: |
state-badge {
border: 1px solid cyan;
}
yes, even breaks if I merely set a card_mod theme background to the view.
weather-background:
card-mod-theme: weather-background
card-mod-view:
hui-sections-view {
{% if is_state('input_boolean.weer_view_background','on') %}
background: repeat url({{state_attr('camera.buienradar','entity_picture')}}) fixed;
{% endif %}
}
In that case the theme mod to the badges doesnt work either on the view with that background, and I need to mod them individually
Iām trying to add a semi-transparent background to all section divs on my dashboard, but I canāt find out, how. The last few days I tried so many different things without luck, that Iām about to give up. Thus, asking here for help is my last shot. 
Adding a card-mod-view-yaml section to my current theme is my latest approach and I honestly have no more ideas, why this doesnāt work out:
ios-dark-mode-blue-red:
card-mod-view-yaml: |
hui-sections-view:
$:
ha-sortable:
div:
div.section: |
background-color: rgba(0, 0, 0, 0.3) !important;
padding-left: 0.2504em !important;
padding-right: 0.5em !important;
padding-bottom: 0.5em !important;
border-radius: var(--ha-card-border-radius,12px) !important;
grid-column: span var(--column-span) !important;
grid-row: span var(--row-span) !important;
}
Does anyone of you have an idea, why this still doesnāt have any effect?
Start with adding:
card-mod-theme: ios-dark-mode-blue-red