šŸ”¹ Card-mod - Super-charge your themes!

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)
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.

Iā€™ve tried but with no success :frowning:
the following is my code in theme.yaml

  card-color: rgba(34,38,39,0.9)  
  dialog-backdrop-filter: blur(55px)
  iron-overlay-backdrop-opacity: 1
  iron-overlay-backdrop-background-color: rgba(0, 0, 0, 0.32)

  card-mod-theme: Midnight-custom  
  
  card-mod-more-info-yaml: |
    $: |
      .mdc-dialog {
        -webkit-backdrop-filter: blur(17px);
        background: rgba(0,0,0,0.5);
      }
      .mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
        background: none !important;
        box-shadow: none;
        border-radius: 20px;
      }
    ha-header-bar:
      $: |
        .mdc-top-app-bar {
          background: none !important;
        }   

The card-mod-more-info-yaml doesnā€™t work for default popups like I mentioned, only for browser_mod popups. Add -webkit- to the global theme, not card-mod (if your goal is to mod stock popups like me).

See: šŸ”¹ Browser_mod - turn your browser into a controllable device, and a media_player - #706 by ASNNetworks

-webkit-dialog-backdrop-filter: blur(55px)
-webkit-iron-overlay-backdrop-opacity: 1
-webkit-iron-overlay-backdrop-background-color: rgba(0, 0, 0, 0.32)

And then make sure you reload theme service call through dev page. Otherwise the changes will never take effect. I donā€™t use iOS anymore, so canā€™t say if this still works.

Btw: this is my theme more-info card-mod now:

  card-mod-more-info-yaml: |
    .: |
      app-toolbar {
        background: none !important;
      }
      mwc-icon-button {
        margin-top: -10px;
        color: #FFFFFF;
      }
      .main-title {
        color: rgba(0,0,0,0.0);
        letter-spacing: '-0.01em';
        font-family: Helvetica;
        font-weight: bold;
      }      
    $: |
      .mdc-dialog {
        backdrop-filter: blur(17px) !important;
        -webkit-backdrop-filter: blur(17px) !important;
        background: rgba(0,0,0,0.25);
      }
      .mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
        background: none !important;
        box-shadow: none;
        border-radius: 0px;
      }
    ha-header-bar:
      $: |
        .mdc-top-app-bar {
          background: none !important;
        }
    ha-header-bar $: |
      .mdc-top-app-bar {
        background: none !important;
      }

The webit prefix on global theme seems to be completely ignored on iOS and Mac.
As well as all the setup under the card-mod-more-info-yaml: for the default popups. I really donā€™t understand whatā€™s wrongā€¦

Hi,
I am trying to use the same thing to hide the chevrons, but I am not sure it is supposed to do what I want.
I would like to remove these chevrons (especially useful on a smartphone):
Sans titre

Is this theme modding supposed to work ?

paper-tabs$: |
  .not-visible {
    display: none;
  }

Thank you!