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

Mariusthvdb · September 19, 2024, 10:57am

eg:

style: |
  ha-tile-icon {
    --tile-color:
      {% if is_state(config.entity,'on') %} var(--alert-color)
      {% else %} var(--ok-color)
      {% endif %};
  }
  ha-state-icon {
     animation:
        {% if is_state(config.entity,'on') %}
          1.5s pulse infinite linear;
        {% else %} none
        {% endif %};
  }
  @keyframes pulse {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: scale(1.7);
    }
  }

(ofc also set the card_mod: above that)

Ildar_Gabdullin · September 19, 2024, 11:02am

Never ever )))
But a possibility of using a “config” object is mentioned in Docs - and “config.entity” is just a LITTLE example.
Moreover, you can add OWN vars.

jmfargas · September 19, 2024, 11:06am

@sebbaT Thank you so much. I succeeded to make it work! It took me a while because I have no experience with styles and I saw that “style:” and “style: |” are different. In addition I use custom button card with templates… This is my final code, just in case anybody would like to use it… The code disables a cover slider-entity-row if the current_position is outside the limits, because it hasn’t been calibrated:

  card_mod:
    style:
      .: |
        :host {
          {% set active_color, inactive_color = 'rgb(0,100,255)', 'Silver' %}
          {% if config.entity.split('.')[0] == 'cover' and 
              (state_attr(config.entity, "current_position") < 0 or state_attr(config.entity, "current_position") > 100) %}
            {% set active_color = 'var(--disabled-text-color)' %}
            {% set inactive_color = 'var(--disabled-text-color)' %}
          {% endif %}
          --md-slider-active-track-color: {{ active_color }};
          --md-slider-active-track-height: 2px;
          --md-slider-focus-handle-color: {{ active_color }};
          --md-slider-handle-color: {{ active_color }};
          --md-slider-hover-handle-color: {{ active_color }};
          --md-slider-hover-state-layer-color: {{ active_color }};
          --md-slider-label-container-color: {{ active_color }};
          --md-slider-pressed-handle-color: {{ active_color }};
          --md-slider-pressed-state-layer-color: {{ active_color }};
          --md-slider-inactive-track-color: {{ inactive_color }};
          --md-slider-inactive-track-height: 2px;
        }
      slider-entity-row $:
        ha-slider $: |
          div.container > input {
            {% if config.entity.split('.')[0] == 'cover' and 
                (state_attr(config.entity, "current_position") < 0 or state_attr(config.entity, "current_position") > 100) %}
              pointer-events: none;
            {% endif %}
          }

Ildar_Gabdullin · September 19, 2024, 12:06pm

RTL fix for fold-entity-row.
Issue reported here and here.

Before:

type: entities
entities:
  - type: custom:fold-entity-row
    head:
      type: section
      label: some text
    open: true
    entities:
      - entity: sun.sun
      - entity: sun.sun

After:

type: entities
entities:
  - type: custom:fold-entity-row
    head:
      type: section
      label: some text
      card_mod:
        style: |
          .divider {
            margin-left: -48px !important;
            margin-right: -16px !important;
          }
    open: true
    entities:
      - entity: sun.sun
      - entity: sun.sun

Using “.divider:dir(rtl)” will make this code working both in RTL & LTL.

wtstreetglow · September 19, 2024, 1:13pm

Could someone here help me figure out why the below (trying to use a background photo) doesn’t seem to be working?

Below is my lovelace code and below that is a screenshot. It just seems to be changing the background to black- I imagine because ha can’t find the image.

I have placed the image inside of ha by uploading on the media page under my media and images.

I don’t really understand how to find the true image path when I have uploaded an image in this manner. But I assumed it was this:

background: url('/local/images/goodnight-moon.jpg')

restarting/ reloading ha didn’t seem to do the trick either

type: vertical-stack
cards:
  - square: false
    type: grid
    cards:
      - show_name: true
        show_icon: true
        type: button
        card_mod:
          style: |
            ha-card {
              background: url('/local/images/goodnight-moon.jpg');
              background-size: 100% 100%;
            }
        tap_action:
          action: toggle
        entity: script.good_night
        icon: mdi:sleep
        show_state: false

Ildar_Gabdullin · September 19, 2024, 1:28pm

Can’t reproduce:

Do you have this “xxx.png” file in your “/config/www/images” folder?
Or may be this is related to duckdns, no idea…

wtstreetglow · September 19, 2024, 2:04pm

I have had issues with photo related things in the past (when a file path was involved). It could be duckdns related. The only time I have gotten photo related things with path to work was by using smb and connecting to pi file system from windows and placing files that way. – I was on home network when doing this also.

I will see if I have the same issue when on home network tonight.

Thank you for the ideas of things to look at.

I did not have a folder within www called “images” based on looking at the explorer inside of studio code server. But I created it.

I am now using the url below:

'/local/images/goodnight-moon.jpg'

Is this the same as config/www/images/goodnight-moon.jpg? or do I need to change my css to reference that location?

Thank you for your help with this.

Ildar_Gabdullin · September 19, 2024, 2:06pm

/config/www = /local

wtstreetglow · September 19, 2024, 2:08pm

I follow you now.

s_ockey · September 19, 2024, 9:51pm

Thanks Marius. That has worked around the entities themselves. I’ve tried a few options (.title .heading .ha-card etc) to reduce the spacing and margins around the heading but they haven’t worked. There is a lot of white space around the heading.

wtstreetglow · September 20, 2024, 2:08pm

Hello all. Could someone possibly show me how to change the color of the icon and entity name on a button card.

Below is what I have so far:

type: vertical-stack
cards:
  - square: false
    type: grid
    cards:
      - show_name: true
        show_icon: true
        type: button
        card_mod:
          style: |
            ha-card {
              background: url('/local/images/goodnight-moon.jpg');
              background-size: 100% 100%;
            }
        tap_action:
          action: toggle
        entity: script.good_night
        icon: mdi:sleep
        show_state: false

VMCosco · September 20, 2024, 3:07pm

Is there a way add a separator line below a grid card? This works for other cards:

    card_mod:
      style: |
        ha-card:after {
          content: '';
          border-bottom: solid 1px rgba(var(--rgb-disabled), 0.2);
          margin: 12px 0px -12px;
        }

but using hui-grid-card:after does not work.

Tadies · September 22, 2024, 9:18am

Im working a bit aka playing…
With the plants etc
Sofar i got this working
Only at the value when it reaches…it
But my goal was as follow:
When it reaches the value 20% and below
It wanted it to show in red color
Any guidance?
Thnx…

type: entities
entities:
  - entity: sensor.goudpalm_moisture
    card_mod:
      style: |
        :host {
          --paper-item-icon-color:
          {% if states(config.entity) == '20' %} red
          {% else %} primary-color
          {% endif %};
          }

Ill think im close…

Mariusthvdb · September 22, 2024, 10:55am

is not

what would you think it should be?

Mariusthvdb · September 22, 2024, 10:57am

below, or in?

below would be as simple as adding it (type: divider) in a stack card or entities.

inside the grid would be something more complex

Tadies · September 22, 2024, 1:06pm

Oh shit…i forgot…
The goal was any value lower then 20%…
I said only below…
Doh…glad im a human tho…heh

AdmiralRaccoon · September 23, 2024, 9:39am

Hello,
I just began playing around with card-mod and already struggeling with a simple task:

I just want and entity card with the current time in big numbers. However, after a certain size, the top gets cut off. How can I expand the value almost over the whole card (if possible) ?

Thank you,
Philipp

type: entity
entity: sensor.time
card_mod:
  style: |
    ha-card {
      text-align: center;
    }
    .value {
      font-size: 64px !important;
    }
    .icon {
      display: none;
    }
    .name {
      display: none;
    }

wtstreetglow · September 23, 2024, 1:47pm

Hello all,

Could someone give me a bit of assistance with the following:

Below is the yaml I have at the moment:

All works well but I would like to have the text of the room in yellow font.

Could someone help me with getting to that solution. I had help in getting the below style information from another forum post so to be honest, I didn’t come up with that either.

Thank you all for any assistance you can give.
1.)

type: custom:minimalistic-area-card
card_mod:
  style:
    .buttons ha-icon-button:not(.state-on):
      state-badge $: |
        ha-state-icon {
          color: black !important;
        }
title: Back Deck
area: back_deck
shadow: true
hide_unavailable: true
state_color: true
tap_action:
  action: navigate
  navigation_path: /dashboard-automatic/back-porch
entities:
  - entity: light.all_back_deck_lights
  - entity: switch.back_deck_fountain
  - entity: switch.back_deck_speaker_power

godfreym29 · September 23, 2024, 3:11pm

Thanks @svkoch that worked fine, just the way I was wanting it.

Tadies · September 23, 2024, 6:06pm

If i use this setting ’ 20 ’
It does indeed work if it reaches that value it will show in red
But as it gets below 20 to whatever the default color shows
So ill suspect there needs to be set another value…
Im learning tho…