HI,
Yes it is working with the stock card-mod v3.4.3.
The only thing I can think of is I also have kiosk mode installed and that is only so I can modify the viewās header to replace the edit icon with the time, reduce the height and remove some of the clutter.
It works in my setup
testing my sections views are without succes just yet. even a spare masonry doesnt seem to be targeted,
how odd
Floow up from card-mod thread for Ildar.
O.k. Only already did it coming from the view-level (see my lines of code) and not from badge as you did above. And because
card-mod-badge-yaml: |
.: |
ha-state-icon {
--mdc-icon-size : 124px;
}
ha-badge:
$: |
.content {
font-size: 14px !important;
font-weight: 400;
}
ddnāt work here, but
card-mod-view-yaml: |
hui-sections-view:
$:
hui-view-badges:
$:
hui-entity-badge:
$:
.: |
ha-state-icon {
--mdc-icon-size : 24px;
}
ha-badge:
$: |
.content {
font-size: 14px !important;
font-weight: 400;
}
Correct, because ācard-mod-badgeā only works with a hacked card-mod. Actually, see no issues with my hack so far ))). But - honestly - I manage to spend only a few days at home a month, i.e. not a huge testing periodā¦
?
On my question in other thread, from where it is, you anwered
O.k. Then itās clear why it is not wokring here and above other users will find a themes styling without the hack as well.
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.
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.,ā¦)