The editor you see offers visual editing, i.e. you can define the options from menus, or code editing.
Certain card features, e.g. styling, cannot be done via the visual editor. They are only available be editing the code.
So you can ignore the warning. It just tells you, that you need to edit code to change styles.
When I have placed that code, font style and scale no longer work.
In both your syntax is strange.
It should be
card_mod:
style:
But I am not an expert myself. I would just try to play around with that because to me it look sa bit strange. But without the actual code posted I cannot test either.
Excellent find.
Slightly limited documentation, but it is always clearer for the programmer than for me ^^
frontend:
themes:
box_shadow:
ha-card-box-shadow: 0 0 10px 5px black
ha-card-border-width: 0px
ha-card-border-color: rgba(0, 0, 0, 0)
ha-card-background: rgba(0, 0, 0, 0)
ha-card-border-style: none
stack-card-margin: 0
modes:
dark:
text-primary-color: white
ha-card-primary-text-color: white
ha-card-secondary-text-color: white
card-mod-theme: boxshadow
card-mod-boxshadow-yaml: |
ha-card {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
animation-name: gradient-shadow-card;
animation-timing-function: linear;
animation-duration: 8s;
animation-iteration-count: infinite;
}
@keyframes gradient-shadow-card {
0% {
box-shadow: 0 0 10px 5px darkblue,0 0 30px 10px darkblue;
}
25% {
box-shadow: 0 0 10px 5px blue,0 0 30px 10px blue;
}
50% {
box-shadow: 0 0 10px 5px darkblue,0 0 30px 10px darkblue;
}
75% {
box-shadow: 0 0 10px 5px blue,0 0 30px 10px blue;
}
100% {
box-shadow: 0 0 10px 5px darkblue,0 0 30px 10px darkblue;
}
}
Also tried to implement it and only have the keyframes in the card-mod-section:
frontend:
themes:
box_shadow:
ha-card-box-shadow: 0 0 10px 5px black
ha-card-border-width: 0px
ha-card-border-color: rgba(0, 0, 0, 0)
ha-card-background: rgba(0, 0, 0, 0)
ha-card-border-style: none
stack-card-margin: 0
ha-card-content: ''
ha-card-position: absolute
ha-card-left: 0
ha-card-top: 0
ha-card-width: 100%
ha-card-height: 100%
ha-card-animation-name: gradient-shadow-card
ha-card-animation-timing-function: linear
ha-card-animation-duration: 8s
ha-card-animation-iteration-count: infinite
card-mod-theme: boxshadow
card-mod-boxshadow-yaml: |
@keyframes gradient-shadow-card {
0% {
box-shadow: 0 0 10px 5px darkblue,0 0 30px 10px darkblue;
}
25% {
box-shadow: 0 0 10px 5px blue,0 0 30px 10px blue;
}
50% {
box-shadow: 0 0 10px 5px darkblue,0 0 30px 10px darkblue;
}
75% {
box-shadow: 0 0 10px 5px blue,0 0 30px 10px blue;
}
100% {
box-shadow: 0 0 10px 5px darkblue,0 0 30px 10px darkblue;
}
}
modes:
dark:
text-primary-color: white
ha-card-primary-text-color: white
ha-card-secondary-text-color: white
How do I post the code ?
copy & paste here using code syntsx </>
Can I change the green color of the logo ?
< type: custom:mushroom-climate-card
entity: climate.bdr_thermostat
name: room thermostat
collapsible_controls: true
show_temperature_control: true
fill_container: true
layout: horizontal
card_mod:
style: |
ha-card {
font-size: 20px !important;
border: 1px solid black;
color: white;
border-radius: 0px;
background-color: black;
height: 120px !important;
} 123>Ok so finally calling out for help…cant seem to be able to remove the padding from a Logbook-card .
I have tried calling it with the h1 element and also by class .card-header. Manual change in the Inspector works fine (see image below) but im not sure how I deal with :host or ::slotted part of the element.
After all the other card mods I have done this should be so simple but it is taking me days (including reading all 3000 posts above)
Should note that the logbook is nested in a custom: fold-entity-row and im not sure if this is impacting it
Any suggestions greatly appreciated
entities:
- type: custom:logbook-card
entity: switch.retic_vswitch_c1_1
desc: true
title: History
date_format: ddd dd/MM/YYYY hh:mma
history: 7
collapse: 1
show:
separator: true
end_date: false
icon: false
state_map:
- label: Station On
value: 'on'
separator_style:
color: black
style: dashed
hiddenState:
- 'off'
- unavailable
style:
.: |
ha-card {
left: 63px;
width: 280px;
margin-top: 8px;
padding-top: 0px !important;
padding-left: 2px;
}
.card-content {
padding-top: 0px !important;
padding-bottom: 0px;
}
.card-header {
padding-top: 0px !important;
}
card_mod:
style:
mushroom-shape-icon$: |
.: |
mushroom-shape-icon {
--shape-color: blue !important;
--icon-color: white !important;
}
Sorry for interfering, this construction is meaningless:
element $: |
.: |
element {
...
}
May be only
element {
...
}
Thanks, MrThiemann 
Also working, thanks IIdar_Gabdullin
Hi, how to make this background black and no radius
<
type: custom:auto-entities
card:
show_header_toggle: true
title: low battery
type: entities
state_color: true
filter:
include:
- attributes:
device_class: battery
state: <= 10
exclude:
- name: /[Ll]ow/
- name: /[Ss]tate/
sort:
method: state
numeric: true
reverse: true
card_mod:
style: null
.: |
ha-card {
border: 1px solid black;
color: white;
border-radius: 0px;
background-color: black;
>
Hi guys, I want to make an mobile version here, and I am trying to achiev this inverted rounded borders.
I did it on photoshop, but I really suck at PS, and I wanted to know if there is a way to do it natively on HA so I can have more flexibility, using an picture-element image?
Here is how mine done:
Hi,
I am trying to make a custom time card but I can’t seem to get my title spacing to work:
type: custom:mod-card
card:
type: custom:mushroom-title-card
title: '{{ now().strftime(''%I'') }}:{{ now().strftime(''%M %p'') | lower }}'
subtitle: >-
{{ now().strftime('%A') }}, {{ now().strftime('%B') }} {{
now().strftime('%d') }}
card_mod:
style:
mushroom-title-card$: |
.header {
--title-padding: 12px 12px 3px;
}
.title {
font-size: 34px!important;
spacing: 100px;
}
.subtitle {
font-size: 25px!important;
Everything works except for spacing: 100px;
trying to change mush-title-spacing: 12px
Any help would be great!
Thanks 
Thanks
How do I change the font color on this card? I don’t understand why this isn’t working:
- type: custom:mini-media-player
card_mod:
style: |
ha-card {color: white;}
I‘m currently changing the background color of my Mushroom cards based on the state (like on or off for lights).
That’s done by using card mod inside every single card using is_state(config.entity, 'on').
Can something like this be done using a card mod theme, to avoid editing each card?
Or isn’t it possible to catch the state of the single cards using a general approach?
Thanks in advance
You are not the 1st time here and probably do know about “1st post → link at the bottom”.
Yep. I checked there and tried a few of the things. I couldn’t get any of them to work.