All the necessary code is in my post.
Itās a column-spanning card inside a grid-layout card inside a mod-card.
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? 
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