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

[laurens362]

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;
              }

[Faecon (Jo)]

How can I get the 1 and 2 lower ?

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

[Jojo-A]

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

and:

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

leads to an adjustable margin:

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!

[LiQuid_cOOled]

Is this what you are after?

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

[Jojo-A]

Awesome, thank you!

I really should try to understand that

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

[LiQuid_cOOled]

Here

Fun with custom:button-card

I’ve recently discovered the power of custom:button-card (GitHub - custom-cards/button-card: Lovelace button-card for home assistant) and want to share some nice layouts I created. Be sure to read the documentation for the button-card at that link if you try to use any of these examples. I make extensive use of its templating feature. [panels with alerts] If the image above is not animated, try clicking it to open a popup. The fans should be spinning and 2 sensors should be flashing red o…

[Jojo-A]

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.

[LiQuid_cOOled]

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.

[efaden (Eric Faden)]

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

[efaden (Eric Faden)]

I’ll give that a shot. Thanks

[Jojo-A]

Alright, no problem. Thank you anyway!

[Mariusthvdb (Marius)]

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:

[aantonelloborges]

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;
          }
        }   

[LiQuid_cOOled]

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

How to help us help you - or How to ask a good question

Before we begin… This forum is not a helpdesk The people here don’t work for Home Assistant, that’s an open source project. We are volunteering our free time to help others. Not all topics may get an answer, never mind one that helps you solve your problem. [image] This also isn’t a general home automation forum, this is a forum for Home Assistant and things related to it. Any question about Home Assistant, and about using things with Home Assistant, is welcome here. We can’t help you with e…

#11

[Evirc]

After upadate Core,the color of this icon doesn’t work. this is a bug or am i wrong?

type: horizontal-stack
cards:
  - type: tile
    entity: sensor.aria_pm25
    name: PM 2.5
    show_entity_picture: false
    card_mod:
      style:
        .icon-container .icon$: |
          .shape { 
            border-radius: 15px !important;
            background:
              {% if states('sensor.aria_pm25')|float(0) >= 125|float(0) -%}
                rgba(255,0,0,0.6)
              {% elif states('sensor.aria_pm25')|float(0) >= 60|float(0) -%}
                rgba(255,165,0,0.8)
              {% elif states('sensor.aria_pm25')|float(0) >= 0|float(0) -%}
                rgba(60,179,113,0.6) 
              {% endif %} !important; 
          }
  - type: tile
    entity: sensor.aria_voc_index
    name: VOC Index
    icon: mdi:chart-bell-curve-cumulative

[gbboy]

Noticed similar things occurring with tile card icons and animations since the update. Change:

.icon-container .icon$

with:

ha-tile-icon$

Has fixed some issues for me

[reste_narquois (Chris Warne)]

I think the DOM path has changed slightly, so that the tile icon element no longer has the .icon class. Try this to see if it works for you (it does for me):

    card_mod:
      style:
        .icon-container ha-tile-icon $: |

Actually, not sure you really need the .icon-container bit. Try this alternatively:

    card_mod:
      style:
        ha-tile-icon $: |

EDIT: gbboy got there first!

[Evirc]

yes, it is work!!! thank you

[Evirc]

yes, this is the solution, it’s work! thanks

[LiQuid_cOOled]

@hazio What card? Check out

Card-mod - Add css styles to any lovelace card

Here all my posts which may be useful: NOTE: Do not forget to add a "card_mod:" keyword before "style:" (new in card-mod 3). And also read this important note to create optimized code. In most examples here a code is NOT optimized - just to describe a DOM navigation. Entity card post rotating icon (by @dolodobendan) disabled tap_action Entities card (including some special row elements - button, section, divider) post font-size for Entities card post Entities card with attributes …