🔹 Card-mod - Super-charge your themes!

[Mariusthvdb (Marius)]

@arganto and @Ildar_Gabdullin forgive me for tagging you, hope you can relate to the issue Ill describe, and which we worked on in more than a few posts here and there.

As of 2023.6, I havent been able to show the left menu mods anymore at all.

  card-mod-sidebar-yaml: |

They were a bit shaky before, but after some cache clearing, Ive always been able to show them again.
Currently, there is nothing at al, not an icon color, not a header subtitle, let alone the notifications on each menu item.

Would appreciate if you all could check for yourselves, and see what gives? I dont have any errors in the inspector, though admit to using a modded 3.1.4 version stil, as previously explained.

update

complete rebuild made me aware I had made a mistake myself, though its a bit odd:

a[data-panel='ui-data'] paper-icon-item:after {
          {%- set id = states('sensor.netto_verbruik')|int(default='?') %}
          content: "{{id}}";
          {%- set length = id|length %}
          {%- set table = {1:44,2:48,3:52,4:56,5:60} %}
          {%- set pix = table.get(length,42) %}
          left: calc(var(--app-drawer-width,248px) - {{pix}}px);
          /*right: 14px;*/
          position: absolute;
          min-width: 20px;
          box-sizing: border-box;
          border-radius: 24px;
          font-weight: 400;
          font-size: 14px;
          line-height: 20px;
          text-align: center;
          padding: 0px 6px;
          background-color: {{'saddlebrown' if id|int(default=0) >= 0 else 'gold'}};
          color: {{'ivory' if id|int(default=0) >= 0 else 'saddlebrown'}};
      }

Returns a: TypeError: object of type 'int' has no len() on the line {%- set length = id|length %}

I had set the |int(default='?') because that particular sensor did cause issues, because my smart meter has been down (still is…) and wasnt available (hence a default) and now is 0, so the |int kicks in.

I wasnt aware we can’t use |length on a number… and because of that this particular error causes the full card_mod_theme on the sidebar to be disabled.

I’ve now changed that to: states('sensor.netto_verbruik')|default('?') so it’s either a number as string (templates are always strings, or ‘?’ which ofc also is a string, preventing the type error…

sorry for tagging you again.

[davidnestico]

So can only numbers be displayed or can I put an MDI icon too? I have an idea to use this for notifications.

[Dadafrenk]

Hi thomaslove… thanks for all your advice that I read on the forums and repositories… you are a power!!
I would like to ask you a question if I may. I searched, in vain, for a way to animate icons or use css styles on mouseover. I saw at the head of the discussion that you mention it… could you give me an example of how to do it or maybe a documented link where you can study? thank you very much for the answer and to whoever wants to answer…

[Ildar_Gabdullin]

“mouse-over” effects are based on a fact that some element gets a special “attribute” when hovered, like here:

card-mod-sidebar-yaml: |
    .: |
      a:hover paper-icon-item ha-icon {
        color: red !important;
      }
      a:hover paper-icon-item .item-text{
        color: red;
      }
      a:hover paper-icon-item {
        background: yellow;
      }

[Mariusthvdb (Marius)]

back with some basic menu item modding…

using

      a[data-panel='ui-overzicht'] paper-icon-item:after {
          {%- set id = states('sensor.buienradar_temperature') %}
          content: "{{id}}";
          {%- set length = id|length %}
          {%- set table = {1:44,2:48,3:52,4:52,5:60} %}
          {%- set pix = table.get(length,42) %}
          left: calc(var(--app-drawer-width,248px) - {{pix}}px);
          position: absolute;

to have a notification style badge on some menu items:

before these notifications were positioned exactly over the menu item when that got collapsed, but, in the new beta, I see this:

checking inspector, there’s a change for the position from wide expanded menu:

to collapsed:

but I am not sure how we can adapt the card-mod-theme template above.

could anyone help me out here?

[friendodevil]

How would I use card-mod to shift the icons position down within the frame?

cards:
  - type: custom:mushroom-template-card
    primary: Zone 1
    secondary: '{{ relative_time(states.switch.sonoff_irrigation21.last_changed) }} ago'
    icon: mdi:sprinkler
    entity: switch.sonoff_irrigation21
    icon_color: '{{ ''green'' if is_state(entity, ''on'') else ''disabled'' }}'
    multiline_secondary: false
    fill_container: false
    badge_icon: none
    badge_color: |-
      {% set state = states('sensor.irrigation21_on_today_min') %} 
      {% if state | is_number and state | float > 1 %} 
        green
      {% elif state | is_number and state | float > 15 %} 
        yellow
      {% elif state | is_number and state | float > 25 %} 
        red
      {% endif %}
    picture: ''
    layout: vertical
    card_mod:
      style: |
        ha-card {
          --card-primary-font-size: 10px;
          --card-secondary-font-size: 8px;
          #background: transparent;
          #--icon-size: 30px;
          #width: 66px;
          height: 80px !important;
          #margin-left: auto;
          #margin-right: auto;
          #margin-bottom: 2px;
        }
        mushroom-badge-icon:after {
          content: "{{states("sensor.irrigation21_on_today_min")}}";
          position: absolute;
          display: flex;
          justify-content: center;
          align-items: center;
          #background: rgb(var(--rgb-green));
          color: var(--card-background-color);
          font-weight: bolder;
          #border-radius: 50%;
          top: 0;
          width: 100%;
          height: 100%;
          font-size: 0.8em; 
        }
  - type: custom:mushroom-template-card
    primary: Zone 2
    secondary: '{{ relative_time(states.switch.sonoff_irrigation22.last_changed) }} ago'
    icon: mdi:sprinkler
    entity: switch.sonoff_irrigation22
    icon_color: '{{ ''green'' if is_state(entity, ''on'') else ''disabled'' }}'
    multiline_secondary: false
    fill_container: false
    badge_icon: none
    badge_color: |-
      {% set state = states('sensor.irrigation22_on_today_min') %} 
      {% if state | is_number and state | float > 1 %} 
        green
      {% elif state | is_number and state | float > 15 %} 
        yellow
      {% elif state | is_number and state | float > 25 %} 
        red
      {% endif %}
    picture: ''
    layout: vertical
    card_mod:
      style: |
        ha-card {
          --card-primary-font-size: 10px;
          --card-secondary-font-size: 8px;
          #background: transparent;
          #--icon-size: 30px;
          #width: 66px;
          height: 80px !important;
          #margin-left: auto;
          #margin-right: auto;
          #margin-bottom: 2px;
        }
        mushroom-badge-icon:after {
          content: "{{states("sensor.irrigation22_on_today_min")}}";
          position: absolute;
          display: flex;
          justify-content: center;
          align-items: center;
          #background: rgb(var(--rgb-green));
          color: var(--card-background-color);
          font-weight: bolder;
          #border-radius: 50%;
          top: 0;
          width: 100%;
          height: 100%;
          font-size: 0.8em; 
        }
  - type: custom:mushroom-template-card
    primary: Zone 3
    secondary: '{{ relative_time(states.switch.sonoff_irrigation24.last_changed) }} ago'
    icon: mdi:sprinkler
    entity: switch.sonoff_irrigation24
    icon_color: '{{ ''green'' if is_state(entity, ''on'') else ''disabled'' }}'
    picture: ''
    multiline_secondary: false
    fill_container: false
    badge_icon: none
    layout: vertical
    badge_color: |-
      {% set state = states('sensor.irrigation24_on_today_min') %} 
        {% if state | is_number and state | float > 1 %} 
          green
        {% elif state | is_number and state | float > 31 %} 
          yellow
        {% elif state | is_number and state | float > 40 %} 
          red
        {% endif %}
    card_mod:
      style: |
        ha-card {
          --card-primary-font-size: 10px;
          --card-secondary-font-size: 8px;
          #background: transparent;
          #--icon-size: 30px;
          #width: 66px;
          height: 80px !important;
          #margin-left: auto;
          #margin-right: auto;
          #margin-bottom: 2px;
        }
        mushroom-badge-icon:after {
          content: "{{states("sensor.irrigation24_on_today_min")}}";
          position: absolute;
          display: flex;
          justify-content: center;
          align-items: center;
          #background: rgb(var(--rgb-green));
          color: var(--card-background-color);
          font-weight: bolder;
          #border-radius: 50%;
          top: 0;
          width: 100%;
          height: 100%;
          font-size: 0.8em; 
        }
  - entity: sensor.fertilizer_level
    scale: 27px
    severity:
      amber: 15
      green: 40
      red: 0
    title: Fertilizer tank
    type: custom:gauge-card
    card_mod:
      style: |
        ha-card {
          --card-primary-font-size: 10px;
          --card-secondary-font-size: 8px;
          #background: transparent;
          #--icon-size: 30px;
          #width: 66px;
          height: 80px !important;
          #margin-left: auto;
          #margin-right: auto;
          #margin-bottom: 2px;
type: horizontal-stack

[Manticore_007]

Before I open an issue on GitHub, I have a problem with card-mod.
It works as it should by reloading the page of my dashboard, but when I go to another dashboard and go back to the first one, the car-mod style doesn’t load.

before:

after clicking on “Weer” and “back”:

I followed the manual several times to be sure I don’t forget something, but I can’t seem to figure out the issue.

the code:

initial_view: listWeek
type: calendar
entities:
  - calendar.gezinsagenda
view_layout:
  grid-area: left
card_mod:
  style:
    ha-full-calendar:
      $: |
        #calendar {
          min-height: 225px !important;
        }

[Manticore_007]

I got a step further, I’m beginning to understand the code a little better:

before other page and pressing back:

after other page and pressing back:

the code:

initial_view: listWeek
type: calendar
entities:
  - calendar.gezinsagenda
view_layout:
  grid-area: left
card_mod:
  style:
    ha-full-calendar:
      $: |
        #calendar {
          min-height: 225px !important;
        }
    .: |
      ha-card > ha-full-calendar {
        height: 225px !important;
      }

Still don’t understand why ha-card > ha-full-calendar does show the card-mod, and #calendar doesnt

[Manticore_007]

I just found out that it isn’t a problem in card-mod, but in the calendar card itself. My apologies.

[rob.james.lee]

Has anyone had any luck getting blur backdrop-filters to work with the three dots menu in the header? i got them working great with everything else [card mod theme below], but i can’t seem to get it working for this particular menu even applying what seem like the appropriate settings directly from developer tools in my browser. spent hours yesterday messing around in the css/developer tools thing in my browser. i found the right elements (under mdc-menu-surface) and all – I can change the color and opacity, but can’t get blur to work.

and i don’t even necessarily need it to blur the entire rest of the page like it does when i open more info menus and such – if i could even just blur the background of the menu itself (note how you can still see the x behind the menu in the screenshot quite clearly) that would be great.

weird thing is i do see a slight change when i add backdrop-filter: blur(20px) inside of developer tools - but it doesn’t seem to actually blur, it just sort of changes the opacity a bit.

here’s my theme yaml that seems to be working for blur on the other elements (pop-ups, edit windows, more info, etc.). (I know there’s some redundancy and probably some outdated variable names, but don’t think that’s the issue)

  mdc-theme-surface: rgba(25,15,40,.5)  
  mdc-theme-text-icon-on-background: white
  backdrop-filter: blur(15px)
  dialog-backdrop-filter: blur(15px)
  -webkit-dialog-backdrop-filter: blur(15px)
  -webkit-backdrop-filter: blur(15px)
  -moz-backdrop-filter: blur(15px);
  -o-backdrop-filter: blur(15px);
  -ms-backdrop-filter: blur(15px);

  iron-overlay-backdrop-opacity: 1
  iron-overlay-backdrop-background-color: var(--background-blur-color)

  card-mod-theme: mytheme
  card-mod-root: | 
    .header { 
      backdrop-filter: blur(15px);
      -webkit-backdrop-filter: blur(15px);
      -moz-backdrop-filter: blur(15px);
      -o-backdrop-filter: blur(15px);
      -ms-backdrop-filter: blur(15px);
    } 
    .header::before { 
      box-shadow: none;
      } 

  card-mod-more-info-yaml: |
    $: |
      .mdc-dialog .mdc-dialog__scrim {
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        -moz-backdrop-filter: blur(15px);
        -o-backdrop-filter: blur(15px);
        -ms-backdrop-filter: blur(15px);
        background: var(--background-blur-color);
      }
      .mdc-dialog .mdc-dialog__container div.selector {
        box-shadow: none !important;
        border-radius: var(--ha-card-border-radius);
      }
    .: |
      :host {
        --ha-card-box-shadow: none;
      }

could be that blur just can’t possibly be made to work with this particular menu, but i’m hoping i wrong. i swear i had it working momentarily like one time, but then developer tools jumped to some arbitrary location and i could never find the setting again…it’s driving me crazy

[StickyClient]

Post deleted by author.

[ASNNetworks]

No, I posted my findings hoping someone with more experience could help me out. I’m stuck for now, lacking the CSS skills to properly traverse the DOM and understand it.

[jimmisavage (Jimmi)]

I’m trying to change the icon color of a binary_sensor in a glace card but I can’t get there. I can change the color of the text and i can change the icon but i can change the color of the icon (based on state being ‘on’).

Any help would be appreciated!

[Ildar_Gabdullin]

1. This thread is about THEMES - “how to style all cards in my setup”. Suggest you to start with “how to style THIS particular card”; and it is discussed in a dedicated thread. Check the 1st post → link at the bottom → styles for Glance card.

2. For binary_sensors with a defined device_type a colored icon is already supported “out-of-box”. Default colors may be changed by a user inside a custom theme. So, for these binary_sensors coloring may be done w/o card-mod. Moreover:
   – it may be done not only for binary_sensor with a device_class - it may be done for a binary_sensor w/o a device_class;
   – and even for ANY domain - if you specify a corr. variable (for instance, some “sensor” may only have states “nice”, “ugly”, “gorgeous” - and you may define a variable for each state to specify a color).

[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