Can I use the same card_mod multiple times?

Configuration Frontend
1

Hello, I am just a beginner. I don’t know how this works, but I have a question.
I hope somebody can help me?
I use this card_mod multiple times on different places in HA for my temperature.

card_mod:
    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 %}
           ;
       }

But if I want to adjust, I must do that on many places.
Is there a way to put this code on one place and reuse it?

Any ideas?

2

Yes. You can add card mod styles to your themes and apply them to cards.

3

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)

4

Yes, in the topic I linked to.

5

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?

6
  1. 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.
  2. 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).
  3. 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 %}
           ;
       }
7

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.

8

Thanks all. I must work now I will try it tonight.

9

Great. Thank you.
card-mod-row works great.

10

Since you marked the post about card-mod-row as a solution - imho you missed the main point.

11

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.

12

I tried this example but it gives an error ‘unknown tag !<!include>’
Any idea?

image
image452×514 18.1 KB

13

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.

14

Here
Check the 1st post - link at the bottom, will give a set of examples.

15

Things like “include”, “secrets” and yaml anchors - all things to avoid repeating code - may only work in yaml mode of a dashboard.

16

Also, here using the “include” gives a wrong result. It will paste a code after a “dash” which is wrong when using card-mod.

17

Ok, thanks. I give up.
I will do it the long way and use the card_mod multiple times.

18

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.

19

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. :star_struck:

20

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?