🔹 Card-mod - Super-charge your themes!

e-raser · July 4, 2021, 2:19pm

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

MaestroMetty · July 4, 2021, 3:01pm

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

e-raser · July 4, 2021, 7:25pm

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

e-raser · July 4, 2021, 7:41pm

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;
      }

MaestroMetty · July 4, 2021, 8:28pm

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.

e-raser · July 4, 2021, 9:48pm

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

Zarkstar · July 11, 2021, 11:04am

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)

ASNNetworks · July 19, 2021, 10:10pm

hi, did you manage to figure out if this works with different code?

ASNNetworks · July 26, 2021, 11:16pm

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.

jazzyisj · July 27, 2021, 7:17pm

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.

ASNNetworks · July 27, 2021, 9:58pm

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.

jazzyisj · July 27, 2021, 10:14pm

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);
      }

pepe59 · July 27, 2021, 10:26pm

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)

ASNNetworks · July 27, 2021, 10:40pm

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!

marima84 · July 28, 2021, 8:00pm

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?

ASNNetworks · July 28, 2021, 8:06pm

Try adding -webkit- in front of it.

marima84 · July 28, 2021, 8:53pm

I’ve tried but with no success
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;
        }

ASNNetworks · July 28, 2021, 9:08pm

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;
      }

marima84 · July 29, 2021, 6:20am

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…

mat44150 · August 31, 2021, 8:58am

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!