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
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;
}
1 Like
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).
2 Likes
Thanks for the example.
I agree with your sentiment about the new badges.
Update: Based on your example I have now got my desired result of having the border and border colour of the new badges changed independently of the rest of the dashboard.
If anyone is interested, here is my code snippet that changes the border colour of the new badge as per my original request.
card-mod-view-yaml: |
hui-masonry-view:
$:
hui-view-badges $:
hui-badge:
hui-entity-badge $: |
.badge {
border-width: 0.25px !important;
border-color: #039BE5 !important;
}
1 Like
unbelieveable what magic you had found again - great job
Thanks a lot
What does it require to run the card-mod-sidebar ?
I have installed hacs and card-mod too, but the left menu items in the sidebar are not highlighted.
Finally: How can I rename an icons title like here from “evcc” to “CHARGER”
And is there a way to make the icons bigger too ?
thanks a lot !
If this dashboard was created by you - why do not you want to edit the title in the first place?