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.
Yes i assumed the -overlay-base-color came from his Theme, i also use card-mod when i want to change my Theme-settings, if i not decide to make it a global change
Also, some variable may affect ALL labels (or icons etc) on the card - what if I need to style a particular element? So, changing vars within a theme has a limited use.
P.S. sorry for my broken English, it too late, in Russian I may speak much better although it became toxic these months.
Yes you are right, it could affect alot, thou when i looked at the pic, it seems like alot of the color was variables to mmp-text-color, which in turn was to mmp-overlay-base-color , seems to me very āconflictā prone 
, but i think itās difficult to āreadā from browser-tools what actually comes from Themes or Card-Script, im still not ācomfortableā with inspector
So in his case, as you say itās better to go for the element in specific
PS: I would love if one could define i.e. icon_colors based on icon_id(name) in Theme ā¦ i.e mdi:power-socket-de: āgreenā
Hi All, just want to have a quick confirmation that it is normal that when we load the site showing the UI, there will be abt a second where the card-mod edits have not taken place right? We can see the transition of the card-mod implementation taking place, is there any way to improve this, like having the card-mod scripts implemented before showing the page?
Just a small issue.
1 Like
Thanks. The template works fine and to be sure I just said it should just be āredā for now.
Since google results are somewhat personalized, I think you are pointing me to these results:
-
Lovelace: Mini Media Player - #2246 by CDRX2
Iāve seen this one to and played a bit with it. The solution in post 2250 for example works, but itās for all buttons where I want to change individual buttons. I thought of responding to this topic, but thought the current thread would be more on topic. -
Lovelace: Mini Media Player - #1762 by DavidFW1960
If I am not mistaking itās the same for this one. The variable approach is however one I ādocumentedā in case of later use. -
mini-media-player/README.md at master Ā· kalkih/mini-media-player Ā· GitHub
Iāve read about al the documentation on mini media player and card mod at Git, the community and via public search that I could find.
I currently use a Stack Card setup with the regular HA buttons, but love to switch to the mmp if I get the conditional format to work on individual buttons in the mmp.
Anyway, thanks and Iāll keep searching and report back once I solved it.
Thanks to the/your posts, that I wasnāt able to find, I was managed to solve it.
Still having a hard time mastering it in the way of finding the solution from sketch myself, but I guess I have to live with that. At least for now.
The solution:
card_mod:
style:
mmp-shortcuts $: |
mmp-button:nth-of-type(1) {
color:{{ iif(is_state("automation.follow_me","on"),"var(--state-icon-active-color)",iif(is_state("media_player.kitchen","unavailable"),"red")) }} ;
}
In my case itās shortcut button 1, so mmp-button:nth-of-type(1), where the button color can be changed using background-color: instead of color:.
To change the icon one should use mmp-button:nth-of-type(2) ha-icon
Thank you very much
Hi All,
Iām trying to apply style to surveillance-card.
The HTML looks like this:
<surveillance-card>
<div class="container">
<div class="thumbs">
......
</div>
<div class="mainImage">
.....
</div>
</div>
And this is the yaml config
card_mod:
style: |
surveillance-card .container .mainImage {
position: fixed;
top: 10px;
}
Iām trying to change the mainImage div
What am I doing wrong?
Thanks
Good that you achieved what you needed.
Just a personal opinion - I would prefer a simpler syntax:
mmp-button:nth-of-type(1) {
{% if is_state("automation.follow_me","on") %}
color: var(--state-icon-active-color);
{% elif is_state("media_player.kitchen","unavailable") %}
color: red;
{% else %}
color: ????????????????;
{% endif %}
}
And now you can see that in you expression there is no a default color.
āiifā expression is compact but sometimes may be difficult to traceā¦
I know there is no default color. I did that intentionally cause I have HA set to auto theme dark/light and it would take me extra conditions to cover the dark and light situations. Now it just follows HA.
Nevertheless thanks for pointing that out.
Could you explain?
From a CSS point of view, if some property is undefined it will cause an error.
Sure, I am happy to explain my thoughts on this.
I am more of a scripter than a CCS kind of person, but totally get your point from a CCS perspective. I however donāt think it will end up in an error and here is why.
Basically I just said to card-mod: If this, then overwrite what HA does with my preference. As a result, of not telling what to do else, nothing happens when this is not true, so HA does what it always does.
From a scripting perspective I am not familiar with an obligation to use else unless you want to do something in that else-situation. In the specific situation I do have an else situation that I want to cover, being the situation where the speaker isnāt available. But if it is available, I just want HA to use its default color.
Does this make sense?
For the sake of completeness. At first I did cover the else-situation, simply because I like to be in control of what happens. This however resulted in an unwanted text color when HA toggled in the opposite theme. Maybe I just used the wrong variable, I donāt know anymore.
Anyway, I decided to just give the else situation back in control of HA by not determining the text-color if the iif condition was not true. I however started with the traditional if then else structure, since iif wasnāt available back then, and I still use it when the template is more complex.
If you need to let HA to decide - use this:
mmp-button:nth-of-type(1) {
{% if is_state("automation.follow_me","on") %}
color: var(--state-icon-active-color);
{% elif is_state("media_player.kitchen","unavailable") %}
color: red;
{% endif %}
}
instead if:
mmp-button:nth-of-type(1) {
color: {% if is_state("automation.follow_me","on") -%}
var(--state-icon-active-color)
{%- elif is_state("media_player.kitchen","unavailable") -%}
red
{%- endif %};
}
1st variant - no style, HA decides what to do.
2nd variant - ācolor: nothingā, an error.
1 Like
Fair enough.
The reason for my current code is that I started with an else that I removed later-on. Good tip, Iāll improve my code on that 
As I dont have this card, please provide a screenshot of code-inspector/developer tools dom of this part. Most probably there are some shadow roots as well.
How can I combine this with your other styling (have the dynamic badges together with rounded edges)?
This does NOT work:
- entity: sensor.season
name: Jahreszeit
icon: mdi:home
style: |
ha-state-label-badge:
$:
ha-label-badge:
$: |
.badge-container .label-badge .value {
#color: #DF4C1E;
#--ha-label-badge-title-width: 60px;
}
.badge-container .label-badge {
border-radius: 20% !important;
}
:host {
{% set season = states(config.entity) %}
{% set icon =
{
'winter':'mdi:snowflake',
'spring':'mdi:flower',
'summer':'mdi:sun',
'autumn':'mdi:leaf'
} %}
{% set icon_color =
{
'winter':'rgb(138,180,248)',
'spring':'rgb(106,168,79)',
'summer':'rgb(0,0,0)',
'autumn':'rgb(255,126,0)'
} %}
{% set border_color =
{
'winter':'rgb(138,180,248)',
'spring':'rgb(106,168,79)',
'summer':'rgb(230,145,56)',
'autumn':'rgb(255,126,0)'
} %}
{% set back_color =
{
'winter':'rgb(255,255,255)',
'spring':'rgb(216,251,135)',
'summer':'rgb(255,242,204)',
'autumn':'rgb(252,229,205)'
} %}
--card-mod-icon: {{ icon[season] if season in icon else 'mdi:home' }};
--label-badge-text-color: {{ icon_color[season] if season in icon_color else 'var(--paper-item-icon-color)' }};
--label-badge-red: {{ border_color[season] if season in border_color else 'red' }};
--label-badge-background-color: {{ back_color[season] if season in back_color else 'white' }};
}
Output is without rounded corners:
card_mod:
style:
element $: |
sub-element {
...
}
.: |
:host {
...
}
1 Like
Wow! You are awesome. And so quick!
Those minor adjustments did the trick. If somebody cares/finds this in futureā¦ here`s what I used (working):
- entity: sensor.season
name: Jahreszeit
icon: mdi:home
style:
ha-state-label-badge:
$:
ha-label-badge:
$: |
.badge-container .label-badge .value {
#color: #DF4C1E;
#--ha-label-badge-title-width: 60px;
}
.badge-container .label-badge {
border-radius: 20% !important;
}
.: |
:host {
{% set season = states(config.entity) %}
{% set icon =
{
'winter':'mdi:snowflake',
'spring':'mdi:flower',
'summer':'mdi:sun',
'autumn':'mdi:leaf'
} %}
{% set icon_color =
{
'winter':'rgb(138,180,248)',
'spring':'rgb(106,168,79)',
'summer':'rgb(0,0,0)',
'autumn':'rgb(255,126,0)'
} %}
{% set border_color =
{
'winter':'rgb(138,180,248)',
'spring':'rgb(106,168,79)',
'summer':'rgb(230,145,56)',
'autumn':'rgb(255,126,0)'
} %}
{% set back_color =
{
'winter':'rgb(255,255,255)',
'spring':'rgb(216,251,135)',
'summer':'rgb(255,242,204)',
'autumn':'rgb(252,229,205)'
} %}
--card-mod-icon: {{ icon[season] if season in icon else 'mdi:home' }};
--label-badge-text-color: {{ icon_color[season] if season in icon_color else 'var(--paper-item-icon-color)' }};
--label-badge-red: {{ border_color[season] if season in border_color else 'red' }};
--label-badge-background-color: {{ back_color[season] if season in back_color else 'white' }};
}
Example 2 does not work for me: the badge is still shown even the state of the entity is 0 (zero) 
I want to combine: show/hide + round corners
- entity: sensor.problems_any
name: Probleme
style:
ha-state-label-badge:
$:
ha-label-badge:
$: |
.badge-container .label-badge {
border-radius: 20% !important;
}
.: |
:host {
{% if states(config.entity) | int(0) > 0 -%}
# problems (> 0)
display: inline-block;
color: red;
--label-badge-text-color: red;
--label-badge-red: red;
--label-badge-background-color: yellow;
{% else %}
# no problems (0)
display: none;
{% endif %}
}
Seems like the display: none; is simply ignored
Can we combine this like this?
if true: show specific icon
else : show value (number) of entity
Looks like once an icon has been set, itās not possible to show a value again. So what I tested: either only icons or only values.
Would love to see me proving wrong but I tested everything, no chance.