🔹 Card-mod - Add css styles to any lovelace card

He said: in this post, there is a link to the answer of your request.

1 Like

Well this post says it’s not possible:

in my opinion this has nothing to do with card_mod but is more of a general CSS topic.
See here:
Using CSS to affect div style inside iframe - Stack Overflow
also @Gian-LucaA

1 Like

Analogy: By definition of how an iframe works: It’s like trying to style a page open in another tab in your browser.

1 Like

Thank you, that makes sense. It’s confusing because if you use the element inspector in a browser, you can see all the HTML of the iframe nested inside the dashboard.

I guess the only solution would be a proxy server that could inject the new CSS into the page and serve the result up to the frame.

Yes, but it loads independently. The content may not be there when the card-mod changes are injected, but in the case of iframes it’s more about security and cross-origin requests.

I’m getting lost navigating the DOM.

Trying to modify this Thermostat card:

When I do this, it selects the hui-card-features element:

card_mod:
  style: |
    hui-card-features {
      background-color: red;
    }

And when I do this, It selects the first div.container, on 7th line of that screenshot, which is the top half of the card:

card_mod:
  style: |
    .container {
      background-color: red;
    }

How do I get it to select the div.container the is inside the hui-card-features element?

Based on Ildar’s example for changing the icons, I thought it was this:

card_mod:
  style: |
    hui-card-features $: |
      .container {
        background-color: red;
      }

but that doesn’t seem to do it.

–

What I’m trying to do is override the flex-direction: column, changing it to row, that the .container gets from some other style sheet elsewhere so the feature buttons are side-by-side instead of stacked on top of each other.

From this:

To this:

How do I add a font size line into this YAML that already has some style lines? I cant figure it out and chatgpt cant either lol

type: custom:mushroom-template-card
primary: Turn off fridge nags for 30 min
secondary: ''
icon: mdi:alert
entity: input_boolean.fridge_freeze_override
badge_color: ''
icon_color: red
layout: vertical
tap_action:
  action: toggle
hold_action:
  action: none
double_tap_action:
  action: none
layout_options:
  grid_columns: full
  grid_rows: 4
visibility:
  - condition: state
    entity: input_boolean.tablet_popup_fridge_nag
    state: 'on'
  - condition: state
    entity: input_boolean.fridge_freeze_override
    state: 'off'
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        --shape-animation: ping .5s infinite, blink .8s ease-in-out infinite;;
      }
      @keyframes ping {
        0% { box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7); }
        100% { box-shadow: 0 0 5px 15px transparent; }
      }
      @keyframes blink {
        100% {opacity: 0;}
      }


image

Don’t think, that you found this in the examples. :wink: But you are on the right track., Remove the fist | after style.

Thank you. That helped.
I can barely even spell CSS, so I get lost trying to understand when and where to use |, |-, >, >-, :, or $: in these.

That got the style injected into the right element, but it still wasn’t overriding it until I added a !important. The final block ended up being:

card_mod:
  style:
    hui-card-features:
      $: |
        .container {
          flex-direction: row !important;
          flex-wrap: wrap;
          justify-content: center !important;
        }

Now the card more closely matches the more info dialog.

1 Like

I’m trying to squeeze more text into an entities card. I have this code (within horizontal stack, which explains the indentation):

      - type: entities
        card_mod:
          style: |
            hui-generic-entity-row:
            $: |
             height: 5px;
             margin-top: 0px !important;
             margin-bottom: 0px  !important;
             }
        entities:
          - entity: sensor.jrmc_artist
          - entity: sensor.jrmc_lat
          - entity: sensor.jrmc_avspillingsstatus
          - entity: sensor.jrmc_posisjon
  - type: markdown

But it doesn’t seem to obey this at all. The result is nowhere near what I want:

image

I would like to have them as close as possible, so I can get a third line in the same space. Can somebody please help me out?

If this is about decreasing a height of rows:
Go to 1st post - link at the bottom - changing a row’s height

hmm, suddenly I notice my tile icon is no longer animating. it somehow is bugged by the larger features mod at the top of this mod, because, if I comment that, the animation on the ha-state-icon element after the .: | does work properly, indicating the mod itself is correctly aimed at the right element.

Could anyone please have a look?

Bugged mod for animation and color on fan tile
# tile_fan animate
style:
  hui-card-features $:
    hui-card-feature $:
      hui-fan-speed-card-feature $:
        ha-control-slider$: |
          .container {
            --control-slider-border-radius: var(--ha-card-border-radius);
          }
          .slider .slider-track-bar {
            border-radius: var(--ha-card-border-radius) !important;
          }
          .slider .slider-track-bar::after {
            border-radius: var(--ha-card-border-radius) !important;
          }
          .slider {
          --control-slider-color:
            {% if is_state(config.entity,'on') %}
            {% set perc = state_attr(config.entity,'percentage')|int(0) %}
            {% if perc <= 15 %} lightblue
            {%- elif perc <= 33 %} lightskyblue
            {%- elif perc <= 67 %} dodgerblue
            {%- else  %} darkblue
            {%- endif %}
            {%- else %} var(--state-inactive-color)
            {%- endif %} !important;
          --control-slider-background:
            {% if is_state(config.entity,'on') %}
            {% set perc = state_attr(config.entity,'percentage')|int(0) %}
            {% if perc <= 15 %} lightblue
            {%- elif perc <= 33 %} lightskyblue
            {%- elif perc <= 67 %} dodgerblue
            {%- else  %} darkblue
            {%- endif %}
            {%- else %} var(--state-inactive-color)
            {%- endif %} !important;
          }
    .: |
      ha-tile-icon {
        --tile-color:
          {% if is_state(config.entity,'on') %}
          {% set perc = state_attr(config.entity,'percentage')|int(0) %}
          {% if perc <= 15 %} lightblue
          {%- elif perc <= 33 %} lightskyblue
          {%- elif perc <= 67 %} dodgerblue
          {%- else  %} darkblue
          {% endif %}
          {% else %} var(--state-inactive-color)
          {% endif %};
      }
      ha-state-icon {
        animation:
          {% if is_state(config.entity,'on') %}
            {% set perc = state_attr(config.entity,'percentage')|int(0) %}
            {% set base =
              'rotation infinite linear' %}
            {% if perc <= 15 %} 4s {{base}}
            {%- elif perc <= 33 %} 3s {{base}}
            {%- elif perc <= 67 %} 1.5s {{ base}}
            {%- else  %} 0.75s {{base}}
            {% endif %}
          {% else %} none
          {% endif %};
      }
      @keyframes rotation {
        0% {transform: rotate(0deg);}
        100% {transform: rotate(360deg);}
      }

edit

wait, nvm… it was an indent issue… the .: | section was under the feautures section… this now works again, not sure how it got moved,

Working mod for animation and color in fan tile
# tile_fan animate
style:
  hui-card-features $:
    hui-card-feature $:
      hui-fan-speed-card-feature $:
        ha-control-slider$: |
          .container {
            --control-slider-border-radius: var(--ha-card-border-radius);
          }
          .slider .slider-track-bar {
            border-radius: var(--ha-card-border-radius) !important;
          }
          .slider .slider-track-bar::after {
            border-radius: var(--ha-card-border-radius) !important;
          }
          .slider {
          --control-slider-color:
            {% if is_state(config.entity,'on') %}
            {% set perc = state_attr(config.entity,'percentage')|int(0) %}
            {% if perc <= 15 %} lightblue
            {%- elif perc <= 33 %} lightskyblue
            {%- elif perc <= 67 %} dodgerblue
            {%- else  %} darkblue
            {%- endif %}
            {%- else %} var(--state-inactive-color)
            {%- endif %} !important;
          --control-slider-background:
            {% if is_state(config.entity,'on') %}
            {% set perc = state_attr(config.entity,'percentage')|int(0) %}
            {% if perc <= 15 %} lightblue
            {%- elif perc <= 33 %} lightskyblue
            {%- elif perc <= 67 %} dodgerblue
            {%- else  %} darkblue
            {%- endif %}
            {%- else %} var(--state-inactive-color)
            {%- endif %} !important;
          }
  .: |
    ha-tile-icon {
      --tile-color:
        {% if is_state(config.entity,'on') %}
        {% set perc = state_attr(config.entity,'percentage')|int(0) %}
        {% if perc <= 15 %} lightblue
        {%- elif perc <= 33 %} lightskyblue
        {%- elif perc <= 67 %} dodgerblue
        {%- else  %} darkblue
        {% endif %}
        {% else %} var(--state-inactive-color)
        {% endif %};
    }
    ha-state-icon {
      animation:
        {% if is_state(config.entity,'on') %}
          {% set perc = state_attr(config.entity,'percentage')|int(0) %}
          {% set base = 'rotation infinite linear' %}
          {% if perc <= 15 %} 4s {{base}}
          {%- elif perc <= 33 %} 3s {{base}}
          {%- elif perc <= 67 %} 1.5s {{ base}}
          {%- else  %} 0.75s {{base}}
          {% endif %}
        {% else %} none
        {% endif %};
    }
    @keyframes rotation {
      0% {transform: rotate(0deg);}
      100% {transform: rotate(360deg);}
    }

I’m really at a loss here trying to navigate down a few levels to animate an icon contained within a html container. If I define an animation that is already available in HA it is an easy feat. I just add it to the style section of the icon.

`<span style="font-size: 1rem"><ha-icon icon="ios:cloud-rain" style="width: 1.5rem; height: 1.5rem;"></ha-icon> ${states['sensor.home_precipitation'].state} mm/h</span>`

However, I want to customize the animation with some key frames but I don’t know how I can access the icon through card mod.

The structure looks like this (starting from the button itself:

The Layout of the button card is pretty simple (with all fields just returning html blocks):

  styles:
    grid:
    - grid-template-areas: |
        "cond temp" 
        "cond feel" 
        "cond ."
        "prec hum"
        "wind UV"
    - grid-template-columns: 1fr 1fr
    - grid-template-rows: max-content max-content 1fr max-content max-content

Can anyone help me figure out how I can address the icon in the highlighted section of the above picture with card mod.

Thanks!

You first need to navigate to a parent element starting from your ha-card element and then use normal css to style your element.

Read up on DOM navigation with card_mod here.

In your case it’s pretty simple as you don’t need to go through the shadow dom.

card_mod:
  style: |
    #container {
      grid-template-areas: 
        "cond temp" 
        "cond feel" 
        "cond ."
        "prec hum"
        "wind UV";
      grid-template-columns: 1fr 1fr;
      grid-template-rows: max-content max-content 1fr max-content max-content;
    }
    #hi ha-icon {
      your styles
    }
    

Just make sure ha-icon is really what you’re trying to style. You can test that easily by first applying the styles through your browser’s dev tools to see what you need to target with card_mod

1 Like

That worked beautifully! Very much appreciated.

Sometimes you can also use “extra_styles” to inject your animation (e.g. custom:button-card and custom:paper-buttons-row allow that).

I may be blind, but I don’t see it…

Go to 1st post* - link at the bottom - changing a row’s height

* In the first post, there is a link to FANTASTIC POST BY ILDAR GABDULLIN ON HOW TO MODIFY EVERYTHING WITH CARD-MOD

2 Likes

Card-mod change color of button PRESS.

I am trying to change the color of the PRESS on a button. I was able to change the icon and the name but not the actual PRESS.

image

Thank you! Finally found it, and it works as I hoped!

1 Like