Like this
card_mod:
style:
hui-generic-entity-row $: |
state-badge {
display: none;
}
ha-textfield $: |
.mdc-line-ripple::before,
.mdc-line-ripple::after {
border-bottom-style: none !important;
}
.: |
:host {
--mdc-text-field-fill-color: lime;
}
Looking for some assistance if possible, i would like to remove the white background when the card is un-collapsed
type: custom:collapsable-cards
title: Group control
cards:
- type: custom:auto-entities
filter:
include:
- domain: automation
area: beau_s_room
options:
type: tile
icon_tap_action:
action: toggle
tap_action:
action: more-info
color: primary
- domain: script
area: beau_s_room
options:
type: tile
icon_tap_action:
action: toggle
tap_action:
action: more-info
color: primary
show_empty: false
card_param: cards
card:
square: false
type: grid
columns: 2
sort:
method: state
reverse: false
card_mod:
style: |
ha-card {
background: transparent !important;
box-shadow: none !important;
}
Test
card_mod:
style: |
.card-content,
.card-content:focus {
background: none;
}
Hey mate, thank for helping, i tried that code
Not sure if this helps but when in inspect the code this part toggles on and off
class="card-list-7774 is-toggled"
type: custom:collapsable-cards
title: Automations & Scripts
cards:
- type: custom:auto-entities
filter:
include:
- domain: automation
area: beau_s_room
options:
type: tile
icon_tap_action:
action: toggle
tap_action:
action: more-info
color: primary
- domain: script
area: beau_s_room
options:
type: tile
icon_tap_action:
action: toggle
tap_action:
action: more-info
color: primary
show_empty: false
card_param: cards
card:
square: false
type: grid
columns: 2
sort:
method: state
reverse: false
card_mod:
style: |
.card-content,
.card-content:focus {
background: none;
}
ok i got this far using Chatgpt
type: conditional
conditions:
- condition: user
users:
- 539e3862363a41a2b055aa28a520810e
card:
type: custom:collapsable-cards
title: Automations & Scripts
cards:
- type: custom:auto-entities
filter:
include:
- domain: automation
area: beau_s_room
options:
type: tile
icon_tap_action:
action: toggle
tap_action:
action: more-info
color: primary
- domain: script
area: beau_s_room
options:
type: tile
icon_tap_action:
action: toggle
tap_action:
action: more-info
color: primary
show_empty: false
card_param: cards
card:
square: false
type: grid
columns: 2
sort:
method: state
reverse: false
card_mod:
style: |
ha-card {
background-color: white;
}
.card-content,
.card-content:focus {
background: white;
}
card_mod:
style: |
ha-card {
background: white !important;
}
should give you the same results
nah it doenst sorry
Does for me
card_mod:
style: |
ha-card {
background: green !important;
}
.card-content,
.card-content:focus {
background: red !important;
}
i got there in the end, with some digging around of finding examples lol
type: conditional
conditions:
- condition: user
users:
- 539e3862363a41a2b055aa28a520810e
card:
type: custom:collapsable-cards
title: Automations & Scripts
title_card:
type: custom:mushroom-template-card
primary: Automations & Scripts
secondary: ''
icon: mdi:home-automation
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
cards:
- type: custom:auto-entities
filter:
include:
- domain: automation
area: beau_s_room
options:
type: tile
icon_tap_action:
action: toggle
tap_action:
action: more-info
color: primary
- domain: script
area: beau_s_room
options:
type: tile
icon_tap_action:
action: toggle
tap_action:
action: more-info
color: primary
show_empty: false
card_param: cards
card:
square: false
type: grid
columns: 2
sort:
method: state
reverse: false
card_mod:
style: >
ha-card { border: none !important; }
.card-content { padding: 0 !important; background-color: inherit
!important; }
.card-content > *:first-child { width: 100%; }
.card-content + .is-toggled {
margin-top: calc(var( --vertical-stack-card-margin, var(--stack-card-margin, 4px) ) * 2);
gap: calc(var( --vertical-stack-card-margin, var(--stack-card-margin, 4px) ) * 2);
display: flex;
flex-direction: column;
}
.card-content > ha-icon {
--mdc-icon-size: 20px;
background: var( --ha-card-background, var(--card-background-color, 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) );
color: var(--primary-text-color);
cursor: pointer;
margin-left: calc(var( --vertical-stack-card-margin, var(--stack-card-margin, -15px) ) * 2);
padding: calc(var(--mdc-icon-size) / 8);
}
Have you tested changing variables with that code to see what it actually does?
It appears to be far from your original post.
yeah it is pretty far
yeah im just testing now all the variables lol
Hello,
Okeyy guys. I need help. I don’t understand how can I use card_mod when we go div tag.
Can you help me to remove all button and juste keep “parcourir les médias” ?
Thank you in advance 
I just want to bring me back on topic 
Can card-mod be used to change CSS on a dashboard level? Trying to use :host selector but I’m not managing.
What is a dashboard level and what do you want to change?
I want to change the margin between section columns. The variable is ha-view-sections-column-gap: 7px.
Try changing this variable in a custom theme.
Actually, everything about sections is very very beta, so many just do not care.
I know. Point is that you can’t do theme modifications without creating an entire new custom theme, losing updates, just to add a single extra line. I was trying card-mod as a workaround to that.
Did you manage it to center the popup ?
