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

Opontios · December 14, 2023, 9:13am

I always suggest to open the devtools and see where it is set.
And then you “directly” see, that you have to overwrite this.
It’s faster than to wait that the prepared solution is flying in.

type: entities
entities:
  - entity: input_number.musikbox
    card_mod:
      style:
        ha-slider:
          $: |
            input[type="range"] {
              pointer-events: none;
            }

Have you tried it that way and it worked for you? Because I had tried it before posting and it didn’t work for me.
It does work if you uncheck the " pointer-events" in Devtools, but the code is not applying.

arganto · December 14, 2023, 9:24am

Yes. Tested and working. I cannot use the slider then anymore as set to none. Please try it one to one with my code or post yours where it is not working.

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