Thank you for your message. Like I said I am a starter.
Are there any examples how to add card_mod style into a theme?
I don’t no anything about themes. ( I will watch some videos)
Yes, in the topic I linked to.
Sorry, I did not look further.
I use the example and adjust the code.
In my themes.yaml
card-mod-card: |
ha-card.color {
color:
{% if states(config.entity) | int >= 26 %}
magenta
{% elif states(config.entity) | int >= 23 %}
red
{% elif states(config.entity) | int >= 16 %}
lawngreen
{% else %}
steelblue
{% endif %}
;
}
}
and in my card
- type: entities
entities:
- entity: sensor.thermometer_garage
name: Zolder
secondary_info: last-updated
class: color
But this don’t work.
Can you tell me what i’m doing wrong?
I think my themes code is incorrect.
And should I use class: color for the card?
- When I suggested you in PM to create a post in the card-mod thread, I meant the “dedicated huge card-mod thread”, not a separate post. Posting a question in a common dedicated thread may attract more people. Again, all info should be in one place, not being decluttered in 100500 places.
- By using a card-mod theme, you may add the “conditional red color style” for all rows in all Entities cards. But probably you need to add this style to SOME cards for SOME entities (even may be one particular entity).
- Then the best you can do is using “secrets” or “include”. Go to card-mod thread for details.
Short example with secrets:
- entity: sensor.xyz
card_mod: !secret card_mod_red_bla_bla
secrets.yaml:
card_mod_red_bla_bla: style: |
:host {
color:
{% if states(config.entity) | int >= 26 %}
magenta
{% elif states(config.entity) | int >= 23 %}
red
{% elif states(config.entity) | int >= 16 %}
lawngreen
{% else %}
steelblue
{% endif %}
;
}
The “config.entity” var is resolved on a row level in Entities card (or element level in Glance card, or for particular badge, or for particular element in Picture-elements) , not on a card level.
So the proper key is “card-mod-row(-yaml)” - in case the “card-mod theme” way is needed.
Thanks all. I must work now I will try it tonight.
Great. Thank you.
card-mod-row works great.
Since you marked the post about card-mod-row as a solution - imho you missed the main point.
Again, My apologies. I was also a bit premature with the solution.
You said ‘Go to card-mod thread for details’. Where can I find this, do you have a link for me? Like I said, I’m not very familiar with this yet.
If you are so, I would recommend first start slim and without includes, themes, etc. and just apply your first steps multiple times. Rest will come later.
Things like “include”, “secrets” and yaml anchors - all things to avoid repeating code - may only work in yaml mode of a dashboard.
Also, here using the “include” gives a wrong result. It will paste a code after a “dash” which is wrong when using card-mod.
Ok, thanks. I give up.
I will do it the long way and use the card_mod multiple times.
you really shouldnt give up, because it will be helpful to be able to use anchors and those includes/secrets for you all throughout your config, not just here. let’s consider this:
- type: custom:fold-entity-row
head:
type: section
label: Switch PoE Cams
card_mod: &style # <----- create anchor (note: all under this anchor is indented 2 spaces extra)
style: |
.label {
margin-left: 0px;
}
<<: &config # <----- create another anchor
group_config:
secondary_info: last-changed
padding: 0
entities:
- entity: switch.switch_48_poe_port_5_poe
name: Logeerkamer
- entity: switch.switch_48_poe_port_7_poe
name: Voorkamer
- type: custom:fold-entity-row
head:
type: section
label: Switch Netwerk
card_mod: *style # <----- paste anchor
<<: *config # <----- paste another anchor
as you can see, the &xxxx creates the anchor, and the *xxx copies that exact same bit of yaml. You can put anything under an anchor, as longs as it the correct hierary, and the complete section. you can not insert bits and pieces.
these anchors can only be used inside a single yaml file, they are defined locally to that specific file
what Ildar helped you with even further with is when you’d safe that specific piece of yaml in the secrets file like
# Card_mod stylings frequently used
style_margin: >
style: |
.label {
margin-left: 0px;
}
and then inject that exact piece of yaml (the below/section after the ‘>’) into the dashboard card:
- type: custom:fold-entity-row
head:
type: section
label: Switch PoE Cams
card_mod: !secret style_margin #<-----
<<: &config
group_config:
secondary_info: last-changed
padding: 0
entities:
- entity: switch.switch_48_poe_port_5_poe
name: Logeerkamer
- entity: switch.switch_48_poe_port_7_poe
name: Voorkamer
- type: custom:fold-entity-row
head:
type: section
label: Switch Netwerk
card_mod: !secret style_margin #<-----
<<: *config
you could also do it the hard way, and create card-mod theme classes
card-mod-card-yaml: |
.: |
ha-card.class-header-margin-no-color .card-header {
font-weight: 400;
font-size: 20px;
padding: 0px 12px;
margin: 0px 0px 16px 0px;
}
and then use that class inside an entities card like:
type: entities
title: Stroom gebruik overzicht
state_color: true
card_mod:
class: class-header-margin-no-color
and not have to repeat that anywhere, just inject the class. It’s a lot more involved though required to setup those themes and card_mod_theme being using inside your themes. Powerful, but complex.
the anchor and secret ways are much simpler. Why dont you give it another try.
Thank you very much for your input.
This is really going to help me.
I just did a test with &style and *style and it looks good.
I’ll expand it further in my code later.
Awesome. 
I have this issue (inside type: picture-elements)
card_mod:
style: |
state-badge::after {
content: "{{ (states.cover.strasse.last_changed
| as_local).strftime('%d.%m %H:%M') }}"
}
state-badge {
white-space: nowrap;
display: flex;
flex-direction: column;
row-gap: 0px;
align-items: center;
font-size: 12px;
line-height: 0px
}
the content depends on different covers.the rest is always the same.
A !secret for the complete card_mod does not work due to contents:.
can I pass a parameter into the secret?
I am using windows themes. It offers a lot of different themes.
If I want to create a new css class for the state-badge, I must alter each proposed theme.
Can I load a second theme above the standard (eg windows-red) for my new class?
did you try and separate the 2?
you can merge mods (so that answer is yes)
example:
card_mod:
class: class-header-margin-no-color
style: |
.card-header {
background: {{states('sensor.uv_alert_color_name')}};
color: {{'var(--text-color-off)' if states('sensor.current_uv_index')|float(0) > 2
else 'var(--primary-color)'}};
}
Can also use a separate mod and inject that, or, set a mod in the card_mod_theme. many options at your disposal
but you should really try first and post the results. you will never know until you do anyways.
I have already answered you on that question in another thread more than a week ago. Check your notifications/activities.
In short:
– assume your style(s) depend on some entity;
– some cards support “config.entity” variable;
– if this card does support it too - then replace the entity by “config.entity”;
– then “call” this style as a “secret” or “include”.