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

[Mariusthvdb (Marius)]

please open issue in repo
let’s no pollute this thread

[gjincy88]

Thank you I was over complicating it. yes needed to be above attributes. At card level not tab level thanks again.

[maddin84]

hey, can anybody help?

i tried this, but the first icon doesnt remove.
the selected icon doesnt overlay.

how can i put the image over the custom image?

[dbrunt (Daniel)]

Can you post your code?

[maddin84]

card_mod:
  style: |
    svg {
      display: none;
    }
    .icon-image {
      background-image: url("https://www.pngall.com/wp-content/uploads/11/Weather-No-Background.png");
      background-size: 100% 100%;
      height: 64px;
    }

SVG Display none doesn’t work.
I’m looking for a solution, like an image I can set instead background image. Because the background image shows behind the standard weather image every time. I want to put it in foreground

[dbrunt (Daniel)]

On trick I learned was adding !important sometimes works.
Try…

card_mod:
  style: |
    svg {
      display: none !important;
    }

[maddin84]

@dbrunt

card_mod:
  style: |
    svg {
      display: none !important;
    }

Doesn’t work

[LiQuid_cOOled]

I would start by storing the image locally. Can you also post the code for the entire card?

Card Mod can put an image in front of and behind an icon in a lot instances.

[maddin84]

show_current: true
show_forecast: true
type: weather-forecast
entity: weather.schluchtern_elm
forecast_type: daily
theme: Animated Weather Card
card_mod:
    style: |
      svg {
      display: none;
      }
      .icon-image {
      background-image: url("/local/icons/partly.svg");
      background-size: 100% 100%;
      height: 64px;
      }

[LiQuid_cOOled]

Odd… Got it to work with an PNG and a SVG

[LiQuid_cOOled]

Wait try deleting the theme: Animated Weather Card

[maddin84]

Yes, that works.

But then the icons at the forecast (lower section) hides, too.

I only want to hide/override the icon at the example

I think, that I need a solution without the „svg hide“

[LiQuid_cOOled]

My did the same. display: none !important is clearing all card icons. Let me see if the displays can be separated.

[Mariusthvdb (Marius)]

replaced all of my --paper-item-icon-color variables with the card_mod variable --card-mod-icon-color

this went well for all cards but 1:

  - entity: cover.raamverduistering_stookhok
    name: Rolgordijn Stookhok
    state_color: false
    card_mod:
      style: |
        :host {
          --card-mod-icon:
            {% set state = states(config.entity) %}
            {% set fake = states('input_select.raamverduistering_stookhok') %}
            {% set pos = state_attr(config.entity,'current_position')|int(default=0) %}
            {%- if fake == 'Opening' %} mdi:archive-arrow-up
            {%- elif fake == 'Closing' %} mdi:archive-arrow-down
            {%- elif pos == 100 %} mdi:window-shutter-open
            {%- elif state == 'closed' %} mdi:window-shutter
            {%- else %} mdi:window-shutter-alert
            {%- endif %};
          --paper-item-icon-color:
            {% set state = states(config.entity) %}
            {% set fake = states('input_select.raamverduistering_stookhok') %}
            {% set pos = state_attr(config.entity,'current_position')|int(default=0) %}
            {%- if fake == 'Opening' %} orange
            {%- elif fake == 'Closing' %} steelblue
            {%- elif pos == 100 %} gold
            {%- elif state == 'closed' %} midnightblue
            {%- else %} green
            {%- endif %};
        }

actually only mods the icon on the cover:

while changing to --card-mod-icon-color in that mod does:

not sure if this is a bug or not, and it’s only here, but it is remarkable, and I thought Id share…

[mike]

Up until my most recent update when the old style: usage was removed I was able to color-code the background of my entity cards depending on a sensor value. It stopped working so I implemented the card-mod: style: syntax and it doesn’t seem to work for me. Can anyone spot any obvious errors below - the output seems correct in Developer Tools so maybe it’s my CSS?

type: horizontal-stack
cards:
  - type: entity
    entity: sensor.octopus_unit_rate_today_localfile
    icon: mdi:lightning-bolt
    name: Electricity Unit Rate
    card-mod:
      style: |
        {% if states('sensor.octopus_unit_rate_today_localfile')|int <= 16 %}
          ha-card {background: #00ff99; color: #fff;}
          ha-card .name, ha-card .measurement {color: #888;}
        {% elif 16 < states('sensor.octopus_unit_rate_today_localfile')|int < 20
        %}  
          ha-card {background: #ffc266;}
          ha-card .name, ha-card .measurement {color: #888;}
        {% elif states('sensor.octopus_unit_rate_today_localfile')|int >= 20

        %}  
          ha-card {background: #ff3333;}
        {% endif %}

(There is another entity card in the horizontal-stack with the same problem but I omit it for brevity.) Thanks in advance!

[VietNgoc (Ngoc John)]

card_mod: underscore

[alanmilinovic (Alan)]

How to hide line (or shadowing, not sure what it is) for type-section in entities card. I think hui-section-row is responsible for that but not 100% sure.

Also would be nice if space is not so big between elements (top and bottom padding).
Can someone please help with yaml? Thanks.

[Ildar_Gabdullin]

1st post - link at the bottom - entities

[mike]

I’m an idiot…thanks loads.

[alanmilinovic (Alan)]

It is very hard to find an example. Can you point to the direct link please?