Well IĀ“m using a grid and the title is part of the grid, not a card inside the grid. So this approach (which was my first try before asking here) isnĀ“t working for me unfortunately. But thatĀ“s okay. Once a last question (how to combine styles for several parts in one card_mod section) is clarified IĀ“m totally happy.
Thanks for your effort!
When I asked you about your intentions, you only told about the Entities cardās title.
Now you are talking about grid cardās title.
Did you try searching here in the thread? Grid cards were discussed here - exactly about styling headers.
type: custom:mod-card
card_mod:
style:
hui-grid-card:
$: |
.card-header {
color: red !important;
background-color: green;
--ha-card-header-font-size: 30px;
font-weight: bold !important;
padding: 0px 0px 0px !important;
letter-spacing: 0.112em !important;
text-align: right;
}
card:
type: custom:auto-entities
card:
type: grid
columns: 4
square: true
title: Kantoor
card_param: cards
filter:
include:
- entity_id: sensor.ha_count_*
options:
type: entity
entity: this.entity_id
sort:
method: entity_id
ignore_case: true
Well I was only talking bout a cards title, quite unspecific to be honest 
I learned that for applying something to a grid card we need the custom:mod-card. So basically the solution exists, BUT I canĀ“t apply the ācenter grid card titleā CSS to an existing style affecting the whole ha-card. I just donĀ“t know what the syntax is.
In details:
The same example as above:
type: entities
title: Some title (+card-mod)
card_mod:
style: |
ha-card {
border: 3px solid cyan;
}
ha-card .card-header {
border: 3px dotted magenta;
padding: 0px;
display: unset;
}
ha-card .card-header .name {
color: red;
text-align: right;
font-weight: 1000;
letter-spacing: 3px;
}
entities:
- entity: sun.sun
- entity: sun.sun
- entity: sun.sun
HereĀ“s my real life example:
type: custom:mod-card
card:
type: grid
columns: 3
square: true
title: Services
cards:
- type: button
tap_action:
action: navigate
navigation_path: wetter
name: Wetter
icon: mdi:white-balance-sunny
hold_action:
action: none
show_name: true
show_state: false
show_icon: true
- type: button
tap_action:
action: navigate
navigation_path: orte
name: Orte
hold_action:
action: none
show_name: true
show_state: false
show_icon: true
icon: mdi:map-marker
- type: button
tap_action:
action: navigate
navigation_path: gesundheit
name: Gesundheit
icon: mdi:hospital-box
hold_action:
action: none
show_name: true
show_state: false
show_icon: true
card_mod:
style: |
ha-card {
border: 1px solid grey;
padding: 5px;
background: none;
}
ha-card .card-header {
border: 3px dotted magenta;
padding: 0px;
display: unset;
}
hui-grid-card:
$: |
.card-header {
width: max-content;
margin: 0 auto;
}
Neither your appended
ha-card .card-header {
border: 3px dotted magenta;
padding: 0px;
display: unset;
}
nor the
hui-grid-card:
$: |
.card-header {
width: max-content;
margin: 0 auto;
}
are working. Only the first section
ha-card {
border: 1px solid grey;
padding: 5px;
background: none;
}
is applied:
So where is the bug?!? Drives me crazy meanwhile 
There is no need just to copy-paste card-mod styles which are not related to this particular card.
You mixed styles from different cards.
The working styles:
type: custom:mod-card
card:
type: grid
columns: 3
square: true
title: Services
cards:
- type: button
name: Wetter
icon: mdi:white-balance-sunny
show_name: true
show_state: false
show_icon: true
- type: button
name: Orte
show_name: true
show_state: false
show_icon: true
icon: mdi:map-marker
- type: button
name: Gesundheit
icon: mdi:hospital-box
show_name: true
show_state: false
show_icon: true
card_mod:
style:
hui-grid-card:
$: |
.card-header {
color: red !important;
text-align: center;
}
.: |
ha-card {
border: 3px solid magenta;
padding: 25px;
background-color: orange;
}
Hey lldarā¦ Any chance you see my error here?
I want just the last row, connectivity to show an icon colour but when I apply card mod it changes either all of them or none of them depending on where I place the code. When I place it as per here:
entities:
- type: custom:auto-entities
card:
type: custom:fold-entity-row
padding: 0
head:
type: section
label: Fritz!Box Switches and Sensors
open: false
filter:
include:
- entity_id: "sensor.fritz_*"
- entity_id: "switch.fritz_*"
- entity_id: "binary_sensor.fritz_*"
# card_mod:
# style: |
# :host {
# --paper-item-icon-color:
# {% if states('binary_sensor.fritz_box_7590_connectivity') == 'on' %}
# var(--state-icon-active-color)
# {% else %}
# var(--state-icon-color)
# {% endif %}
# ;
# }
show_empty: true
sort:
method: name
(Uncommented of course) it doesnāt display the connectivity row at all. can you see what I am doing wrong or is it not possible to style just that one row?
Silly thing is if I click that row it looks like this:
So something in my theme must be overiding it but I donāt even see what variable is being used if I try to examine it in dev-tools in chrome.
Hi David, check this (replace red & cyan with your colors):
type: entities
entities:
- type: custom:auto-entities
card:
type: custom:fold-entity-row
padding: 0
head:
type: section
label: Fritz!Box Switches and Sensors
open: false
filter:
include:
- entity_id: sensor.cleargrass_1_*
- entity_id: switch.test_*
- entity_id: binary_sensor.test_*
options:
card_mod:
style: |
:host {
--paper-item-icon-color:
{% if is_state(config.entity,'on') %}
red
{% else %}
cyan
{% endif %}
;
}
show_empty: true
sort:
method: name
P.S. Since your "binary_sensor" is some ONE particular sensor, then you may specify it explicitly:
....
include:
- entity_id: sensor.cleargrass_1_*
- entity_id: switch.test_*
- entity_id: binary_sensor.iiyama_1_ping_availability_status
....
Also, if you need to have this connectivity sensor to be the last in the list, then move the "sort" section to lower levels:
- entity_id: sensor.cleargrass_1_*
sort: &ref_sort
method: name
- entity_id: switch.test_*
sort: *ref_sort
- entity_id: binary_sensor.iiyama_1_ping_availability_status
Or even you may not use card-mod at all:
include:
- entity_id: sensor.cleargrass_1_*
sort: &ref_0
method: name
- entity_id: switch.test_*
sort: *ref_0
- entity_id: binary_sensor.iiyama_1_ping_availability_status
options:
state_color: true
Nice.
What about this one?
- entity: binary_sensor.workday_sensor
card_mod:
style: |
:host {
--paper-item-icon-color:
{% if states('binary_sensor.workday_sensor') == 'on' %}
rgb(255, 223, 0)
{% else %}
var(--state-icon-color)
{% endif %}
;
}
This works (itās a config-template one for a different row) but if I use
is_state(config.entity, āonā) it doesnāt style it?
If I use state_color it didnāt used to work so far as I rememberā¦
I wonder if itās the function or the use of config.entity thatās not being resolved. Did you try using is_state and the hardcoded entity to see which is the issue?
I didnāt try that but you might be rightā¦
Just tried it again and it is now workingā¦ I must have stuffed something up!
Thank you very very VERY much! Just perfect.
I need to learn DOM and the syntax, I probably wouldĀ“ve never come across the formerly missing .: | line
Tell me, can I remove the icon in this map in some way so that there is no empty space left from the icon?
- type: custom:mod-card
card:
type: custom:mini-climate
entity: climate.guestroom_ac
secondary_info: fan-mode-dropdown
name: ŠŠ¾ŃŃŠøŠ½Š°Ń #ŠŠ¾Š½Š“ŠøŃŠøŠ¾Š½ŠµŃ Š² Š³Š¾ŃŃŠøŠ½Š¾Š¹
icon: blank
toggle:
hide: true
fan_mode:
source:
auto: ŠŠ²ŃŠ¾
low: ŠŠøŠ·ŠŗŠ°Ń
mid: Š”ŃŠµŠ“Š½ŃŃ
high: ŠŃŃŠ¾ŠŗŠ°Ń
style: |
:ha-icon {
width: 0;
}
Try "display: none" for the icon.
Of course, you should specify a proper path instead of that ":ha-icon".
Code
style: |
:ha-icon {
display: none;
}
did not give the expected result.
I tried different options, I changed the levels, but it still didnāt work.
Perhaps I donāt know simple things and I donāt understand a lot, because I donāt know css style.
May be this screenshot give more info for help me:
I solve this situation with custom ābutton cardā. Then you can type "show_icon: false. Itās pretty usefull add-on in any case, you can do a ton of things with itā¦
I have a general question.
If I want to ingest something here
card_mod:
style:
hui-generic-entity-row:
$:
state-badge:
$:
ha-icon:
$: |
but e.g here as well
card_mod:
style:
hui-generic-entity-row:
$:
state-badge:
$: |
This is not working, because of duplicate keys.
I can use the work arround
hui-generic-entity-row$:
but then it only applies by design only on the first entry.
So how to note this, if I have different point/s/level/shadow-roots in the same tree, to add some styles?
Could you be more specific?
If talking about Entities card, there is nothing inside "state-badge$:":
You may only specify smth for child elements inside ā$:ā.
Why cant I change height of the calendar card ?
type: calendar
entities:
- calendar.mymail_gmail_com
initial_view: dayGridDay
card_mod:
style: |
ha-card {
min-height: 200px !important;
color: red;
}
It accepts the color change but not the height. The height is just greyed out like so:
If I change this in the developer console it does exactly what I want:
What to do ?
That was a generic theoretical example.
card_mod:
style:
a:
$:
b:
$:
c:
$: |
and
card_mod:
style:
a:
$:
b:
$: |
What if I want to address something inside b (if there is more than only c) and something inside c.