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

Hi there,
Can anybody please help me create an input selection card with buttons instead of the standard dropdown?

I’m in the following stage and would like the three buttons’ width to fill the entire width of the card. Distributed evenly and centered buttons’ content.

Code
type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: Notify Michal
    icon: mdi:message-badge
    entity: input_select.doorbell_notification_away_michal
    icon_color: blue
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        entity: input_select.doorbell_notification_away_michal
        tap_action:
          action: call-service
          service: input_select.select_option
          data:
            option: Today
          target:
            entity_id: input_select.doorbell_notification_away_michal
        icon: null
        content: Today
        card_mod:
          style: |
            ha-card {
              {% if is_state('input_select.doorbell_notification_away_michal', 'Today') %}
                --chip-background: rgba(var(--rgb-blue), 0.7);
              {% else %}
                --chip-background: inherit;  # set it to the default or whatever color you want
              {% endif %}
            }
      - type: template
        entity: input_select.doorbell_notification_away_michal
        tap_action:
          action: call-service
          service: input_select.select_option
          data:
            option: 'On'
          target:
            entity_id: input_select.doorbell_notification_away_michal
        icon: null
        content: 'On'
        card_mod:
          style: |
            ha-card {
              {% if is_state('input_select.doorbell_notification_away_michal', 'On') %}
                --chip-background: rgba(var(--rgb-blue), 0.7);
              {% else %}
                --chip-background: inherit;  # set it to the default or whatever color you want
              {% endif %}
            }
      - type: template
        entity: input_select.doorbell_notification_away_michal
        tap_action:
          action: call-service
          service: input_select.select_option
          data:
            option: 'Off'
          target:
            entity_id: input_select.doorbell_notification_away_michal
        icon: null
        content: 'Off'
        card_mod:
          style: |
            ha-card {
              {% if is_state('input_select.doorbell_notification_away_michal', 'Off') %}
                --chip-background: rgba(var(--rgb-blue), 0.7);
              {% else %}
                --chip-background: inherit;  # set it to the default or whatever color you want
              {% endif %}
            }
    alignment: Center
    card_mod:
      style: |
        ha-card {
          margin: 0px 12px 12px;
          --chip-background: rgba(var(--rgb-disabled), 0.15);
          --chip-box-shadow: none;
          --chip-border-radius: 10px;
          --chip-height: 42px;
          --chip-padding:10px;
        }

I’m trying to achieve something similar to this.

Appreciate your help!

1 Like

Is something like this what you are looking for? (Play around with the width percentage as desired).

type: custom:mushroom-chips-card
chips:
  - type: template
    icon: mdi:ab-testing
    content: tests
    card_mod:
      style: | 
        ha-card {justify-content: center;}
  - type: template
    icon: mdi:ab-testing
    content: tests
    card_mod:
      style: | 
        ha-card {justify-content: center;}
card_mod:
  style: |
    mushroom-template-chip {
      width: 45%; 
    }
    div.chip-container {
      justify-content: space-evenly;
    }

1 Like


That works, thanks a lot @Roderik! Would be nice to have it done in a way so it automatically determines the right width as a certain width % value that works well on one device doesn’t work on another but I can live without that.

Code
type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: Notify Michal when Away
    icon: mdi:message-badge
    entity: input_select.doorbell_notification_away_michal
    icon_color: blue
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        entity: input_select.doorbell_notification_away_michal
        tap_action:
          action: call-service
          service: input_select.select_option
          data:
            option: Today
          target:
            entity_id: input_select.doorbell_notification_away_michal
        icon: null
        content: Today
        card_mod:
          style: |
            ha-card {
              justify-content: center;
              {% if is_state('input_select.doorbell_notification_away_michal', 'Today') %}
                --chip-background: rgba(var(--rgb-blue), 0.7);
              {% else %}
                --chip-background: inherit;  # set it to the default or whatever color you want
              {% endif %}
            }
      - type: template
        entity: input_select.doorbell_notification_away_michal
        tap_action:
          action: call-service
          service: input_select.select_option
          data:
            option: 'On'
          target:
            entity_id: input_select.doorbell_notification_away_michal
        icon: null
        content: 'On'
        card_mod:
          style: |
            ha-card {
              justify-content: center;
              {% if is_state('input_select.doorbell_notification_away_michal', 'On') %}
                --chip-background: rgba(var(--rgb-blue), 0.7);
              {% else %}
                --chip-background: inherit;  # set it to the default or whatever color you want
              {% endif %}
            }
      - type: template
        entity: input_select.doorbell_notification_away_michal
        tap_action:
          action: call-service
          service: input_select.select_option
          data:
            option: 'Off'
          target:
            entity_id: input_select.doorbell_notification_away_michal
        icon: null
        content: 'Off'
        card_mod:
          style: |
            ha-card {
              justify-content: center;
              {% if is_state('input_select.doorbell_notification_away_michal', 'Off') %}
                --chip-background: rgba(var(--rgb-blue), 0.7);
              {% else %}
                --chip-background: inherit;  # set it to the default or whatever color you want
              {% endif %}
            }
    alignment: Center
    card_mod:
      style: |
        mushroom-template-chip {
          width: 30%; 
        }
        div.chip-container {
          justify-content: space-evenly;
        }

        ha-card {
          margin: 0px 12px 12px;
          --chip-background: rgba(var(--rgb-disabled), 0.15);
          --chip-box-shadow: none;
          --chip-border-radius: 10px;
          --chip-height: 42px;
          --chip-padding:10px;
        }

Played around a little longer.
If you set the width to 100% and add “flex-wrap: nowrap;” to the div.chip-container it should automatically scale for you.
Can you check if this works?

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: Notify Michal when Away
    icon: mdi:message-badge
    entity: input_select.doorbell_notification_away_michal
    icon_color: blue
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        entity: input_select.doorbell_notification_away_michal
        tap_action:
          action: call-service
          service: input_select.select_option
          data:
            option: Today
          target:
            entity_id: input_select.doorbell_notification_away_michal
        icon: null
        content: Today
        card_mod:
          style: |
            ha-card {
              justify-content: center;
              {% if is_state('input_select.doorbell_notification_away_michal', 'Today') %}
                --chip-background: rgba(var(--rgb-blue), 0.7);
              {% else %}
                --chip-background: inherit;  # set it to the default or whatever color you want
              {% endif %}
            }
      - type: template
        entity: input_select.doorbell_notification_away_michal
        tap_action:
          action: call-service
          service: input_select.select_option
          data:
            option: 'On'
          target:
            entity_id: input_select.doorbell_notification_away_michal
        icon: null
        content: 'On'
        card_mod:
          style: |
            ha-card {
              justify-content: center;
              {% if is_state('input_select.doorbell_notification_away_michal', 'On') %}
                --chip-background: rgba(var(--rgb-blue), 0.7);
              {% else %}
                --chip-background: inherit;  # set it to the default or whatever color you want
              {% endif %}
            }
      - type: template
        entity: input_select.doorbell_notification_away_michal
        tap_action:
          action: call-service
          service: input_select.select_option
          data:
            option: 'Off'
          target:
            entity_id: input_select.doorbell_notification_away_michal
        icon: null
        content: 'Off'
        card_mod:
          style: |
            ha-card {
              justify-content: center;
              {% if is_state('input_select.doorbell_notification_away_michal', 'Off') %}
                --chip-background: rgba(var(--rgb-blue), 0.7);
              {% else %}
                --chip-background: inherit;  # set it to the default or whatever color you want
              {% endif %}
            }
    alignment: Center
    card_mod:
      style: |
        mushroom-template-chip {
          width: 100%; 
        }
        div.chip-container {
          justify-content: space-evenly;
          flex-wrap: nowrap;
        }

        ha-card {
          margin: 0px 12px 12px;
          --chip-background: rgba(var(--rgb-disabled), 0.15);
          --chip-box-shadow: none;
          --chip-border-radius: 10px;
          --chip-height: 42px;
          --chip-padding:10px;
        }
1 Like

The following card_mod code should turn “:warning: Low Batteries!” to blue and it will turn the titles of each sub card to green. Hopefully you can use it to get the desired effect (wasn’t sure what title you wanted changed, the top one, or the individual ones).

type: custom:mod-card
card_mod:
  style:
    hui-grid-card:
      $: |
        .card-header {
          color: white !important;
        }
    $: |
      :host {
        --ha-card-header-color: blue;
        --primary-text-color: green;
      }

Awesome, thanks @Roderik! Looks only slightly better but it is much safer in terms of the reusability of the card.

Buttons now adjust the width % automatically!

Code
type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: Notify Michal when Away
    icon: mdi:message-badge
    entity: input_select.doorbell_notification_away_michal
    icon_color: blue
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        entity: input_select.doorbell_notification_away_michal
        tap_action:
          action: call-service
          service: input_select.select_option
          data:
            option: Today
          target:
            entity_id: input_select.doorbell_notification_away_michal
        icon: null
        content: Today
        card_mod:
          style: |
            ha-card {
              justify-content: center;
              {% if is_state('input_select.doorbell_notification_away_michal', 'Today') %}
                --chip-background: rgba(var(--rgb-blue), 0.7);
              {% else %}
                --chip-background: inherit;  # set it to the default or whatever color you want
              {% endif %}
            }
      - type: template
        entity: input_select.doorbell_notification_away_michal
        tap_action:
          action: call-service
          service: input_select.select_option
          data:
            option: 'On'
          target:
            entity_id: input_select.doorbell_notification_away_michal
        icon: null
        content: 'On'
        card_mod:
          style: |
            ha-card {
              justify-content: center;
              {% if is_state('input_select.doorbell_notification_away_michal', 'On') %}
                --chip-background: rgba(var(--rgb-blue), 0.7);
              {% else %}
                --chip-background: inherit;  # set it to the default or whatever color you want
              {% endif %}
            }
      - type: template
        entity: input_select.doorbell_notification_away_michal
        tap_action:
          action: call-service
          service: input_select.select_option
          data:
            option: 'Off'
          target:
            entity_id: input_select.doorbell_notification_away_michal
        icon: null
        content: 'Off'
        card_mod:
          style: |
            ha-card {
              justify-content: center;
              {% if is_state('input_select.doorbell_notification_away_michal', 'Off') %}
                --chip-background: rgba(var(--rgb-blue), 0.7);
              {% else %}
                --chip-background: inherit;  # set it to the default or whatever color you want
              {% endif %}
            }
    alignment: Center
    card_mod:
      style: |
        mushroom-template-chip {
          width: 100%; 
        }
        div.chip-container {
          justify-content: space-evenly;
          flex-wrap: nowrap;
        }

        ha-card {
          margin: 0px 12px 12px;
          --chip-background: rgba(var(--rgb-disabled), 0.15);
          --chip-box-shadow: none;
          --chip-border-radius: 10px;
          --chip-height: 42px;
          --chip-padding:10px;
        }

3 Likes

separtor

Here it is. Thank you in advance.

Answered you in GitHub.
In short:
– download & replace js-file (if it is not done yet);
– in case of issues - use card-mod.

Answering your question about bar-card:

type: custom:stack-in-card
keep:
  background: true
cards:
  - type: entities
    entities:
      - entity: input_number.test_level_1
      - entity: input_number.test_level_2
      - entity: input_number.test_level_3
    card_mod:
      style: |
        ha-card {background: red}
  - type: custom:bar-card
    severity:
      - from: '0'
        to: '0'
        hide: true
      - from: '1'
        to: '40'
        color: '#007A00'
      - from: '41'
        to: '90'
        color: '#EA9000'
      - from: '91'
        to: '100'
        color: '#C41400'
    entities:
      - entity: input_number.test_level_1
      - entity: input_number.test_level_2
      - entity: input_number.test_level_3
    card_mod:
      style: |
        ha-card {
          {% if states('input_number.test_level_1')|int == 0 and
                states('input_number.test_level_2')|int == 0 and
                states('input_number.test_level_3')|int == 0 %}
            display: none;
          {% endif %}
        }

This mod hides the whole bar-card if none of bars is displayed (to avoid undesired space).

image

image

1 Like

Hi @Ildar_Gabdullin thank you. I was able to get rid of the separator by using the updated version of Stack-in-card. However, now there’s a big empty space when the bottom card doesn’t have any items visible. How do I use card-mod to remove that extra space at the bottom?
Screenshot 08-05-2023 at 06.07.25 PM

Below, is what my current code looks like:

type: custom:stack-in-card
mode: vertical
cards:
  - type: entities
    title: iGPU
    entities:
      - entity: sensor.cpu_gt_core_temperature
        name: Core Temperature
      - entity: sensor.gpu_d3d_memory_dynamic_memory
        name: Dynamic RAM
  - type: custom:bar-card
    severity:
      - from: '0'
        to: '0'
        hide: true
      - from: '1'
        to: '40'
        color: '#007A00'
      - from: '41'
        to: '90'
        color: '#EA9000'
      - from: '91'
        to: '100'
        color: '#C41400'
    entities:
      - entity: sensor.gpu_d3d_usage
        name: iGPU Usage
      - entity: sensor.gpu_video_decode_0_usage
        name: Video Decoder 0
      - entity: sensor.gpu_video_decode_1_usage
        name: Video Decoder 1
      - entity: sensor.gpu_video_processing_0_usage
        name: Video Encoder 0
      - entity: sensor.gpu_video_processing_1_usage
        name: Video Encoder 1

Thanks so much in advance!

mmmmmm, I used a Time machine & posted an answer earlier))
Seems you have not read my longread in your github post yet))

Thank you!! This was such a clever way to hide the card. I really appreciate it! It worked like a charm.

Now THAT’s how it should look out of the box. Brilliantly done.

hello, trying to reduce the size of the header image of the plant-card. was able to get it to work on my browser, but any change to the image does not go through on lenovo smart display which just displays the dashboard via a webpage. inspecting the element of the lenovo display using chrome shows that the size isnt changing. any suggestion on how to fix this?

                        - type: custom:flower-card
                          entity: plant.snake_plant
                          show_bars:
                            - illuminance
                            - moisture
                            - conductivity
                            - temperature
                          battery_sensor: sensor.plant_sensor_63a3_battery
                          style: |
                            ha-card {
                              .header {
                                height: 72px
                              };
                              .header > img {
                                width: 25px; !important
                                height: 25px; !important
                                margin-top: 10px
                              };
                              margin-top: 0px !important
                            };

Hi there,

I’m having this card with conditional switches in it and I just cannot get the icons colored:

type: entities
title: Schlafzimmer
entities:
  - type: conditional
    conditions:
      - entity: switch.drucker
        state: 'off'
    row:
      entity: switch.drucker
      type: button
      icon: mdi:printer-off
      name: Drucker aus
      action_name: Einschalten
      card_mod:
        style: |
          :host {
            --paper-item-icon-color: red;
          }
  - type: conditional
    conditions:
      - entity: switch.drucker
        state: 'on'
    row:
      entity: switch.drucker
      type: button
      icon: mdi:printer
      name: Drucker an
      action_name: Ausschalten
    style:
      hui-simple-entity-row$: |
        hui-generic-entity-row {
          --paper-item-icon-color: orange;          
        }
  - type: conditional
    conditions:
      - entity: input_boolean.fernsehereg
        state: 'off'
    row:
      entity: sun.sun
      icon: mdi:desk-lamp
      name: Test entity
    style:
      hui-simple-entity-row$: |
        hui-generic-entity-row {
          --paper-item-icon-color: red;          
        }

image
The icon in the last entry, conditional too, is colored red, just as wanted, but none of the above two work! Is it because they are switches?

Please help,
zavjah

No idea, getting some weird results…

I am trying to change stack-in-card’s header “padding-bottom” to 0px globally to all my stack-in-card’s via my theme.yaml.

The only way I can change the CSS style is via a single stack-in-card via Developer Tools (in the screenshot example below). I’ve already spent hours on this trying to figure this out on my own without any luck. I am hoping someone will be able to help; as I’ve tried everything I possibly could.

I tried applying card-mod custom CSS via stack-in-card code below without any luck.

Things I’ve tried…

cards:
  - entities:
      - entity: sensor.titan_download_speed
        icon: mdi:speedometer
        name: Download Speed
      - entity: sensor.titan_upload_speed
        icon: mdi:speedometer
        name: Upload Speed
    type: entities
  - aspect_ratio: 56%
    camera_view: live
    entity: camera.desktop
    show_state: false
    type: picture-entity
title: Server
type: custom:stack-in-card
card_mod:
    style: |
        .card-header, :host ::slotted(.card-header) {
             padding-bottom: 0px !important;
        }

I also tried:

card_mod:
    style: |
        ha-card.card-header, h1.card-header {
           padding-bottom: 0 !important;
        }

and…

card_mod: |
    style: |
        ha-card.type-custom-stack-in-card, h1.card-header {
           padding-bottom: 0px !important;
        }

Not a single thing I tried works, unfortunately.

Don’t you see that the “card-header” is inside shadowRoot?

code
type: custom:stack-in-card
title: xxxxxxxxxxxxxxxxxxx
cards:
  - type: entities
    entities:
      - entity: sun.sun
  - show_state: false
    show_name: true
    type: picture-entity
    entity: sun.sun
    image: /local/images/test/ishimura.png
card_mod:
  style:
    $: |
      .card-header {
        background: cyan;
      }

@Ildar_Gabdullin thank you so much. This is my first experience with shadowRoot. The code works within that specific card.

I tried to globally make this change in my theme.yaml (see code below); however, it doesn’t seem to affect any of my similar stack-in-cards. I completely deleted the web browser cache and reloaded the webpage without any luck.

I just appended the card-mod code you gave me to the bottom of my theme.yaml file (code below)… however, it didn’t make any difference:

  card-mod-theme: techleech
  header-height: 56px 
  card-mod-root: |
    .edit-mode, app-header, app-toolbar {
      background: var(--app-header-background-color) !important;
      color: var(--primary-text-color) !important;
    }
    ha-tabs {
      --paper-tabs-selection-bar-color: var(--primary-color) !important;
    }
    paper-tab[aria-selected=true] {
      color: var(--primary-color) !important;
    }
  card-mod-row-yaml: |
    .: |
      hui-generic-entity-row {
        height: 38px;
      }
  card_mod:
    $: |
      .card-header {
        padding-bottom: 0 !important;
      }
  1. Card-mod-themes are discussed in another thread.
  2. Check this: THIS thread → 1st post → link at the bottom → themes → styling classes.
1 Like