I made it work with template-entity-row.
Check this:
type: entities
entities:
- entity: sun.sun
- entity: sun.sun
card_mod:
style: |
:host .text-content {
display: none;
}
- entity: sun.sun
card_mod:
style:
hui-generic-entity-row:
$: |
state-badge {
display: none;
}
- entity: sun.sun
card_mod:
style:
hui-generic-entity-row:
$:
state-badge:
$: |
ha-icon {
display: none;
}
1 Like
Nobody can help me with my question regarding the restriction card?
I have a similar issue with badge card. I can’t style it.
Doing it in the inspector works fine, but in lovelace, it does not work:
type: custom:badge-card
badges:
- entity: person.one
- entity: person.two
- entity: person.three
card_mod:
style: |
div#badges {
transform: scale(0.5);
color:red;
}
Isn’t there a guide somewhere how to exactly pinpoint and then represent with card_mod the DOM element you want to style?
I checked those already.
But it turns out I’m just very stupid and didn’t read all documentation again (it’s been a while I played with card_mod and thought I remembered stuff), it seems for some cards you need to create a custom:mod-card around the card to be able to style it. The restriction card is starting to work now 
Check this:
type: vertical-stack
cards:
- type: custom:badge-card
badges:
- entity: sun.sun
- entity: sun.sun
- entity: sun.sun
- type: custom:mod-card
card:
type: custom:badge-card
badges:
- entity: sun.sun
- entity: sun.sun
- entity: sun.sun
card_mod:
style:
badge-card:
$: |
div#badges {
transform: scale(0.5);
color:red;
}
As far as I understood for styling all badges you need to use mod-card.
But for styling some particular badge you do not need it:
type: custom:badge-card
badges:
- entity: sun.sun
- entity: sensor.cleargrass_1_co2
name: CO2
card_mod:
style:
ha-state-label-badge:
$:
ha-label-badge:
$: |
.badge-container .label-badge .label span {
border-style: solid;
border-color: green;
color: blue;
background-color: magenta;
}
.badge-container .title {
color: orange;
}
.: |
ha-label-badge {
--label-badge-background-color: yellow;
--label-badge-text-color: red;
--label-badge-red: cyan;
}
Styles for badges are explained here.
How to add a “normal” background:
By default the badge card does not have a border & background:
Here is how to add a “normal” look:
- type: custom:mod-card
card:
type: custom:badge-card
badges:
- entity: sun.sun
card_mod:
style: |
ha-card {
background: var(--ha-card-background,var(--card-background-color,#fff));
box-shadow: var(--ha-card-box-shadow, none);
border-radius: var(--ha-card-border-radius, 12px);
border-width: var(--ha-card-border-width, 1px);
border-style: solid;
border-color: var(--ha-card-border-color,var(--divider-color,#e0e0e0));
}
Also, it is possible to add a top/bottom paddings to the card.
More examples are described here.
1 Like
Been searching for several hours without joy so could someone point me in the right direction? I have a mini-graph-card and I’d like the border to change red when the humidity goes above 60. I have the code below which I know is completely wrong. A bonus would be to animate the boarder and ease flash it for 3s. Any advice would be appreciated.
card_mod:
style: |
ha-card {
border-radius: 5px;
border: |
[[
if (states['sensor.humidity_xiaomi_outside'].state >= 60), "red", "green";
]];
}
EDIT: Cracked it! Only took 4hrs 
style: |
ha-card {
border:
{% if states('sensor.humidity_xiaomi_outside') | float > 60 %}
solid 2px orange
{% else %}
solid 2px rgba(255,255,255,.4)
{% endif %}
;
}
Hi Guys,
could someone please help
I’m trying to reduce the Title space for this Vertical-stack shown below
I’ve added the following code yet I don’t know what I’m doing wrong
type: custom:mod-card
card_mod:
style: |
h1.card.header {
padding-top: 1px;
padding-right: 1px;
padding-bottom: 1px;
padding-left: 1px;
}
card:
type: vertical-stack
title: Master Server
cards:
- type: grid
cards:
- type: gauge
entity: sensor.master_intel_core_i7_9700__cpu
min: 0
max: 100
name: CPU
- type: gauge
entity: sensor.master_generic_memory_load_memory
min: 0
max: 100
name: Ram
- type: gauge
entity: sensor.master_gigabyte_b365m_h_ite_it8686e_fans_fan_1
min: 0
max: 3000
name: Fan
- type: gauge
entity: sensor.master_intel_core_i7_9700_temperatures_cpu_package
min: 0
max: 100
name: Temp
square: false
columns: 4
it’s in a vertical stack as I was intending to add hard drive bar graphs to the bottom of it.
Is there any possibility to achieve this without using card-mod?
I heard that this could be achieved by using custom:slider-entity-row (hope spelled it correctly).
1 Like
Thank you 
Hi,
I’d like to modify the padding of the highlighted element (div#root) for consistency with my other cards. I read through the documentation, but I still don’t understand how the styling works when the element is inside a “shadow-root”.
Could anyone help me ?
Thanks!
Does anyone have an idea on how to replicate the Schneider Connected Home “look”
Would this be best to attempt from a theme? Could both the color scheme and the card-mod/styles be implemented in a theme?
- Simple gradient bacground
- Big and tablet-friendly gradient “Buttons”
1 Like
Sorry if this has already been answered.
Very new to this modding tool and a little overwelmed
Came here looking to change the width of a card.
type: shopping-list
title: Shopping list
This is my shopping list card and just want to change the width. Can someone offer an example to achieve this.
All Lovelace cards are supposed to be of the same width.
If the shopping list card’s width is not enough for you, consider “panel mode” for the view (the view must contain only one card which occupies whole window’s width).
My issue is the opposite problem.
I am trying to create a dashboard for a wall mounted table and wanted the shopping list card down one edge. However Items only ever fill 1/3 of the width.
I wanted to reduce the width to allow more space for other cards / buttons.
It is a whole new can of worms but have you looked at the custom button card?
It is so flexible/versatile that it is virtually an entire UI in itself.
How can I reduce the word, CPU, here?
Not really sure what to put. I have tried “font-size” but unsuccessful.
- type: custom:stack-in-card
mode: vertical
cards:
- type: horizontal-stack
cards:
- type: button
entity: input_boolean.star
show_name: false
card_mod:
style: |
:host {
transform: scale(1.5,1.5);
}
- type: gauge
them: default
name: CPU
min: 0
max: 100
unit: '%'
entity: sensor.risingstar_intel_core_i7_8565u_load_cpu_total
card_mod:
style: |
:host {
transform: scale(1.5,1.5);
}
- type: gauge
them: default
name: RAM
min: 0
max: 100
unit: '%'
entity: sensor.risingstar_generic_memory_load_memory
- type: gauge
them: default
name: Temp
min: 30
max: 70
entity: sensor.risingstar_intel_core_i7_8565u_temperatures_cpu_package
- type: gauge
them: default
name: Wts
min: 5
max: 50
unit: 'W'
entity: sensor.risingstar_wattage
1 Like
Cool mod!
I’ve already got 99% of the styles the way I want.
However, how do I disable the ripple effect when pressing a button card? My wall tablet is kinda slow and it really struggles to play that…