šŸ”¹ Card-mod - Add css styles to any lovelace card

Yes i assumed the -overlay-base-color came from his Theme, i also use card-mod when i want to change my Theme-settings, if i not decide to make it a global change

Also, some variable may affect ALL labels (or icons etc) on the card - what if I need to style a particular element? So, changing vars within a theme has a limited use.
P.S. sorry for my broken English, it too late, in Russian I may speak much better although it became toxic these months.

Yes you are right, it could affect alot, thou when i looked at the pic, it seems like alot of the color was variables to mmp-text-color, which in turn was to mmp-overlay-base-color , seems to me very ā€œconflictā€ prone :slight_smile: , but i think itā€™s difficult to ā€œreadā€ from browser-tools what actually comes from Themes or Card-Script, im still not ā€œcomfortableā€ with inspector :slight_smile:
So in his case, as you say itā€™s better to go for the element in specific
PS: I would love if one could define i.e. icon_colors based on icon_id(name) in Theme ā€¦ i.e mdi:power-socket-de: ā€˜greenā€™ :slight_smile:

Hi All, just want to have a quick confirmation that it is normal that when we load the site showing the UI, there will be abt a second where the card-mod edits have not taken place right? We can see the transition of the card-mod implementation taking place, is there any way to improve this, like having the card-mod scripts implemented before showing the page?

Just a small issue.

1 Like

Thanks. The template works fine and to be sure I just said it should just be ā€˜redā€™ for now.
Since google results are somewhat personalized, I think you are pointing me to these results:

  1. Lovelace: Mini Media Player - #2246 by CDRX2
    Iā€™ve seen this one to and played a bit with it. The solution in post 2250 for example works, but itā€™s for all buttons where I want to change individual buttons. I thought of responding to this topic, but thought the current thread would be more on topic.
  2. Lovelace: Mini Media Player - #1762 by DavidFW1960
    If I am not mistaking itā€™s the same for this one. The variable approach is however one I ā€œdocumentedā€ in case of later use.
  3. mini-media-player/README.md at master Ā· kalkih/mini-media-player Ā· GitHub
    Iā€™ve read about al the documentation on mini media player and card mod at Git, the community and via public search that I could find.

I currently use a Stack Card setup with the regular HA buttons, but love to switch to the mmp if I get the conditional format to work on individual buttons in the mmp.

Anyway, thanks and Iā€™ll keep searching and report back once I solved it.

Thanks to the/your posts, that I wasnā€™t able to find, I was managed to solve it.
Still having a hard time mastering it in the way of finding the solution from sketch myself, but I guess I have to live with that. At least for now.

The solution:

card_mod:
  style:
    mmp-shortcuts $: |
      mmp-button:nth-of-type(1) {
        color:{{ iif(is_state("automation.follow_me","on"),"var(--state-icon-active-color)",iif(is_state("media_player.kitchen","unavailable"),"red")) }} ;
      }

In my case itā€™s shortcut button 1, so mmp-button:nth-of-type(1), where the button color can be changed using background-color: instead of color:.

To change the icon one should use mmp-button:nth-of-type(2) ha-icon

Thank you very much

Hi All,
Iā€™m trying to apply style to surveillance-card.

The HTML looks like this:

<surveillance-card>
  <div class="container">
    <div class="thumbs">
         ......
    </div>
    <div class="mainImage">
       .....
    </div>
  </div>

And this is the yaml config

card_mod:
  style: |
    surveillance-card .container .mainImage {
      position: fixed;
      top: 10px;
    }

Iā€™m trying to change the mainImage div

What am I doing wrong?

Thanks

Good that you achieved what you needed.
Just a personal opinion - I would prefer a simpler syntax:

      mmp-button:nth-of-type(1) {
        {% if is_state("automation.follow_me","on") %}
        color: var(--state-icon-active-color);
        {% elif is_state("media_player.kitchen","unavailable") %}
        color: red;
        {% else %}
        color: ????????????????;
        {% endif %}
      }

And now you can see that in you expression there is no a default color.
ā€œiifā€ expression is compact but sometimes may be difficult to traceā€¦

I know there is no default color. I did that intentionally cause I have HA set to auto theme dark/light and it would take me extra conditions to cover the dark and light situations. Now it just follows HA.

Nevertheless thanks for pointing that out.

Could you explain?
From a CSS point of view, if some property is undefined it will cause an error.

Sure, I am happy to explain my thoughts on this.

I am more of a scripter than a CCS kind of person, but totally get your point from a CCS perspective. I however donā€™t think it will end up in an error and here is why.

Basically I just said to card-mod: If this, then overwrite what HA does with my preference. As a result, of not telling what to do else, nothing happens when this is not true, so HA does what it always does.

From a scripting perspective I am not familiar with an obligation to use else unless you want to do something in that else-situation. In the specific situation I do have an else situation that I want to cover, being the situation where the speaker isnā€™t available. But if it is available, I just want HA to use its default color.

Does this make sense?

For the sake of completeness. At first I did cover the else-situation, simply because I like to be in control of what happens. This however resulted in an unwanted text color when HA toggled in the opposite theme. Maybe I just used the wrong variable, I donā€™t know anymore.

Anyway, I decided to just give the else situation back in control of HA by not determining the text-color if the iif condition was not true. I however started with the traditional if then else structure, since iif wasnā€™t available back then, and I still use it when the template is more complex.

If you need to let HA to decide - use this:

      mmp-button:nth-of-type(1) {
        {% if is_state("automation.follow_me","on") %}
        color: var(--state-icon-active-color);
        {% elif is_state("media_player.kitchen","unavailable") %}
        color: red;
        {% endif %}
      }

instead if:

      mmp-button:nth-of-type(1) {
        color: {% if is_state("automation.follow_me","on") -%}
        var(--state-icon-active-color)
        {%- elif is_state("media_player.kitchen","unavailable") -%}
        red
        {%- endif %};
      }

1st variant - no style, HA decides what to do.
2nd variant - ā€œcolor: nothingā€, an error.

1 Like

Fair enough.
The reason for my current code is that I started with an else that I removed later-on. Good tip, Iā€™ll improve my code on that :+1:

As I dont have this card, please provide a screenshot of code-inspector/developer tools dom of this part. Most probably there are some shadow roots as well.

How can I combine this with your other styling (have the dynamic badges together with rounded edges)?

This does NOT work:

      - entity: sensor.season
        name: Jahreszeit
        icon: mdi:home
        style: |
          ha-state-label-badge:
            $:
              ha-label-badge:
                $: |
                  .badge-container .label-badge .value {
                    #color: #DF4C1E;
                    #--ha-label-badge-title-width: 60px;
                  }
                  .badge-container .label-badge {
                    border-radius: 20% !important;
                  }
          :host {
            {% set season = states(config.entity) %}
            {% set icon =
              {
                'winter':'mdi:snowflake',
                'spring':'mdi:flower',
                'summer':'mdi:sun',
                'autumn':'mdi:leaf'
              } %}
            {% set icon_color =
              {
                'winter':'rgb(138,180,248)',
                'spring':'rgb(106,168,79)',
                'summer':'rgb(0,0,0)',
                'autumn':'rgb(255,126,0)'
              } %}
            {% set border_color =
              {
                'winter':'rgb(138,180,248)',
                'spring':'rgb(106,168,79)',
                'summer':'rgb(230,145,56)',
                'autumn':'rgb(255,126,0)'
              } %}
            {% set back_color =
              {
                'winter':'rgb(255,255,255)',
                'spring':'rgb(216,251,135)',
                'summer':'rgb(255,242,204)',
                'autumn':'rgb(252,229,205)'
              } %}
            --card-mod-icon: {{ icon[season] if season in icon else 'mdi:home' }};
            --label-badge-text-color: {{ icon_color[season] if season in icon_color else 'var(--paper-item-icon-color)' }};
            --label-badge-red: {{ border_color[season] if season in border_color else 'red' }};
            --label-badge-background-color: {{ back_color[season] if season in back_color else 'white' }};
          }

Output is without rounded corners:
grafik

      card_mod:
        style:
          element $: |
            sub-element {
              ...
            }
          .: |
            :host {
              ...
            }
1 Like

Wow! You are awesome. And so quick!

Those minor adjustments did the trick. If somebody cares/finds this in futureā€¦ here`s what I used (working):

      - entity: sensor.season
        name: Jahreszeit
        icon: mdi:home
        style:
          ha-state-label-badge:
            $:
              ha-label-badge:
                $: |
                  .badge-container .label-badge .value {
                    #color: #DF4C1E;
                    #--ha-label-badge-title-width: 60px;
                  }
                  .badge-container .label-badge {
                    border-radius: 20% !important;
                  }
          .: |
            :host {
              {% set season = states(config.entity) %}
              {% set icon =
                {
                  'winter':'mdi:snowflake',
                  'spring':'mdi:flower',
                  'summer':'mdi:sun',
                  'autumn':'mdi:leaf'
                } %}
              {% set icon_color =
                {
                  'winter':'rgb(138,180,248)',
                  'spring':'rgb(106,168,79)',
                  'summer':'rgb(0,0,0)',
                  'autumn':'rgb(255,126,0)'
                } %}
              {% set border_color =
                {
                  'winter':'rgb(138,180,248)',
                  'spring':'rgb(106,168,79)',
                  'summer':'rgb(230,145,56)',
                  'autumn':'rgb(255,126,0)'
                } %}
              {% set back_color =
                {
                  'winter':'rgb(255,255,255)',
                  'spring':'rgb(216,251,135)',
                  'summer':'rgb(255,242,204)',
                  'autumn':'rgb(252,229,205)'
                } %}
              --card-mod-icon: {{ icon[season] if season in icon else 'mdi:home' }};
              --label-badge-text-color: {{ icon_color[season] if season in icon_color else 'var(--paper-item-icon-color)' }};
              --label-badge-red: {{ border_color[season] if season in border_color else 'red' }};
              --label-badge-background-color: {{ back_color[season] if season in back_color else 'white' }};
            }

grafik

Example 2 does not work for me: the badge is still shown even the state of the entity is 0 (zero) :frowning:

I want to combine: show/hide + round corners

      - entity: sensor.problems_any
        name: Probleme
        style:
          ha-state-label-badge:
            $:
              ha-label-badge:
                $: |
                  .badge-container .label-badge {
                    border-radius: 20% !important;
                  }
          .: |
            :host {
              {% if states(config.entity) | int(0) > 0 -%}
              # problems (> 0)
              display: inline-block;
              color: red;
              --label-badge-text-color: red;
              --label-badge-red: red;
              --label-badge-background-color: yellow;
              {% else %}
              # no problems (0)
              display: none;
              {% endif %}
            }

Seems like the display: none; is simply ignored :frowning:

Can we combine this like this?

if true: show specific icon
else   : show value (number) of entity

Looks like once an icon has been set, itā€™s not possible to show a value again. So what I tested: either only icons or only values.

Would love to see me proving wrong but I tested everything, no chance.

Do not use this kind of commenting inside strings.
Get rid of it - see if it changes anything.