🔹 Card-mod - Super-charge your themes!

Yeah it’s in the code just before the end, but I omitted the parts with the icon referring to the key frames as it didn’t work. Dw if it’s too difficult! Thanks!

The “input” was already provided. If you unable to see/understand it & yet react in a such rude way - surely I will not bother)))

1 Like

Hello everyone, being a newbie in the world of theme creation I am doing a little research, the cards on my Dashboard are modified with mushroom and card-mod everything is good to adjust to the pixel, but I am facing a problem , on the tree of theme codes for my map configuration which are 99% identical I would like to change the map configuration to theme to lighten the Dashboard code, I thank you in advance if you can help me gentlemen the coders even just a bit that would help me a lot I’ve been looking for several days, I’ve been testing things but without success. I’ll give you one of my cards as an example

type: horizontal-stack
cards:
  - type: custom:vertical-stack-in-card
    cards:
      - type: custom:mushroom-template-card
        entity: light.le_salon
        icon: mdi:sofa
        icon_color: |-
          {% if is_state('light.le_salon', 'on') %}
            #FFAE0080
          {% else %}  
            #0000
          {% endif %}
        primary: Salon
        secondary: >-
          {{ states('sensor.thermometre_salon_temperature') }}°C/{{
          states('sensor.thermometre_salon_humidity') }}%
        layout: horizontal
        tap_action:
          action: more-info
        double_tap_action:
          action: none
        hold_action:
          action: none
        card_mod:
          style:
            mushroom-state-info$: |
              .primary {
                position: relative;
                top: -50px;
                left: -155px;
                overflow: visible !important;
                white-space: normal !important;
                background-color: #00000090;
                width: 44%;
                border-radius: 5px 5px 5px 5px;
              }
              .secondary {
                position: relative;
                overflow: visible !important;
                top: -49px;
                left: -155px;
                background-color: #00000090;
                width: 78%;
                border-radius: 5px 5px 5px 5px;
              }
            mushroom-shape-icon$: |
              .shape {
                position: relative;
                left: -43px;
                top: 55px;
              }
            .: |
              :host {
                --mush-icon-size: 146px;
              }
            style: |
              mushroom-badge-icon {
                left: 60px;
                top: 25px;
              }
              ha-card {
                background: none; 
              }
      - type: custom:mushroom-chips-card
        chips:
          - type: conditional
            conditions:
              - condition: state
                entity: light.le_salon
                state: 'on'
            chip:
              type: template
              entity: light.le_salon
              tap_action:
                action: none
              icon: mdi:ceiling-light
              icon_color: |-
                {% if is_state(entity, 'on') %} 
                 orange
                {% endif %}
              hold_action:
                action: none
              double_tap_action:
                action: none
          - type: conditional
            conditions:
              - condition: state
                entity: media_player.samsung_7_series_65
                state: 'on'
            chip:
              type: template
              entity: media_player.samsung_7_series_65
              icon: mdi:play-pause
              icon_color: |-
                {% if is_state('media_player.samsung_7_series_65', 'on') %} 
                  orange
                {% endif %}
              hold_action:
                action: none
              double_tap_action:
                action: none
              tap_action:
                action: none
          - type: conditional
            conditions:
              - condition: state
                entity: alarm_control_panel.alarmo
                state: armed_away
            chip:
              type: alarm-control-panel
              entity: alarm_control_panel.alarmo
              tap_action:
                action: none
              content_info: none
        card_mod:
          style:
            .: |
              ha-card {
                width: 66px;
                margin-left: 85%;
                top: -170px;
                background: none;
                --chip-border-width: 0;
              }
    card_mod:
      style: |
        ha-card {
          height: 178px ;
          margin: auto;
          background-image: url(https://i.ibb.co/NjM7Dd6/salon.png);
          background-size: cover;
          background-position: center;
        }
  - type: custom:vertical-stack-in-card
    cards:
      - type: custom:mushroom-template-card
        icon: mdi:silverware-variant
        icon_color: >-
          {% if is_state('light.la_salle_a_manger', 'on') or
          is_state('switch.prise_connectee_mystrom', 'on') or
          is_state('switch.prise_salle_a_manger', 'on') %}
            #FFAE0080
          {% else %}  
            #0000
          {% endif %}
        primary: Salle a manger
        layout: horizontal
        tap_action:
          action: more-info
        double_tap_action:
          action: none
        hold_action:
          action: none
        badge_icon: |+

        badge_color: |+

        entity: light.la_salle_a_manger
        secondary: ''
        card_mod:
          style:
            mushroom-state-info$: |
              .primary {
                position: relative;
                top: -50px;
                left: -155px;
                overflow: visible !important;
                white-space: normal !important;
                background-color: #00000090;
                width: 110%;
                border-radius: 5px 5px 5px 5px;
              }
              .secondary {
                position: relative;
                overflow: visible !important;
                top: -49px;
                left: -155px;
                border-radius: 5px 5px 5px 5px;
              }
            mushroom-shape-icon$: |
              .shape {
                position: relative;
                left: -43px;
                top: 55px;
              }
            .: |
              :host {
                --mush-icon-size: 146px;
              }
            style: |
              mushroom-badge-icon {
                left: 60px;
                top: 25px;
              }
              ha-card {
                background: none;
              }
      - type: custom:mushroom-chips-card
        chips:
          - type: conditional
            conditions:
              - condition: state
                entity: light.la_salle_a_manger
                state: 'on'
            chip:
              type: template
              entity: light.la_salle_a_manger
              tap_action:
                action: none
              icon: mdi:ceiling-light
              icon_color: |-
                {% if is_state(entity, 'on') %} 
                 orange
                {% elif is_state(entity, 'off') %} 
                 grey
                {% else %}
                 grey
                {% endif %}
              hold_action:
                action: none
              double_tap_action:
                action: none
          - type: conditional
            conditions:
              - condition: state
                entity: switch.prise_connectee_mystrom
                state: 'on'
            chip:
              type: template
              entity: switch.prise_connectee_mystrom
              tap_action:
                action: none
              icon_color: |-
                {% if is_state(entity, 'on') %} 
                 orange
                {% elif is_state(entity, 'off') %} 
                 grey
                {% else %}
                 grey
                {% endif %}
              icon: mdi:power-socket-eu
              hold_action:
                action: none
              double_tap_action:
                action: none
          - type: conditional
            conditions:
              - condition: state
                entity: switch.prise_salle_a_manger
                state: 'on'
            chip:
              type: template
              icon_color: |-
                {% if is_state(entity, 'on') %} 
                 orange
                {% elif is_state(entity, 'off') %} 
                 grey
                {% else %}
                 grey
                {% endif %}
              icon: mdi:power-socket-eu
              entity: switch.prise_salle_a_manger
              tap_action:
                action: none
              hold_action:
                action: none
              double_tap_action:
                action: none
        card_mod:
          style:
            .: |
              ha-card {
                width: 66px;
                margin-left: 85%;
                top: -170px;
                background: none;
                --chip-border-width: 0;
              }
    card_mod:
      style: |
        ha-card {
          height: 178px ;
          margin-left: auto;
          margin-right: auto;
          background-image: url(https://i.ibb.co/rmk15p2/salle-a-manger.png);
          background-size: cover;
          background-position: center;
        }
  - type: custom:vertical-stack-in-card
    cards:
      - type: custom:mushroom-template-card
        entity: light.cuisine
        icon: mdi:pot-steam
        icon_color: |
          {% if is_state('light.cuisine', 'on') %}
            #FFAE0080
          {% else %}  
            #0000
          {% endif %}
        primary: Cuisine
        layout: horizontal
        tap_action:
          action: more-info
        double_tap_action:
          action: none
        hold_action:
          action: none
        badge_icon: |+

        badge_color: |+

        card_mod:
          style:
            mushroom-state-info$: |
              .primary {
                position: relative;
                top: -50px;
                left: -155px;
                overflow: visible !important;
                white-space: normal !important;
                background-color: #00000090;
                width: 55%;   
                border-radius: 5px 5px 5px 5px;
              }
              .secondary {
                position: relative;
                overflow: visible !important;
                top: -49px;
                left: -155px;
                border-radius: 5px 5px 5px 5px;
              }
            mushroom-shape-icon$: |
              .shape {
                position: relative;
                left: -43px;
                top: 55px;
              }
            .: |
              :host {
                --mush-icon-size: 146px;
              }
            style: |
              mushroom-badge-icon {
                left: 60px;
                top: 25px;
              }
              ha-card {
                background: none;
              }
        secondary: ''
      - type: custom:mushroom-chips-card
        chips:
          - type: conditional
            conditions:
              - condition: state
                entity: light.cuisine
                state: 'on'
            chip:
              type: template
              entity: light.cuisine
              tap_action:
                action: none
              icon: mdi:vanity-light
              icon_color: |-
                {% if is_state(entity, 'on') %} 
                 orange
                {% elif is_state(entity, 'off') %} 
                 grey
                {% else %}
                 grey
                {% endif %}
              hold_action:
                action: none
              double_tap_action:
                action: none
          - type: conditional
            conditions:
              - condition: state
                entity: light.plan_de_travail
                state: 'on'
            chip:
              type: template
              icon_color: |-
                {% if is_state(entity, 'on') %} 
                 orange
                {% elif is_state(entity, 'off') %} 
                 grey
                {% else %}
                 grey
                {% endif %}
              entity: light.plan_de_travail
              icon: mdi:vanity-light
              tap_action:
                action: none
              hold_action:
                action: none
              double_tap_action:
                action: none
        card_mod:
          style:
            .: |
              ha-card {
                width: 66px;
                margin-left: 85%;
                top: -170px;
                background: none;
                --chip-border-width: 0;
              }
    card_mod:
      style: |
        ha-card {
          height: 178px ;
          margin-left: auto;
          margin-right: auto;
          background-image: url(https://i.ibb.co/19NXD2Z/cuisine.png);
          background-size: cover;
          background-position: center;
        }
  - type: custom:popup-card
    entity: light.le_salon
    dismissable: true
    card:
      type: vertical-stack
      cards:
        - type: custom:mushroom-light-card
          entity: light.le_salon
          show_brightness_control: true
          use_light_color: true
          show_color_control: false
          collapsible_controls: true
          icon: mdi:ceiling-light
          show_color_temp_control: true
        - type: custom:mushroom-alarm-control-panel-card
          states:
            - armed_away
            - armed_night
          entity: alarm_control_panel.alarmo
        - type: custom:mushroom-media-player-card
          entity: media_player.samsung_7_series_65
          name: télé salon
    size: normal
    title: La salon
  - type: custom:popup-card
    entity: light.la_salle_a_manger
    dismissable: true
    card:
      type: vertical-stack
      cards:
        - type: custom:mushroom-light-card
          entity: light.la_salle_a_manger
          show_brightness_control: true
          use_light_color: true
          show_color_control: false
          name: ' La salle a manger'
          collapsible_controls: true
          icon: mdi:ceiling-light
          show_color_temp_control: true
        - type: horizontal-stack
          cards:
            - type: custom:mushroom-entity-card
              entity: switch.prise_salle_a_manger
              icon: mdi:power-socket-fr
              name: Prise salle à manger
              double_tap_action:
                action: none
              hold_action:
                action: none
              tap_action:
                action: toggle
            - type: custom:mushroom-entity-card
              entity: switch.prise_connectee_mystrom
              icon: mdi:power-socket-fr
              name: Prise mystrom
              tap_action:
                action: toggle
              hold_action:
                action: none
              double_tap_action:
                action: none
    title: La salle a manger
  - type: custom:popup-card
    entity: light.cuisine
    dismissable: true
    card:
      type: vertical-stack
      cards:
        - type: custom:mushroom-light-card
          entity: light.cuisine
          show_brightness_control: true
          use_light_color: true
          show_color_control: false
          name: ' La cuisine'
          collapsible_controls: true
          show_color_temp_control: true
        - type: custom:mushroom-light-card
          entity: light.plan_de_travail
          show_brightness_control: true
          use_light_color: true
          show_color_control: false
          name: ' Le plan de travail'
          collapsible_controls: true
          show_color_temp_control: true
    title: La cuisine


Can anybody help me out with this, please?

I am unable to make this work :frowning:

And I cannot find any other solution to text_box contents that are too long for the field :frowning:

I had this code working fine in a mushroom template card, but after the latest update I can’t change the color or the font size. I have been searching but could not find a solution.
Any help, please?

card_mod:
  style: |
    ha-card {
      --primary-text-color: white;
      --secondary-text-color: white;
      --title-font-size: 30px;
      --subtitle-font-size: 15px:
    }

There were a few changes with the 3.4.1 update and you had a colon vs a semi-colon.

card_mod:
  style: |
    ha-card {
      --card-primary-color: white !important;
      --card-secondary-color: white !important;;
     --title-font-size: 30px;
     --subtitle-font-size: 15px;
      }

check out this topic for direct Mushroom card info.

1 Like

@xlyralycanx I like your theme. I added a simple fan animation to the theme. I thought it may help you address your formatting and get your animation working.

Test Theme:
  modes:
    dark:
      sidebar-background-color: '#090e3b'
      scrollbar-thumb-color: 'var(primary-color)'
      app-header-background-color: '#090e3b'
      app-header-edit-background-color: 'var(--app-header-background-color)'
      app-header-text-color: '#99eeff'
      card-background-color: '#090e3b'
      primary-text-color: '#99eeff'
      accent-color: '#cc7000'
    light:
      sidebar-background-color: '#99eeff'
      scrollbar-thumb-color: 'var(primary-color)'
      app-header-background-color: '#99eeff'
      app-header-edit-background-color: 'var(--app-header-background-color)'
      card-background-color: '#99eeff'
      text-primary-color: '#000000'
  ha-card-border-color: 'var(--card-background-color)'
  state-switch-active-color: '#008000'
  state-binary_sensor-active-color: '#008000'
  
  card-mod-theme: Test Theme
  card-mod-sidebar-yaml: |
    .: |
      #.menu .title {
       # font-family: Dancing Script;
      }
      #a[data-panel='panel'] paper-icon-item .item-text {
       # font-family: Dancing Script;
        #font-size: 26px;
      }
      #.spacer {
       # background: center / cover url("/local/media/images/christmasdecor.png");
      }
      a[data-panel='dashboard-home'] paper-icon-item ha-icon {
        color: #cc7000 !important;
      }
      a[data-panel='dashboard-home'] paper-icon-item .item-text {
        color: #cc7000;
      }
      a[data-panel='status-page'] paper-icon-item ha-icon {
        color: #000080 !important;
      }
      a[data-panel='status-page'] paper-icon-item .item-text {
        #color: #000080;
      }
      a[data-panel='todo'] paper-icon-item ha-svg-icon {
        color: #000080 !important;
      }
      a[data-panel='todo'] paper-icon-item .item-text {
        color: #000080;
      }
      a[data-panel='calendar'] paper-icon-item ha-svg-icon {
        color: #cc7000 !important;
      }
      a[data-panel='calendar'] paper-icon-item .item-text {
        color: #cc7000;
      }
      #a[data-panel='map'] paper-icon-item ha-svg-icon {
       # color: #000080 !important;
      #}
      #a[data-panel='map'] paper-icon-item .item-text {
        #color: #000080;
      #}
      #a[data-panel='history'] paper-icon-item ha-svg-icon {
        #color: #cc7000 !important;
      #}
      #a[data-panel='history'] paper-icon-item .item-text {
        #color: #cc7000;
      #}
      a[data-panel='core_configurator'] paper-icon-item ha-icon {
        color: #cc7000 !important;
      }
      a[data-panel='core_configurator'] paper-icon-item .item-text {
        color: #cc7000;
      }
      a[data-panel='hacs'] paper-icon-item ha-icon {
        color: #cc7000 !important;
      }
      a[data-panel='hacs'] paper-icon-item .item-text {
        color: #cc7000;
      }
      #a[data-panel='media-browser'] paper-icon-item ha-svg-icon {
        #color: #000080 !important;
      #}
      #a[data-panel='media-browser'] paper-icon-item .item-text {
        #color: #000080;
      #}
      a[data-panel='developer-tools'] paper-icon-item ha-svg-icon {
        color: #cc7000 !important;
      }
      a[data-panel='developer-tools'] paper-icon-item .item-text {
        color: #cc7000;
      }
      #a[data-panel='config'] paper-icon-item ha-svg-icon {
        #color: #000080 !important;
      #}
      #a[data-panel='config'] paper-icon-item .item-text {
        #color: #000080;
      #}
      .notifications-container paper-icon-item ha-svg-icon {
        color: #cc7000;
      }
      .notifications-container paper-icon-item .item-text {
        color: #cc7000;
      }
      #a[data-panel='panel'] paper-icon-item .item-text {
        #color: #000080;
      #}
      
  card-mod-card: |

    ha-card {
        border: none !important;
        background-color: none !important;
        --mdc-icon-size: 26px;
        --shape-color: none !important;
        --title-font-weight: 200; 
        --card-primary-font-weight:300;
        --title-font-size: 16px;
        --title-padding: 12px 12px 4px;
        border-radius: 4px !important;
        box-shadow: none !important;
        --card-secondary-line-height: 11px !important;
        --card-secondary-font-size: 11px !important;
        --mush-icon-symbol-size: 38px;
        --control-height: 36px;
        
                 } 
    .: |
    :host {
        border-radius: 4px !important;
        --rgb-primary-text-color: none !important;
          }


    
  card-mod-row-yaml: |
    "*:first-child$": |
      @keyframes spin {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(359deg);
        }
      }
      @keyframes spinr {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(-359deg);
        }
      }      
      state-badge {
        {% if config.entity.startswith('fan.') and is_state('sensor.fan_direction', 'forward') %}
          animation: spin 3s infinite linear, coloring 8s linear infinite alternate;
        {% else %}
         animation: spinr 3s infinite linear, coloring 8s linear infinite alternate;
        {% endif %}
      }

      @keyframes coloring {
            0% {
              color: red;
            }
            17% {
              color: orange;
            }
            34% {
              color: yellow;
            }
            51% {
              color: green;
            }
            68% {
              color: lightblue;
            }
            85% {
              color: blue;
            }
            100% {
              color: violet;
            }
          }

Here is one sidebar icon spinning

image

Test Theme:
  modes:
    dark:
      sidebar-background-color: '#090e3b'
      scrollbar-thumb-color: 'var(primary-color)'
      app-header-background-color: '#090e3b'
      app-header-edit-background-color: 'var(--app-header-background-color)'
      app-header-text-color: '#99eeff'
      card-background-color: '#090e3b'
      primary-text-color: '#99eeff'
      accent-color: '#cc7000'
    light:
      sidebar-background-color: '#99eeff'
      scrollbar-thumb-color: 'var(primary-color)'
      app-header-background-color: '#99eeff'
      app-header-edit-background-color: 'var(--app-header-background-color)'
      card-background-color: '#99eeff'
      text-primary-color: '#000000'
  ha-card-border-color: 'var(--card-background-color)'
  state-switch-active-color: '#008000'
  state-binary_sensor-active-color: '#008000'
  
  card-mod-theme: Test Theme
  card-mod-sidebar-yaml: |
    .: |
      a[data-panel='hacs'] paper-icon-item ha-icon {
        color: #cc7000 !important;
        animation: spin 3s infinite linear;
      }
      @keyframes spin {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(359deg);
        }
      }

Hello everyone,
Please correct me if I’m in the wrong spot for this question!!

I recently updated Card Mod to the latest version, which didn’t break anything except for one single area where I’m highlighting the 'Real Feel" temperature.
For some reason, the “Justify-Content” area is VERY squished, and I can’t seem to figure out how to adjust it so it shows and fills the whole area.
If I modify the HTML and make the “Justify-Content” 50px, it looks great! But it is defaulting to 20px, and I can’t seem to edit this from the Card_Mod configurations…

Below is my YAML for the card:

card:
  square: false
  columns: 1
  type: grid
  cards:
    - type: custom:layout-card
      layout_type: custom:grid-layout
      cards:
        - type: custom:weather-card
          entity: weather.home
          forecast: false
          details: false
          current: true
          card_mod:
            style: |
              ha-card {
                background: none;
                border: none;
                --font-size: 10px;
                text-align: left;
               }
        - type: custom:mushroom-template-card
          fill_container: true
          primary: '{{ states(''sensor.home_realfeel_temperature'') }} °C'
          secondary: Real Feel
          card_mod:
            style: |
              ha-card {
                --card-primary-font-size: 50px;
                --card-secondary-font-size: 15px;  
                --card-primary-line-height, 50px;
                background: none;
                border: none;
                text-align: center;
               }
      layout:
        grid-template-columns: 55% auto
        grid-template-rows: auto

Also below is a screenshot of the card with the issue, as well as some of the HTML for visibility.

Any help would be greatly appreciated! Many of you are much smarter than I, so I’m hoping someone here knows the solution!

You have a typo

--card-primary-line-height, 50px;

should be
--card-primary-line-height: 50px;

1 Like

Could anyone advise on how to hide/remove the three stacked lines as seen below from the top left of the Lovelace dashboard? Could this be achieved using Card-mod?

image

Solution of customizing this button was posted here.
Here is how to find it:
huge card-mod thread → 1st post → link at the bottom → themes → sidebar
Now try to hide this button with “display: none”.

Oh man…i can’t believe this whole thing was a simple typo…
Thank you so much for catching this for me!! You have cured my headache!:pray:

Thanks

Given that a try & unfortunately it doesn’t seem to work. Unless I’m missing something.

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

I’m using this dashboard on a tablet. So don’t want users to be able to get to other parts of HA that they shouldn’t via the menu. So by removing this it just gives access to only what they need.

Can you see a difference?

Question from a card-mod newbie with hardly any CSS knowledge:

Situation
I’ve combined a mushroom cover card and a mushroom template card (used as a switch) in a vertical stack to ease controlling a cover in the house, e.g. on the balcony.
the switch is used to enable/disable the automation controlling the cover depending on time, sun, temperature, …

grafik

currently it’s not clearly visible that the two cards belong to each other, since the vertical stack has no border, but the two single cards have one.

Goal
I would like to have a border around the vertical stack and remove the border from the single cards.

How could card_mod help here?

Code

type: vertical-stack
cards:
  - type: custom:mushroom-cover-card
    entity: cover.rollladen_balkon_og
    name: Balkon-OG
    show_position_control: false
    show_buttons_control: true
    double_tap_action:
      action: none
    hold_action:
      action: none
  - type: custom:mushroom-template-card
    primary: Automatik
    secondary: |-
      {% if is_state('automation.rollladen_balkon_og_cca', 'on') %}
        ein
      {% else %}
        aus
      {% endif %}
    icon: |-
      {% if is_state('automation.rollladen_balkon_og_cca', 'on') %}
        mdi:window-shutter-auto
      {% else %}
        mdi:window-shutter
      {% endif %}
    hold_action:
      action: none
    tap_action:
      action: toggle
    double_tap_action:
      action: none
    entity: automation.rollladen_balkon_og_cca
    icon_color: |-
      {% if is_state('automation.rollladen_balkon_og_cca', 'on') %}
        green
      {% else %}
        grey
      {% endif %}

I’d switch to stack-in-card and use the following code. I removed the individual card borders with:

card_mod:
      style: |
        ha-card {
          border: none !important;
            } 

type: custom:stack-in-card
cards:
  - type: custom:mushroom-cover-card
    entity: cover.rollladen_balkon_og
    name: Balkon-OG
    show_position_control: false
    show_buttons_control: true
    double_tap_action:
      action: none
    hold_action:
      action: none
    card_mod:
      style: |
        ha-card {
          border: none !important;
            }  
  - type: custom:mushroom-template-card
    primary: Automatik
    secondary: |-
      {% if is_state('automation.rollladen_balkon_og_cca', 'on') %}
        ein
      {% else %}
        aus
      {% endif %}
    icon: |-
      {% if is_state('automation.rollladen_balkon_og_cca', 'on') %}
        mdi:window-shutter-auto
      {% else %}
        mdi:window-shutter
      {% endif %}
    hold_action:
      action: none
    tap_action:
      action: toggle
    double_tap_action:
      action: none
    entity: automation.rollladen_balkon_og_cca
    icon_color: |-
      {% if is_state('automation.rollladen_balkon_og_cca', 'on') %}
        green
      {% else %}
        grey
      {% endif %} 
    card_mod:
      style: |
        ha-card {
          border: none !important;
            }  

@LiQuid_cOOled Thanks a million! Exactly what I was looking for :pray::+1:

Hi,

I have just updated core HA from 2024.1.6 to 2024.2.2 and noticed there is now a pencil icon where the overflow (3 dots) menu button was. This now takes you directly into edit mode rather than a submenu to enter edit mode.

I was using code from the Theme cookbook to hide the overflow menu and show a clock in its place.
This now only works if you are in edit mode which makes it rather pointless.
Here is an example from before 2024.2.2 with the card mod code in my theme.

image

And this is how it looks in 2024.2.2

image

And this is how it looks in 2024.2.2 in edit mode

image

Here is my card-mode theme yaml.

  card-mod-root-yaml: |
    .: |
      ha-button-menu {
        color: transparent !important;
      }

      ha-button-menu::before {
        content: "{{states('sensor.local_time')}}";
        color: var(--text-primary-color);
        visibility: visible;
        position: relative;
        font-size: 18px;
        top: 25px;
        white-space: nowrap;
      }

Using the browser inspector I can see that the element ha-button-menu does not now exist in the non edit view. It now looks as if it is mwc-icon-button[title="Edit Dashboard"] but I cannot get it to work in my card-mod theme.

I have searched this topic, the all changes post for 2024.2.x and the 2024.2.x release notes but haven’t had any hits.
Anybody else notice the pencil icon change? I would appreciate any help to get this functionality back.

Replying to myself in case anyone is interested in my solution.

On further inspection, I found that the width of the browser window affected the elements that are displayed.
So for a wide window the pencil icon is displayed and when clicked takes you directly into edit mode.
When the window is narrow the overflow icon is displayed (3 dots) and when clicked shows the overflow menu.

So for a narrow window or when in edit mode, my old card-mod theme code works.
But for a wide window in 2024.2.x it doesn’t.

Here is my modified card-mod theme code to cater for both scenarios.

  card-mod-root-yaml: |
    .: |
      /* this hides the pencil icon & replaces it with the time when browser window is wide */
      ha-icon-button[data-selector="EDIT_DASHBOARD"] {
        color: transparent !important;
      }
      ha-icon-button[data-selector="EDIT_DASHBOARD"]::after {
        content: "{{states('sensor.local_time')}}";
        color: var(--text-primary-color);
        visibility: visible;
        position: absolute;
        font-size: 18px;
        top: 10px;
        right: 18px;
        white-space: nowrap;
      }
      /* this hides the overflow icon & replaces it with the time when browser window is narrow or in edit mode */
      ha-button-menu {
        color: transparent !important;
      }
      ha-button-menu::before {
        content: "{{states('sensor.local_time')}}";
        color: var(--text-primary-color);
        visibility: visible;
        position: relative;
        font-size: 18px;
        top: 25px;
        white-space: nowrap;
      }      

Note I got the element name wrong in my original post.
It is ha-icon-button[data-selector="EDIT_DASHBOARD"]

By changing the data-selector to “SEARCH” or “ASSIST” would hide the search icon or the voice assist icon respectively.
For example:

      /* uncomment this to hide the search icon 
      ha-icon-button[data-selector="SEARCH"] {
        display: none !important;
      }
      */

UPDATE:
For this to work Kiosk Mode has to be installed via HACS (Frontend)

1 Like

Hi all - I have several cards on one of my dashboards that use card_mod to change the color of the text and icon. Everything is working great - almost. This bit of code is working flawlessly with no issues:

     card_mod:
       style: |
         :host {
         --paper-item-icon-color:
         {% if states.sensor.msm_wx_dana_ia_temp.state | int < 32 %}
         lightblue
         {% elif states.sensor.msm_wx_dana_ia_temp.state | int < 55 %}
         yellow
         {% elif states.sensor.msm_wx_dana_ia_temp.state | int < 90 %}
         lightgreen
         {% else %}
         red
         {% endif %}
         }

With this configuration, the temperature display changes appropriately as the outside temperature changes. So building on that, I decided to do the same for the entity card that reports the status of my NAS. Here is the code that I wrote:

card_mod:
  style: |
    :host {
    --paper-item-icon-color:
    {% if states.sensor.macnas01_status.state == 'good' %}
    lightgreen
    {% else %}
    red
    {% endif %}
    }

This passes muster in YAML configuration checkers, but it does not return the results I expect. In fact, it returns nothing at all. The text and icon remain the same at all times. Checking the logs, I see this:

Error while processing template: Template<template=(:host { --paper-item-icon-color: {% if states.sensor.macnas01_status.state == ‘good’} lightgreen {% else %} red {% endif %} } ha-card { color: {% if states.sensor.macnas01_status.state == ‘good’} lightgreen {% else %} red {% endif %} })

and

jinja2.exceptions.TemplateSyntaxError: unexpected ‘}’

Looking at the code, every { is matched with a } - there are 4 of each.

What am I overlooking?

Sean