🔹 Card-mod - Add css styles to any lovelace card

  1. Open any dashboard (seems it could be ANY).
  2. Select “Edit Dashboard”:
    изображение
  3. Add a new view:
    изображение
  4. Select Panel:

Hey there,

can somebody explain me how to use Card-Mod to compress a Card? I mean i want to reduce the unused space of a card on top and bottom - see picture (red lines are showing the space i want to reduce:

ha-card

What you need is to change paddings or margins.
Goto 1st post → link at the bottom → examples for similar solutions.

I’m trying to do that since 2-3h - haven’t found a working solution yet

I want a blinking icon when attribute value is between 0 and 78…


                      style: |
                      @keyframes blink {
                        50% {
                          background: red;
                        }
                      }
                      ha-card {{ 'animation: blink 2s linear infinite;' if not is_state(config.entity, '0') and not is_state(config.entity, '78') }

}

What is wrong ?

To be honest: Everything. :wink:

  • no card_mod (somehow optional but sometimes needed)
  • Wrong indention below style
  • css after ha card starts with {{ and ends with )}
  • you are checking of not 0 and not 78. Not the range
  • you are checking strings which would work here if you want to check only <>0 and <>78, but is not what you want to do
  • syntax of your if
  • you have written that you want to blink an icon, but you will animate the whole card
  • etc.

Where did you find or take from such examples?

Start with this

      card_mod:
        style: |
          {% if states(config.entity)|int(default=-1) > 0 and states(config.entity)|int(default=-1) < 78 %}
            @keyframes blink {
              50% {
                background: red;
              }
            }
            ha-card {
              animation: blink 2s linear infinite;
            }
          {% endif %}

And you should start putting your cod into developer tools template section and see what would be the output (ofc there your have to set e.g ‘sun.sun’ or (better) the entity in use instead of config.entity.

Here the output from your code

image

What would already lead you to topic 3 above in my list, …

I get “UndefinedError: ‘config’ is undefined”

And you are right… I just don’t know a thing, I have to ask everything :frowning:

Then I would be interested in which card or thing you want to mod. Just post, where you have added the lines.

I would suggest to read the docs from card-mod and the examples there. And secondly go through the examples from Ildar in the very first post of this thread and try to understand how this is working.

2 Likes

Can anyone help me to get rid of this warning?

I have a very simple question, but I can’t find the solution!

I would like to manipulate an horizontal rule (— or *** in markdown syntax or hr in html) in a markdown card through card-mod, but I can’t find a solution!

I apologise for my question but I’m a noob with card mod and CSS (I’ve never used CSS before this week!)

Thank you very much to everybody helps me! :heart:

Starting point

Let’s use this example with two horizontal rules (I’ve specified the id of the second element, in order to target it with its id).

Code:

type: markdown
content: |
  An horizontal rule with **markdown syntax**

  ---

  Another horizontal rule with <b>html syntax<b/>

  <hr id="my_line" />. ### I've tried both <hr> and <hr/>
card_mod:
  style: |
    ha-card {
      background: transparent;
      border-style: none;
    }

Chrome inspector

This is chrome inspector:
Wondershare UniConverter 13_000010

My attempts

I’ve tried this:

type: markdown
content: |
  An horizontal rule with **markdown syntax**

  ---

  Another horizontal rule with <b>html syntax<b/>

  <hr id="my_line" color="red"> #### <- ATTEMPT 1
card_mod:
  style: |
    ha-card {
      background: transparent;
      border-style: none;
      --divider-color: red; #### <- ATTEMPT 2
    }
    hr {
      border: 2px dashed red !important; #### <- ATTEMPT 3
    }
    #my_line {
      border: 2px dashed red !important; #### <- ATTEMPT 4
    }

Results: nothing changed!

References

Conclusion

Can somebody help me? Thank you very much!!

1 Like

It looks like you have to make a helper ( input number ) does it excist in your entities ?

Hi guys ,

I hope someone more experienced than I would take a look at this config and tell me if it seem okay.

Periodically my tablet that always shows HA in fully kiosk doesnt load this correctly, just this part.

Anything wrong with it?

card_mod:
  style:
    config-template-card:
      $:
        div:
          hui-vertical-stack-card:
            $: |
              h1.card-header {
                padding: 5px !important;
                font-size: 15px !important;
                line-height: 15px !important;
              }

A small customization for restriction-card:

For a card:
a1

code
  - type: custom:mod-card
    card:
      type: custom:restriction-card
      action: hold
      duration: 10
      card:
        type: entities
        entities:
          - input_boolean.test_boolean
    card_mod:
      style:
        restriction-card:
          $: |
            div#overlay {
              background: repeating-linear-gradient( -45deg, transparent 0 20px,rgba(255,127,127,0.2) 20px 40px);
              border-radius: var(--ha-card-border-radius,12px);
            }
            div#overlay:has(.hidden) {
              background: unset;
            }
            ha-icon {
              display: none;
            }

For a row:
a2

code
  - type: entities
    entities:
      - entity: input_boolean.test_boolean
      - type: custom:restriction-card
        row: true
        action: hold
        duration: 10
        card:
          entity: input_boolean.test_boolean
        card_mod:
          style: |
            div#overlay {
              background: repeating-linear-gradient( -45deg, transparent 0 20px,rgba(255,127,127,0.2) 20px 40px);
            }
            div#overlay:has(.hidden) {
              background: unset;
            }
            ha-icon {
              display: none;
            }
4 Likes

Thank you. That works.

never really used browser-mod pop-ups before, and decide to give it a try, working nicely indeed:

hold_action:
  action: fire-dom-event
  browser_mod:
    service: browser_mod.popup
    data:
      content:
        type: markdown
        content: >
          {{state_attr('sensor.marquee_alerts','marquee')}}

I have 2 questions on the subject though: how come my main theme settings ha-card-border-radius: 0px are not applied? Need they be set specifically for browser-mod pop-ups?
should we card-mod that so it also applies here?

the same card in a dashboard does get the borders set correctly:

the other is a placement issue, so probably not a card-mod or theme question, will see where to take that :wink:

update

foind this:

hold_action:
  action: fire-dom-event
  browser_mod:
    service: browser_mod.popup
    data:
      style: |
        --popup-border-radius: 0px;
        --popup-padding-x: 0px;
        --popup-padding-y: 0px;
        --dialog-backdrop-filter: blur(0.8em) brightness(1.2);
      content:
        type: markdown
        content: >
          ### Actieve waarschuwingen voor:

          {{state_attr('sensor.marquee_alerts','marquee')}}

but must check if that is still the most up to date css for the card mod, and also, if a card-mod-theme for the popups would not be an option?

considering we have:

  card-mod-more-info-yaml: |

    $: |
      .mdc-dialog {
        backdrop-filter: blur(17px);
        -webkit-backdrop-filter: blur(17px);
      }

in place, I also figured the popup would benefit from that, but obviously not.

also trying to getto the top and bottom margins there, is not successful:

hold_action:
  action: fire-dom-event
  browser_mod:
    service: browser_mod.popup
    data:
      style: |
        --popup-border-radius: 0px;
        --popup-padding-x: 0px;
        --popup-padding-y: 0px;
        --dialog-backdrop-filter: blur(0.8em) brightness(1.2);
      content:
        type: markdown
        card_mod:
          style: |
            ha-card {
              background: maroon;
              color: ivory;
              margin:-20px 0px;
            }

or even do:

        type: markdown
        card_mod:
          style: |
            ha-card {
              background: maroon;
              color: ivory;
              margin: 0px;
              font-size: 20px;
              font-weight: bold;
              text-align: center;
              animation: blink 2s ease infinite;
            }
            @keyframes blink {
              100% {opacity: 0;}
            }

but that top/bottom margin remains… now how to get rid of that?

feels a bit like a hack, but taking off 4px of the 24px of the content padding makes it happen:

--dialog-content-padding: 20px;

hi,
I’m sure this should be easy, but i’m stumped.
Is there a way to move the text over to the right in this markdown card so that the icon is inline with the text, rather than the text being below the icon?
image

here’s my code so far:

            card:
              type: markdown
              card_mod:
                style:
                  .: |
                    ha-card {
                      --mdc-icon-size: 50px;
                    }
              content: >-
              
                {% if states('sensor.health_alert_level') == 'YELLOW' %}
                  <font color = 'gold'>
                {% elif states('sensor.health_alert_level') == 'AMBER' %}
                  <font color = 'darkorange'>
                {% elif states('sensor.health_alert_level') == 'RED' %}
                  <font color = 'dark'>
                {% endif %}

                  
                {% if states('sensor.health_alert_type') == 'Heat' %}
                  <ha-icon icon="mdi:sun-thermometer-outline"></ha-icon>
                {% else %}
                  <ha-icon icon="mdi:snowflake-thermometer"></ha-icon>
                {% endif %}


                </font>


                There is a **{{states('sensor.health_alert_Level')}}** {{
                states('sensor.health_alert_type') }} Health Alert for London
                
                from {{ states('sensor.health_alert_start_date') }} at {{
                states('sensor.health_alert_start_time') }} until {{
                states('sensor.health_alert_end_date') }} at {{
                states('sensor.health_alert_end_time') }}

Use Jinja’s whitespace control features. Compare e.g. {% with {%-.

1 Like

Thanks, I got it partway with that!
image
I seem to have lost the bold on the color and can’t get the 2nd line up. What have I missed please?

card:
              type: markdown
              card_mod:
                style:
                  .: |
                    ha-card {
                      --mdc-icon-size: 50px;
                      font-size: 13px;
                    }
              content: >-

                {% if states('sensor.health_alert_level') == 'YELLOW' %}
                  <font color = 'gold'>
                {% elif states('sensor.health_alert_level') == 'AMBER' %}
                  <font color = 'darkorange'>
                {% elif states('sensor.health_alert_level') == 'RED' %}
                  <font color = 'dark'>
                {% endif -%}

                  
                {% if states('sensor.health_alert_type') == 'Heat' -%}
                  <ha-icon icon="mdi:sun-thermometer-outline"></ha-icon>
                {% else -%}
                  <ha-icon icon="mdi:snowflake-thermometer"></ha-icon>
                {% endif -%} 
                </font> 
                
                There is a **{{states('sensor.health_alert_Level')}}** {{
                states('sensor.health_alert_type') }} Health Alert for London
                from {{ states('sensor.health_alert_start_date') }} at {{
                states('sensor.health_alert_start_time') }} until {{
                states('sensor.health_alert_end_date') }} at {{
                states('sensor.health_alert_end_time') }}

Markdown can’t be interpreted correctly once you’re inside HTML tags. Use <bold> instead.

thank you
image
that’ll do :slight_smile: