Thanks. But where to add it? Tried every possible location, didnĀ“t work (even added a visual marker with red background) at all 
Reminder: I want to change the title settings.
Read the docs and follow the code. Itās explained there why you need mod_card (which is part of card_mod, but for advanced usages like styling cards without ha-element, like grid, vertical etc). And how to use the code line.
Sidenote: this is meant to style individual cards, not entire themes. So getting kina off-topic since this thread is for card mod for themes. I suggest moving over to this topic if you need more help with styling cards outside of themes: š¹ Card-mod - Add css styles to any lovelace card
Thanks, I know this custom card and already use it. But as stated it indeed ...and likely to bring more problems than it solves.
That whole CSS hacking is just quite complicated and I was really looking forward to find some plug n play solution (full example - code and place where to put it at) here for that simple task (centering a cards title). My skills are simply not advanced enough to find that solution on my own, to be honest. CanĀ“t be that far away though.
Then why ask where to put the code? As it states, you canāt use card mod on cards without ha-card element, like grid card. Youāre trying to mod a grid card, so it wonāt work. Unless you use mod_card. Which is why he suggested that code.
You can try to mod your theme, but then all gird cards will have the title changed. It tried editing the titles myself (changing padding) but the results were not good, see my post: š¹ Card-mod - Super-charge your themes! - #847 by ASNNetworks
I use normal titles for grid now since it didnāt work great.
It seems to simply be impossible. I tried every approach, last two promising were
type: custom:mod-card
card:
type: grid
columns: 1
square: false
title: Welcome Home
cards:
- type: vertical-stack
cards:
- type: button
tap_action:
action: navigate
navigation_path: home
name: Home
icon: mdi:home-circle
hold_action:
action: none
icon_height: 100px
show_state: false
- type: custom:simple-clock-card
use_military: true
hide_seconds: false
font_size: 2rem
padding_size: 10px
card_mod:
style: |
ha-card {
letter-spacing: 3px;
border: 0px;
padding: 3px;
background: default;
}
card_mod:
style: |
ha-card .card-header {
margin-left: auto;
color: red;
margin-right: auto;
}
and
type: custom:mod-card
card:
type: grid
columns: 1
square: false
title: Welcome Home
cards:
- type: vertical-stack
cards:
- type: button
tap_action:
action: navigate
navigation_path: home
name: Home
icon: mdi:home-circle
hold_action:
action: none
icon_height: 100px
show_state: false
- type: custom:simple-clock-card
use_military: true
hide_seconds: false
font_size: 2rem
padding_size: 10px
card_mod:
style: |
ha-card {
letter-spacing: 3px;
border: 0px;
padding: 3px;
background: default;
}
card_mod:
style: |
.name {
margin-left: auto;
color: red;
margin-right: auto;
}
Changed exactly nothing. Summary: changing card titles is impossible. Everyone trying to do this on a per card basis: donĀ“t waste your time (like I did).
What do you want to center? The āWelcome Homeā?
If itās so, take the second code you posted and change it to:
type: custom:mod-card
card:
type: grid
columns: 1
square: false
title: Welcome Home
cards:
- type: vertical-stack
cards:
- type: button
tap_action:
action: navigate
navigation_path: home
name: Home
icon: mdi:home-circle
hold_action:
action: none
icon_height: 100px
show_state: false
- type: custom:simple-clock-card
use_military: true
hide_seconds: false
font_size: 2rem
padding_size: 10px
card_mod:
style: |
ha-card {
letter-spacing: 3px;
border: 0px;
padding: 3px;
background: default;
}
card_mod:
style:
hui-grid-card:
$: |
.card-header {
width: max-content;
margin: 0 auto;
}
Youāll get this
1 Like
Awesome. āhui-grid-cardā and ā$āā¦ where does that come from. WouldĀ“ve never made it so far. Thanks a lot! 
Pro question @MaestroMetty: is there a way to combine what I currently have (ha-card) and the new hui-grid-card?
Case:
type: custom:mod-card
style: |
ha-card {
border: 1px solid grey;
padding: 5px;
background: none;
}
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
Unfortunately what IĀ“d see as ālogical syntaxā isnĀ“t working
style: |
ha-card {
border: 1px solid grey;
padding: 5px;
background: none;
};
hui-grid-card:
$: |
.card-header {
width: max-content;
margin: 0 auto;
}
Sorry I donāt understand what you mean with ācombineā.
About āhui-grid-cardā and ā$ā; when you make a custom:mod-card you should always edit the card this way:
type: custom:mod-card
card:
type: example
card_mod:
style:
Now you have the style section, but when using grid, vertical stacks and so on, the ha-card will only style the āouter cardā. For example, if its a vertical stack, it will style the whole vertical stack but no every single card in it.
But you can get access to cards inside with few little tricks (itās written in the documentation but it is a little bit confusing, I spent 2 days only figuring how to make it work). Thatās the same method to get access to things inside a card, for example to get access to the icon div of a button card.
This is the method:
Use inspect element to get to these informations
This is a custom:mod-card with a horizontal-stack in it, think it as a directory, we are, by default, inside < mod-card> directory thatās why you can access ha-card and type:
style: |
ha-card { code }
but now we want to get access to other things inside right? So first of all we want to keep our access to the directory to style ha-card and we do like this:
style:
.: |
ha-card {code}
That means that it will select the current default directory ( < mod-card> ) and style the divs you want inside that directory.
Letās expand hui-horizontal-stack-card
Now as we said: hui-horizontal-stack-card is inside the default directory, so we can access it via CSS selectors like this:
ha-card hui-horizontal-stack-card {code}
But inside hui-horizontal-stack-card we have our cards that we want to access, the ones we want to edit. What happens now is that our cards are inside whatās called #shadow-root and that means that our CSS selector canāt get inside that, and thatās where $: comes in hand.
Now we got to enter inside the #shadow-root directory, we do that this way:
style:
.: |
ha-card {code}
hui-horizontal-stack-card:
$: |
#root { code }
That means, by starting in our default directory ( < mod-card> ) we have to get inside hui-horizontal-stack-card ā inside a #shadow-root ( $ ) ā and then we can finally access the div with id=ārootā
And thatās where our cards are, we can easily select them with CSS because there are no #shadow-root blocking our selector, so:
style:
.: |
ha-card {code}
hui-horizontal-stack-card:
$: |
#root hui-every_type_of_card_inside_the_stack { code }
And thatās it, when you want to edit ha-card you can do the normal way, when you need to access something deeper just use CSS selector, when you want to access something inside #shadow-root you have to get the right path, when you encounter a block do block_name:
When you encounter a #shadow-root use $:
Chain those the right way inside style section and you can edit everything of your cards.
2 Likes
Well I already have a custom:mod card with a style applied to ha-card:
ha-card {
border: 1px solid grey;
padding: 5px;
background: none;
}
And in addition I want to add the
.card-header {
width: max-content;
margin: 0 auto;
}
And I was looking for ācombiningā these two sections in one card_mod: section.
I see you are a true expert in this CSS modding using this custom card. I think I need to read your extensive post a 2nd time, probably IĀ“ll find the answer to my question there 
Hello, I need some help as I canāt understand why I canāt do whatās described in the wiki. Iām trying to move the header at the bottom of the screen. Following the wiki Iāve modified a theme Iāve found on Hacs as I was trying to debug what I am doing wrong.
No matter what I do, the header doesnāt move at the bottom of the screen.
Any help?
Hereās the theme Iāve tried using
Go Dark Theme:
# Header:
app-header-background-color: rgb(23, 23, 23)
app-header-text-color: rgb(198, 203, 210)
card-mod-root-yaml: |
paper-tabs$: |
.not-visible {
display: none;
}
selectionBar {
bottom: unset !important;
}
# Main Interface Colors
primary-color: rgb(138, 180, 248)
light-primary-color: var(--primary-color)
primary-background-color: rgb(23, 23, 23)
secondary-background-color: rgb(32, 33, 36)
divider-color: var(--primary-background-color)
accent-color: rgb(138, 180, 248)
# Text
primary-text-color: rgb(242, 242, 242)
secondary-text-color: rgb(166, 166, 166)
text-primary-color: var(--primary-text-color)
disabled-text-color: rgba(184, 190, 199, 0.4)
# Sidebar Menu
sidebar-icon-color: rgb(169, 177, 188)
sidebar-text-color: rgb(198, 203, 210)
sidebar-background-color: rgb(32, 33, 36)
sidebar-selected-background-color: var(--primary-background-color)
sidebar-selected-icon-color: rgb(138, 180, 248)
sidebar-selected-text-color: var(--sidebar-selected-icon-color)
# Buttons
paper-item-icon-color: rgb(169, 177, 188)
paper-item-icon-active-color: rgb(138, 180, 248)
# States and Badges
state-icon-color: rgb(138, 180, 248)
state-icon-active-color: rgb(169, 177, 188)
state-icon-unavailable-color: var(--disabled-text-color)
# Sliders
paper-slider-knob-color: rgb(138, 180, 248)
paper-slider-knob-start-color: var(--paper-slider-knob-color)
paper-slider-pin-color: var(--paper-slider-knob-color)
paper-slider-active-color: var(--paper-slider-knob-color)
paper-slider-secondary-color: var(--light-primary-color)
# Labels
label-badge-background-color: rgb(32, 33, 36)
label-badge-text-color: rgb(198, 203, 210)
label-badge-red: rgb(208, 101, 104)
label-badge-green: rgb(128, 200, 132)
label-badge-blue: rgb(138, 180, 248)
label-badge-yellow: rgb(223, 194, 113)
label-badge-gray: rgb(95, 98, 103)
# Cards
card-background-color: rgb(32, 33, 36)
ha-card-border-radius: "10px"
ha-card-box-shadow: 1px 1px 5px 0px rgb(12, 12, 14)
paper-dialog-background-color: var(--card-background-color)
paper-listbox-background-color: var(--card-background-color)
paper-card-background-color: var(--card-background-color)
# Switches
switch-checked-button-color: rgb(138, 180, 248)
switch-checked-track-color: rgb(138, 180, 248)
switch-unchecked-button-color: rgb(172, 176, 185)
switch-unchecked-track-color: rgb(154, 160, 166)
# Toggles
paper-toggle-button-checked-button-color: var(--switch-checked-button-color)
paper-toggle-button-checked-bar-color: var(--switch-checked-track-color)
paper-toggle-button-unchecked-button-color: var(--switch-unchecked-button-color)
paper-toggle-button-unchecked-bar-color: var(--switch-unchecked-track-color)
# Table
table-row-background-color: var(--primary-background-color)
table-row-alternative-background-color: var(--secondary-background-color)
data-table-background-color: var(--primary-background-color)
mdc-checkbox-unchecked-color: rgb(169, 177, 188)
# Dropdowns
material-background-color: var(--secondary-background-color)
material-secondary-background-color: var(--primary-background-color)
mdc-theme-surface: var(--primary-background-color)
# Pre/Code
markdown-code-background-color: rgb(23, 23, 23)
hi, did you manage to figure out if this works with different code?
Does anyone know what the new code is for theme.yaml to have backdrop working again for more-info dialogues? It works for browser_mod popups when styling thos. But the global one for default popups has stopped working a few HA versions ago.
Lol. I just spent an hour searching this. Iām using the most recent card_mod code I could find and couldnāt get it working. I thought I was doing something wrong. Ugh!
Anway, just setting card-background-color seems to work if all you need to do is set background colour. At for me, I can read mine now.
No, I donāt mean background, but backdrop. This is my backdrop with my own popupcards (using browser_mod:
And this is when more-info dialog opens from a sensor:
Look at the backdrop behind the card (blur effect). Before it was like the first example also for default popups (like sensor). But since an update, it stopped working for default popups and only works for browser_mod popups.
Ah, I see. Well I guess I am doing something wrong. I canāt get card_mod to style more-info dialogs at all with anything other than the standard variables. Browser mod popups still apply the card-mod-more-info styles though.
Iāve even tried with only this card_mod style enabled and no dice. Dunno why. Probably a related issue.
card-mod-theme: personal
card-mod-more-info-yaml: |
$: |
.mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
background: rgba(30,30,30,1);
}
I donāt know if I understand you correctly. To blur the background, I have added in my theme
dialog-backdrop-filter: blur(5px)
iron-overlay-backdrop-opacity: 1
iron-overlay-backdrop-background-color: rgba(0, 0, 0, 0.32)
3 Likes
This is EXACTLY what I was looking for. This is so weird, I remember a long time ago this was the way you had to do it in theme.yaml. Then it all changed and you had to do it the card-mod way in theme.yaml. And now this works again lol.
Thanks a lot, this is great!
Edit: I even see I have commented out that variable from a long time ago in my theme.yaml lol!
Thank you, I see that this is working with Chrome but is there any way to make it work on safari or the Mac companion app?
Try adding -webkit- in front of it.