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

[efaden (Eric Faden)]

I had actually tried changing the margin in both the template and directly on the button and it didn’t do anything.

[efaden (Eric Faden)]

I’ll give that a shot. Thanks

[Jojo-A]

Alright, no problem. Thank you anyway!

[Mariusthvdb (Marius)]

just found the header link icon in history-graph cards, and tbh, it was unthemed, and didnt look nice at all.
So, I wanted to hide it, which works with display: none.
Add a boolean toggle, and control it from the UI.

next I needed it to be in style with my themes, so set primary-color on the icon. seems nice:

    .card-header ha-icon-button {
      --card-mod-icon-color: var(--primary-color);
      {{'display: none' if is_state('input_boolean.hide_history_graph_link','on')}};
    }

if would hope to find a theme variable for the icon, so we wont need to see it in a card_mod for each individual card.

Did anyone find that yet?

default icon:

no icon:

themed icon:

[aantonelloborges]

Hi Ildar, excelent work!

Ildar, I’m trying to remove/hide without success the component

for "custom:more-info-card"

I’ve also been trying for some time to reduce the height of the entire component by half.

Can you help me with this?

type: horizontal-stack
cards:
  - type: custom:more-info-card
    entity: light.spots_da_tv
    title: Spots TV
    card_mod:
      style: |
        ha-card {
          width: 150px;
          state-card-content {
            display:none;
          }
        }   

[LiQuid_cOOled]

Can you post your code so folks can copy and paste it easily? It helps expedite solutions.

How to help us help you - or How to ask a good question

Before we begin… This forum is not a helpdesk The people here don’t work for Home Assistant, that’s an open source project. We are volunteering our free time to help others. Not all topics may get an answer, never mind one that helps you solve your problem. [image] This also isn’t a general home automation forum, this is a forum for Home Assistant and things related to it. Any question about Home Assistant, and about using things with Home Assistant, is welcome here. We can’t help you with e…

#11

[Evirc]

After upadate Core,the color of this icon doesn’t work. this is a bug or am i wrong?

type: horizontal-stack
cards:
  - type: tile
    entity: sensor.aria_pm25
    name: PM 2.5
    show_entity_picture: false
    card_mod:
      style:
        .icon-container .icon$: |
          .shape { 
            border-radius: 15px !important;
            background:
              {% if states('sensor.aria_pm25')|float(0) >= 125|float(0) -%}
                rgba(255,0,0,0.6)
              {% elif states('sensor.aria_pm25')|float(0) >= 60|float(0) -%}
                rgba(255,165,0,0.8)
              {% elif states('sensor.aria_pm25')|float(0) >= 0|float(0) -%}
                rgba(60,179,113,0.6) 
              {% endif %} !important; 
          }
  - type: tile
    entity: sensor.aria_voc_index
    name: VOC Index
    icon: mdi:chart-bell-curve-cumulative

[gbboy]

Noticed similar things occurring with tile card icons and animations since the update. Change:

.icon-container .icon$

with:

ha-tile-icon$

Has fixed some issues for me

[reste_narquois (Chris Warne)]

I think the DOM path has changed slightly, so that the tile icon element no longer has the .icon class. Try this to see if it works for you (it does for me):

    card_mod:
      style:
        .icon-container ha-tile-icon $: |

Actually, not sure you really need the .icon-container bit. Try this alternatively:

    card_mod:
      style:
        ha-tile-icon $: |

EDIT: gbboy got there first!

[Evirc]

yes, it is work!!! thank you

[Evirc]

yes, this is the solution, it’s work! thanks

[LiQuid_cOOled]

@hazio What card? Check out

Card-mod - Add css styles to any lovelace card

Here all my posts which may be useful: NOTE: Do not forget to add a "card_mod:" keyword before "style:" (new in card-mod 3). And also read this important note to create optimized code. In most examples here a code is NOT optimized - just to describe a DOM navigation. Entity card post rotating icon (by @dolodobendan) disabled tap_action Entities card (including some special row elements - button, section, divider) post font-size for Entities card post Entities card with attributes …

[Ildar_Gabdullin]

@Evirc

upadate Core,the color of this icon doesn’t work. this is a bug or am i wrong?

Already answered what was changed.
Suggest you to use Code Inspector before posting issues in Github.
Now the repo is cluttered with plenty of “bugs” (still open) which are “users’ errors” in fact.

[hazio]

It’s for All cards, It needs to be applied system-wide, so I’d imagine it will be through themes.

Edit: Okay, I think I have figured it out

--state-icon-error-color: var(--error-state-color, var(--error-color)); --state-unavailable-color: var(--state-icon-unavailable-color

[Ildar_Gabdullin]

1. Try to understand how to fulfil your task for one card.
2. Then - how to do it globally.

If you disagree with pt.1 - then the question should be asked in a themes thread )))

[RatatoskRagnarok]

i’m sorry, but i can’t work this out
the new update seems to have broken

card_mod:
          style: |
                ha-card {
                  --primary-text-color: white;
                  }

but only on one of my computers… which is why i am puzzled
any help would be appreciated

[LiQuid_cOOled]

Does this fix it.?

card_mod:
    style: |
        ha-card {
          --card-primary-color: white !important;
                 }

[Ildar_Gabdullin]

@RatatoskRagnarok

but i can’t work this out

What card?
And why not checking with Code Inspector by yourself?

@RatatoskRagnarok

but only on one of my computers… which is why i am puzzled

Clean up cache everywhere.
If some style does not work on some device - it may happen because of:
– the device still have some old js-code in cache
– the device has a browser which does not support (or supports wrongly) some CSS attrs/features.

[Evirc]

sorry for my error and thanks for the support.

[Ildar_Gabdullin]

@Evirc

sorry for my error

No need to apologize; understanding these things is for YOUR success.