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

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%;
    }

Ildar_Gabdullin · August 10, 2022, 6:26pm

Wrong.
Place your “images” folder into “www” folder, then use “/local/images/…”

Dave888 · August 10, 2022, 7:50pm

Ofcourse! Thank you, I’ve been trying all sorts of things, and completely forgot about the www folder!

Thanks again, all working.

Dave888 · August 10, 2022, 8:39pm

Hoping someone can point me in the right direction on this one, everything I try so far fails.

I want to have some buttons that show data from two sensors. Currently the only way I can see to do it is have two buttons in a vertical stack, and then somehow remove the border between them, making it visually look like one button.

Anyone got any thoughts on how this could be achieved? Basically, remove the gap between two cards in a vertical stack.

My current code:

square: true
columns: 4
type: grid
cards:
  - type: vertical-stack
    cards:
      - type: custom:button-card
        icon: mdi:water
        entity: sensor.water_softener_salt_level
        show_name: false
        show_state: true
      - type: custom:button-card
        icon: mdi:water
        entity: sensor.water_softener_water_used_today
        show_name: false
        show_state: true
        show_icon: false
  - type: vertical-stack
    cards:
      - type: custom:button-card
        icon: mdi:car-sports
        entity: sensor.model_y_battery_sensor
        show_name: false
        show_state: true
      - type: custom:button-card
        entity: sensor.model_y_range_sensor
        show_name: false
        show_state: true
        show_icon: false
  - type: vertical-stack
    cards:
      - type: custom:button-card
        icon: mdi:car-estate
        entity: sensor.model_y_battery_sensor
        name: xx %
        show_name: true
        show_state: false
      - type: custom:button-card
        entity: sensor.model_y_range_sensor
        name: xxx mi
        show_name: true
        show_state: false
        show_icon: false
  - type: vertical-stack
    cards:
      - type: custom:button-card
        entity: sensor.speedtest_download
        show_name: false
        show_state: true
      - type: custom:button-card
        entity: sensor.speedtest_upload
        show_name: false
        show_state: true
        show_icon: false

Note: The third column is currently a holder for a future vehicle, hence the code as it is.

Mariusthvdb · August 10, 2022, 8:48pm

you could probably use a custom:button-card with a grid, to show those 2 values vertically on 1 button. Did you check the grid options in advanced styling?
it would make it a button-card question though so check that thread too