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 ?
- type: custom:mushroom-template-card
primary: Alles uit
icon: mdi:lightbulb
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
content:
type: vertical-stack
cards:
- type: custom:mushroom-template-card
primary: Weet je het zeker ?
icon: mdi:help
card_mod:
style: |
ha-card {
pointer-events: none;
}
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Ja
tap_action:
action: call-service
service: script.verlichting_allesuit
card_mod:
style:
mushroom-state-info$: |
.container {
margin: -10px;
}
.primary {
padding: 0px 0px 0px 40px;
}
.: |
ha-card {
background-color: rgb({{ states("input_text.kleur_iconen")}})
}
- type: custom:mushroom-template-card
primary: Neen
tap_action:
action: call-service
service: script.verlichting_allesuit
card_mod:
style:
mushroom-state-info$: |
.container {
margin: -10px;
}
.primary {
padding: 0px 0px 0px 40px;
}
.: |
ha-card {
background-color: rgb({{ states("input_text.kleur_iconen")}})
}
2 questions
how can I make my template cards smaller (width) ?
edit :
card_mod:
style: |
ha-dialog {
--mdc-dialog-min-width: 180px !important;
--mdc-dialog-max-width: 180px !important;
}
.content {
width: auto !important;
}
how can I center (vertically and horizontally) the popup card to the center of my screen ?
Start with this…
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
style: |-
--popup-min-width: 100px;
card_mod:
style:
ha-dialog$: |
div.mdc-dialog div.mdc-dialog__scrim {
background: rgba(0, 100, 100, 0.4);
}
div.mdc-dialog__container {
--vertical-align-dialog: center !important;
}
.: |
ha-dialog {
--dialog-backdrop-filter: blur(0.8em);
}
content:
1 Like
gives me an error. I move the second style one space, but then content gave me bad indentation
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
style: |-
--popup-min-width: 100px;
card_mod:
style:
ha-dialog$: |
div.mdc-dialog div.mdc-dialog__scrim {
background: rgba(0, 100, 100, 0.4);
}
div.mdc-dialog__container {
--vertical-align-dialog: center !important;
}
.: |
ha-dialog {
--dialog-backdrop-filter: blur(0.8em);
}
content:
Does the entire card give the same error?
type: custom:mushroom-template-card
primary: Alles uit
icon: mdi:lightbulb
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
style: '--popup-min-width: 100px; '
card_mod:
style:
ha-dialog$: |
div.mdc-dialog div.mdc-dialog__scrim {
background: rgba(0, 100, 100, 0.4);
}
div.mdc-dialog__container {
--vertical-align-dialog: center !important;
}
.: |
ha-dialog {
--dialog-backdrop-filter: blur(0.8em);
}
content:
type: vertical-stack
cards:
- type: custom:mushroom-template-card
primary: Weet je het zeker ?
icon: mdi:help
card_mod:
style: |
ha-card {
pointer-events: none;
}
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Ja
tap_action:
action: call-service
service: script.verlichting_allesuit
card_mod:
style:
mushroom-state-info$: |
.container {
margin: -10px;
}
.primary {
padding: 0px 0px 0px 40px;
}
.: |
ha-card {
background-color: rgb({{ states("input_text.kleur_iconen")}})
}
- type: custom:mushroom-template-card
primary: Neen
tap_action:
action: call-service
service: script.verlichting_allesuit
card_mod:
style:
mushroom-state-info$: |
.container {
margin: -10px;
}
.primary {
padding: 0px 0px 0px 40px;
}
.: |
ha-card {
background-color: rgb({{ states("input_text.kleur_iconen")}})
}
1 Like
no id doesn’t 
Hi, thanks for this but seems to not work with me. I am just using the ootb ‘icons’ that show on a location but with or without the code, the whole icon remains shown. Has something changed over time ( I am on 2024.5.3) ? Or do I need to supply different images?
EDIT: to be clear this is map CARD
I have to confess, I’m not a CSS guru, but I spent an hour inspecting the code without finding the solution.
→ I’m trying to remove the border all arround the screen.
I use a tablet as a wall screen, and I would like the floorplan to completely fil the screen. But I can’t get rid of those borders arround the screen. (see the red arrows)
I could modify all the other spaces using:
- in the theme:
#ha-view-sections-column-gap: 3px
# Grid gap customization using card-mod
grid-card-gap: 0px
#grid-view-card-margin: 0px 0px 0px
#masonry-view-card-margin: 0px 0px 0px
(commented lines are useless trials)
2) I use a grid (layout-card) :
card_mod:
style: |
:host {
--masonry-view-card-margin: 0px;
--layout-margin: 0px 0px 0px 0px;
--layout-padding: 0px 0px 0px 0px;
--fc-daygrid-event-dot-width: 0px;
--fc-list-event-dot-width: 0px;
}
Any help will be more than welcome 