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

AleXSR700 · December 15, 2023, 1:13pm

Hi everyone,

trying to use some of Ildar’s great glance code to modify my card but I cannot get it to work with my card.

type: custom:auto-entities
card:
  type: grid
  columns: 4
  square: false
  title: Xiaomi Battery
card_param: cards
sort:
  method: friendly_name
filter:
  template: |-
    {% set ns = namespace(list=[]) %}  

        {% for item in states.sensor | selectattr('entity_id', 'search', 'xiaomi.*battery', ignorecase=True) %}
          {% set ns.list = ns.list + [ item ] %}
        {% endfor %}
      
      {% for item in ns.list -%}
      {{
        {
          "type": "glance",
          "card_mod": [
            {
            "style":
                $: |
                  .card-header {
                    color: red  !important;
                    }
            }
            ],
          "entities": [ 
            {
            "entity": item.entity_id,
            "name": (area_name(item.entity_id).split()[0][:2] + (area_name(item.entity_id).split()[1][:2]) if area_name(item.entity_id).split()|length > 1 else area_name(item.entity_id)[:4]),
            }
            ],
          "show_icon": false,
        }
      }},
      {%- endfor %}

Would it need to go into the for loop?

Ildar_Gabdullin · December 15, 2023, 1:16pm

How is that related to card-mod? )

AleXSR700 · December 15, 2023, 1:18pm

I modified my post to show the card mode attempt, sorry for that.
I think it belongs in the for loop but I am not sure if the placement is wrong or syntax.

Ildar_Gabdullin · December 15, 2023, 1:23pm

AleXSR700:

"card_mod": [
            {
            "style":
                $: |
                  .card-header {
                    color: red  !important;
                    }
            }
            ],

Cannot test it now, but this is obviously wrong.
“card_mod” is not a list.
Also, you cannot use “|” here.
This should be presented as json.
Go here: link - > a link about “how to quickly create templates”

AleXSR700 · December 15, 2023, 1:31pm

I will search for more info in your link, thank you! Looks interesting once again

EDIT:
Okay, found your info

                  'style': ':host { {%- if states(config.entity) == "unknown" -%}
                                    --paper-item-icon-color: brown;
                                    {%- elif states(config.entity) | float <= states("input_number.battery_level_critical") | float -%}
                                    --paper-item-icon-color: red;
                                    {%- elif states(config.entity) | float <= states("input_number.battery_level_warning") | float -%}
                                    --paper-item-icon-color: rgb(250,218,67);
                                    {%- else -%}
                                    --paper-item-icon-color: green;
                                    {%- endif %} }'
                } }},

Will try to apply it

Ildar_Gabdullin · December 15, 2023, 1:34pm

Wrong)
Try this:

"card_mod": {
  "style": "ha-card {color: red}"
},

AleXSR700 · December 15, 2023, 1:39pm

Ah, that works.
But I was trying to do it for the title and I think that should be .card-header and there it was not working for me

"card_mod": {
  "style": ".card-header {color: red}"
},

Ildar_Gabdullin · December 15, 2023, 1:42pm

1st create a working card-mod style w/o auto-entities.
Then make it json for auto-entites.

AleXSR700 · December 15, 2023, 1:47pm

That I already tried:

type: glance
title: Colored title
card_mod:
  style:
    $: |
      .card-header {
        color: red  !important;
      }
entities:
  - entity: sensor.xiaomi_dining_room_battery

Ildar_Gabdullin · December 15, 2023, 1:49pm

Same as

card_mod:
  style:
    '$': 'card-header { color: red  !important; }'

and as experienced user you now create a json)

AleXSR700 · December 15, 2023, 1:54pm

If the $ is important, then it should be

          "card_mod": {
            "style": {
              "$": "card-header { color: red !important; }"
            }
          },

which does nothing.
But ha-card worked without the $, yet card-header will not. So still stuck

Also tried

          "card_mod": {
            "style": {
              "'$'": ".card-header { color: red !important; }"
            }
          },

just in case…

EDIT2:
Since I also wanted to add your line breaking, I tried a different property of the card but that also failed.

          "card_mod": {
            "style": {
              ".entities": {
                ".entity": ".name { text-overflow: unset !important; white-space: unset !important; }"
                }
            }              
          },

I think the json ison itself is formatted correctly. So I am assuming my mistake is elsewhere, more general

Ildar_Gabdullin · December 15, 2023, 3:04pm

Check this:

filter:
  template: |-
    {% for item in states.sun -%}
    {{
      {
        "type": "glance",
        "title": "xxx",
        "card_mod": {
          "style": {
            "$": ".card-header { color: red  !important;}",
            ".": "ha-card {color: cyan}"
          }          
        },
        "entities": [ 
          {"entity": item.entity_id}
        ],
        "show_icon": false,
      }
    }},
    {%- endfor %}

AleXSR700 · December 15, 2023, 9:14pm

Fascinating. I adopted one of your other glance examples (the multirow names) and took me 10 min to get it right.

Now I will try to figure out how to mod a grid card (well, auto-entites with template and grid). Just want to modifiy the grid card’s title

type: custom:auto-entities
card:
  type: grid
  columns: 4
  title: Xiaomi Battery
card_param: cards
filter:
  template: |-
...

I have started down the rabbit hole, but before I get stuck:
is the card type custom:card-mod needed for grid cards or was that just an example of yours?
I thought that card-mod was kind of available without making it a card-mod card.
From one of your excellent example posts

type: custom:mod-card
card:
  type: grid
  title: some title
  cards:

EDIT:
Baby steps. Glance card is being modded but the title of the grid itself is not being changed yet.
But at least no error message.
Or does the type: custom:mod-card have to be directly above the grid card rather than turning it all into a card-mod?

type: custom:mod-card
card:
  type: custom:auto-entities
  card:
    type: grid
    columns: 4
    square: false
    title: Xiaomi Battery
    card_mod:
      style:
        ':first-child $': |
          .card-header {
            color: red !important;
          } 
  card_param: cards
  filter:
    template: |-
...#and then the rest of the template I posted previously

ignacio82 · December 16, 2023, 3:48pm

Is there a way of removing the rectangles from the mushroom-person-card so I only get the circles?

This is what I have:

type: horizontal-stack
cards:
  - type: custom:stack-in-card
    cards:
      - type: custom:mushroom-person-card
        entity: person.ignacio_martinez
        icon_type: entity-picture
        name: Ignacio
        primary_info: none
        secondary_info: none
        fill_container: true
        tap_action:
          action: navigate
          navigation_path: '#ignacio'
        hold_action:
          action: call-service
          service: script.unmute_ignacios_pixel_5
          data: {}
          target: {}
        card_mod:
          style:
            mushroom-shape-avatar$: |
              .picture {
                display: flex;
                border-radius: 50%;
                {% if states('switch.ignacio') == 'on' %}
                  animation: pinggreen 2s infinite;
                {% else %}
                  animation: pingred 2s infinite;
                {% endif %}
              }
              @keyframes pinggreen {
                0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-green), 0.9);}
                100% {box-shadow: 0 0 5px 5px transparent;}
              } 
              @keyframes pingred {
                0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-red), 0.9);}
              .container {
                --icon-size: 80px !important;
              }
              ha-card {
                background-color: transparent;
                box-shadow: none;
              }
  - type: custom:stack-in-card
    cards:
      - type: custom:mushroom-person-card
        entity: person.ignacio_martinez
        icon_type: entity-picture
        name: Ignacio
        primary_info: none
        secondary_info: none
        fill_container: true
        tap_action:
          action: navigate
          navigation_path: '#ignacio'
        hold_action:
          action: call-service
          service: script.unmute_ignacios_pixel_5
          data: {}
          target: {}
        card_mod:
          style:
            mushroom-shape-avatar$: |
              .picture {
                display: flex;
                border-radius: 50%;
                {% if states('switch.ignacio') == 'on' %}
                  animation: pinggreen 2s infinite;
                {% else %}
                  animation: pingred 2s infinite;
                {% endif %}
              }
              @keyframes pinggreen {
                0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-green), 0.9);}
                100% {box-shadow: 0 0 5px 5px transparent;}
              } 
              @keyframes pingred {
                0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-red), 0.9);}
              .container {
                --icon-size: 80px !important;
              }
              ha-card {
                background-color: transparent;
                box-shadow: none;
              }

Thanks for the help!

Soylor · December 16, 2023, 4:14pm

I’ll like to chnage vertical slider style in more-info light dialog.
Can i do that with card-mod ?

Tried this, but not working:


hold_action:
	action: more-info
name: AJUSTAR
card_mod:
	style:
	   body>home-assistant$ha-more-info-dialog$ha-dialog>div>ha-more-info-info$div>div>more-info-content$more-info-light$div.controls>ha-state-control-light-brightness$ha-control-slider: |
           {
                max-height: 200px; /*	
	       }

dimitri.landerloos · December 16, 2023, 5:54pm

Dont fully understand why you are using any stack-in-card in the first place. There is only 1 card in each stack-in-card.

But this should do it:

type: horizontal-stack
cards:
  - type: custom:mushroom-person-card
    entity: person.ignacio_martinez
    icon_type: entity-picture
    name: Ignacio
    primary_info: none
    secondary_info: none
    fill_container: true
    tap_action:
      action: navigate
      navigation_path: '#ignacio'
    hold_action:
      action: call-service
      service: script.unmute_ignacios_pixel_5
      data: {}
      target: {}
    card_mod:
      style:
        mushroom-shape-avatar$: |
          .picture {
            display: flex;
            border-radius: 50%;
            {% if states('switch.ignacio') == 'on' %}
              animation: pinggreen 2s infinite;
            {% else %}
              animation: pingred 2s infinite;
            {% endif %}
          }
          @keyframes pinggreen {
            0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-green), 0.9);}
            100% {box-shadow: 0 0 5px 5px transparent;}
          } 
          @keyframes pingred {
            0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-red), 0.9);}
          .container {
            --icon-size: 80px !important;
          }
        .: |
          ha-card {
            background-color: transparent;
            box-shadow: none;
            width: fit-content !important;
          }
  - type: custom:mushroom-person-card
    entity: person.ignacio_martinez
    icon_type: entity-picture
    name: Ignacio
    primary_info: none
    secondary_info: none
    fill_container: true
    tap_action:
      action: navigate
      navigation_path: '#ignacio'
    hold_action:
      action: call-service
      service: script.unmute_ignacios_pixel_5
      data: {}
      target: {}
    card_mod:
      style:
        mushroom-shape-avatar$: |
          .picture {
            display: flex;
            border-radius: 50%;
            {% if states('switch.ignacio') == 'on' %}
              animation: pinggreen 2s infinite;
            {% else %}
              animation: pingred 2s infinite;
            {% endif %}
          }
          @keyframes pinggreen {
            0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-green), 0.9);}
            100% {box-shadow: 0 0 5px 5px transparent;}
          } 
          @keyframes pingred {
            0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-red), 0.9);}
          .container {
            --icon-size: 80px !important;
          }
        .: |
          ha-card {
            background-color: transparent;
            box-shadow: none;
            width: fit-content !important;
          }

ignacio82 · December 16, 2023, 6:38pm

Thanks! That was pure ignorance + copy and paste. I’m a slow learner

One more @dimitri.landerloos . The background is transparent but I can see the border of the box as light gray. How do I make that transparent too?

dimitri.landerloos · December 16, 2023, 6:47pm

          ha-card {
            background-color: transparent;
            box-shadow: none;
            width: fit-content !important;
            border: none !important;
          }

ignacio82 · December 16, 2023, 7:13pm

@dimitri.landerloos I’m trying to apply this logic to custom:popup-card but is not working.

title: Ignacio
size: normal
type: custom:popup-card
entity: person.ignacio_martinez
style: |
  ha-card {
    background-color: transparent;
    box-shadow: none;
    width: fit-content !important;
    border: none !important;
  }
cards:
  - type: custom:bubble-card
    card_type: separator
    name: Map
    icon: mdi:map-marker-account
dismissable: true

What am I missing?

AleXSR700 · December 18, 2023, 8:44pm

Still trying to make a card work and now need to change some elements.
So, I got .name working but nothing else .
So line wrappibg is working.

But how do I change .entites.no-header and .entities itself?
I tried

"card_mod": {
  "style": {
    ".entities": {
      "$": ".no-header { padding: 0px 0px 0px }",
      ".entity": {
        "$": ".name { text-overflow: unset !important; white-space: unset !important; margin-bottom: 0px; padding: 0px; display: flex }",
      }
    }
  }
},

and also

"card_mod": {
  "style": {
    ".entities.no-header": {
      "$": "{padding-top: 0px}",
    },
    ".entities": {
      "$": "{padding: 0px 0px 0px}",
      ".entity": {
        "$": ".name { text-overflow: unset !important; white-space: unset !important; margin-bottom: 0px; padding: 0px; display: flex }",
      }
    }
  }
},

Or could all this hierarchy be avoided by always doing

"card_mod": {
  "style": {
    ".": "entities {}",
    ".": "entities.no-header{}",
    ".": "entities.entity.name{}",
    }
}

?
So basically just starting each div with ".": ?