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

All the necessary code is in my post.

It’s a column-spanning card inside a grid-layout card inside a mod-card.

moveup

Help!!! I’m pulling my hair out trying to adjust the spacing and move this text up in the markdown container.

My code is below, what am I doing wrong?!

      - type: vertical-stack
        cards:
          - type: markdown
            content: >
              <h2 style="text-align: center;"> Mark: {{states('person.mark')}}
              </h2> for: {{states('sensor.time') and
              relative_time(strptime(states.sensor.mark_left_home_last.state[:19],'%Y-%m-%d
              %H:%M:%S'))}} <br> Commute: {{states('sensor.waze_travel_time') }}
              mins
            style: |
              ha-card.type-markdown {
                padding-top: 0px;
                text-align: center;
                line-height: 16px;
                height: 110px;
              }

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