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

[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.

[KameDomotics]

Hi, is there a way to remove the light gray background of the selected part?
If I then click elsewhere in the dash it disappears.
Is it possible to remove the highlighted selection?

Now it’s like this

I would like it that way

Thanks

[Ildar_Gabdullin]

Use Code Inspector to find out which element’s background needs a change.

[KameDomotics]

Currently I don’t have the possibility to use Code Inspector, but it should be the background when the mouse passes over it (but now I can only try from a smartphone). I tried a few times but failed.

[RatatoskRagnarok]

@Ildar_Gabdullin

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

mushroom custom title cards
and i tried but i am quite new to this and i am not really sure what i am looking for or at, which would be why i asked for help
i can still find primary-text-color in the css, but that is about where i got lost

it is the computer i cleared cache on where it no longer works
i am using the same browser on both so my guess is that is the issue there

[Ildar_Gabdullin]

@RatatoskRagnarok

mushroom custom title cards

Not using mushrooms.
Here is what you should do:

1. If you need a ready answer:
   – post a SHORT code of your card;
   – explain what you want to achieve;
   – show what you tried.
2. Or - using Code Inspector, localize the element you wish to style; then see in Code Inspector which property is used (which you want to override) and what value it is equal to. Then try to write a card-mod code with a defined path to the element. Post here in case of questions / failures…

[LiQuid_cOOled]

@RatatoskRagnarok Mushroom uses specific nomenclature for title cards. I just answered this yesterday in the Mushroom forum found here:

Mushroom Cards Card Mod Styling/Config Guide

Different fields for Mushroom’s Title card type: custom:mushroom-title-card title: Hello, {{ user }} ! subtitle: hello card_mod: style: | ha-card { --title-color: red !important; --subtitle-color: blue !important; }

type: custom:mushroom-title-card
title: Title
subtitle: Subtitle
card_mod:
  style: |
    ha-card {
      --title-color: red !important;
      --subtitle-color: blue !important;
      }

For the remainder of Mushroom Cards you’ll use

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

In addition @Ildar_Gabdullin advice is exactly how I was able to learn how to edit rather quickly.