What you cannot do then?
Check your templates again.
If anything, youāve got to quote the full url string, not only whatās inside the url
background-image: {{ "url('/local/icons/girls/lamp_off.jpg')" if is_state('sensor.khaleesis_lamp_power', '0.0') else "url('/local/icons/girls/lamp_on.jpg')" }};
or shorter:
{% set state = iif(is_state('sensor.khaleesis_lamp_power', '0.0'),'on','off') %}
{{ "url('/local/icons/girls/lamp_" + state + ".jpg')" }}
Thanks! I am still learning, so rather than set the variable (which Iām entirely unfamiliar with), I just used:
--primary-background-color: rgba(xxx,xxx,xxx,x.xx);
But you did it. 
The other way would be to define the CSS of stroke
of
which need to dig into the shadow root. And with the tweak above, you are only changing the variable, which is then later used by the dial-class-stroke.
1 Like
Hi All,
At this moment would we still be able to change a sensor cardās line/graph color using card-mod as by default it cant be changed anymore?
Styling a Sensor card with a graph:
type: vertical-stack
cards:
- type: sensor
entity: sensor.xiaomi_cg_1_temperature
graph: line
hours_to_show: 12
detail: 1
- type: sensor
entity: sensor.xiaomi_cg_1_temperature
graph: line
hours_to_show: 12
detail: 1
card_mod:
style: |
ha-card {
--accent-color: red;
}
.header .name {
color: red;
font-size: 11px;
}
.header .icon {
color: cyan;
--mdc-icon-size: 40px;
}
.info .value {
color: orange;
font-size: 14px;
}
.info .measurement {
color: brown;
font-size: 28px;
}
More examples are described here.
Thank you very much
Working on a dashboard and iām trying to use the custom text-divider-row (seems to be the best divider / header row without a lot of wasted space). The developer said the variable for font size is: text-divider-font-size and that it could be changed using card modder (iām assuming he meant card-mod). I believe iāve tried everything in this thread but I cannot get this to respond to my attempt to change font size. Hereās my card yaml, please let me know if any one sees an issue. thanks
type: custom:text-divider-row
text: doors & windows
card_mod:
style: |
ha-card {
text-divider-font-size: 8px;
}
Styling text-divider-row:
type: vertical-stack
cards:
- type: entities
entities:
- entity: sun.sun
- type: custom:text-divider-row
text: default
- entity: sun.sun
- type: custom:text-divider-row
text: modded
card_mod:
style: |
:host {
--text-divider-line-size: 5px;
--text-divider-color: red;
--text-divider-font-size: 10px;
--text-divider-margin: 0px 4px 40px 64px;
}
- entity: sun.sun
- type: custom:text-divider-row
text: modded
card_mod:
style: |
.text-divider {
border-bottom: 3px dotted cyan !important;
}
.text-divider span {
color: orange !important;
background-color: green !important;
padding-left: 32px !important;
padding-right: 32px !important;
}
More examples are described here.
2 Likes
Thanks got it working using this:
card_mod:
style: |
ha-card {
background: {{ "center /cover no-repeat url('/local/icons/girls/n_lamp_off_bw.jpg')" if is_state('sensor.xxxxs_lamp_power', '0.0') else "center /cover no-repeat url('/local/icons/girls/n_lamp_on.jpg')" }};
}
1 Like
Hi all,
I am trying to get my head around the logic, which I am sure there is, but I just cannot figure it out. Can someone explain to me how to identify what style element I need to change when I want to change the text color of the Mini Media Player button?
When I toggle the highlighted āāmmp-text-colorā the color changes, so I assume thatās the element to change, but how do I get there?
This is what I tried so far:
- name: Follow Me
type: service
id: automation.toggle
data:
entity_id: automation.follow_me
card_mod:
style: |
:host {
--mmp-text-color:{{ iif(is_state("automation.follow_me","on"),"var(--state-icon-active-color)",iif(is_state("media_player.kitchen","unavailable"),"red")) }} ;
}
and
card_mod:
style: |
.mmp-button {
--mmp-text-color:{{ iif(is_state("automation.follow_me","on"),"var(--state-icon-active-color)",iif(is_state("media_player.kitchen","unavailable"),"red")) }} ;
}
and
card_mod:
style: |
ha-card {
--mmp-text-color:{{ iif(is_state("automation.follow_me","on"),"var(--state-icon-active-color)",iif(is_state("media_player.kitchen","unavailable"),"red")) }} ;
}
Where it says --mmp-text-color:, I also tried mmp-text-color: and color:. Finaly. I know the iif works fine since I am already using it in a regular button setup, but I am moving towards mmp.
1st post ā link at the bottom ā styles for mini-media-player
We need a bot for that. 
3 Likes
Either that, or help someone understand the logic.
The bot would probably be reliable in referring to post only if it was actually mentioned there.
Anyway, itās like complaining about someone asking for a sandwich all the time instead of learning them how to bake a loaf of breadā¦
What is possible here:
- Read Github manual.
- Learn provided examples.
- Ask any questions like āwhy is it so?ā
Your response is full of assumptions, but itās fine.
What enigmatic assumptions are you talking about?
I just wrote a common scenario: read manual, learn examples, ask questions.
You will notice, that the 2 first ālinksā goes to MMP-Lovalace and GitHub for same , and in your PIC above
where var = =āreferenceā ā¦ ( but donāt ask me what your ātemplateā does, i would try it in the template-editor )
PS: I just noticed IIdarās reference to mmp styles, looks like an easier āshortcutā 
Hi everybody. Has anyone who is using Atomic Calendar Revive applied some style changes using card-mod?
I want to display the day-date-month on a single line. By default they are vertically stacked as in this example. I really donāt have a clue as to how to do this!
Thx,
KA.
There are some themeās vars for MMP
Probably some styles described here may be replaced/expanded/duplicated by using these vars.
Card-mod is supposed to apply styles which are not limited to using these vars, card-mod is a universal tool.
May be I will review that post and add something about these vars some day.