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

Sorry, right now have no time to investigate these “a → b → c” cases, but check this example:

  - type: entities
    style:
      hui-text-entity-row:
        $:
          hui-generic-entity-row:
            $: |
              .info.pointer.text-content {
                color: green;
              }
            .: |
              .text-content {
                color: red;
              }
    entities:
      - entity: sun.sun
      - entity: sun.sun

image
It defines styles for:

  • hui-generic-entity-row → shadowRoot → element
  • hui-generic-entity-row → element

Another example:

type: entities
style:
  hui-text-entity-row:
    $:
      hui-generic-entity-row:
        $: |
          .info.pointer.text-content {
            color: cyan;
          }
      .: |
        hui-generic-entity-row {
          color: red;
        }
entities:
  - entity: sun.sun
  - entity: sun.sun

Same image:
image
It defines styles for:

  • hui-generic-entity-row → shadowRoot → element
  • hui-generic-entity-row (everything, probably except shadowRoot).

And there is no cases like this (at least not in my practice):

  • hui-generic-entity-row → shadowRoot

Then you may built your “style tree” for more complicated cases.

2 Likes

Exactly what I wanted to know. Thx a lot.

hey guys, I’m losing my mind here. I’m trying to assign classes to work with themes and avoid writing styles to every card, but nothing I do seems to work.
It appears that classes are not added at all.
Here’s a button card:

type: button
class: red
entity: script.ricarica_temi
show_state: false
name: TEMA
tap_action:
  action: toggle

looking at the page cant find the class. btw i tried

class: red
card-mod:
  class: red

and inspectng the page I don’t see any difference .

the theme looks like this:

gian-mono:  
  card-mod-theme: gian-mono  
  card-mod-card: |
    ha-card {
      backdrop-filter: blur(5px);
    }
    ha-card(.red) {
      color: red;
      background-color: red;
      background: red;
    }
  ha-card-background: rgba(0, 207, 255, 0.16)
  lovelace-background: 'center / cover no-repeat url("/local/wp_glitch.png") fixed'

Am I missing something?

Hi, newbie here.

I’ve been trying to apply style to the badges using the raw editor as read above, but when I save the changes been getting a YAMLException.

error

This is the piece of code I’m trying to use.

  - title: test
    path: test
    badges:
      - binary_sensor.updater
        name: TEST
        style: |
          :host {
            {% if is_state('input_boolean.test_boolean','on') %}
            display: inline-block;
            {% else %}
            display: none;
            {% endif %}
          }
    cards:
      - type: entities
        entities:
          - entity: input_boolean.test_boolean
            name: Show badge

I’m running the latest version of Home Assistant 2021.7.1 and have installed the card-mod.

Does anybody else have stumble with this ? Thanks

Try this:

...
    badges:
      - entity: binary_sensor.updater
        name: TEST
...

Hello guys, maybe you can help me.

Is there a way to center an horizontal or vertical stack?
I want to avoid that emty space:

Thanks alot, this is what I was missing in my configuration.

OK…There’s a lot of info here and I scanned about half of it but couldn’t find what I’m looking for. Is there any way to use this (or anything else) to set the background color of the mini media player card? I just want a plain color when it’s idle. I can color other entity cards but not this one.

A simple search could help.
Or just reading the 1st post.

A possible solution:

type: custom:mini-media-player
name: Player
toggle_power: true
style: |
  .mmp__bg {
    background-image: url("/local/images/blue_low_2.jpg") !important;
    background-size: 100% 100% !important;
  }
artwork: material
entity: media_player.kodi_iiyama

idle:
image
playing:
image

Not clear what you got.
Share you code with your own attempts to style.

Hi, I was able to achieve this by using this.

type: calendar
title: Calendar
initial_view: listWeek
entities:
  - calendar.mail_email_com
card_mod:
  style:
    ha-full-calendar$: |
      #calendar {
        min-height: 200px !important
      }

Hope this helps.

2 Likes

Hi @cenp86 , thanks for your answer , I actually managed to get something similar working yesterday . Kind of you to answer!

hey @Ildar_Gabdullin Ildar

please help me out… struggling to get my icon spinning using (a copied path from another card, so this must be incorrect…):

        card_mod:
          style: |
            :host {
              --paper-item-icon-color:
                  {% set speed = states(config.entity)|int %}
                  {% set mapper = {0:'green',1:'darkgreen',3:'orange',
                  33:'orangered',66:'maroon'} %}
                  {{ mapper[speed] if speed in mapper else 'red'}}
            }
            .: div#container > div#fan > ha-icon {
              animation:
                {% set speed  = states(config.entity)|int %}
                {% if speed != 0 -%}
                  {% set mapper = {1:'4',3:'3',33:'2',66:'1'} %}
                  {% set rotation = mapper[speed] if speed in mapper else '0.3' %}
                  {{'rotation ' + rotation + 's ' + 'linear infinite'}}
                {% else %} null
                {% endif %}
                @keyframes rotation {
                  0% {
                    transform: rotate(0deg);
                  }
                  100% {
                    transform: rotate(360deg);
                  }
                }

the icon coloring works perfect, but the animation in isolation doesn’t.

document.querySelector("body > home-assistant").shadowRoot.querySelector("home-assistant-main").shadowRoot.querySelector("app-drawer-layout > partial-panel-resolver > ha-panel-lovelace").shadowRoot.querySelector("hui-root").shadowRoot.querySelector("#view > hui-view > hui-masonry-view").shadowRoot.querySelector("#columns > div:nth-child(1) > hui-entities-card:nth-child(5)").shadowRoot.querySelector("#states > div:nth-child(5) > multiple-entity-row").shadowRoot.querySelector("hui-generic-entity-row").shadowRoot.querySelector("state-badge").shadowRoot.querySelector("ha-icon").shadowRoot.querySelector("ha-svg-icon")

is the full copied js path.

please have a look? thanks!

Hi Marius, please give me the whole card, so far unclear what kind of card this is.

sorry bout that:

      - type: custom:multiple-entity-row
        entity: sensor.argon_one_addon_fan_speed
        name: Fan
        secondary_info: last-changed
        card_mod:
          style: |
            :host {
              --paper-item-icon-color:
                  {% set speed = states(config.entity)|int %}
                  {% set mapper = {0:'green',1:'darkgreen',3:'orange',
                  33:'orangered',66:'maroon'} %}
                  {{ mapper[speed] if speed in mapper else 'red'}}
            }
            .: div#container > div#fan > ha-icon {
              animation:
                {% set speed  = states(config.entity)|int %}
                {% if speed != 0 -%}
                  {% set mapper = {1:'4',3:'3',33:'2',66:'1'} %}
                  {% set rotation = mapper[speed] if speed in mapper else '0.3' %}
                  {{'rotation ' + rotation + 's ' + 'linear infinite'}}
                {% else %} null
                {% endif %}
                @keyframes rotation {
                  0% {
                    transform: rotate(0deg);
                  }
                  100% {
                    transform: rotate(360deg);
                  }
                }
        entities:
          - attribute: Temperature C
            name: Temp
            unit: '°C'
          - attribute: mode
            name: Mode
          - attribute: fan level
            name: Level

Try this:

type: entities
entities:
  - input_number.test_number
  - type: custom:multiple-entity-row
    entity: input_number.test_number
    entities:
      - entity: sun.sun
      - entity: sun.sun
    name: Fan
    icon: mdi:fan
    unit: '%'
    format: precision0
    show_state: true
    secondary_info: last-changed
    styles:
      width: 50px
    card_mod:
      style:
        hui-generic-entity-row:
          $:
            state-badge:
              $:
                ha-icon:
                  $: |
                    ha-svg-icon {
                      {% set speed = states(config.entity)|int %}
                      {% set mapper = {0:'green',1:'darkgreen',3:'orange',33:'orangered',66:'maroon'} %}
                      color: {{ mapper[speed] if speed in mapper else 'red'}};

                      {% set speed  = states(config.entity)|int %}
                      {% if speed != 0 -%}
                      {% set mapper = {1:'4',3:'3',33:'2',66:'1'} %}
                      {% set rotation = mapper[speed] if speed in mapper else '0.3' %}
                      animation: rotation {{rotation}}s linear infinite;
                      {% endif %}
                    }
                    @keyframes rotation {
                      0% {
                        transform: rotate(0deg);
                      }
                      100% {
                        transform: rotate(360deg);
                      }
                    }

image

Consider that icon_color & rotation_speed are only set for certain values, for example:

  • for “0” - no rotation;
  • for “1” - fast rotation;
  • for “2” - very very fast fast rotation;
  • for “3” - slow rotation;
  • for “4” - very very fast fast rotation;
    and so on

thanks!, unfortunately it doesnt work. even the color alone doesnt work…

Ive tested this standalone:

        card_mod:
          style: |
           hui-generic-entity-row:
              $:
                state-badge:
                  $:
                    ha-icon:
                      $: |
                        ha-svg-icon {
                          {% set speed = states(config.entity)|int %}
                          {% set mapper = {0:'green',1:'darkgreen',3:'orange',33:'orangered',66:'maroon'} %}
                          color: {{ mapper[speed] if speed in mapper else 'red'}};
                        }

without luck.

where this format does:

            :host {
              --paper-item-icon-color:
                  {% set speed = states(config.entity)|int %}
                  {% set mapper = {0:'green',1:'darkgreen',3:'orange',
                  33:'orangered',66:'maroon'} %}
                  {{ mapper[speed] if speed in mapper else 'red'}}
            }

Remove “|”

yes! was just editing that…!

Jul-14-2021 16-17-57

thanks Ildar, once again.

so there is no chance of the shorter syntax here? that seems so much easier to code (and better on the eye)

there’s a double line in your template for set speed, so I took that out, and, for the sake of the guard, also tested this, which is fine too:

        card_mod:
          style:
            hui-generic-entity-row:
              $:
                state-badge:
                  $:
                    ha-icon:
                      $: |
                        ha-svg-icon {
                          {% set speed = states(config.entity)|int %}
                          {% set mapper = {0:'green',1:'darkgreen',3:'orange',33:'orangered',66:'maroon'} %}
                          color: {{ mapper[speed] if speed in mapper else 'red'}};
                          animation:
                          {% if speed != 0 -%}
                          {% set mapper = {1:'4',3:'3',33:'2',66:'1'} %}
                          {% set rotation = mapper[speed] if speed in mapper else '0.3' %}
                          {{'rotation ' + rotation +'s linear infinite'}}
                          {% else %} null
                          {% endif %}
                        }
                        @keyframes rotation {
                          0% {
                            transform: rotate(0deg);
                          }
                          100% {
                            transform: rotate(360deg);
                          }
                        }

Jul-14-2021 16-26-57

1 Like

Sorry It wasn’t clear.
Right now I didn’t do attempts, cause I really don’t know where to start.

I have a grid layout done with Layout Card. The point is that: based on the screen dimension, the columns have different sizes.

When I’m looking my lovelace dashboard from a tablet or from a PC, the column is really large but my cards (no matter wich one) starts from the left side.

This is the card:

- type: vertical-stack
  cards:
    - type: horizontal-stack
      cards:
        - type: 'custom:button-card' 
          icon: 'mdi:home-roof' # Change this to the icon you want to display
          [...]
        - type: 'custom:button-card' 
          icon: 'mdi:floor-plan' # Change this to the icon you want to display
          [...]
        - type: 'custom:button-card' 
          icon: 'mdi:youtube-tv' # Change this to the icon you want to display
          [...]
        - type: 'custom:button-card'
          icon: 'mdi:server' # Change this to the icon you want to display
          [...]      

Is there a way to center a card, or a stack, in the column?