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

[Azrael79 (Azrael)]

Hello everyone,

I’m currently using a dashboard that is made up of various custom cards. My goal for 2024 is to move the whole thing back a little more towards standard

And to explore the possibilities with the standard cards + Card_Mod where necessary.

I currently have some problems where I hope you can help me

1. tile card

I would like to use a tile card and display only one icon. The Problem is the GAP for the Name stays there.

  - type: tile
    icon: mdi:home-outline
    entity: zone.home
    hide_state: true
    show_entity_picture: false
    vertical: false
    card_mod:
      style:
        ha-tile-info$: |
          .primary {
            visibility: hidden;
          }

Is there a better way to achieve my goal?

2. Button Card
   Because I didn’t get anywhere with the Tile Card, I thought - okay, let’s try the standard Button Card.

Unfortunately, the problem here is that I’m missing the icon background, which I personally like the look and feel of.

Does anyone here have an example of how I can implement a corresponding icon background with card mod? (It is the standard button card, not a custom version)

Thx in advance

[LiQuid_cOOled]

What do you consider an icon background? color?

[Azrael79 (Azrael)]

Sorry, that it was not clear - i mean the circle behind the icon as the tile card has it (so yes a different color)

i hope its clearer now

[LiQuid_cOOled]

This will change the background of the icon or what is called the shape color.

type: tile
entity: light.bed_lights
card_mod:
  style: |
    ha-card {
      --tile-color: red !important;  
         }

Add background: to adjust the card color

type: tile
entity: light.bed_lights
card_mod:
  style: |
    ha-card {
      --tile-color: red !important;  
      background: grey !important;
         }

[Azrael79 (Azrael)]

Great, thx a lot

But one more question, is it possible to geht this shape color on the button card?

[LiQuid_cOOled]

@LiQuid_cOOled

--tile-color: red !important;

yes…

show_name: true
show_icon: true
type: button
tap_action:
  action: toggle
entity: light.patio_spot_2
card_mod:
  style: |
    ha-card {
       background: deepskyblue;
           }

Check out this post for a lot of solid infio

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 …

You are just touching the surface of what can be done…

[Azrael79 (Azrael)]

thx for the link…
yes i see… a big mountain in front of me

in evening i will have a look at the links, but perhaps you can have a quick look - whats wrong at this statement

show_name: true
show_icon: true
type: button
tap_action:
  action: toggle
entity: light.office
card_mod:
  style: |
    ha-card {
      --tile-color: red !important;  
    }

i thougt there would be a red shape color around the icon. But no shape color in red

[LiQuid_cOOled]

The invisible shape around the icon is actually a square, but I suppose you could color it and add a radius.

[parautenbach (Pieter Rautenbach)]

If anybody is looking for how to override the colours for an alarm control panel tile card, here’s one way to do it: Card-mod for Tile card: icon & tile color - #52 by parautenbach.

Thanks for the help, @Ildar_Gabdullin!

[S1NK]

Newbie to card mod and css styles here. I’ve been playing around with some room cards using a combination of button card/mushroom. Following along with the ideas from https://www.youtube.com/watch?v=RSQwxuAm

I am having a lot of trouble adding in a background image to my card. Trialing first with the first card in the vertical stack below (Master).

Haven’t been able to get it to work under card mod or styles:. Also had trouble with the parameters under the button card itself. Hoping just a newbie mistake but I would appreciate if anyone has any suggestions.

type: vertical-stack
cards:
  - square: false
    type: grid
    cards:
      - type: custom:button-card
        name: Master
        icon: mdi:bed-king-outline
        entity: none
        card_mod:
          style: |
            ha-card > div {
              padding: 0px 0px 0px!important;
            }
            ha-card {          
              padding: 10px 10px!important;
              border: none;
              border-radius: 10px;
              background-image: url("/local/background/MasterBW.jpg")            
              box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.0);   
            }
        custom_fields:
          btn:
            card:
              type: custom:mushroom-chips-card
              chips:
                - type: template
                  tap_action:
                    action: toggle
                  icon: mdi:lightbulb-outline
                  entity: light.philips_bulb_1
                  card_mod:
                    style: |
                      ha-card {
                        --chip-background: {{ 'rgba(255,255,255,0.7)' if is_state('light.philips_bulb_1', 'on') else 'rgba(0,0,0,0.1)' }};
                        border: none;
                        padding: 0px!important;
                        border-radius: 10px!important;
                      }
                - type: template
                  tap_action:
                    action: toggle
                  icon: mdi:led-strip-variant
                  entity: light.philips_strip_1
                  card_mod:
                    style: |
                      ha-card {
                        --chip-background: {{ 'rgba(255,255,255,0.7)' if is_state('light.philips_strip_1', 'on') else 'rgba(0,0,0,0.1)' }};
                        border: none;
                        padding: 0px!important;
                        border-radius: 10px!important;
                      }   
                - type: template
                  tap_action:
                    action: toggle
                  icon: mdi:television
                  entity: media_player.bedroom_tv
                  card_mod:
                    style: |
                      ha-card {
                        --chip-background: {{ 'rgba(255,255,255,0.7)' if is_state('media_player.bedroom_tv', 'on') else 'rgba(0,0,0,0.1)' }};
                        border: none;                       
                        padding: 0px!important;
                        border-radius: 10px!important;
                      } 
        styles:
          grid:
            - grid-template-areas: '"n btn" "s btn" "i btn"'
            - grid-template-columns: 1fr min-content
            - grid-template-rows: min-content min-content 1fr
          card:
            - padding: 10px 10px 10px 10px
            - height: 132px
          custom_fields:
            btn:
              - justify-content: end
              - align-self: start
          name:
            - justify-self: start
            - align-self: start
            - font-size: 18px
            - font-weight: 500
            - color: light-grey
          state:
            - min-height: 80px
            - justify-self: start
            - align-self: start
            - font-size: 14px
            - opacity: '1'
          img_cell:
            - position: absolute
            - width: 60px
            - height: 60px
            - left: 0
            - bottom: 0
            - margin: 0 0 10px 10px
            - background: rgba(0,0,0,0.1)
            - border-radius: 10px
          icon:
            - width: 50px
            - color: light-grey
            - opacity: '1'
        show_state: true
      - type: custom:button-card
        name: Living
        icon: mdi:sofa-outline
        entity: none
        card_mod:
          style: |
            ha-card > div {
              padding: 0px 0px 0px!important;
            }
            ha-card {
              padding: 10px 10px!important;
              border: none;
              border-radius: 10px;
              background-color: rgba(0,0,0,0.1);
              box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.0);
            }
        custom_fields:
          btn:
            card:
              type: custom:mushroom-chips-card
              chips:
                - type: template
                  tap_action:
                    action: toggle
                  icon: mdi:bullhorn-outline
                  entity: switch.neo_siren_1_alarm
                  card_mod:
                    style: |
                      ha-card {
                        --chip-background: {{ 'rgba(255,255,255,0.7)' if is_state('switch.neo_siren_1_alarm', 'on') else 'rgba(0,0,0,0.1)' }};
                        border: none;
                        padding: 0px!important;
                        border-radius: 10px!important;
                      }
                - type: template
                  tap_action:
                    action: toggle
                  icon: mdi:led-strip-variant
                  entity: light.philips_strip_2
                  card_mod:
                    style: |
                      ha-card {
                        --chip-background: {{ 'rgba(255,255,255,0.7)' if is_state('light.philips_strip_2', 'on') else 'rgba(0,0,0,0.1)' }};
                        border: none;
                        padding: 0px!important;
                        border-radius: 10px!important;
                      }   
        styles:
          grid:
            - grid-template-areas: '"n btn" "s btn" "i btn"'
            - grid-template-columns: 1fr min-content
            - grid-template-rows: min-content min-content 1fr
          card:
            - padding: 10px 10px 10px 10px
            - height: 132px
          custom_fields:
            btn:
              - justify-content: end
              - align-self: start
          name:
            - justify-self: start
            - align-self: start
            - font-size: 18px
            - font-weight: 500
            - color: light-grey
          state:
            - min-height: 80px
            - justify-self: start
            - align-self: start
            - font-size: 14px
            - opacity: '0.7'
          img_cell:
            - justify-content: start
            - position: absolute
            - width: 60px
            - height: 60px
            - left: 0
            - bottom: 0
            - margin: 0 0 10px 10px
            - background: rgba(0,0,0,0.1)
            - border-radius: 10px
          icon:
            - width: 40px
            - color: light-grey
            - opacity: '1'
            - padding: 10px
        show_state: true
    columns: 2

[Mngsps]

Hey there:
Can anyone help me reducing the space in between the icon and the primary info of the entity in this entity-filter card?
Is there a way to change the color of the switches at the end of the rows (without changing the theme)?

Many thanks in advance!

[ro23n5onouihn (Randy)]

I just started having an issue with text sizing and line spacing after a recent update. (Not sure which one.)

About a year ago, I created a card with the help of this forum that gives me a weather forecast with variable font sizing based on the length of the forecast. For example, “Sunny. High near 70.” will be in a larger font than “A chance of rain showers after 1am. Mostly cloudy, with a low around 40. Chance of precipitation is 50%. New rainfall amounts less than a tenth of an inch possible.”

Here’s the code:

      - type: custom:mushroom-template-card
        primary: ''
        secondary: >-
          {{ state_attr('weather.knyc_daynight',
          'forecast')[0].detailed_description }}
        icon: ''
        entity: weather.knyc_daynight
        tap_action:
          action: more-info
        fill_container: true
        multiline_secondary: true
        view_layout:
          grid-area: m2
        card_mod:
          style: |
            ha-card {
              --card-secondary-font-size: calc((-0.0035 * {{ state_attr('weather.knyc_daynight', 'forecast')[0].detailed_description | length }} * 1em) + 2.1em);
              --card-secondary-font-weight: bold;
              margin: -7px -2px;
            } 

It’s been working fine for the better part of a year, but now I’m getting output that looks like this:

I see that some other people have recently posted similar issues regarding line spacing (what changed?), but their solutions involve specifying a static line height. Is there an easy way to fix this given the variable font size?

[Mariusthvdb (Marius)]

is this still supposed to work?
Ive tried it with:

type: media-control
entity: media_player.googlehome_slaapkamer
card_mod:
  style: |
    .background.no-image > * {
      background-color: green;
    }

as a longstanding wish to finally color those idle players, but there is no result:

trying this in inspector makes it happen on background: green, and no !important is required, as it doesn’t make a difference, cant touch it.

Anyone succeed in coloring the idle background?

silly thing is some colors can be set, only in hex, and none of the theme variables seem to do anything.
Is this a special card…?

using my older

type: media-control
entity: media_player.googlehome_slaapkamer
card_mod:
  style: |
    .player {
      background-color: var(--primary-color);
    }

kind of works, but, as before, loses the player icon

and setting the opacity on the background kills the color…

[arganto]

@Mariusthvdb

Anyone succeed in coloring the idle background?

Sure that you have the no-image class in your example?

Here it is working as in yours. Even the direct way:

type: media-control
entity: media_player.sonos_keller
card_mod:
  style: |
    .player.no-image {
      background-color: var(--state-unavailable-color);
    }

… including variables.

And this is not removing the player icon.

card_mod:
  style: |
    .background.no-image .color-block,
    .background.no-image .no-img {
      background-color: var(--state-unavailable-color);
    }

You are so experienced. You don’t you look in the DOM and color, what you want to color?

[Mariusthvdb (Marius)]

well of course I do, been a that for a few now, so not lazy…

just couldn’t find the correct Dom, (admittedly I was seeking in Safari inspector, should probably have openened Chrome for that…)

but…

your first example does color correctly (and hides the player icon ,like in my own example.)

your second does Not hide the player icon, but has awkward color effect as I experienced before. see:

same for theme vars, there is some magic manipulation goin on

as we have a state-media_player-active-color I was really hoping we could just set an inactive-color in the theme and be done with it.

unfortunately that only applies a color to the icon of the entity (eg in more-info) and not to the media-control card

state-media_player-off-color: pink

or -inactive

[arganto]

@Mariusthvdb

but has awkward color effect

What do you mean?

BTW, here it is working. Perhaps because of different sources with different capabilities.

[Ildar_Gabdullin]

The posted code still work.

[kg888 (Kelly Graus)]

Is it possible to add an icon using just card-mod? I’m currently adding a battery percentage to my mushroom cover cards. I’d love to have a battery icon next to the percent but I haven’t found a way. Is it possible or would I need to do a total redesign using something like mod-card?

For reference, here’s what I’m currently using (I’m using auto-entities to dynamically generate the cards from groups):

type: custom:mushroom-cover-card
card_mod:
  style: |
    ha-card:after {
      content: "{{ states('sensor.' ~ config.entity.split('.')[1] ~ '_battery') }}%";
      position: absolute;
      left: 90%;
      width: 16px;
      height: 16px;
      font-size: 11px;
    }

I’ve tried using stack-in-card with the horizontal mode, but I wasn’t able to figure out how to resize the sub cards so the cover card took most of the horizontal space. So any ideas on that would also be greatly appreciated!

[arganto]

@Ildar_Gabdullin

The posted code still work.

Alerady confirmed this above

@arganto

Here it is working as in yours.

But removes the images. Therefor my (additional) different approach.

[Ildar_Gabdullin]

@arganto

But removes the images. Therefor my (additional) different approach.

Sorry, do not understand, which images?