🔹 Card-mod - Super-charge your themes!

[CZonin]

I was able to move the tabs to the bottom of my screen and center them horizontally using a combination of Navbar Position and the following in my theme:

    card-mod-theme: Mushroom Shadow
    card-mod-root-yaml: |
        ha-tabs$: |
            #tabsContainer {
                display: flex;
                justify-content: center;
            }

Can’t figure out how to increase the height of the tabs though. If I try

    card-mod-root-yaml: |
        ha-tabs$: |
            #tabsContainer {
                display: flex;
                justify-content: center;
                height: 110%
            }

It seems something is happening but the active tab indicator gets hidden, but the height of the tabs doesn’t change. Any ideas?

[Ildar_Gabdullin]

Hiding a “search” button

There were some solutions to achieve this, but seems that some of them (at lest what I have seen) are not working.
Here is a way for 2023.8.
It supports mobile clients which may have a “Search” menu item.

  card-mod-root-yaml: |
    .: |
      .header .toolbar .action-items:not(:has(ha-icon-button[slot="actionItems"])):not(:has(.exit-edit-mode)) ha-button-menu mwc-list-item:nth-of-type(1) {
        display: none;
      }
      .header .toolbar .action-items > ha-icon-button[slot="actionItems"]:nth-child(1) {
        display: none;
      }

BTW, a “search” button is still available in “Settings”…(and no way to hide it by card-mod-theme)

[Ildar_Gabdullin]

And this is how to hide all buttons & menu (if anyone really needs this):

card-mod-root-yaml: |
    .: |
      .header .toolbar .action-items {
        display: none;
      }

[boheme61]

Hi IIdar, how can i change the “flex: 0 1 0%;” in below “div id” i want “flex: 1 1 0%;”
I tried with flex-grow 1; , but it still dont bite

I currently have this in my theme:

  card-mod-root-yaml: |
    .: |
      .toolbar {
        background-color: transparent !important;
      }
      .toolbar div.main-title {
        display: flex;
        flex-grow: 0;
      }
  card-mod-sidebar-yaml: |
      .: |
        a:hover paper-icon-item ha-icon {
          color: #87bf50 !important;
        }
        a:hover paper-icon-item .item-text{
          #87bf50;
        }
        a:hover paper-icon-item {
          background: #7b7d80;
        }

EDIT: i “temporary” fixed it in the header-card.js

[bangali]

how do I flash the border of a button card on click?

thank you.

[Ildar_Gabdullin]

"Sidebar" view: allow to scroll “main” area w/o scrolling a sidebar

Currently in a “Sidebar view” the whole page is scrolling down if needed.
This mod allows to scroll the “main area” independently of a “sidebar area”.
Available only if the “main area” is NOT in one column with the “sidebar area”.
This is mainly useful for tablets (ofc for desktops as well).

Tested on 1920x1200 desktop, iPad Air 2, iPhone 5S (real devices).

Here captured gifs (emulator in Chrome):

  card-mod-view-yaml: |
    hui-sidebar-view:
      $: |
        .container div#main {
          max-height: calc(100vh - var(--header-height) - 4px);
          overflow-y: auto;
        }
        @media (max-width: 760px) {
          .container div#main {
            max-height: unset;
            overflow-y: unset;
          }
        }

---

PR was proposed as well:

"sidebar" view: allow to scroll "main" area w/o scrolling a sidebar

[afxefx (Jerry Sullivan)]

Thank you for this Ildar! I’ve been trying to hide the Assist button for some time now and had given up until I saw your post. This worked perfect for hiding the Assist button as well.

[Mariusthvdb (Marius)]

hiding those menu items is super robust nowadays with the Kiosk-mode custom card. In fact, Ive removed all hide_xxx from my themes and have Kiosk mode take care of it.

its options are hugely expanded, and there is but 1 item it cant hide yet, (and I wont tell because you might not even be bothered by it )

anyways, install Kiosk mode and make the card_mod_themes more robust, but not having to take care of it anymore.
Its very actively developed currently so cant underdress its usefulness

[WarC0zes]

Hello,
with the new energy panel color option. I realized that it is only the bars that change color, but not the sources.
I modified my theme to use card_mod and modify the source colors.

mushroom_noborder:
  ha-card-border-width: 0
  energy-grid-consumption-color-0: red
  energy-grid-consumption-color-1: green
  card-mod-theme: mushroom_noborder
  card-mod-card: |
    ha-card > div > div > table > tbody > tr:nth-child(1) >
    td.mdc-data-table__cell.cell-bullet > div {
      background: red !important;
    } 
    ha-card > div > div > table > tbody > tr:nth-child(2) >
    td.mdc-data-table__cell.cell-bullet > div {
      background: green !important;
    }       
  modes:
    light: {}
    dark: {}

[matata (Martin Prochazka)]

Hello… please…
This code work for me in card yaml

But, in theme not workig.

…
What is wrong please?

[Ildar_Gabdullin]

card-mod-card-yaml

[matata (Martin Prochazka)]

If I try *-yaml … styles not write in

[Ildar_Gabdullin]

because “ha-card.xxxxx xxxx $:” is a wrong syntax.

[matata (Martin Prochazka)]

Thank you so much…
Only round-slider$ on start works great… but how i select only thermostat card?

[Ildar_Gabdullin]

Cannot say for sure, not using this card(((

[davidnestico]

Trying to do this now, this goes in the theme file right? Also how do I select the tab I want the icon on specifically? Thanks.

[Ildar_Gabdullin]

@davidnestico

Also how do I select the tab I want the icon on specifically?

Addressed by a tab’s label:

aria-label='badge_in_tab'

@davidnestico

this goes in the theme file right?

Yes.
See more detailed examples here or in Github how card-mod is used in themes.

[davidnestico]

Does card_mod not affect iframe?

Trying to remove the header but it’s not working.

type: custom:mod-card
card_mod:
  style: |
    .mdc-top-app-bar {
      display: none !important;
    }
card:
  type: iframe
  url: >-
    /media-browser/browser/app%2Cmedia-source%3A%2F%2Fnest/
  aspect_ratio: 150%

[Ildar_Gabdullin]

If you are asking about modding iframe card - then you are asking in a wrong thread.
Go to card-mod thread.

But I guess this about modding a subview’s header, right?
Then why the iframe here in your code?

[boheme61]

Did latest update (2023.10.0) “messed up” card-mod-root-yaml … again ? , or is it just my installation ?

• Fixed by renaming card-mod-root-yaml TO card-mod-root
• and card-mod-sidebar-yaml TO card-mod-sidebar

mhhh, weird

And now i see core-2023.10.1 released … guess it should be “safe” , in this matter