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? 
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ā 
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 (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ā ā¦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?
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
for some reason the color display different (darker) as on other icons (state-icon / switch, coloring works perfect without card-mod):
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
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!
1 Like
You are right, this should be in Layout-card - Take control of where your cards end up
Deleting post ā¦