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

maximtg · August 4, 2022, 2:53pm

It doesn’t work. Here my full configuration:

  - type: vertical-stack
    cards:
      - type: custom:auto-entities
        card:
          type: entities
          style: |
            ha-card {
              background: transparent;
              }
        filter:
          include:
            - domain: device_tracker
              options:
                type: custom:template-entity-row
                icon: mdi:network-outline
                secondary: >-
                  {{ as_timestamp(states[config.entity].last_changed)|
                  timestamp_custom('%X - %d/%m/%Y') }}
                state: >-
                  {{state_attr(config.entity, 'ip')}} |
                  {{state_attr(config.entity, 'mac')}}
                style: |
                  :host { 
                  {% if is_state('this.entity_id', 'home') %} 
                      color: yellow
                  {% endif %}                 
                  }
          exclude:
            - state: unknown
            - state: unavailable
        show_empty: false
        sort:
          method: friendly_name

Ildar_Gabdullin · August 4, 2022, 2:56pm

This is not important.
Your auto-list may include only “sun.sun”, the style should work.
Put “red” instead of “transparent”.

And for better compatibility - specify “card_mod” keyword.

maximtg · August 4, 2022, 5:10pm

@Ildar_Gabdullin Thank you so much! With card_mod it works.

          card_mod:
            style: |
              ha-card {
                background: transparent;
                }

I never use card_mod and I never had any problems but it is good to know that it is better specify this keyword for better compatibility.

Ildar_Gabdullin · August 4, 2022, 5:13pm

Let’s consider “you MUST use this keyword” version))

brpeterso · August 9, 2022, 7:54pm

Maybe someone could help me on this, as I’m not very good with CSS. I have the rotating fan on a multiple-entity-row working now, but I want it to only rotate when the switch is on. How would I change this code for that to work? I believe I need to use a jinja template, but I will likely butcher the format and never get it right. TIA

type: entities
entities:
  - entity: sensor.plaato_keg_tap1_beer_left
    type: custom:multiple-entity-row
    name: Keezer
    icon: mdi:beer
    show_state: false
    card_mod:
      style:
        hui-generic-entity-row $: ''
        .: |
          div.entity:nth-child(4) state-badge {
            animation: rotation_2 0.5s linear infinite;
          }
          @keyframes rotation_2 {
            0% {
              transform: rotate(0deg);
            }
            100% {
              transform: rotate(359deg);
            }
          }
    entities:
      - entity: sensor.plaato_keg_tap1_percent_beer_left
        name: Tap 1
      - entity: sensor.plaato_keg_tap2_percent_beer_left
        name: Tap 2
      - entity: sensor.plaato_keg_tap4_percent_beer_left
        name: Tap 4
      - entity: switch.keezer_socket_1
        name: Fan
        icon: mdi:fan
        state_color: true
        tap_action:
          action: toggle
          haptic: success

Ildar_Gabdullin · August 9, 2022, 8:05pm

Since you deleted unneeded part described here, you do not need “.: |” part:

      style:
        hui-generic-entity-row $: |

There are loads of examples here with templates.

          some_element {
            {% if ..... %}
            some_property: some_value;
            some_property: some_value;
            {% else %}
            some_property: some_value;
            some_property: some_value;
            {% endif %}
          }

          div.entity:nth-child(4) state-badge {
            {% if is_state(xxxxxxxxxxx,'on') %}
            animation: rotation_2 0.5s linear infinite;
            {% endif %}
          }

brpeterso · August 9, 2022, 9:08pm

Here’s what I have now based on your help. But, my rotation doesn’t startup after the switch is turned on. Where did I go wrong?


type: entities
entities:
  - entity: sensor.plaato_keg_tap1_beer_left
    type: custom:multiple-entity-row
    name: Keezer
    icon: mdi:beer
    show_state: false
    card_mod:
      style:
        hui-generic-entity-row $: |
          div.entity:nth-child(4) state-badge {
            {% if is_state('switch.keezer_socket_1','on') %}
            animation: rotation_2 0.5s linear infinite;
            {% endif %}
          }
    entities:
      - entity: sensor.plaato_keg_tap1_percent_beer_left
        name: Tap 1
      - entity: sensor.plaato_keg_tap2_percent_beer_left
        name: Tap 2
      - entity: sensor.plaato_keg_tap4_percent_beer_left
        name: Tap 4
      - entity: switch.keezer_socket_1
        name: Fan
        icon: mdi:fan
        state_color: true
        tap_action:
          action: toggle
          haptic: success

Ildar_Gabdullin · August 9, 2022, 10:49pm

is missing

brpeterso · August 9, 2022, 10:52pm

Likely not the right spot…since the fan doesn’t spin. If you can get me past this one thing, I’ll likely be set with all the other good examples you have out there. I’m just stuck at a dead end now. Where am I screwing up?

type: entities
entities:
  - entity: sensor.plaato_keg_tap1_beer_left
    type: custom:multiple-entity-row
    name: Keezer
    icon: mdi:beer
    show_state: false
    
    card_mod:
      style:
        hui-generic-entity-row $: |
          div.entity:nth-child(4) state-badge {
            {% if is_state('switch.keezer_socket_1','on') %}
            animation: rotation_2 0.5s linear infinite;
            @keyframes rotation_2 {
              0% {
                transform: rotate(0deg);
              }
              100% {
                transform: rotate(359deg);
              }
            }
            {% endif %}
          }
    entities:
      - entity: sensor.plaato_keg_tap1_percent_beer_left
        name: Tap 1
      - entity: sensor.plaato_keg_tap2_percent_beer_left
        name: Tap 2
      - entity: sensor.plaato_keg_tap4_percent_beer_left
        name: Tap 4
      - entity: switch.keezer_socket_1
        name: Fan
        icon: mdi:fan
        state_color: true
        tap_action:
          action: toggle
          haptic: success

brpeterso · August 10, 2022, 11:09am

Looking back at other examples, I tried this but it still isn’t working. Any ideas?


type: entities
entities:
  - type: custom:multiple-entity-row
    entity: sensor.plaato_keg_tap1_beer_left
    name: Keezer
    icon: mdi:beer
    show_state: false
    entities:
      - entity: sensor.plaato_keg_tap1_percent_beer_left
        name: Tap 1
      - entity: sensor.plaato_keg_tap2_percent_beer_left
        name: Tap 2
      - entity: sensor.plaato_keg_tap4_percent_beer_left
        name: Tap 4
      - entity: switch.keezer_socket_1
        name: Fan
        icon: mdi:fan
        state_color: true
        tap_action:
          action: toggle
          haptic: success
    card_mod:
      style:
        hui-generic-entity-row $: |
          div.entity:nth-child(4) state-badge {
            {% if is_state('switch.keezer_socket_1', 'on') %}
              animation: rotation 1s linear infinite;
            {% endif %}
          }
          @keyframes rotation {
            0% {
              transform: rotate(0deg);
            }
            100% {
              transform: rotate(360deg);
            }
          }

Ildar_Gabdullin · August 10, 2022, 12:04pm

Just leave this:

      style: |
        div.entity:nth-child(4) state-badge {

brpeterso · August 10, 2022, 12:18pm

That did it! Thanks. Putting final code here that works for spinning fan in multiple-entity-row card…


type: entities
entities:
  - type: custom:multiple-entity-row
    entity: sensor.plaato_keg_tap1_beer_left
    name: Keezer
    icon: mdi:beer
    show_state: false
    entities:
      - entity: sensor.plaato_keg_tap1_percent_beer_left
        name: Tap 1
      - entity: sensor.plaato_keg_tap2_percent_beer_left
        name: Tap 2
      - entity: sensor.plaato_keg_tap4_percent_beer_left
        name: Tap 4
      - entity: switch.keezer_socket_1
        name: Fan
        icon: mdi:fan
        state_color: true
        tap_action:
          action: toggle
          haptic: success
    card_mod:
      style: |
        div.entity:nth-child(4) state-badge {
          {% if is_state('switch.keezer_socket_1', 'on') %}
            animation: rotation 1s linear infinite;
          {% endif %}
        }
        @keyframes rotation {
          0% {
            transform: rotate(0deg);
          }
          100% {
            transform: rotate(360deg);
          }
        }

paddy0174 · August 10, 2022, 1:25pm

You do realize, that you have to support the correct answer by sending @Ildar_Gabdullin a home brewn beer, don’t you?

Thanks for sharing the final code.

Navatusein · August 10, 2022, 1:37pm

Please tell me how to duplicate css rules for identical elements.
I’ll explain with an example.

I have mushroom-template-chip. For the first, the rules were created. How can I make it so that they are also created for the second mushroom-template-chip ?

Ildar_Gabdullin · August 10, 2022, 1:57pm

1st post → link at the bottom → important notes about navigation

Navatusein · August 10, 2022, 2:19pm

Thanks a lot. I figured it out)

brpeterso · August 10, 2022, 4:42pm

So I have been able to completely change my dashboard with animations and icon color changes now. Thanks Ildar_Gabdullin! I’ve seen a lot of text alignment changes, but I don’t see anything specific to collapsable-cards. Is it possible to reposition the text to align to the right using card-mod?

Ildar_Gabdullin · August 10, 2022, 5:01pm

I have not provided examples since not using this card.
You may find out how to style this card and then post your tutorials here.

brpeterso · August 10, 2022, 5:05pm

I was just about to edit my post with my first try… here it is, but it’s not aligning the text to the right. I’m trying to move the “Upstairs Thermostat” text so it aligns to the right… just to the left of the carrot.

  - type: custom:collapsable-cards
    title: Upstairs Thermostat
    buttonStyle: 'font-size: 14px;'
    card_mod:
      style: |
        ha-card div { align-items:right; }

Dave888 · August 10, 2022, 5:38pm

This is a real noob question, and I know I must be missing something really simple, but I am failing to get a background image to a card when using a local file.

I’ve tried using a url to an image on the web (eg. http://www…), and that works fine. So it must be something about my local path I’m getting wrong. Am running HA on a Raspberry Pi.

Here is my code, and also a screenshot of the file location

Any help would be great… am pulling my hair out on something I know must be staring me in the face!

card_mod:
  style: |
    ha-card {
      background-repeat: no-repeat;
      background-image: url('/config/images/calendar.png');
      background-size: 100% 100%;
    }