šŸ”¹ 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