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

Share your Projects! Dashboards & Frontend
7112

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)

7113

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.

7114

@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 %}
          }
1 Like
7115

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.

1 Like
7116

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

image
image1920×1040 141 KB

7117

Can’t reproduce:

изображение
изображение1044×435 22.7 KB

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

7118

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?

image
image1920×1040 134 KB

Thank you for your help with this.

7119

/config/www = /local

7120

I follow you now.

7121

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.