🔹 Card-mod - Super-charge your themes!

as the browser_mod custom resource seems to really bug 2023.11, I’ve disabled that for now, and Frontend seems much more robust. browser_mod slows the Frontend in 2023.11 up to being completely unresponsive · Issue #652 · thomasloven/hass-browser_mod · GitHub

I really m miss my custom titles though, which now defaulted to Home Assistant…

do we have a card_mod way maybe to set that sidebar menu title?

I still have an ancient custom card by Maykar doing that, but before I try that, would think the modern card_mod resource to be more reliable.

Maykars card is still working, needs a small adaptation to use the ha-drawer, but other than that points to:

    const sidebar = document
      .querySelector("home-assistant")
      .shadowRoot.querySelector("home-assistant-main")
      .shadowRoot.querySelector("ha-drawer")
      .querySelector("ha-sidebar");
    const title = sidebar.shadowRoot.querySelector("div.title");

and yes, it works.

since I have some other sidebar mods in place, made by Ildar I tried adding this

  card-mod-sidebar-yaml: |
    .: |
      .menu .title {
        content: 'custom title';
      }

or as template, like the other mods:

  card-mod-sidebar-yaml: |
    .: |
      .menu .title {
        content: "{{'custom title'}}";
      }

but it wont overwrite the Home Assistant.

Please have a look how to proceed?
thx

Hi, what is the correct notation for this please…
This works:
1
This works too:
2

But together not working:

card-mod-card-yaml: |
    
        template-entity-row.mush: 
            $:
              state-badge:
                $: |
                  ha-state-icon
                    {
                      position: relative;
                      top: -1px;
                    }
                    
        template-entity-row.mush: 
            $: |
              state-badge {
                  color: rgba(var(--mush-rgb-blue), 1);
                  background: rgba(var(--mush-rgb-blue), .2);
                  margin: 0 15px;
                  --mdc-icon-size: 22px;
              }

Can you help me please?

Absolutely untested:

        template-entity-row: 
          $:
            state-badge:
              $: |
                ha-state-icon {
                  ...
                }
              .: |
                state-badge {
                  ...
                }

and have no idea what “mush” is, is it a custom class you define for particular card?

Excelent! Like always.
Thank you Ildar!
Yes, .mush is my class.

1 Like

Adding badges to a sidebar

Some time ago I described how to customize a sidebar - particularly how to add a badge:

изображение

Here a badge (a red circle with some number) was shown in an expanded sidebar.
This mod will add it to the minimized sidebar too:

side

code
  card-mod-sidebar-yaml: |
    .: |

      a[data-panel='lovelace-security'] paper-icon-item {
        {% if is_state('input_boolean.test_boolean','off') %}
          {% set COLOR = 'var(--theme-security-off)' %}
          {% set ICON = 'mdi:shield-off' %}
        {% else %}
          {% if states('input_number.test_security_number_of_issues')|float(default=0) > 0 %}
            {% set COLOR = 'var(--theme-security-issues)' %}
            {% set ICON = 'mdi:shield-alert' %}
          {% else %}
            {% set COLOR = 'var(--theme-security-on)' %}
            {% set ICON = 'mdi:shield-check' %}
          {% endif %}
        {% endif %}
        --sidebar-text-color: {{COLOR}};
        --sidebar-selected-text-color: {{COLOR}};
        --sidebar-selected-icon-color: {{COLOR}};
        --sidebar-icon-color: {{COLOR}};
        --card-mod-icon: {{ICON}};
      }

      :host(:not([expanded])) a[data-panel='lovelace-security'] paper-icon-item ha-icon:after {
        {% set NUMBER_OF_ISSUES = states('input_number.test_security_number_of_issues')|float(default=0) %}
        {% if is_state('input_boolean.test_boolean','on') and NUMBER_OF_ISSUES > 0 %}
          content: "{{NUMBER_OF_ISSUES|round(0)}}";
          font-size: 0.65em;
          font-weight: 400;
          left: 26px;
          bottom: 14px;
          position: absolute;
          min-width: 21px;
          box-sizing: border-box;
          border-radius: 50%;
          border: 1px solid var(--sidebar-background-color); /* needed if an icon's color = same as a badge's color */
          background-color: var(--theme-security-issues);
          line-height: 20px;
          text-align: center;
          color: var(--text-accent-color, var(--text-primary-color));
        {% endif %}
      }

      a[data-panel='lovelace-security'] paper-icon-item .item-text:after {
        {% set NUMBER_OF_ISSUES = states('input_number.test_security_number_of_issues')|float(default=0) %}
        {% if is_state('input_boolean.test_boolean','on') and NUMBER_OF_ISSUES > 0 %}
          content: "{{NUMBER_OF_ISSUES|round(0)}}";
          {% if NUMBER_OF_ISSUES < 10 %}
            font-size: 14px;
            padding: 0px 6px;
          {% elif NUMBER_OF_ISSUES >= 10 and NUMBER_OF_ISSUES < 100 %}
            font-size: 11px;
            padding: 0px 4px;
          {% elif NUMBER_OF_ISSUES >= 100 and NUMBER_OF_ISSUES < 1000 %}
            font-size: 8px;
            padding: 0px 3px;
          {% else %}
            font-size: 6px;
            padding: 0px 2px;
          {% endif %}
          font-weight: 400;
          left: calc(var(--app-drawer-width,248px) - 42px);
          position: absolute;
          min-width: 20px;
          box-sizing: border-box;
          border-radius: 50%;
          background-color: var(--theme-security-issues);
          line-height: 20px;
          text-align: center;
          color: var(--text-accent-color, var(--text-primary-color));
        {% endif %}
      }

  theme-security-on: rgb(76,175,80)
  theme-security-issues: red
  theme-security-off: var(--amber-color)
4 Likes

Hello,

I use the Whats App theme and would like to hide the conversation button in this theme?

According to the browser it is the following button:
image

I have added the following code at the end of the theme. However, this has no effect:

card-mod-theme: whatsapp_theme
    card-mod-root-yaml: |
      .mwc-icon-button[label="Start conversation"] {
        display: none !important;
      }

This is how it currently looks:

      .....
      paper-toast-color: var(--primary-text-color)
      mdc-linear-progress-buffer-color: rgba(0,0,0,0.2)
      data-table-background-color: var(--wa-bg-2)
    card-mod-theme: whatsapp_theme
    card-mod-root-yaml: |
      .mwc-icon-button[label="Start conversation"] {
        display: none !important;
      }

What am I doing wrong?
Finally, the following CSS code should be added to the button:
image

I haven’t been with HA that long. Thanks a lot.
BR

What is a “conversational button”?
Post a screenshot.
If you mean “Assist” - it does not have that “label”.

I would like to restyle the tile card globally, so that primary and secondary text are more readable, by setting the font-width of them. I can do this with one card:


On the left side, the default. On the right, after using card-mod.
This is how I change this:

            entity: lock.achterdeur
            tap_action:
              action: toggle
            card_mod:
              style:
                ha-tile-info$: |
                  .info .primary { 
                    font-weight: 900;
                    letter-spacing: 0px;
                  }
                  .info .secondary {
                    font-weight: 700;
                  }

All this is well and good, but I want to change my theme, so that ALL tile cards’ text is styled this way.
However, I don’t know what to add to my theme.
This is what I tried:

  card-mod-card-yaml: |
    "ha-tile-info$": |
      .info .primary {
        font-weight: 700;
        letter-spacing: 0px;
      }
      .info .secondary {
        font-weight: 500;
      }

This is the browser source I try to “reach”:


I probably misunderstand the concept somehow, but can anybody shed a light on this, please?

I use the Lovelace UI in IOBroker. GitHub - ioBroker/ioBroker.lovelace: Visualization with Lovelace-UI
The whole thing looks like this:
image
And until about a year ago, it was still possible to hide the microphone.

  card-mod-theme: THEMENAME
  card-mod-root: |
    app-toolbar:not([class="edit-mode"]) mwc-icon-button[label="Start conversation"] {
      display: none; 
    }

But unfortunately that no longer works.

I do not see this button.
What version of HA you got?

Anyway, try apply a method used to hide a “Search” button.
How to find it: huge card-mod thread → 1st post → link at the bottom → themes → hiding “search”

Ok, I will try. Thanks :wink:

in a search to be as efficient with global card-mods, I was looking at the examples in the card-mod documentation, especially in the card-mod-themes cookbook section.

however, what is mentioned in those docs wont work for me unfortunately. I cant make a valid class out of this

style: |
  :host {
    --card-mod-icon:
      {% set state = states(config.entity) %}
      mdi:{{'checkbox-marked-circle' if state == 'on' else 'radiobox-blank'}};
  }

I have this as an include, and use it on a binary entiy like

- entity: binary_sensor.washer_active
  card_mod: !include /path/to/card_mods/active_icon.yaml

and it works very fine. Ofc, this is per entity, and Id love to set it on lets say all binary_sensors.

can’t we do that with card_mod_theme under card-mod-row: | ?

something like:

theme-mods:

    card-mod-row: |
      :host {
        --card-mod-icon:
          {% set state = states(config.entity) %}
          {% if state_attr(config.entity,'device_class') == 'running' %}
          mdi:{{'checkbox-marked-circle' if state == 'on' else 'radiobox-blank'}};
          {% endif %}
      }

edit

heck we can… this does kick in now on my ‘running’ binaries (I’ve set my threshold binary sensors to use that class, but they were showing play/stop icons, which I believe is a wrong choice for the class, because my washing machine is not a radio, and thus hope to PR that.
this will settle it in the frontend for the time being…

Season’s Greetings!!

Just wondering if anyone has been able to animate a sidebar icon’s color - I couldn’t figure it out. Best attempt was this:

        @keyframes rgb1 {
          0%, 49% {
            color: lime;
          }
          50%, 100% {
            color: red;
          }
        }
        a[data-panel='config'] paper-icon-item ha-svg-icon {
          animation: rgb1 5s linear infinite;
        }

I also removed the “ha-svg-icon”, added !important to everything… An opacity animation works and the item-text can use the color animation but I can’t get the icons to do the same.

Thanks!!

card mod thread → 1st post → link at the bottom → themes → sidebar

You should define a path based on a REAL situation, not randomly.
Use Code Inspector.

afbeelding

Can I use card mod to correct the font ?
Where can I see what font is used in the other (correct) card ?

The wrrong font is in the custom:time-picker-card, other cards are custom:mushroom-template-card

As I really like what Ildar’s card-mod code looks like for my entities cards, I wanted to add this to my theme as a global mod.
I failed over and over.

I will hide my inital post to make it easier to focus on the resulting question, but my journey to that conclusion is here:

Summary

Looking at this cookbook example I would have thought that I could use the per-card mod as follows.
Of course I am trying to modify entities card and not seconary-info, so the issue may well be there. But it looked like what I am looking for.
Tried yaml and non-yaml approach.

Here is the content of my themes.yaml file (I removed the non-card-mod parts)

frontend:
  themes:
    alex:
      modes:
        dark:
          card-mod-theme: alex
          card-mod-row: |
            hui-generic-entity-row {
              {% if states(config.entity) == "on" -%}
                color: white;
              {% elif states(config.entity) == "off" -%}
                color: grey;
                font-style: italic;
              {% elif states(config.entity) == "unavailable" -%}
                color: gray;
                font-style: italic;
              {% else -%}
                color: yellow;     #in case states(config.entity) is the problem, this should hopefully just turn everything yellow.
                font-style: italic;
              {% endif -%}            
              height: 2em;
            }
            :host {
            }

However, it does nothing for my rows in the auto-entities-populated entities cards or manually populated entities cards.
I also tried card-mod-card, card-mod-root and even card-mod-entities as variables.

EDIT:
And now also tried

      card-mod-root: |
        hui-simple-entity-row:
          $: |
            hui-generic-entity-row {
              {% if states(config.entity) == "on" -%}
                color: white;
              {% elif states(config.entity) == "off" -%}
                color: grey;
                font-style: italic;
              {% elif states(config.entity) == "unavailable" -%}
                color: gray;
                font-style: italic;
              {% else -%}
                color: yellow;              #just for testing
                font-style: italic;
              {% endif -%}            
              height: 2em;
            }

EDIT2:
If the problem is, that the states(config.entity) is only available per row, then maybe there is a way to globally define the font-style and color for all cards if the state of any entity is e.g. “off”?

EDIT3:
I feel like in a math exam where I need to “show my work” :smiley:
So, I now also tried an example directly from the wiki

frontend:
  themes:
    alex:
      modes:
        dark:
          card-mod-theme: alex
          card-mod-row-yaml: |
            :host {
              display: block;
              border: 1px solid yellow;
            }

and only the one row I styled manually to test the example has a border:
image

I reloaded all yamls, reloaded themes, restarted HA. I am at a loss here.

I now found the problem: it is the placement in the dark mode. It works as soon as I place it in the root theme.

Does anybody then know how to make it selective for the dark mode (without creating a dedicated dard-mode theme, i.e. using the system ability to switch between auto, light and dark)?

I did take it out again, and use the identical mod in my auto-entities card, because I believe to notice that a generic mod like this in the theme-mod is very heavy for the system. Suppose it forces traffic from frontend to backend and back again on all views, and view changes for all entities… given the generic check on all entities being a device_class of a certain type.

Taking this out again did immediately relieve the numbers. Just mentioning here, so people do check the effects of heavy ‘classing’ in their card-mod-themes

1 Like

Hi lldar , what do you use to mock up the device layout in as the gif. Thanks

Hi, could you elaborate, I do not understand your question.

just a heads up:
2024.1 beta broke all of my card-mod-sidebar-yaml: | mods, and I dont yet have a lead on why. the release notes speak of a changed selector chain:

  • Selector chain tweaks. a $ b $ will now select the shadowRoots of all bs in the first a.

but I am no sure why his would effect the side-bar…

issue: 3.4.0 breaks mods on card-mod-sidebar-yaml: ? · Issue #330 · thomasloven/lovelace-card-mod · GitHub

UPDATE

for another reason I had to logout and login again, and after that all my side-bar mods came back… will update the issue and close it

1 Like