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

[AleXSR700 (Alex)]

All cards are listed. And I installed none of the others as frontend module.

So, from my understanding, there is a difference between a lovelace resource (which is automatically registered by HACS and listed as resource) and a frontend module (which you have to add to your configuration.yaml/a package).

[sylvainvrolijk]

Hello,

I am pretty new to YAML and cannot get this to work. I am using a cover card for my blinds. I have been able to change the icon color with card-mod, but I can’t change the icon background color.

I have searched in the forum but could not get to a solution.

This is my current code:

card_mod:
  style: |
    ha-card {
      --card-mod-icon-color:
        {%- set sensor = states('cover.screen_kamer') %}
        {%- if sensor == 'closed' %} firebrick
        {%- else %} goldenrod
        {%- endif %}
      }

I would like to make the icon background transparent, or remove it. What piece do I need to add?

Thanks!

[gmsiegel (umbighouse)]

I’m trying to add a background image to the stock media player (media control) card for when it’s idle/off. I tried following some of @Ildar_Gabdullin code examples, but can’t seem to figure this out. Is it possible?

Here’s an example of what I’ve tried:

card_mod:
  style: |
    .background.no-image > * {
      background-image: url('local/images/concert.jpg');
    }

[fhdf (Frank)]

Hello,
I would like to add another entities state to the state contents of a tile card.
I got this working this way:

     card_mod:
       style: 
         ha-tile-info$: |
           .secondary:after {
           visibility: visible;
           content: " - {{ states('sensor.shelly_ht_wohnzimmer_humidity') }}%";

The problem is, that I already use card-mod to change the colors in the tile card:

     card_mod:
       style: |
         ha-card {
         --ha-card-background: 
           {% set state = ((states('sensor.luften_wohnzimmer')) | string) %}
           {% if (state == "Egal" ) %}
             {% set color = 'var(var(--paper-toggle-button-unchecked-button-color))' %}
           {% elif (state == "Ja" ) %}
             {% set color = '#145A32' %}
           {% else %}
             {% set color = '#78281F' %}
           {% endif %}
           {{ color }};
         }
         .info {
           {% if states('binary_sensor.fenster_wohnzimmer_alle') == 'on' %} 
             --primary-text-color: #039be5;
           {% endif %};
         }
         hui-card-features {
           {% if states('binary_sensor.fenster_wohnzimmer_alle') == 'on' %} 
             --primary-text-color: #039be5;
           {% endif %};
         }

Now I need to combine these things but had no success. It would be great if someone could help me getting this running.

Thanks

[Mariusthvdb (Marius)]

what I meant was, if you have it installed via frontend: and you see it listed, it is installed correctly.

you are making too much an issue out of nothing.

in Inspector, there might be a warning if you installed it via HACS as regular resource.
if that warning is not showing, you can be assured all is fine.

I just don’t get this:

@AleXSR700

but I don’t know how to check if that worked

Do you have a single issue causing you to think it doesnt?

[AleXSR700 (Alex)]

Ah, I was under the impression that there were maybe performance benefits. It has always been working. So HACS installation was sufficient.

[Mariusthvdb (Marius)]

well, there are, but they only show themselves if you had issues before

[Frank2604 (Frank Figiel)]

Im would like to change the icon color of a tile card depending on the state of an other input_boolean. All approaches I tried after searching do not work.

Here is my actual code. The Icon is showing in the standard blue

type: horizontal-stack
cards:
  - type: tile
    vertical: true
    entity: sensor.haus_abfuhrkalender_biotonne
    icon: mdi:trash-can
    name: Bio
    card_mod:
      style: |
        .icon {
          {% if is_state('input_boolean.haus_abfuhrkalender_biotonne_muss_raus', 'on') %}
            --tile-icon-color: brown;
          {% else %}
            --tile-icon-color: grey;
          {% endif %}
        }

Thanks.

[gjincy88]

I am trying to change the background of a todo list card within a custom:tabbed-card
i have tried

type: custom:tabbed-card
styles:
  '--mdc-theme-primary': '#fff'
  '--mdc-tab-text-label-color-default': '#fff'
  '--mdc-tab-color-default': '#fff'
tabs:
  - card:
      type: todo-list
      entity: todo.1
      show_icon: true
    attributes:
      label: 1
      icon: mdi:cart
      stacked: true
    card_mod:
      style: |
        ha-card{
        border: none;
        background: #00000055 !important;
        border-radius: 25px
        }
  - card:
      type: todo-list
      entity: todo.2
      show_icon: true
    attributes:
      label: 2
      icon: mdi:cart-variant
      stacked: true
    card_mod:
      style: |
        ha-card {
        background: #00000055 !important;
        }

but it is not being applied

[LiQuid_cOOled]

Try this…

card_mod:
   style: |
       .icon {
           --tile-icon-color: {{ "brown" if is_state('input_boolean.haus_abfuhrkalender_biotonne_muss_raus', 'on') else "grey" }} !important;
              }

[jmfargas]

Dear all, I need a little bit of help.
I’m using the customm button card extensively, but for the “select” entity I didn’t find any other solution than using the default “entities” card to be able to use the dropdown box to choose the desired “select” “option”. So as shown in the picture below, I’d like to hide everything except the down arrow and the option texts. My question is how do I do it to get the space of the icon, if possible, and hide all the boxes and frames and recover as well the padding spaces to make the button as compact as possible?

This is what I get with no styles:

I managed to hide almost everything except the underline, as shown below:

The following is the code I use to hide almost everything, in a custom card with custom fields:

    srtrelatslct:
      card:
        type: "entities"
        entities:
          - "[[[ return variables.var_startinrelative_slct_entity ]]]"
        card_mod:
          style: |
            ha-card {
              --ha-card-background: transparent;
              box-shadow: none;
              border: none;
              --mdc-icon-size: 0px;
              --mdc-select-label-ink-color: transparent;
              --mdc-select-disabled-ink-color: transparent;
            }
            :host(:not([disabled])) .mdc-select.mdc-select--focused:not(.mdc-select--invalid) .mdc-floating-label {
              color: transparent;
            }

I wonder if it’s possible to avoid using the icon, for example, instead of hiding it, so as to recover the icon’s space for the dropdown box text? In addition, I would like to recover the space between all the boxess to make the card compact.

Finally, is it possible to reduce the space between options in the dropdown list?, as shown below?

Thank you very much!

[itsmarty2023]

I need help changing the button background

[gjincy88]

  style: |
    ha-card {
      background: red;
    }

[itsmarty2023]

I did it, but the color of the icon was different from what they requested

[Mariusthvdb (Marius)]

sorry wrong thread…

[dimitri.landerloos]

Please start posting your code in code blocks and not as screenshots. it makes it much harder to help you.

you need to look into what $ and .: | does.

so your fixed code is like this:

card_mod:
  style:
    ha-state-icon$ ha-icon$: |
      ha-svg-icon {
        color: yellow !important;
        width: 55%;
      }
    .: |
      ha-card {
        background: red;
      }

[Ildar_Gabdullin]

1st post - link at the bottom - input select

[Ildar_Gabdullin]

Card-mod code should be under todo list.

[Ildar_Gabdullin]

@Frank2604

--tile-icon-color: brown;

Use “–tile-color”.
Also: 1st post → link at the bottom → tile

[jmfargas]

You are amazing ! I’m having a little bit of a hard time with the syntax, but I’m getting there little by little. WOW