Yes that is expected because you use ==
Thatās what I was hinting at.
Use the correct operator and the mod will be fine
Try to change the value of these variables:
card_mod:
style: |
ha-card {
--state-color: red !important;
--primary-text-color: blue;
}
This is from card-mod documentation:
NOTE: card-mod only works on cards that contain a ha-card element. This includes almost every card which can be seen, but not e.g.
conditional,entity_filter,vertical-stack,horizontal-stack,grid.
Try to set the line-height of the .info element in 1 and then set the same padding for the top and the bottom and modify it depending on your needs:
type: entity
entity: sensor.time
card_mod:
style: |
ha-card {
text-align: center;
}
.info {
line-height: 1 !important;
padding: 5px 16px !important;
}
.value {
font-size: 64px !important;
}
.icon {
display: none;
}
.name {
display: none;
}
Thank you, works perfectly for me 
1 Like
just another perspective: you are aware you can also just do something like this:
type: markdown
content: >
# {{states('sensor.time')}}
or, if you want to go a bit bigger, do things like:
type: markdown
content: >
# {{states('sensor.time')}}
card_mod:
style: |
ha-card {
font-size: 25px;
font-weight: bold;
text-align: center;
}
play with the Html options in Markdown and the card_mod options, they do mix well.
I find for these type of cards, Markdown is ideal
2 Likes
Hi,
IĀ“d like to change color depending on sensor state:
this is my code:
...
- type: tile
entity: sensor.fenster_eltern
show_entity_picture: false
vertical: false
hide_state: false
visibility:
- condition: or
conditions:
- condition: state
entity: sensor.fenster_eltern
state: offen
- condition: state
entity: sensor.fenster_eltern
state: gekippt
name: Eltern
state_content:
- state
- last-changed
card_mod:
style: |
ha-card: {
{% if is_state('sensor.fenster_eltern', 'gekippt') %}
--tile-color: orange !important;
{% if is_state('sensor.fenster_eltern', 'offen') %}
--tile-color: red !important;
{% endif %}
}
I already have an sensor for the windows that shows open/close/tilt. That works fine. Now I like it colorized
Can someone please help?
did you at least give some of the hundreds of examples in this thread a look?
if you already have it colorized in that mod, what is the problem you are facing?
hint: look for ha-tile-iconā¦
style: |
ha-tile-icon {
--tile-color:
{% if is_state(config.entity,'off') %} var(--alert-color)
{% else %} var(--ok-color)
{% endif %};
}
btw, this:
wont work in any card. you have an incorrect : there
yes IĀ“ve read the threads above. But IĀ“m not well known in program therfore I ask for help:
this card mod works fine:
card_mod:
style: |
ha-card {
{% if is_state('binary_sensor.dachfenster_oben', 'off') %}
--tile-color: green !important;
{% else %}
--tile-color: red !important;
{% endif %}
}
Icon is green
How can I change the text color in āgreenā?
And this mod wonĀ“t work:
card_mod:
style: |
ha-card {
{% if is_state('sensor.fenster_eltern', 'gekippt') %}
--tile-color: orange !important;
{% if is_state('sensor.fenster_eltern', 'offen') %}
--tile-color: red !important;
{% endif %}
}
Sorry, try to eplain for dummies.
Thanks
Hmm. This didnāt seem to work for whatever reason. I am including a screenshot and my code snippet in hopes that you all can help me figure out why that didnāt seem to work.
- square: false
type: grid
cards:
- type: custom:minimalistic-area-card
card_mod:
style:
.buttons ha-icon-button:not(.state-on):
state-badge $: |
ha-state-icon {
color: black !important;
}
ha-card {
--state-color: red !important;
--primary-text-color: blue;
}
title: Back Deck
area: back_deck
shadow: true
hide_unavailable: true
state_color: true
tap_action:
action: navigate
navigation_path: /dashboard-automatic/back-porch
entities:
- entity: light.all_back_deck_lights
- entity: switch.back_deck_fountain
- entity: switch.back_deck_speaker_power
{% if states(config.entity) | float(0) <= 20 %} red
Should work now! Yayā¦
1 Like
yes, that is it 
you did itā¦
Because the code that I gave you was to change the color of the icon and entity name on a button-card (it was what you asked and what you had in your yaml code) 
But you are trying to set it in a minimalistic-area-card which is a custom card and for sure it will not use the same variables that the button-card uses. I donāt use that custom card so I really donāt know the sctructure of the HTML and the variables that it uses. Maybe someone else that is using it could help you out.
Thank You for guidance Marius!!!
Much appreciatedā¦
1 Like
Ahh, now I follow you. Iām sure I will use that in the future also. 
I am trying to set the color of the room name on the minimalistic area card.
If I use the inspector on google chrome, would I be able to post something here that would help others potentially help me or not really?
Yes, posting the structure of the HTML could help, but if you look at that room name and the color has a variable, you can override that variable in a parent element.
Thank you for your response. I will give that a try later tonight or tomorrow and see if someone can lend a hand. Thank you for all of your help!
1 Like
Hi guys Iām new here so please be gentle.
Have the following picture-entity card. Iād like to both set card parameters and rotate the image - for now itās just a figure for testing, but when working it will be a sensor value. I can get the hui-image or ha-card depending on the pipe after style. But canāt get both to work.
I canāt seem to get this to save with correct indentation 
Any suggestions ?
type: picture-entity
show_state: true
show_name: true
name: Left To Right
camera_view: auto
entity: sensor.filtered_x_angle
image: /local/van-tilt-card/img/promaster_back.png
card_mod:
style: |
hui-image {
transform: rotate(180deg);
}
ha-card {
margin-left: 0px !important;
height: 220px !important;
width: 200px !important;
padding-left: 2px !important;
background: white;
border: 1.5px solid white !important;
}Preformatted text
trying to style a template-entity-row inside a decluttering-card or š¹ Card-mod - Add css styles to any lovelace card - #1474 by Ildar_Gabdullin, I have this decluttering template:
card:
type: custom:template-entity-row
entity: '[[entity]]'
card_mod:
style: '[[style]]'
etcetc
and the instantiating card:
type: custom:decluttering-card
template: verjaardag
variables:
- entity: this.entity_id
- style:
div#wrapper:
state-badge $: |
ha-state-icon {
color: red !important;
}
.: |
.state {
color: magenta;
}
.info {
color: cyan;
}
.info .secondary {
color: orange;
}
(this is in an auto-entities card btw, but I dont believe that has any impactā¦)
the mods dont kick in , and all template-entity-rows simply show un-modded.
Would appreciate a second pair of eyes to see if I made a syntax error, or other typo for that matter. Or is it the dom path not being correct?
Use mod-card
you mean in the decluttering-template like this?:
card:
type: custom:mod-card
card_mod:
style: '[[style]]'
card:
type: custom:template-entity-row
entity: '[[entity]]'
still not functional.
btw, Ive also checked it on a card with direct entity, so took out the auto-entities aspect:
- type: custom:decluttering-card
template: verjaardag
variables:
- entity: sensor.wm_ontmoetingsdag
- style:
div#wrapper:
.: |
.state {
color: red;
}
.info {
color: cyan;
}
.info .secondary {
color: white;
}
but this remains un-modded too
When using mod-card - your styles should have additional element in path