Do not have a ready example.
Check other examples using pseudo class & background.
Like customizing a toolbar.
Looks like card-mod is non-functional for 2024.7
Wonder if the collaborators are supporting it anymore, last commit 5 months. I am guessing latest comments to this thread are running old versions of HA
2024.7.3 is not too ancient.
Suggest you to go to the main card-mod thread, re-read docs on Github, ā¦
This is anything but helpful. Multiple issues on the Github about it broken for 2024.7, im thinking maybe you should read something instead. Im here trying to understand what everyone is doing different to have their installation not suddenly break
Ofc I read these issues about 2024.7 - and they are easily categorized:
- Wrong userās syntax.
- Influence of other custom cards.
Not going to continue this discussion here, there is the main card-mod thread where it could be discussed.
Sometimes questions should be asked in Community first - before posting a ābug issueā.
1 Like
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;
}
1 Like
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
Template entity on Person entity with grayscale picture
- 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
2 Likes
Wrong thread, ask in the main card-mod thread, this one about themes
1 Like
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