Thanks - got the padding sorted but can’t seem to find how to do the label
I can see
--ha-label-badge-title-font-size: 7px;
--ha-label-badge-title-width: 48px;
mentioned above and they successfully work, but I see no mention of padding for the element
I tried
--ha-label-badge-title-padding
to no avail
Apologies if I’m missing something … 
Some styling may only be solved by a directs access to CSS properties, not by changing theme variables. May be this is your case. Open Code Inspector and experiment.
In inspector, if I make this change then the alignment does seem to automatically center (it changes some of the other padding too:
If I do 
then it will also center it
What I don’t understand tho is how I get either of those added to my card code
type: custom:badge-card
badges:
- entity: person.vaderag
card_mod:
style: |
:host {
--label-badge-red: {% if is_state('person.vaderag', 'home') %} #5555FF {% else %} #df4c1e {% endif %};
--ha-label-badge-font-size: 28px;
This is how I’m doing it right now - how would i add that code?
Hello. Excuse my attempt to describe this. I don’t fully understand CSS or the terms to properly talk about it, but I’m hoping someone might be able to assist me with this. I have a vertical stack card configuration. At the top of the stack I have a template sensor. I made the font bigger with card mod but the font is clipped/cut off. I inspected the page and drilled down to get down to the div section where the text of my sensor exists. On the right side in the style tab there is an overflow property that when I unselect the sensor texts shows properly. So I suspect I need to somehow manipulate that with card mod but I am not having luck messing around with this.
I copied the JS path and used card mod helper to get this which is what I clicked through to get down to the sensor text. It shows the path but I’m at a loss on what to do next. Any assistance would be greatly appreciated. Thanks!
“#view>hui-view>hui-masonry-view$#columns>div>hui-vertical-stack-card$#root>hui-glance-card$ha-card>div>div$div”
type: vertical-stack
cards:
- show_name: false
show_icon: false
show_state: true
type: glance
style: null
entities:
- entity: sensor.traffic_meter
state_color: false
card_mod:
style: |
ha-card {
font-size: 35px;
}
You basically have two choices, either make the card bigger or allow the overflow to show (e.g. let the text go outside of the boundaries of the div/card). I’d go with the former, so try to add height: 45px to your code. If it doesn’t work, try with !important.
trying so remove an entity completely from a glance card, to fake a fake card, I just learned instead of the 0px font-size, we can also use display: none;
card_mod:
style: |
state-badge {
display: none;
}
.name {
display: none;
}
:host div:not(.name) {
display: none;
}
the above is better than using
- entity: sun.sun
name: ' '
icon: ' '
show_state: false
tap_action:
action: none
because it actually removes the said properties, so the cursor doesnt respond to that.
maybe we can even hide the entity all together in a single mod, have to figure that out yet
Hi
Trying to change the background of my icon based on the state of the device .
I changed the color of the icon and the background but but not sure how to change it’s icon background
Here is my code
card_mod:
style: |
ha-card {
background-color:{{'orange' if is_state('binary_sensor.XXX', 'on') else 'white'}};
--card-mod-icon-color: {{'white' if is_state('binary_sensor.XXX', 'on') else 'black'}};
--primary-text-color: {{'white' if is_state('binary_sensor.XXX', 'on') else 'black'}};
--secondary-text-color: {{'white' if is_state('binary_sensor.XXX', 'on') else 'grey'}};
}
Thanks
this is what I have on some of my fans:
card_mod:
style:
div#wrapper: |
state-badge {
{% if is_state(config.entity,'on') %}
animation: rotation 2s linear infinite, colorize 5s linear forwards 1;
{% endif %}
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes colorize {
0% {
background: steelblue;
}
100% {
background: aquamarine;
}
}
Thanks but I have no idea how to use it
Isn’t there an attribute such as
–card-mod-icon-background-color ?
this is how you use it…
you can strip all the animation and only use background in that template
card_mod:
style:
div#wrapper: |
state-badge {
{{'background: red' if states(config.entity) == 'off'
else 'background: green'}};
}
I should have mentioned I did try that and the box gets bigger but the font stays exactly the same.
Ok, so if I understand correctly, you don’t want the card to get bigger, but have the text fill it entirely, like in your screenshot?
If so, have you tried overflow: visible ?
trying to mod a glance cards border and use that card in a grid, there is the odd situation that using a border-top, simply add the height of the border to the picture-glance and takes the grid out of proportion.
I tried to make the top order be inline, but could not find the correct css for that. This does in fact create inline border, but only left and right…
- type: picture-glance
entity: light.laundry_ceiling
state_filter:
'off': grayscale(72%)
image: /local/images/areas/bijkeuken.jpg
aspect_ratio: 100%
tap_action:
action: navigate
navigation_path: /ui-sub-views/bijkeuken
hold_action:
action: toggle
entities:
- entity: sensor.laundry_sensor_temperature
- entity: sensor.laundry_sensor_illuminance
card_mod:
style: |
ha-card {
border-inline: {{'medium solid red' if is_state('binary_sensor.laundry_sensor_motion','on')
else 'none'}};
}
would any of you modders around be able to help me out to either get the inline border on all sides, or only on the top border please?
thx
Thanks for taking the time to assist. Correct, the card size is ok. I would leave it bigger if it adjusted the font clipping but that doesn’t seem to help.
Here is what it looks like when I adjust the card height.
I do suspect I need an overflow visible somewhere but it doesn’t do anything when I add it to my existing card mod style section.
When I drill down in dev tools, I can unselect the overflow property and it does show the full text.
“#view>hui-view>hui-masonry-view$#columns>div>hui-vertical-stack-card$#root>hui-glance-card$ha-card>div>div$div”
Ok, just tested, the following worked:
card_mod:
style:
.: |
ha-card {
font-size: 35px;
height: 100px !important;
}
.entities {
height: 100px;
}
.entity$: |
div {
overflow: visible;
}
The height is not necessary, you can remove those entries if it doesn’t suit what your’e looking for.
Hey guys. I’m stumped on this.
Is there a (probably simple) way to make the padding change consistent, when the mini media player entity changes to ‘–inactive’ the code ceases to work.
Many Thanks
---- Edit ----
I found the answer. ‘!important’. Damn i feel dumb
^^ Working ^^
^^ --inactive var breaks it ^^
- type: custom:mini-media-player
card_mod:
style: |
ha-card .mmp-player {
padding: 0px;
}
ha-card {
border-width: 0px;
}
This worked out perfect. Thank you very much.
Hi
I feel like I have tried everything: I want to change the color of the bars i plot in a mini-graph-card with an if-statement based on which hour it is to highlight which bar represents the current electricity price. I thought card-mod is the best way to go but I can’t find out even how to change the color with card-mod. I have tried place the card-mod code in different places but I don’t really know what i’m doing. I can change the color with the “color entry” when i add the entitiy to the graph but not with card-mod to include the if-statement. Any suggestions how to proceed here? Perhaps there is another smarter way than if-statement based on the current hour?
The image should show what I’m after, The code I have right now is below… i have removed some entity entries just to make the code a bit more readable.
type: custom:mini-graph-card
entities:
- entity: sensor.nordpool_kwh_se3_sek_3_095_025
color: '#d0cdcd'
show_graph: false
show_state: true
state_adaptive_color: true
- entity: sensor.nordpool_today_hr_00_01
name: Today hour 1
color: '#03a9f4'
show_legend: false
- entity: sensor.nordpool_today_hr_01_02
name: Today hour 2
color: '#03a9f4'
show_legend: false
name: Elpris idag
group_by: hour
hours_to_show: 1
lower_bound: 0
hour24: true
icon: mdi:cash-multiple
show:
graph: bar
card_mod:
style: |
ha-card > div.graph > div > div.graph__container__svg > svg > g > g:nth-child(17) > rect {
fill: 'grey';
}
Thanks in advance !
//Noob HA user 
type: custom:mini-graph-card
entities:
- entity: sensor.processor_use
group_by: hour
hours_to_show: 24
show:
graph: bar
card_mod:
style: |
.graph__container__svg svg g.bars .bar:nth-child(5) {
fill: grey;
}
This works for a “show 1 graph” case.
In your case a code contains 3 graphs (one with “show_graph: false”) - so adapt this style for your case.
nth-child(17)”.If you need to select SOME PARTICULAR bar - then use this:
card_mod:
style: |
{% set INDEX = ................ -%}
.graph__container__svg svg g.bars .bar:nth-child({{INDEX}}) {
fill: grey;
}
where you need to specify a formula for the “INDEX” value.
in addition to the great main post on picture-glance, I needed a way to style the pointer-events: none
first I set it to the ha-card, but that was moot, since I use these picture-element cards to navigate to my rooms… only looked for a way to have the bottom-section icons be non-responsive.
this seems to work as hoped for, posting here for others to help, and if something could be optimized, please do (as always the challenge is in combining several styling aspects, in the case the border on the card. the [[]] originate the decluttering template I use for these Navigating cards):
type: picture-glance
card_mod:
style:
.: |
ha-card {
border: {{'1em solid red' if is_state('[[trigger_id]]','[[trigger_state]]')
else 'none'}};
}
.box: |
.wrapper {
pointer-events: none;
}
full decluttering-card template:
default:
- trigger_state: 'on'
card:
type: picture-glance
card_mod:
style:
.: |
ha-card {
border: {{'1em solid red' if is_state('[[trigger_id]]','[[trigger_state]]')
else 'none'}};
}
.box: |
.wrapper {
pointer-events: none;
}
entity: '[[main_id]]'
# title: '[[title]]'
show_state: true
state_filter:
'off': grayscale(80%)
'unavailable': grayscale(100%)
# area: '[[area]]'
image: /local/images/areas/[[image]]
aspect_ratio: 100%
tap_action: none
hold_action:
action: navigate
navigation_path: /ui-sub-views/[[path]]
double_tap_action:
action: toggle
entities:
'[[entities]]'
the card_mod stops me from requiring this on all cards per entity:
- entities:
- entity: sensor.laundry_sensor_temperature
<<: &none
tap_action: none
hold_action: none
double_tap_action: none
- entity: sensor.laundry_sensor_illuminance
<<: *none
- entity: binary_sensor.back_door
<<: *none
- entity: switch.boiler_bijkeuken
<<: *none
saving a lot of (already anchored) yaml…
2 things needing further exploration:
div:nth-child(2) and not on the actionable entities in the 3d section to the right