šŸ”¹ Card-mod - Add css styles to any lovelace card

{% set hvac_action = state_attr('climate.loft', 'hvac_action')%}

You are mixing button-card and card-mod.

1 Like

Offcourse I am, sorry

Could use a little help here. Not sure if I need to use card_mod, but I think I do. I have a bunch of button-cards that are within a layout-card. Despite my best efforts with the button-card and layout-card the buttons seem to be inheriting their margins from a #root > * set to ā€œvar(ā€“masonry-view-card-margin, 4px 4px 8px)ā€. I cannot for the life of me figure out how to get card_mod to overwrite this property with a 0.

I was able to do it in a theme by setting the masonry variable to 0, but Iā€™d like to just do it for the cards themselves. Any help appreciated.

      - type: custom:layout-card
        layout_type: custom:grid-layout
        view_layout:
          grid-area: main-right
        layout:
          grid-template-columns: 50% 50%
          grid-template-rows: auto
          height: 100%
          margin: 0px 0px 0px 0px !important
          card_margin: 0px 0px 0px 0px !important
          padding: 0px 0px 0px 0px !important
        cards:
          - type: "custom:button-card"
            template:
              - emf_room_card
            name: Family Room
            icon: mdi:sofa-outline
            entity: switch.zb_family_room_lamps
          - type: "custom:button-card"
            template:
              - emf_room_card
            name: Family Room
            icon: mdi:sofa-outline
            entity: switch.zb_family_room_lamps
          - type: "custom:button-card"
            template:
              - emf_room_card
            name: Family Room
            icon: mdi:sofa-outline
            entity: switch.zb_family_room_lamps
          - type: "custom:button-card"
            template:
              - emf_room_card
            name: Family Room
            icon: mdi:sofa-outline
            entity: switch.zb_family_room_lamps
          - type: "custom:button-card"
            template:
              - emf_room_card
            name: Family Room
            icon: mdi:sofa-outline
            entity: switch.zb_family_room_lamps
          - type: "custom:button-card"
            template:
              - emf_room_card
            name: Family Room
            icon: mdi:sofa-outline
            entity: switch.zb_family_room_lamps
          - type: "custom:button-card"
            template:
              - emf_room_card
            name: Family Room
            icon: mdi:sofa-outline
            entity: switch.zb_family_room_lamps
          - type: "custom:button-card"
            template:
              - emf_room_card
            name: Family Room
            icon: mdi:sofa-outline
            entity: switch.zb_family_room_lamps

I did try

            card_mod:
              style: |
                ha-card {
                  margin: 0px;
                }

on the button card, but it doesnā€™t work. When I explore the elements in the dev tools and set margin: 0px on the object that works, but I canā€™t seem to translate that to card_mod

you can add extra_styles to button card template

    extra_styles: |
      :host {
        --masonry-view-card-margin: 0 !important;
      }

or with card_mod

card_mod:
  style: |
    :host {
      --masonry-view-card-margin: 0 !important;
    }

You can add margin: edits directly under for button cards.

styles:
    card:
      - margin: 0px
type: custom:button-card
      entity: light.bathroom_lights
      show_name: true
      name: Card Example
      icon: mdi:lamp
      aspect_ratio: 2/1
      tap_action:
        action: toggle
      styles:
        card:
          - background-color: blue
          - margin: 0px
        icon:
          - height: 100%
          - color: orange

check out

Hi! Could anyone help me out? If you look at my picture the 2nd weather card is ā€œgoodā€ but this is one using an other entity which doesnt work with tap_action. So i wanted to add a other weather card which supports tap_action but the scaling is bad ( the one above ) it should be like the 2ndā€¦

type: custom:stack-in-card
cards:
  - type: custom:layout-card
    layout_type: custom:grid-layout
    layout:
      grid-template-columns: auto auto
      margin: 8px 4px 4px 4px;
    cards:
      - type: custom:mushroom-chips-card
        chips:
          - type: entity
            entity: person.laurens
            content_info: none
            use_entity_picture: true
            card_mod:
              style: |
                /* Color border around avatar to show person status */
                ha-card {
                  --chip-background:
                  {% if is_state(config.entity, ['home', 'not_home', 'unknown']) %}
                    rgb(var(--rgb-state-person-{{ states(config.entity) | replace('_', '-') }} ))
                  {% else %}
                    rgb(var(--rgb-state-person-zone))
                  {% endif %};
                } 
                /* Slightly enlarge & bring to front on hover */
                ha-card:hover {
                  transform: scale(1.2);
                  transform-origin: top center;
                  z-index: 1;
                  transition: all 1s;
                }
          - type: entity
            entity: person.adna
            content_info: none
            use_entity_picture: true
            card_mod:
              style: |
                /* Color border around avatar to show person status */
                ha-card {
                  --chip-background:
                  {% if is_state(config.entity, ['home', 'not_home', 'unknown']) %}
                    rgb(var(--rgb-state-person-{{ states(config.entity) | replace('_', '-') }} ))
                  {% else %}
                    rgb(var(--rgb-state-person-zone))
                  {% endif %};
                } 
                /* Slightly enlarge & bring to front on hover */
                ha-card:hover {
                  transform: scale(1.2);
                  transform-origin: top center;
                  z-index: 1;
                  transition: all 1s;
                }
          - type: template
            entity: input_boolean.jax_home_not_home
            picture: local/images/jax.jpg
            hold_action:
              action: none
            double_tap_action:
              action: none
            card_mod:
              style: |
                /* Color border around avatar to show person status */
                ha-card {
                  {% if is_state(config.entity, 'on') %}
                    --chip-background: rgb(var(--rgb-state-person-home));
                  {% else %}
                    --chip-background: red; /* Set to red when the status is 'off' */
                  {% endif %};
                } 
                /* Slightly enlarge & bring to front on hover */
                ha-card:hover {
                  transform: scale(1.2);
                  transform-origin: top center;
                  z-index: 1;
                  transition: all 1s;
                }
          - type: template
            entity: input_boolean.gasten_modus
            icon: mdi:account-plus
            hold_action:
              action: none
            double_tap_action:
              action: none
            card_mod:
              style: |
                /* Color border around avatar to show person status */
                ha-card {
                  {% if is_state(config.entity, 'on') %}
                    --chip-background: rgb(var(--rgb-state-person-home));
                  {% else %}
                    --chip-background: red; /* Set to red when the status is 'off' */
                  {% endif %};
                } 
                /* Slightly enlarge & bring to front on hover */
                ha-card:hover {
                  transform: scale(1.2);
                  transform-origin: top center;
                  z-index: 1;
                  transition: all 1s;
                }
        alignment: end
        card_mod:
          style: |
            ha-card { 
              /* Overlap avatar Chips */
              --chip-spacing: calc(-1 * var(--mush-chip-spacing, 8px));

              /* Set size of border around Chips */
              --chip-avatar-padding: 2px;

              /* Reduce width to fit Chips & allow max space for weather */
              width: fit-content;
              transition: all 0s;
            }
      - type: weather-forecast
        show_current: true
        show_forecast: false
        entity: weather.buienradar
        forecast_type: daily
        theme: Mushroom Shadow
        name: ' '
        tap_action:
          action: fire-dom-event
          browser_mod:
            service: browser_mod.popup
            data:
              title: Weersverwachting
              content:
                type: entities
                entities:
                  - type: custom:weather-card
                    entity: weather.forecast_home
                    forecast: true
                    details: false
        card_mod:
          style:
            .: |
              ha-card {
                --ha-card-background: none;
                --ha-card-box-shadow: none;
                --ha-card-border-width: 0;
                padding: 5px !important;
              }
              .current{
                font-size: 6px;
              }

How can I get the 1 and 2 lower ?

afbeelding

            card_mod:
              style: |
                ha-card {
                    position: fixed;
                    bottom: 0;
                    left: 0;
                    width: 100%;
                    display: flex;
                    justify-content: center;
                    padding-bottom: 0px
                }   

Hi and thank you a lot for being so patient and willing to help! This is highly appreciated!

Iā€™d be happy if anyone could have a look at my problem.
Goal: I like to have the font of a glance card bold as well as the margin between icon and text to a defined value.
Both things work separately (thanks to this forum):

        card_mod:
          style: |
              ha-card {
                font-weight: bold
              }

leads to bold font::
Bildschirmfoto vom 2024-02-09 12-16-08

and:

          card_mod:
            style:
              .entities .entity:
                $: |
                  state-badge {
                    margin-top: 50px;
                    margin-bottom: 0px;
                  }

leads to an adjustable margin:
Bildschirmfoto vom 2024-02-09 12-14-49

I donā€™t understand anything of CSS coding style, but I really tried many many combinations - no chance.

So how do I combine both?

Thanks a lot in advance!

Is this what you are after?

card_mod:
     style:
        .entities .entity:
           $: |
            state-badge {
               margin-top: 15px;
               margin-bottom: 0px;
                 }
        .:  |
          ha-card {
           font-weight: bold;
                 }

Awesome, thank you!
Bildschirmfoto vom 2024-02-09 13-02-39
I really should try to understand that :see_no_evil:

The code above has been applied to glance cards. Do you also know how to do it for button cards? And if yes: where can I find this information by myself?

Cheers

Here

Yes, I already came across that one. But I hoped that it would be possible without installing an additional custom card type.
But doesnā€™t it make the approach to use CSS styling on build-in cards obsolete if one installs dedicated card that fulfill the desired features?

From my point of view it is more ā€œconsistentā€ to stick to one approach. :thinking:

I misunderstoodā€¦Iā€™m not sure about the standard button card. Didnā€™t see much in the guide on this post when reading through it.

I had actually tried changing the margin in both the template and directly on the button and it didnā€™t do anything.

Iā€™ll give that a shot. Thanks

Alright, no problem. Thank you anyway! :+1:

just found the header link icon in history-graph cards, and tbh, it was unthemed, and didnt look nice at all.
So, I wanted to hide it, which works with display: none.
Add a boolean toggle, and control it from the UI.

next I needed it to be in style with my themes, so set primary-color on the icon. seems nice:

    .card-header ha-icon-button {
      --card-mod-icon-color: var(--primary-color);
      {{'display: none' if is_state('input_boolean.hide_history_graph_link','on')}};
    }

if would hope to find a theme variable for the icon, so we wont need to see it in a card_mod for each individual card.

Did anyone find that yet?

default icon:

no icon:

themed icon:

Hi Ildar, excelent work!

Ildar, Iā€™m trying to remove/hide without success the component

for "custom:more-info-card"

Iā€™ve also been trying for some time to reduce the height of the entire component by half.

Can you help me with this?

type: horizontal-stack
cards:
  - type: custom:more-info-card
    entity: light.spots_da_tv
    title: Spots TV
    card_mod:
      style: |
        ha-card {
          width: 150px;
          state-card-content {
            display:none;
          }
        }   

Can you post your code so folks can copy and paste it easily? It helps expedite solutions.

#11