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

I also found only this md-dialog-box related PR but not sure if it is relatedā€¦

yeah its here alright: frontend/src/components/ha-md-dialog.ts at 365b7129767cbc5278fe16eeed71689be771ae42 Ā· home-assistant/frontend Ā· GitHub

1 Like

Animation also makes more info charts to appear laggy. First I thought that my database was working very slowly but itā€™s just the animationā€¦ I can also see right side scrollbar appearing and then disappearing when the popup is fully shown. It looks bad.

popup1
popup2

If this is not only about an animation but also about a general look - would be great to have 2 pictures side-by-side for comparing: old vs new.
(cannot do it myself, left & do not have access to PC)

at least I have my squared boxes back

SchermĀ­afbeelding 2024-10-04 om 14.38.45

    md-dialog-container-shape-start-start: var(--ha-card-border-radius)
    md-dialog-container-shape-start-end: var(--ha-card-border-radius)
    md-dialog-container-shape-end-start: var(--ha-card-border-radius)
    md-dialog-container-shape-end-end: var(--ha-card-border-radius)

no other overall variable, had to set all cornersā€¦

the silly animation is still there though

Suggest you to ask in the card-mod thread, this is about themes.
Also, check the 1st post in the card-mod thread - link at the bottom - weather card, it may be useful.

hello, someone can help me with the footer navigation bar?

my code:

type: custom:mod-card
style:
  ha-card:
    position: fixed
    bottom: 0px
    left: 0px
    width: 100%
    height: 60px
    display: flex
    justify-content: space-around
    align-items: center
    background: var(--primary-background-color)
    box-shadow: 0px -2px 10px rgba(0, 0, 0, 0.1)
    z-index: 999
card:
  type: horizontal-stack
  cards:
    - type: button
      icon: mdi:lightbulb
      name: Luci
      tap_action:
        action: navigate
        navigation_path: /lovelace/lights
      show_name: true
      show_icon: true

    - type: button
      icon: mdi:home
      name: Home
      tap_action:
        action: navigate
        navigation_path: /lovelace/home
      show_name: true
      show_icon: true

    - type: button
      icon: mdi:menu
      name: Menu
      tap_action:
        action: call-service
        service: browser_mod.popup
        service_data:
          title: Menu Laterale
          card:
            type: custom:sidebar-card
      show_name: true
      show_icon: true

it works but donā€™t stay at bottom, I use sections. thanks

Thank you. I will delete my posts here.

hopping from individual mods on each and every fold-entity-row, was hoping once more (time has passed) to write a class for them in the card-mod theme settings. Since Iā€™ve only found or use classes on cards, I am not really sure how to set out and change

    card_mod:
      style:
        ha-icon:
          $: |
            ha-svg-icon {
              color: var(--primary-color);
              width: 24px;
            }

into a class for the fold-entity-row card.

(I have a manually edited js resource that fixes it in the card itself, but really want to go away from manual edits as much as possible)

Can this be done? (because now I have to add 326 times

    card_mod: !include /config/dashboard/card_mods/fold_arrow_icon.yaml

to my type: custom:fold-entity-row cardā€¦
I went back to this earlier post but do not believe that ended in success?..

Found an inconsistency colorizing the icon of the Energy menu item in the left sidebar
On any of menu items we can do

      a[data-panel='energy'] paper-icon-item ha-icon {
        {% set netto = states('sensor.netto_verbruik')|int(0) >= 0 %}
        color: {{'saddlebrown' if netto else 'var(--power-color)'}};
      }

but using that on the Energy item nothing happens, no even when setting a direct color like:

      a[data-panel='energy'] paper-icon-item ha-icon {
        color:red;
      }

Opening the Inspector on the item, it appears we need to target the ha-svg-icon hereā€¦

and yes

      a[data-panel='energy'] paper-icon-item ha-svg-icon {
        color: {{'saddlebrown' if netto else 'var(--power-color)'}};
      }

makes it happen.

Dont think I had read or experienced that before here, so as a FYI: colorizing the Energy menu-item requires targeting a non-default property ha-svg-icon where for all other menu-items we need ha-icon

Not sure if this is a bug or intended. Keep an eye open for changesā€¦

can we set a ā€˜badgeā€™ on the menu icon? expanded or not expandedā€¦:

Ive tried the usual

      .menu ha-icon-button {
        color: {{'var(--alert-color)' if alerts else 'var(--ok-color)'}} !important;
      }

      :host(:not([expanded])) .menu ha-icon-button:after {
        content: "{%- set m_alerts = states('sensor.marquee_alerts')|int(0) %}
                  {{'\A ' ~ m_alerts if m_alerts > 0 }}";
        {{style_badge_not_expanded}}
        color: {{'var(--alert-color)' if alerts else 'var(--ok-color)'}} !important;
      }

which doesnt work obviously.
the style template should take care of the positioning and is also used on the non-expanded menu items:

Id love to have the expanded alert I use:

      .menu .title:after {
        content: "{%- set m_alerts = states('sensor.marquee_alerts')|int(0) %}
                  {%- set phrase = 'Alert: ' if m_alerts == 1 else 'Alerts:' -%}
                  {{'\A ' ~ phrase ~ m_alerts if m_alerts > 0 }}";
        white-space: pre;
        font-size: 12px;
        font-weight: bold;
        display: block;
        line-height: 4px;
        color: var(--alert-color);
        animation: marquee 4s alternate infinite;
      }
      @keyframes marquee {
        from {transform: translateX(0%);}
        to {transform: translateX(35%);}
      }

to show the counter in the non-expanded menu

Iā€™m absolutely new to card-mod, tried copy-pasing stuff, but nothing is worth posting here, because Iā€™m simply not able to get it working.

Situation:

            - entity: input_text.empty
              type: custom:multiple-entity-row
              name: " "
              icon: mdi:thermometer
              format: precision0
              entities:
                - entity: sensor.aqara_lena_temp
                  name: "Lena"
                  format: precision1
                  unit: false
                - entity: sensor.aqara_kato_temp
                  name: "Kato"
                  format: precision1
                  unit: false

Iā€™m displaying 2 temperature sensors with multiple entity-row (actually much more, but I simplified the example)

I have 2 entities containing the minimum temperature for each room

input_number.zv_thermostaat_lena
input_number.zv_thermostaat_kato

I want to color the sensors above red when:
sensor.aqara_lena_temp < input_number.zv_thermostaat_lena
sensor.aqara_kato_temp < input_number.zv_thermostaat_kato

But obviously 1 sensor can be above and the other can be below the required temperature, so I want the correct one to show red.

This is what I have now, bow nothing happens:

(cut)
              entities:
                - entity: sensor.aqara_lena_temp
                  name: "Lena"
                  format: precision1
                  unit: false
                  style: |
                    :host {
                      color: {% if states('sensor.aqara_lena_temp') | float < states('input_number.zv_thermostaat_lena') | float %} red {% else %} white {% endif %};
                    }
(cut)

What am I doing wrong ?

  1. This is a wrong thread, it is about themes. Here is a proper place.
  2. The m-e-r (multiple-entity-row) does not support ā€œ:hostā€ for styling ā€œadditionalā€ entities.
  3. Go to the mentioned thread ā†’ 1st post ā†’ link at the bottom ā†’ styles for m-e-r, it will give you a list of styles incl. colored icons.
  4. (unrelated) The ā€œformat: precision0ā€ is meaningless for a ā€œinput_text.emptyā€ entity.

Are you talking about a sidebar? Yes, find my examples above, and your picture shows it as well.
Probably I misunderstood your question.

I meant this
SchermĀ­afbeelding 2024-10-16 om 22.11.13
top Hamburger menu icon when not_expanded:

I havent found an example for that?

You need a badge to the ā€œ3 linesā€ button itself?
image

Asking because you already have badges for icons on your picture.

Good afternoon!

Since the 2024.7 HA update, my sidebar icons no longer color themselves correctly and the align-items: flex-end no longer seems to pin them to the bottom of the view. The only fix has been to remain at 2024.6.4. I was hoping someone would be able to quickly identify what needs to be changed, I am struggling with the page inspector in Chrome to determine exactly what needs to be modified. No matter how I try and reformat it, all 6 icons are picking up the modifications from ā€œlast-of-typeā€, where as pre 2024.7 they would all work with first-of, last-of, and nth-of selectors respectively. Appreciate any insight you have or pointing me in the right direction to figure it out myself, I am usually pretty good at figuring things out but this has stumped me for months.

This is all based off the older version of Mattias_Persson 's theme, with the sidebar icons, before he switched to the bottom bar. Here is everything from that themes.yaml up to that point for context.


    ####################################################
    #                                                  #
    #                     CARD-MOD                     #
    #                                                  #
    ####################################################

      card-mod-theme: tablet

      card-mod-root: |
        #view {
          background: url('/local/background.png') !important;
          background-size: cover !important;
        }

      card-mod-view-yaml: |
        .: |
          hui-view {
            background: none !important;
          }

        #################################################
        #                                               #
        #              GRID CARD HEADINGS               #
        #                                               #
        #################################################

        grid-layout$:
          hui-grid-card:
            $: |
              /* default */
              h1 {
                font-size: 2.4vw !important;
                line-height: 0 !important;
                font-weight: 500 !important;
                color: rgba(255, 255, 255, 0.8) !important;
                padding: 1vw 0 2vw 0 !important;
                letter-spacing: 0.006vw !important;
              }
              /* portrait */
              @media screen and (max-width: 1200px) {
                h1 {
                  font-size: 3.3vw !important;
                  line-height: 1.1vw !important;
                }
              }
              /* phone */
              @media screen and (max-width: 800px) {
                h1 {
                  font-size: 5.5vw !important;
                  line-height: 6vw !important;
                  margin: 2vw 0 0 0 !important;
                }
              }

        #################################################
        #                                               #
        #               SWIPE CARD MARGIN               #
        #                                               #
        #################################################

            $swipe-card$:
              .: |
                div {
                  height: 100%;
                }
              hui-horizontal-stack-card$:
                .: |
                  hui-conditional-card {
                    margin: 1px !important;
                  }

        #################################################
        #                                               #
        #            SIDEBAR VERTICAL-STACK             #
        #                                               #
        #################################################

        grid-layout$hui-vertical-stack-card$: |
          #root {
            background-color: rgba(0, 0, 0, 0.06);
            border-radius: 0;
            border-right: 0.1vw solid rgba(58, 69, 73, 0.2);
            min-height: 100vh;
          }
          /* phone */
          @media screen and (max-width: 800px) {
            #root {
              background-color: rgba(0,0,0,0);
              border-right: none;
              min-height: 100%;
              margin-left: -0.8%;
              margin-bottom: -6%;
            }
          }

        #################################################
        #                                               #
        #             SIDEBAR LAUNDRY TIMER             #
        #                                               #
        #################################################

        grid-layout$hui-vertical-stack-card$hui-conditional-card:
          .: |
            hui-conditional-card {
              display: flex;
              justify-content: center;
            }
            /* phone */
            @media screen and (max-width: 800px) {
              hui-conditional-card > button-card {
                zoom: 250%;
                width: 100%;
                filter: contrast(85%);
              }
            }

        #################################################
        #                                               #
        #             SIDEBAR BOTTOM ICONS              #
        #                                               #
        #################################################

        grid-layout$hui-vertical-stack-card$hui-grid-card:
          .: |
            hui-grid-card {
              display: flex;
              flex: auto;
              align-items: flex-end;
            }

            /* phone */
            @media screen and (max-width: 800px) {
              hui-grid-card {
                position: absolute;
                right: 5.5vw;
              }
            }

          $: |
            #root {
              width: 100%;
              padding: 0 13% 25% 13%;
            }

            /* phone */
            @media screen and (max-width: 800px) {
              #root {
                padding: 0 0 0 55%;
              }
            }

         #conditional color - Camera
          $hui-button-card:first-of-type$: |
            {% if is_state('sensor.template_recent_outside_motion', 'True') %}

              ha-card, ha-state-icon {
                color: rgb(35, 78 ,106) !important;
                opacity: 1 !important;
                animation: update 1.5s ease-out infinite;
              }

              ha-card:hover {
                filter: brightness(130%);
                animation-play-state: paused;
              }

            {% endif %}

              @keyframes update {
                0% {
                  transform: scale(1);
                }
                40% {
                  transform: scale(1.08);
                }
                50% {
                  transform: scale(0.98);
                }
                55% {
                  transform: scale(1.02);
                }
                60% {
                  transform: scale(0.98);
                }
                100% {
                  transform: scale(1);
                }
              }



         #conditional color - Music
          $hui-button-card:nth-of-type(2)$: |
            {% if is_state('media_player.main_floor', 'playing') %}

              ha-card, ha-state-icon {
                color: rgb(35, 78 ,106) !important;
                opacity: 1 !important;
                animation: update 1.5s ease-out infinite;
              }

              ha-card:hover {
                filter: brightness(130%);
                animation-play-state: paused;
              }

            {% endif %}

              @keyframes update {
                0% {
                  transform: scale(1);
                }
                40% {
                  transform: scale(1.08);
                }
                50% {
                  transform: scale(0.98);
                }
                55% {
                  transform: scale(1.02);
                }
                60% {
                  transform: scale(0.98);
                }
                100% {
                  transform: scale(1);
                }
              }


         #conditional color - Devices
          $hui-button-card:nth-of-type(3)$: |
            {% if is_state('binary_sensor.template_upstairs_vaccuum_color', 'dummyvaluetoturnthisoff') %}

              ha-card, ha-state-icon {
                color: rgb(35, 78 ,106) !important;
                opacity: 1 !important;
                animation: update 1.5s ease-out infinite;
              }

              ha-card:hover {
                filter: brightness(130%);
                animation-play-state: paused;
              }

            {% endif %}

              @keyframes update {
                0% {
                  transform: scale(1);
                }
                40% {
                  transform: scale(1.08);
                }
                50% {
                  transform: scale(0.98);
                }
                55% {
                  transform: scale(1.02);
                }
                60% {
                  transform: scale(0.98);
                }
                100% {
                  transform: scale(1);
                }
              }

         #conditional color - Weather
          $hui-button-card:nth-of-type(4)$: |
            {% if is_state('binary_sensor.template_upstairs_vaccuum_color', 'dummyvaluetoturnthisoff') %}

              ha-card, ha-state-icon {
                color: rgb(35, 78 ,106) !important;
                opacity: 1 !important;
                animation: update 1.5s ease-out infinite;
              }

              ha-card:hover {
                filter: brightness(130%);
                animation-play-state: paused;
              }

            {% endif %}

              @keyframes update {
                0% {
                  transform: scale(1);
                }
                40% {
                  transform: scale(1.08);
                }
                50% {
                  transform: scale(0.98);
                }
                55% {
                  transform: scale(1.02);
                }
                60% {
                  transform: scale(0.98);
                }
                100% {
                  transform: scale(1);
                }
              }


         #conditional color - Network Info
          $hui-button-card:nth-of-type(5)$: |
            #{% if not is_state('sensor.template_hass_version', 'Latest') %}
            {% if is_state('sensor.template_hass_version', 'Latest') %}


              ha-card, ha-state-icon {
                color: rgb(35, 78 ,106) !important;
                opacity: 1 !important;
                animation: update 1.5s ease-out infinite;
              }

              ha-card:hover {
                filter: brightness(130%);
                animation-play-state: paused;
              }

            {% endif %}

              @keyframes update {
                0% {
                  transform: scale(1);
                }
                40% {
                  transform: scale(1.08);
                }
                50% {
                  transform: scale(0.98);
                }
                55% {
                  transform: scale(1.02);
                }
                60% {
                  transform: scale(0.98);
                }
                100% {
                  transform: scale(1);
                }
              }


         #conditional color - Vaccuum
          $hui-button-card:last-of-type$: |
            {% if is_state('binary_sensor.template_mainfloor_vaccuum_color', 'on') or is_state('binary_sensor.template_upstairs_vaccuum_color', 'on') %}

              ha-card, ha-state-icon {
                color: rgb(35, 78 ,106) !important;
                opacity: 1 !important;
                animation: update 1.5s ease-out infinite;
              }

              ha-card:hover {
                filter: brightness(130%);
                animation-play-state: paused;
              }

            {% endif %}

              @keyframes update {
                0% {
                  transform: scale(1);
                }
                40% {
                  transform: scale(1.08);
                }
                50% {
                  transform: scale(0.98);
                }
                55% {
                  transform: scale(1.02);
                }
                60% {
                  transform: scale(0.98);
                }
                100% {
                  transform: scale(1);
                }
              }

      card-mod-card: |
        .header .card-header {
          letter-spacing: 0.005em;
          font-size: 1.6em;
          font-weight: 500;
          padding: 1em 0 0 1.68em;
          line-height: initial;
          cursor: default;
        }

        .content .card-content {
          padding: var(--card-content-padding);
        }

Before 2024.7, the 6 icons would stick to the bottom of the screen, but now they move with the sidebar text. And they should all be white, except the 6th icon which is active because the Vacuum is going. Instead all 6 get the modifications for card 6, if that makes sense.

Thank you for any pointers!

Yes
! Exactly that

I used MS Paint for making this mod)))
never tried so far.

1 Like

btw, we seem to not be able to customize the icon of the energy panel, not even using ha-svg-icon

      a[data-panel='energy'] paper-icon-item ha-svg-icon {
         --card-mod-icon: mdi:home-lightning-bolt-outline !important;
        color: {{'saddlebrown' if netto else 'var(--power-color)'}};
      }

let alone do what I wanted:

      a[data-panel='energy'] paper-icon-item ha-svg-icon {
         --card-mod-icon: {{'mdi:home-lightning-bolt-outline' if netto else 'mdi:home-lightning-bolt'}};
        color: {{'saddlebrown' if netto else 'var(--power-color)'}};
      }

(I (want to) use all home variant icons in my dashboards)
color works fine, so it must the the right element targeted