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

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:

Can anyone please help me to increase the font size for the Mushroom Thermostat card temperature control?

type: custom:mushroom-climate-card
entity: climate.bedroom_ac
layout: vertical
show_temperature_control: true
secondary_info: none
tap_action:
  action: call-service
  service: switch.toggle
  target:
    entity_id: switch.bedroom_ac_toggle
  data: {}
icon: mdi:snowflake
collapsible_controls: false
hvac_modes: []
fill_container: false
card_mod:
  style: |
    ha-card { 
    --card-primary-font-size: 1.6em;
    }

Any help would be greatly appreciated.

Hi all!

I have a vertical-stack with a media-control card and a custom-button card. I have modified the size of the button so that it does not occupy the entire width of the column and my ultimate goal is to place the button on top of the control-card and align it after the next track button.

Below I show my code.

- type: custom:mod-card
  card:
    type: vertical-stack
    card-mod:
      style: |
        ha-card {
          display: flex;
          justify-content: center;
        }
    cards:
      - type: media-control
        entity: media_player.musiccast_kitchen

      - type: custom:button-card
        icon: mdi:link-variant
        styles:
          card:
            - width: 50px
            - height: 50px
            - position: relative
            - transform: translate(100px, -100px)

The problem is that depending on the screen (mobile, tablet…) the relative position of the button with respect to the media-control card varies.
Is there a way to make this not happen?
If it’s not possible, how can I at least make the button appear centered in the column?

I’m totally new to card-mod, so I’d appreciate if someone could help me.

Start with fixing this:
image
When using mod-card - styles are supposed to be defined on mod-card level.

I would like to change the style “–grid-card-column-count” of a hui-grid-card.

<hui-grid-card style="--grid-card-column-count: 2;"></hui-grid-card>

I tried the following - but it does not work :frowning:

  type: grid
  card_mod:
    style:
      hui-grid-card$: |
        hui-grid-card {
          --grid-card-column-count: {{ 1 if user == 'handy' else 2 }} !important;
        }

Could please someone help?

Hi everyone,
I’ve noticed that the newer HA updates have added a box around my once boxless/shadowless card:

I can’t seem to figure out how to remove it.

I’ve tried:
ha-card-border: 0px
ha-card-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.16)
ha-card-border-width: 0
ha-card-box-shadow: 0px
with no luck.

Am I missing anything in the below code?:

type: custom:mod-card
card:
  type: custom:mushroom-title-card
  title: '{{ now().strftime(''%I'') }}:{{ now().strftime(''%M %p'') | lower }}'
  subtitle: >-
    {{ now().strftime('%A') }}, {{ now().strftime('%B') }} {{
    now().strftime('%d') }}
card_mod:
  style:
    mushroom-title-card$: |
      .header {
        --title-padding: 12px 12px 3px;
      }
      .title {
        font-size: 34px!important;
        spacing: 100px;
      }
      .subtitle {
        font-size: 25px!important;
      }
      ha-card {
        height: 98px !important;
      }
      ha-card-border: 0px
      }
      ha-card-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.16)
      }
      ha-card-border-width: 0
      }
      ha-card-box-shadow: 0px
      }

Thanks in advance :slight_smile:

Same as for the stack cards. Have a look in the developer tools of your browser. There is no ha-card element, which is needed for ingesting code via card-mod. So you have to place a mod-card around it here as well. See here.

Thanks for pointing me in the right direction. I have put the styles on mod-card level and tried to apply the style only for the custom:button-card but the code doesn’t work. Surely because the selector is not correct.
Please, could you tell me what I’m doing wrong.

- type: custom:mod-card
  card:
    type: vertical-stack
    cards:
      - type: media-control
        entity: media_player.musiccast_kitchen
      - type: custom:button-card
        icon: mdi:link   
  card_mod:
    style: 
      ha-card $: 
        hui-vertical-stack-card $: 
          div#root button-card$:
            div#aspect-ratio ha-card: |
              .button-card-main {
                  position: relative;
                  display: block;
                  margin: auto;
                  width: 60%;
                  justify-content: center;
              }