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

hello, how can i use card-mod to disable the more-info popup when i click on the marker/picture icon inside a map card?? i tried with tap-action function but it doesn’t work.

Someone could point me to the right direction??

thanks a lot.

Hi!

I’m using picture-elements card and I run into a problem: I cannot change the icon color of a switch when it is turned on. I tried to use --paper-item-active-color , but it doesn’t working.

My code is the following:

          - type: state-icon
            tap_action:
              action: toggle
            entity: light.terasz_szoba_lampa
            style:
              bottom: 33%
              right: 7%
              border-radius: 50%
              "--paper-item-icon-color": black
              "--paper-item-icon-active-color" : yellow
              text-align: center
              background-color: rgba(102, 102, 102, 0.2)

I’d like to have the “switched on” color yellor.

Any ideas? :slight_smile:

Seems like you’r using “basic entity” CSS " (which btw should be “styles:)”, and not card-mod … but, anyhow, if ' --paper-item-icon-active-color '’ doesn’t work in your Theme, try “template” on the “entity” ( or " card-mod: style: " ) on the entity

I will answer you in the topic where you posted it first.

It works - but not for light entity in Picture Elements.
Here card-mod seems to be the only solution.

1 Like

i actually just checked my “FloorPlan” :slight_smile:

    cards:
      - type: picture-elements
        theme: noctis-grey
        card_mod:
          style: |
            ha-card {
              color: #87BF50; border: solid 2px #A0A2A8; box-shadow: none;
            }
        elements:
          - type: state-icon
            entity: light.d1
            icon: mdi:wall-sconce-flat-outline
            name: light
            style:
              top: 36%
              left: 32%

…And my “icons” change color , and it seems to be , due to the

Icons

paper-item-icon-color: ‘#A0A2A8
paper-item-icon-active-color: ‘#87BF50

in my Theme

Here is the working solution:

  - type: state-icon
    entity: light.virtual_light_1
    tap_action:
      action: toggle
    style:
      bottom: 73%
      right: 7%
      border-radius: 50%
      background-color: rgba(102, 102, 102, 0.2)
    card_mod:
      style:
        state-badge $: |
          ha-state-icon {
            {% if is_state('light.virtual_light_1','on') %}
            color: red !important;
            {% else %}
            color: cyan;
            {% endif %}
          }

Well, as i said, above works for me … but i´ll “keep” your example" if i run into “problems” another time :slight_smile: (edit: as i’ve seen this “state-badge” before in some post, but didn’t thought it was of my concern, as i didn’t had “badges” , but now i realize it must be some new “naming” )… thou i don’t know whether it’s due to the “elements:” tag or what, but my icons changes color cording to Themes, my card-mod is for “border” and text(diff from Theme)
Edit2: Heres is start of my “FloorPlan” View

views:
  - title: FloorPlan
    type: custom:horizontal-layout
    theme: noctis-grey
    badges: []
    cards:
      - type: picture-elements
        theme: noctis-grey
        card_mod:
          style: |
            ha-card {
              color: #ffffff; border: solid 2px #A0A2A8; box-shadow: none;
            }
        elements:
          - type: state-icon
            entity: light.d1
            icon: mdi:wall-sconce-flat-outline
            name: light
            style:
              top: 36%
              left: 32%

Check it with the default theme.

Default Theme, when changed under my “profile” only, changes to “default” White background/ icon changes blue/yellow … if i choose “no theme” in the View, and “no theme” under “picture-element”, AND even if i clear browser/tried 2 different laptops/browsers … i got the colors “assigned” from Theme and icons changes color green/grey …hmmm, where did i “fu” or how did i manage it ( im old, and bad memory) … thou still somehow “it works for me” :slight_smile: …lol, i let you know if if figure out what i’ve done
@Ildar_Gabdullin
PS: i’ve tried all (most), removed icon tag(in view config), changed to default icon(on entities) etc. etc. basically im back to all defaults, don’t load card-mod, removed the card-mod under picture-element, “restarted” HA /supervisor etc. etc. — still changes from blue>yellow … can it be because i use homeassistant os, (a VMw-image) … i don’t know … i can’t “remove” the “color-change” on/of, even from default-theme/view … i do know i’ve tried (somewhere) to be able to “see” icon-color change on the tracker-entities( home/away ) … maybe i’ve fiddled somewhere … i give up … it works as i want it ( beside i still haven’t figure out how i can get the “tracker-entities-icon” to change upon state

It is OK. If any problem you find out - you are always welcome to ask here.

1 Like

hi!
thank you for the quick answer.
Something is wrong, when I try this code, not even the original (off state) color changes to cyan.

          - type: state-icon
            entity: light.terasz_szoba_lampa
            tap_action:
              action: toggle
            style:
              bottom: 73%
              right: 7%
              border-radius: 50%
              background-color: rgba(102, 102, 102, 0.2)
            card_mod:
              style:
                state-badge $: |
                  ha-state-icon {
                    {% if is_state('light.terasz_szoba_lampa','on') %}
                    color: red !important;
                    {% else %}
                    color: cyan;
                    {% endif %}
                  }

what do I do wrong? :slight_smile:

Here is a diff between your code & my code (with trimmed spaces):


I do not know why it does not work in your setup.
Do other card-mod examples work?

Uhh, the problem was withc card-mod… cool, it works now - almost :slight_smile:
for some reason the color display different (darker) as on other icons (state-icon / switch, coloring works perfect without card-mod):

image

Is there a way to style the icons on the tab headers? I would like to change those from outline to filled versions if the room it represents is active (or similar).

Search in card-mod themes thread.

1 Like

Most probably, there is a filter or a transparent or alpha set as well, which you should adjust according to your needs.

See above

How to enable / disable a “fold / unfold” control for fold-entity-row

image

image


More card-mod examples

Why the “mod-card” is here?
190 lines for MWE - and zero appearances of “card-mod” keyword.

1 Like

I cant get card-mod to work, anywhere.
Its installed correctly, but all I get when adding

style: |
  ha-card .entities {
    color: red;
  }

to a card yaml is

Visual editor is not supported for this configuration
Key ‘style’ is not expected or not supported by the visual editor.
You can still edit your config in YAML.

…and text color is not red. Ive tried many other kinds of stylings too, with the same result. What basic thing can I have gotten so laughably wrong?

Its the same if I add “card_mod:”, as in

card_mod:
  style: |
    ha-card {
      color: red;
    }

SOLVED IT!

  • I went through everything twice and found nothing wrong with card-mod, it loaded correctly and everything. Then for some reason I thought of HomeKit Infused which I had downloaded but not configured completely because it is all YAML-based. I deleted everything HKI related and restarted HA and voila! Text is red! :slight_smile:
1 Like

You are right, this should be in Layout-card - Take control of where your cards end up

Deleting post …