other than those issues (that are not issues but all support questions) in the Card-mod repo, what is the problem you experience with card-mod-themes?
a statement like the above without substantiating it isnt really useful for anyone.
card-mod is 100% functional, and even ha 2024.8 didnt break it 
Historically when one investigates an issue they look for other experiencing the same thing. The issue I have tracked in the github felt related. I brought the topic here to understand how you all are not impacted since there is actual recent conversation happening. Sorry this is a tangential thread about themes and not card-mod itself, i did not notice.
Since my limited lens is just us failures over on github through mulitple unanswered issues i thought there was indeed a bug. The assurance that you all have not experienced the same spells it out that I have something wrong, still, with my implementation.
… and until you are not posting a simple small example which is not working anymore (in the right thread), no one will be able to have a look, help or fix it.
to keep it on topic, this works fine:
card-mod-view: |
{% set meteo = is_state('binary_sensor.meteoalarm_brabant','on') %}
{% set weeralarm = state_attr('sensor.weer_alarm','icon_color') %}
hui-sections-view {
{% if meteo %} background: {{weeralarm}};
{% endif %}
}
probably many more mods, but I didnt test those yet, dont need them, because any of the mods I use there are on the individual entities.
Until you post your issue, there is nothing we can do
Anyone was able to apply theme card mod modification to the new badges, I mean the whole container, the “div.badges” element, not for each badge?
Maybe some example?
Like this?
card-mod-view-yaml: |
hui-masonry-view:
$:
hui-view-badges $: |
.badges {
flex-direction: column;
}
Yes, exactly!
But using “sections” view 
I was trying to do something similar, but for some reason it is not working for me.
Also, I already have more items under “card-mod-view-yaml”, so I am trying to this with dictionary style.
Edit:
Nevermind, I got it, managed
Thanks a lot!
almost got to the point where I can uninstall my own custom-ui plugin… but this is a diffult challenge.
I’ve set a customize template on the person entity pictures to show a grayscale version when the state is not_home
homeassistant:
customize_domain:
person:
templates:
entity_picture: >
var id = entity.entity_id.split('.')[1];
return state === 'not_home'
? '/local/family/' + id + '_not_home.png' : '/local/family/' + id + '.jpg';
this makes the person entities show like that in every card config we use it in, especially useful for the Map card (either as panel, or signal card)
I am already using this in the regular entities cards:
style:
hui-generic-entity-row:
$: |
state-badge {
filter:
{{'grayscale(100%)' if not is_state(config.entity,'home') else 'none'}};
}
or in glance:
# not_home_picture_glance:
style: |
state-badge {
filter:
{{'grayscale(100%)' if not is_state(config.entity,'home') else 'none'}};
}
and that is just perfect.
But I cant make it happen via card_mod on a map-card like that, or in the more-info of a person entity, showing that map.
My last hope would be to set it generically in card-mod-theme , but need some help. would this be doable?
the only other option I see is too completely copy the person entity to a template sensor, and add an entity_picture template, and use those in the maps… hardly elegant, no css grayscale but hardcoded, though 100% core
- unique_id: marijn_locatie
<<: &locatie
state: >
{% set id = this.attributes.get('id') %}
{{states('device_tracker.'~id)|replace('_',' ')|title}}
picture: >
{% set id = this.attributes.get('id') %}
{% if states('person.'~id) == 'not_home' %}
/local/family/{{id}}_not_home.png
{% else %} /local/family/{{id}}.jpg
{% endif %}
attributes:
# id: marijn
# <<: &locatie_attributen
location: >
{% set id = this.attributes.get('id') %}
{% set sensor = 'sensor.'~id~'_geocoded_location' %}
{{state_attr(sensor,'Name')}} {{state_attr(sensor,'Postal Code')}}
{{state_attr(sensor,'Locality')}}
country_code: >
{% set id = this.attributes.get('id') %}
{{state_attr('sensor.'~id~'_geocoded_location','ISO Country Code')|lower}}
country: >
{% set id = this.attributes.get('id') %}
{{state_attr('sensor.'~id~'_geocoded_location','Country')}}
latitude: >
{% set id = this.attributes.get('id') %}
{% set track = 'device_tracker.'~id %}
{{state_attr(track,'latitude')}}
longitude: >
{% set id = this.attributes.get('id') %}
{% set track = 'device_tracker.'~id %}
{{state_attr(track,'longitude')}}
What happened, it doesn;t work anymore
Hi,
If I’ve overlooked this apologies, is there a way to change the border colour of the new badges?
I used to use
label-badge-red: '#xxxxxx'
in my theme but this now has no effect.
Update: after looking at the badges the browser Dev Tools I can see that the badges are not independent from the main theme. So they inherit the border colour from the theme itself. So that looks like it is impossible to have a different border colour for the new badges.
Madelena says there is no difference in functionality!
Next I can see that the Style for the new badges has a different border to the main borders but there is no colour in the style. Also I can see that the badge border opacity is 0.4 but I don’t know how to change that as it cannot be edited in the Dev Console.
So, it appears changing the border colour of the badges is impossible without changing all borders. I an live with that BUT I would like to change the border thickness or opacity of the badges independently of the rest of the theme.
Any Ideas?
noticed this got a new like… and need to answer: yes we can color the icons .
you can find the code in this thread somewhere above, and in my GitHuib Gist
Hi Community,
please note there is a custom plugin to allow using name and icon for the view tabs. It is dedicated to that only, and because of that, is very straightforward in configuring. No complex card-mod-theme required (if you only want to show name and icon).
Keep text in tabs by @elchininet
Add eg this to you dashboard config
keep_texts_in_tabs:
enabled: true
mobile_config:
enabled: false
Wrong thread, ask in the main card-mod thread, this one about themes
I can’t figure out how to access and add display:flex to the shadow-root #tabsContainer
I have this in my theme but It does not work:
card-mod-root: |
ha-tabs$: |
#tabsContainer {
display: flex;
justify-content: center;
}
It just wont work.
I tried so many things now, I forgot what I event tried out ^^
(untested) try card-mod-root-yaml
No luck.
Tried div#tabsContainer as well.
Works fine in general:
test_minimal:
card-mod-theme: test_minimal
card-mod-root-yaml: |
ha-tabs $: |
#tabsContainer {
color: red;
}
Hello,
im l0oking to make the font smaller of the date
this is the Built in HA Card: Energy Date Picker
type: energy-date-selection
the Basics unfortunately dont work
card_mod:
style: |
ha-card {
font-size: 10px !important;
}
please have anybody a tip. i was trying to find it with the goole browser inspector, but failed
Sorry to direct my question to you but my original post 🔹 Card-mod - Super-charge your themes! - #1754 by Duke_box didn’t get any responses.
Unlike the question that prompted your answer, which was very helpful, I want to able to change things at the badge level, “div.badge-complete” specifically the “border width” and “border color” elements.
I now know my original post was total rubbish as I can now edit both “border-width” and “border-color” elements in the Dev tools console and get my desired result.
I have tried various card-mod stuff in my theme yaml but to no effect. for example:
card-mod-view-yaml: |
hui-masonry-view:
$:
hui-view-badge.complete $: |
.badge {
border-width: 1px;
}
However I am useless at navigating the Dom tree using card-mod.
Can anyone please help me with pointers and examples please?
Thanks
I am not using badges.
That was my recent quick try:
card-mod-view-yaml: |
hui-masonry-view:
$:
hui-view-badges $: |
.badges {
flex-direction: column;
}
Since you need to go to a particular badge - you should go deeper:
card-mod-view-yaml: |
hui-masonry-view:
$:
hui-view-badges $:
hui-badge:
hui-entity-badge $: |
.badge {
background-color: cyan !important;
--badge-color: red !important;
--mdc-icon-size: 32px !important;
--primary-text-color: orange !important;
}
to get this beautiful look:
And this is a very “brute” way since badges currently do not seem to have CSS variables (not to mention a nasty look of new badges in general).
