🔹 Card-mod - Super-charge your themes!

I try to apply some custom style to the title area of a (entities) card. Unfortunately this isn´t working, all style changes are “only” applied to the card below the title area.

How to modify a card´s title? Basically I just want to center a cards title instead of having it aligned left.

Do I need to fake a title somehow to modify it or is there another, more easy way?

Try:

card_mod:
  style: |
    .name {
      margin-left: auto;
      margin-right: auto;
    }

Thanks. But where to add it? Tried every possible location, didn´t work (even added a visual marker with red background) at all :frowning:

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
image

1 Like

Awesome. “hui-grid-card” and “$”… where does that come from. Would´ve never made it so far. Thanks a lot! :+1::+1::+1:

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 :frowning:

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:
image 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.
image 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.
image
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.

1 Like

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 :slight_smile:

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)
2 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!