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

[Zenia (Yevgeniy)]

Not sure if it’s right place to ask, but please help me to reduce space between icon and text. TY

type: custom:stack-in-card
mode: vertical
cards:
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-template-card
        primary: First Floor
        icon: mdi:home-floor-1
        icon_color: teal
        card_mod:
          style: |
            ha-card {
               --card-primary-font-size: 1rem;
               border: none;
               box-shadow: none;
               background: rgba(0,0,0,0);
               margin-top: rem;
               margin-left:5rem
            }
  - type: horizontal-stack
    cards:
      - type: custom:button-card
        show_name: true
        show_icon: true
        icon: mdi:sofa
        size: 25px
        color: teal
        card_mod:
          style: |-
            ha-card {              
              {% if states('light.living_room_lights') == 'on' %}
              box-shadow: 0px 0px 5px 5px #CBC3E3 !important;
              {% else %}
              box-shadow: 5px 10px 5px -3px rgba(0,0,0,0.75);
              {% endif %}      
              {% if is_state('light.living_room_lights','on') %}
              background: rgba(255, 152, 0, 0.1) !important;
              {% endif %}
              font-size: 10px !important;
              }
        tap_action:
          action: navigate
          navigation_path: living-room
        layout: icon_name
        name: Living Room
        theme: ios-dark-mode
      - type: custom:button-card
        show_name: true
        show_icon: true
        icon: mdi:pot-steam
        size: 25px
        color: teal
        card_mod:
          style: |-
            ha-card {              
              {% if states('light.kitchen_lights_2') == 'on' %}
              box-shadow: 0px 0px 5px 5px #CBC3E3 !important;
              {% else %}
              box-shadow: 5px 10px 5px -3px rgba(0,0,0,0.75);
              {% endif %}      
              {% if is_state('light.kitchen_lights_2','on') %}
              background: rgba(255, 152, 0, 0.1) !important;
              {% endif %}
              font-size: 10px !important;
              }        
        tap_action:
          action: navigate
          navigation_path: kitchen
        layout: icon_name_state
        name: 'Kitchen  '
        theme: ios-dark-mode
  - type: horizontal-stack
    cards:
      - type: custom:button-card
        show_name: true
        show_icon: true
        icon: mdi:hat-fedora
        size: 25px
        color: teal
        card_mod:
          style: |-
            ha-card {              
              {% if states('light.hallway_lights') == 'on' %}
              box-shadow: 0px 0px 5px 5px #CBC3E3 !important;
              {% else %}
              box-shadow: 5px 10px 5px -3px rgba(0,0,0,0.75);
              {% endif %}      
              {% if is_state('light.hallway_lights','on') %}
              background: rgba(255, 152, 0, 0.1) !important;
              {% endif %}
              font-size: 10px !important;
              }        
        tap_action:
          action: navigate
          navigation_path: hallway
        layout: icon_name_state
        name: Hallway
        theme: ios-dark-mode
      - type: custom:button-card
        show_name: true
        show_icon: true
        icon: mdi:bathtub
        size: 25px
        color: teal
        card_mod:
          style: |-
            ha-card {              
              {% if states('light.light') == 'on' %}
              box-shadow: 0px 0px 5px 5px #CBC3E3 !important;
              {% else %}
              box-shadow: 5px 10px 5px -3px rgba(0,0,0,0.75);
              {% endif %}      
              {% if is_state('light.light','on') %}
              background: rgba(255, 152, 0, 0.1) !important;
              {% endif %}
              font-size: 10px !important;
              }        
        tap_action:
          action: navigate
          navigation_path: my-bathroom
        layout: icon_name_state
        name: My Bathroom
        theme: ios-dark-mode
  - type: horizontal-stack
    cards:
      - type: custom:button-card
        show_name: true
        show_icon: true
        icon: mdi:go-kart
        size: 25px
        color: teal
        card_mod:
          style: |-
            ha-card {              
              {% if states('light.garage_lights_light') == 'on' %}
              box-shadow: 0px 0px 5px 5px #CBC3E3 !important;
              {% else %}
              box-shadow: 5px 10px 5px -3px rgba(0,0,0,0.75);
              {% endif %}      
              {% if is_state('light.garage_lights_light','on') %}
              background: rgba(255, 152, 0, 0.1) !important;
              {% endif %}
              font-size: 10px !important;
              }        
        tap_action:
          action: navigate
          navigation_path: garage
        layout: icon_name_state
        name: Garage
        theme: ios-dark-mode
      - type: custom:button-card
        show_name: true
        show_icon: true
        icon: phu:outside
        size: 25px
        color: teal
        card_mod:
          style: |-
            ha-card {              
              {% if states('light.outside_lights') == 'on' %}
              box-shadow: 0px 0px 5px 5px #CBC3E3 !important;
              {% else %}
              box-shadow: 5px 10px 5px -3px rgba(0,0,0,0.75);
              {% endif %}      
              {% if is_state('light.outside_lights','on') %}
              background: rgba(255, 152, 0, 0.1) !important;
              {% endif %}
              font-size: 10px !important;
              }        
        tap_action:
          action: navigate
          navigation_path: outside
        layout: icon_name_state
        name: Outside
        theme: ios-dark-mode
card_mod:
  style: |
    ha-card {  
      background-size: 100% 100%;
      background-image: url({{/local/png/weather/cloudy.gif}});

    }                     

TY

[pmgsrosa (Pedro Rosa)]

Hi there,

A little bit of help please.
I was using the following code on some cards:

card_mod:
  style:
    ha-tile-icon$: |
      .shape { 
        border-radius: 15px !important;
        height: 60px !important;
        width: 60px !important;
        margin-top: 10px !important;
        margin-bottom: 2px !important;
      } 
    ha-tile-info$: |
      .primary {
        font-size: 16px !important;
        font-weight: bold !important;
      }              
      .secondary {
        font-size: 15px !important;
      }                
    style: |
      ha-card {
        color: red;
        height: 80px !important;  
      }

It does what I want however the page is ok when loaded but after some seconds get stuck and in need to reload the page.
This only happed when I have the

  style: |
      ha-card {

part included. If I took it out it’s ok.
This happens whatever the code I have on that part.

Anyone can help?
Thanks!.

[Ildar_Gabdullin]

card-mod must have ONE “style” keyword.
go to 1st post of the thread → link at the bottom → other stuff → combining

[pmgsrosa (Pedro Rosa)]

Thank you very much for the pointer

card_mod:
  style:
    ha-tile-icon$: |
      .shape { 
        border-radius: 15px !important;
        height: 60px !important;
        width: 60px !important;
        margin-top: 10px !important;
        margin-bottom: 2px !important;
      } 
    ha-tile-info$: |
      .primary {
        font-size: 16px !important;
        font-weight: bold !important;
      }              
      .secondary {
        font-size: 15px !important;
      }                
    .: |
      ha-card {
        color: red;
        height: 80px !important;  
      }

[cweakland (Chris)]

Is it possible to change aspects of the new “sections” ? I would like to change the font size and padding for the style h2.title. Is this something that can be done?

[Ildar_Gabdullin]

A bit tweaked version of a very interesting card - fluid-level-background-card:
repo
related issue fixed by this tweak
dedicated thread in Community

type: custom:mod-card
card_mod:
  style:
    fluid-level-background-card $: |
      div#container {
        border: none;
        box-shadow: none;
      }          
      .type-custom-fluid-level-background-card {
        border: none;
        box-shadow: none;
      }
      fluid-background {
        border-radius: var(--ha-card-border-radius,12px);
      }
card:
  type: custom:fluid-level-background-card
  card:
    type: glance
    entities:
      - entity: sun.sun
        name: Beer level
  entity: input_number.test_level_1
  fill_entity: input_boolean.test_boolean
  level_color: [242,142,28]

[LiQuid_cOOled]

That has so many card application possibilities. Awesome!

I saw a few backgrounds like this with rain drops, spraying water droplets etc…when researching sprinkler animation.

[Ildar_Gabdullin]

@LiQuid_cOOled

I saw a few backgrounds like this with rain drops, spraying water droplets etc…when researching sprinkler animation.

Would be great to have these animations shared somewhere!

[Timmuhhh (Tim)]

@Opontios

    card_mod:
      style:
        hui-generic-entity-row:
          $: |            
            :host {              
                --md-slider-active-track-color: var(--disabled-text-color);
                --md-slider-inactive-track-color: var(--disabled-text-color);
                --md-slider-handle-color: var(--disabled-text-color);                
                --paper-item-icon-color: var(--disabled-text-color);                
                color: var(--disabled-text-color);
                pointer-events: none;                      
            }

Did somebody manage to get the pointer-events: none working?

[Timmuhhh (Tim)]

I want to change the pointer-events: to “none”

The full JS path is document.querySelector(“body > home-assistant”).shadowRoot.querySelector(“hui-dialog-edit-card”).shadowRoot.querySelector(“ha-dialog > div.content > div.element-preview > hui-card-preview > hui-vertical-stack-card”).shadowRoot.querySelector(“#root > hui-vertical-stack-card”).shadowRoot.querySelector(“#root > hui-entities-card:nth-child(1)”).shadowRoot.querySelector(“#states > div > slider-entity-row”).shadowRoot.querySelector(“div > ha-slider”).shadowRoot.querySelector(“#end”)

If i run it trough Card Mod Helper i get this string:
“body>home-assistant$hui-dialog-edit-card$ha-dialog>div.content>div.element-preview>hui-card-preview>hui-vertical-stack-card$#root>hui-vertical-stack-card$#root>hui-entities-card:nth-child(1)$#states>div>slider-entity-row$div>ha-slider$#end”

I cant find the code to alter pointer-events on the place I show in the screenshot on the right side.

I’ve been on it for days and completely clueless, can somebody help me?

[LiQuid_cOOled]

Have you tried just entering it under ha-card? Your post want clear you were asking about the custom:slider-entity-row

type: entities
title: Pointer
entities:
  - entity: sun.sun
card_mod:
 style: |
   ha-card {
     pointer-events: none;
   }

[Timmuhhh (Tim)]

I’ve embedded this:

card_mod:
  style: |
    ha-card {
      {% if is_state('media_player.speakers_tim_bed','off') %}
      pointer-events: none;
      {% endif %}
    }

at the bottem of the vertical-stack where the sliders are located. Is i run the above code trough the tester the output is:

card_mod:
  style: |
    ha-card {
      
      pointer-events: none;
      
    }

This does nothing for me.

For good mesure, I also tried to add it into the card within the vertical-stack

type: entities
title: Front Left
entities:
  - type: custom:slider-entity-row
    entity: input_number.speakers_bed_front_left_niveau
    full_row: true
card_mod:
  style: |
    ha-card {
      --ha-card-header-font-size: 14px;
      {% if is_state('media_player.speakers_tim_bed','off') %}
      pointer-events: none;
      {% endif %}
    }

This also didnt work for me

[LiQuid_cOOled]

You want no action on the slider if speaker is off, correct?

[Timmuhhh (Tim)]

Yes correct

[LiQuid_cOOled]

I’ll let you know if I get it. You can stop it in the dev tool, but struggling to execute in card_mod.

[Timmuhhh (Tim)]

For troubleshooting I made a new card, more basic:

type: entities
name: Front Left
entities:
  - input_number.speakers_bed_front_left_niveau
card_mod:
  style: |
    ha-card {
      pointer-events: none;
    }

This results in the red part being non-clickable but the green part being clickable:

[Timmuhhh (Tim)]

Thanks man! appreciate the time and effort you put into this!

[Zenia (Yevgeniy)]

Is it possible to add border highlight to each floor and also a room when lights is on to Vertical Stacked Navigation Card ?
Like this:

type: custom:stack-in-card
mode: vertical
cards:
  - type: vertical-stack
    cards:
      - type: custom:mushroom-template-card
        primary: Basement
        icon: mdi:home-floor-b
        icon_color: teal
        card_mod:
          style: |
            ha-card {
               --card-primary-font-size: 1rem;
               border: none;
               box-shadow: none;
               background: rgba(0,0,0,0);
               font-weight: bold;
               margin-top: rem;
               margin-left:5rem
            }
      - type: horizontal-stack
        cards:
          - type: custom:mushroom-template-card
            primary: Basement
            secondary: null
            icon: mdi:escalator-down
            icon_color: teal
            card_mod:
              style: |
                ha-card {              
                  {% if states('light.basement_lights') == 'on' %}
                  box-shadow: 0px 0px 5px 5px #CBC3E3 !important;
                  {% else %}
                  box-shadow: 5px 10px 5px -3px rgba(0,0,0,0.75);
                  {% endif %}      
                  {% if is_state('light.basement_lights','on') %}
                  background: rgba(255, 152, 0, 0.1) !important;
                  {% endif %}
                  --card-primary-font-size: 10px;
                  --card-primary-font-weight: bold;
                  width: 150px;
                  margin-left: 5px !important;
                }
            tap_action:
              action: navigate
              navigation_path: basement
            fill_container: true
            layout: horizontal
            multiline_secondary: false
          - type: custom:mushroom-template-card
            primary: Laundry
            secondary: null
            icon: mdi:tumble-dryer
            icon_color: teal
            card_mod:
              style: |
                ha-card {              
                  {% if states('light.laundry_vanity_light_light') == 'on' %}
                  box-shadow: 0px 0px 5px 5px #CBC3E3 !important;
                  {% else %}
                  box-shadow: 5px 10px 5px -3px rgba(0,0,0,0.75);
                  {% endif %}      
                  {% if is_state('light.laundry_vanity_light_light','on') %}
                  background: rgba(255, 152, 0, 0.1) !important;
                  {% endif %}
                  --card-primary-font-size: 10px;
                  --card-primary-font-weight: bold;
                  width: 150px;
                }
            tap_action:
              action: navigate
              navigation_path: laundry
            fill_container: true
            layout: horizontal
            multiline_secondary: false
      - type: horizontal-stack
        cards:
          - type: custom:mushroom-template-card
            primary: Utility Room
            secondary: null
            icon: mdi:water-boiler
            icon_color: teal
            card_mod:
              style: |
                ha-card {              
                  {% if states('light.utility_room_light_light_2') == 'on' %}
                  box-shadow: 0px 0px 5px 5px #CBC3E3 !important;
                  {% else %}
                  box-shadow: 5px 10px 5px -3px rgba(0,0,0,0.75);
                  {% endif %}      
                  {% if is_state('light.utility_room_light_light_2','on') %}
                  background: rgba(255, 152, 0, 0.1) !important;
                  {% endif %}
                  --card-primary-font-size: 10px;
                  --card-primary-font-weight: bold;
                  width: 150px;
                  margin-left: 5px !important;
                }
            tap_action:
              action: navigate
              navigation_path: utility-room
            fill_container: true
            layout: horizontal
            multiline_secondary: false
          - type: custom:mushroom-template-card
            primary: HA Info
            secondary: null
            icon: ios:cpu
            icon_color: teal
            card_mod:
              style: |
                ha-card {              

                  --card-primary-font-size: 10px;
                  width: 150px;
                }
            tap_action:
              action: navigate
              navigation_path: ha-information
            fill_container: true
            layout: horizontal
            multiline_secondary: false
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-chips-card
        chips:
          - type: entity
card_mod:
  style: |
    ha-card {
      --vertical-stack-card-gap: 10px;
      background: url('/local/MyPictures/rock wall.jpg');
      background-size: 100%;
    }

to this:

type: custom:vertical-stacked-navigation-card
nav_name: 🏡
nav_items:
  - name: First Floor
    icon: mdi:home-floor-1
    sub_nav_items:
      - name: Living Room
        icon: mdi:sofa
        destination: living-room-1
        active: false
      - name: Kitchen
        icon: mdi:pot-steam
        destination: kitchen
        active: false
      - name: Hallway
        icon: mdi:hat-fedora
        destination: hallway
      - name: My Bathroom
        icon: mdi:shower-head
        destination: my-bathroom
      - name: Garage
        icon: mdi:go-kart
        destination: garage
      - name: Kids Room
        icon: mdi:teddy-bear
        destination: kids-room
      - name: Outside
        icon: phu:outside-temp
        destination: outside
    active: false
    unfolded: false
  - name: Second Floor
    icon: mdi:home-floor-2
    destination: ''
    sub_nav_items:
      - name: Upstairs
        icon: mdi:escalator-up
        destination: upstairs
      - name: Master Bedroom
        icon: mdi:bed-king
        destination: master-bedroom
      - name: Sonia's Room
        icon: mdi:zodiac-leo
        destination: sonia-room
      - name: Artem's Room
        icon: mdi:zodiac-taurus
        destination: lovelace
  - name: Basement
    icon: mdi:home-floor-b
    destination: ''
    sub_nav_items:
      - name: Basement
        icon: mdi:escalator-down
        destination: basement
      - name: Laundry
        icon: mdi:tumble-dryer
        destination: laundry
      - name: Utility Room
        icon: mdi:water-boiler
        destination: utility-room
      - name: HA Info
        icon: mdi:cpu-64-bit
        destination: ha-information
custom_styles:
  colors:
    text:
      main: White
      sub: White
    hover:
      main: Teal
      sub: Teal
    active:
      sub: orange
    background:
      main: Transparent
      sub: Transparent
  font_size:
    text:
      main: 25px
      sub: 20px
card_mod:
  style: |
    ha-card {
      background: url('/local/MyPictures/rock wall.jpg');
      background-size: 100%;
    }

I want each floor to light up a border when lights in any room on this floor is ON and also see which room it is
Thank you

[zinfandel (Tim)]

I’m wondering if someone can provide some advice for combining card-mod styles that are set up using the “|” after “style:” and ones that don’t. For example, I can get both of these card-mod styles to work on their own, but I haven’t found a way to integrate them together into the one set of instructions.

card_mod:
  style: |
    ha-card {
      background: var(--tile-color) !important;
      border-radius: 5px !important;
    }
    ha-tile-icon {
      --tile-color: white;
    }

card_mod:
  style:
    hui-card-features$:
      hui-light-brightness-card-feature$:
        ha-control-slider$: |
          .slider {
            --control-slider-color: white !important;
            --control-slider-background: white !important;
          }

Both of the above work, but how do I combine them so I can use both at once?

[zinfandel (Tim)]

Actually, I was able to work it out…

card_mod:
  style:
    hui-card-features$:
      hui-light-brightness-card-feature$:
        ha-control-slider$: |
          .slider {
            --control-slider-color: white !important;
            --control-slider-background: white !important;
          }
    .: |
      ha-card {
        background: var(--tile-color) !important;
        border-radius: 5px !important;
        --primary-font-size: 20px;
        --primary-font-weight: normal;
      }
      ha-tile-icon {
        --tile-color: white;
      }