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

Share your Projects! Themes
1635

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 %}
1636

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

image
image908Ɨ358 11.4 KB

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

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

1638

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.

1639

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
1640

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

1641

Add double quotes around good. Use double quotes for non-interger states.

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

Thank you for the suggestion! That did not work, unfortunately. The log also shows the same error.

Sean

1643

I tested it and it worked for me. What card are you applying it to that doesnā€™t work?

1644

An entity card:

      - type: entity
        entity: sensor.macnas01_status
        name: NAS Health

Seems like it should work for me too. Thatā€™s why Iā€™m struggling so hard with this.

Sean

1645

Does it work if itā€™s a stand alone card? Change the eni

image
image916Ɨ212 4.33 KB

type: entity
entity: sensor.macnas01_status
icon: mdi:mushroom
name: NAS Health
card_mod:
  style: |
    :host {
    --paper-item-icon-color:
    {% if states.sensor.macnas01_status.state == "good" %}
    lightgreen
    {% else %}
    red
    {% endif %}
    }

Try this as wellā€¦

type: entity
entity: sensor.macnas01_status
icon: mdi:mushroom
name: NAS Health
card_mod:
  style: |
    :host {
    --paper-item-icon-color:
    {% if states('sensor.macnas01_status') == "good" %}
    lightgreen
    {% else %}
    red
    {% endif %}
    }
1646

I apologize, Iā€™m not sure what you mean as a ā€œstand-aloneā€ card. Right now, itā€™s an entity card that doesnā€™t do anything else but show the health of the NAS. Yes, itā€™s in a grid with several other cards, but that one entity - NAS Health - doesnā€™t share anything with any other card or sensor. Iā€™ll try your suggestions nowā€¦

1647

Your code started with a - so I knew it had to be part of a card with other entities. Being in a grid with a larger card means it could simply be an indention issue.

A standalone card to me means just one entity.

1648

Ah! I get what youā€™re saying. Actuallyā€¦ yes, when I go to a different dashboard and set that up as one card by itself, it does indeed work. So - perhaps it might be an indention issue then? I know, indention issues cause a ton of problems. Now if thatā€™s the case, I have to figure out exactly WHERE that indention issue falls.

1649

If you want to message me the code to the card if itā€™s large, I can take a look too.

1 Like
1650

OK - Iā€™ll do that, if you donā€™t mind. Iā€™m looking squarely at the cards that work for my weather, same type of code. Frustrating.

1651

A single misplaced } can cause everything after it to not work.

1 Like
1652

HUGE shout-out to LiQuid_cOOled!

Working through the problem together, the fix was found and itā€™s smooth sailing again.

Couldnā€™t have done it without you!

1 Like
1653

Newbie to card mod and css styles here. Iā€™ve been playing around with some room cards using a combination of button card/mushroom. Following along with the ideas from https://www.youtube.com/watch?v=RSQwxuAm

I am having a lot of trouble adding in a background image to my card. Trialing first with the first card in the vertical stack below (Master).

Havenā€™t been able to get it to work under card mod or styles:. Hoping just a newbie mistake but I would appreciate if anyone has any suggestions.

image
image774Ɨ238 22.8 KB

type: vertical-stack
cards:
  - square: false
    type: grid
    cards:
      - type: custom:button-card
        name: Master
        icon: mdi:bed-king-outline
        entity: none
        card_mod:
          style: |
            ha-card > div {
              padding: 0px 0px 0px!important;
            }
            ha-card {          
              padding: 10px 10px!important;
              border: none;
              border-radius: 10px;
              background-image: url("/local/background/MasterBW.jpg")            
              box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.0);   
            }
        custom_fields:
          btn:
            card:
              type: custom:mushroom-chips-card
              chips:
                - type: template
                  tap_action:
                    action: toggle
                  icon: mdi:lightbulb-outline
                  entity: light.philips_bulb_1
                  card_mod:
                    style: |
                      ha-card {
                        --chip-background: {{ 'rgba(255,255,255,0.7)' if is_state('light.philips_bulb_1', 'on') else 'rgba(0,0,0,0.1)' }};
                        border: none;
                        padding: 0px!important;
                        border-radius: 10px!important;
                      }
                - type: template
                  tap_action:
                    action: toggle
                  icon: mdi:led-strip-variant
                  entity: light.philips_strip_1
                  card_mod:
                    style: |
                      ha-card {
                        --chip-background: {{ 'rgba(255,255,255,0.7)' if is_state('light.philips_strip_1', 'on') else 'rgba(0,0,0,0.1)' }};
                        border: none;
                        padding: 0px!important;
                        border-radius: 10px!important;
                      }   
                - type: template
                  tap_action:
                    action: toggle
                  icon: mdi:television
                  entity: media_player.bedroom_tv
                  card_mod:
                    style: |
                      ha-card {
                        --chip-background: {{ 'rgba(255,255,255,0.7)' if is_state('media_player.bedroom_tv', 'on') else 'rgba(0,0,0,0.1)' }};
                        border: none;                       
                        padding: 0px!important;
                        border-radius: 10px!important;
                      } 
        styles:
          grid:
            - grid-template-areas: '"n btn" "s btn" "i btn"'
            - grid-template-columns: 1fr min-content
            - grid-template-rows: min-content min-content 1fr
          card:
            - padding: 10px 10px 10px 10px
            - height: 132px
          custom_fields:
            btn:
              - justify-content: end
              - align-self: start
          name:
            - justify-self: start
            - align-self: start
            - font-size: 18px
            - font-weight: 500
            - color: light-grey
          state:
            - min-height: 80px
            - justify-self: start
            - align-self: start
            - font-size: 14px
            - opacity: '1'
          img_cell:
            - position: absolute
            - width: 60px
            - height: 60px
            - left: 0
            - bottom: 0
            - margin: 0 0 10px 10px
            - background: rgba(0,0,0,0.1)
            - border-radius: 10px
          icon:
            - width: 50px
            - color: light-grey
            - opacity: '1'
        show_state: true
      - type: custom:button-card
        name: Living
        icon: mdi:sofa-outline
        entity: none
        card_mod:
          style: |
            ha-card > div {
              padding: 0px 0px 0px!important;
            }
            ha-card {
              padding: 10px 10px!important;
              border: none;
              border-radius: 10px;
              background-color: rgba(0,0,0,0.1);
              box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.0);
            }
        custom_fields:
          btn:
            card:
              type: custom:mushroom-chips-card
              chips:
                - type: template
                  tap_action:
                    action: toggle
                  icon: mdi:bullhorn-outline
                  entity: switch.neo_siren_1_alarm
                  card_mod:
                    style: |
                      ha-card {
                        --chip-background: {{ 'rgba(255,255,255,0.7)' if is_state('switch.neo_siren_1_alarm', 'on') else 'rgba(0,0,0,0.1)' }};
                        border: none;
                        padding: 0px!important;
                        border-radius: 10px!important;
                      }
                - type: template
                  tap_action:
                    action: toggle
                  icon: mdi:led-strip-variant
                  entity: light.philips_strip_2
                  card_mod:
                    style: |
                      ha-card {
                        --chip-background: {{ 'rgba(255,255,255,0.7)' if is_state('light.philips_strip_2', 'on') else 'rgba(0,0,0,0.1)' }};
                        border: none;
                        padding: 0px!important;
                        border-radius: 10px!important;
                      }   
        styles:
          grid:
            - grid-template-areas: '"n btn" "s btn" "i btn"'
            - grid-template-columns: 1fr min-content
            - grid-template-rows: min-content min-content 1fr
          card:
            - padding: 10px 10px 10px 10px
            - height: 132px
          custom_fields:
            btn:
              - justify-content: end
              - align-self: start
          name:
            - justify-self: start
            - align-self: start
            - font-size: 18px
            - font-weight: 500
            - color: light-grey
          state:
            - min-height: 80px
            - justify-self: start
            - align-self: start
            - font-size: 14px
            - opacity: '0.7'
          img_cell:
            - justify-content: start
            - position: absolute
            - width: 60px
            - height: 60px
            - left: 0
            - bottom: 0
            - margin: 0 0 10px 10px
            - background: rgba(0,0,0,0.1)
            - border-radius: 10px
          icon:
            - width: 40px
            - color: light-grey
            - opacity: '1'
            - padding: 10px
        show_state: true
    columns: 2
1654

Wrong thread, this one is about themes.

1 Like