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

[Ildar_Gabdullin]

Never used layout-card as a card (only for a view) - but a similar thing may be achieved by stack-in-card, compare:

code for the bottom card

type: custom:stack-in-card
keep:
  background: true
cards:
  - type: markdown
    content: '{{states(''sun.sun'')}}'
    view_layout:
      grid-area: date
    card_mod:
      style: |
        ha-card {
            background: transparent;
            border: none;
            font-size: 12px;
            text-align: center;
        }
  - type: markdown
    content: '{{states(''sun.sun'')}}'
    view_layout:
      grid-area: time
    card_mod:
      style: |
        ha-card {
            background: transparent;
            border: none;
            font-weight: bold;
            font-size: 20px;
            text-align: center;
            padding-bottom: 30px
        }
  - type: markdown
    content: Home <ha-icon icon="mdi:home"></ha-icon>
    card_mod:
      style: |
        ha-card {
            background: red;
            box-shadow: 10;
            border: none;
            text-align: left;
            border-radius: 0px;
            padding-left: 30px;
        }
  - type: markdown
    content: Lampen <ha-icon icon="mdi:lightbulb-group"></ha-icon>
    card_mod:
      style: |
        ha-card {
            background: grey;
            border: none;
            text-align: left;
            border-radius: 0px;
            padding-left: 30px;
        }    
  - type: markdown
    content: Lampen <ha-icon icon="mdi:lightbulb-group"></ha-icon>
    card_mod:
      style: |
        ha-card {
            background: green;
            border: none;
            text-align: left;
            border-radius: 0px;
            padding-left: 30px;
        }       

If you do not need a background & borders for the stack - this may be fixed by card-mod,

[thedjelectron]

Ildar - Your posts here have been unbelievably over the last year or so. Thank you!!!

I am stuck and just cannot figure this out. I am trying to modify the scrollbar to have a color of none.

When I add --scrollbar-thumb-color: red !important; or ::-webkit-scrollbar: none just about anywhere in the chrome devtools, the scrollbar changes color properly. However, nothing I have tried in yaml has worked.

Here’s just one version of the code I have tried:

card_mod:
  class: middle-right
  style: |
    .content ha-logbook $ ha-logbook-renderer $: |
      .container .ha-scrollbar {
        overflow-y: auto !important;
        --scrollbar-thumb-color: green !important;
      }
    ha-logbook {
      height: 16.1vh !important;
    }

I realize that code isn’t quite right. I have tried so many different frustrating versions…

I will really appreciate any help you send my way! I’ll bet the fix is simple for you to see

[Ildar_Gabdullin]

The style may NOT be applied.

type: logbook
entities:
  - sun.sun
hours_to_show: 72
card_mod:
  style:
    ha-logbook $:
      ha-logbook-renderer $: |
        .container.ha-scrollbar {
          overflow-y: auto !important;
          --scrollbar-thumb-color: cyan !important;
        }
    .: |
      ha-logbook {
        height: 200px !important;
      }

Probably better to use a technics similar to styling images in Logbook.

[thedjelectron]

Thank you for the fast reply!!! I looked at that method a few times, but it seemed a bit beyond me. I will give it a try and see what happens.

Interestingly, that may also help streamline code for a group of us who have been using the LCARS theme.

I appreciate it!

[Tarcisio (Tarcisio Alves de Menezes)]

Hello guys!
I’m struggling with the alignment.
I’d like to be able to do alignments for the Icons at the bottom of the card (start, justify, end and center). All the cards are Mushroom Template cards and I’m using stack-in-card to combine them and card-mod to style (remove borders, background and etc…)

How could I align the icons to the end? Thank you!

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    card_mod:
      style: |
        ha-card {--ha-card-border-width: 0}
        ha-card {padding-top: 5px !important}
        ha-card {padding-bottom: 0px !important}
        ha-card {padding-left: 5px !important}
        :host { --mush-icon-size: 55px }
    primary: Office
    secondary: >-
      {{ states('sensor.bedroom_xiaomi_clock_sensor_temperature') |round }}°F |
      {{ states('sensor.bedroom_xiaomi_clock_sensor_humidity') |round }}%
    icon: mdi:flask
    icon_color: orange
    badge_icon: |-
      {% if states('binary_sensor.closet_door_contact') != 'off' %}
      mdi:door-open
      {% endif %}
    badge_color: red
  - type: custom:stack-in-card
    card_mod:
      style: |
        ha-card {--ha-card-border-width: 0}
    mode: horizontal
    cards:
      - type: custom:mushroom-light-card
        card_mod:
          style: >
            ha-card {padding-top: 3px !important}

            ha-card {padding-bottom: 0px !important}

            mushroom-shape-icon { --shape-color: none !important }

            mushroom-shape-icon { --shape-color-disabled: transparent
            !important}

            :host { --mush-icon-size: 50px }
        entity: light.office_wall_light
        primary_info: none
        secondary_info: none
        layout: vertical
        use_light_color: true
      - type: custom:mushroom-light-card
        card_mod:
          style: >
            ha-card {padding-top: 3px !important}

            ha-card {padding-bottom: 0px !important}

            mushroom-shape-icon { --shape-color: none !important }

            mushroom-shape-icon { --shape-color-disabled: transparent
            !important}

            :host { --mush-icon-size: 50px }
        entity: light.office_wall_light
        primary_info: none
        secondary_info: none
        layout: vertical
        use_light_color: true

[Mariusthvdb (Marius)]

trying to copy the tab bar styling of my main dashboard to the tabbed-card, I do:

type: custom:mod-card
card_mod:
  style:
    tabbed-card $:
      mwc-tab:
        $:
          mwc-tab-indicator $: |
           .mdc-tab-indicator__content--underline {
              border-color: var(--text-color-off) !important;
            }

          .: |
            .mdc-tab {
              min-width: 40px !important;;
              background: {{'radial-gradient(var(--primary-color),var(--card-background-color)) !important'
                       if states('input_select.theme')|regex_search('(ight|Dark|Matrix)')
                        else 'var(--primary-color)'}};
            }
            .material-icons {
              display: contents !important;
            }
            .mdc-tab--active {
              --mdc-icon-size: {{states('input_number.active_icon_size')}}px;
              /*background: var(--text-color-off) !important;*/
            }

and that does work

though it is not what I want. Id like the gradient to span the complete mwc-tabbed-bar, just like my main menu bar:

I probably need to set it to a higher level in the Dom,

but fail to find the correct syntax.
would appreciate a second eye please?

Update

nvm me… its late:

type: custom:mod-card
card_mod:
  style:
    tabbed-card $: |
      mwc-tab-bar {
        background: {{'radial-gradient(var(--primary-color),var(--card-background-color)) !important'
           if states('input_select.theme')|regex_search('(ight|Dark|Matrix)')
            else 'var(--primary-color)'}};
      }
      mwc-tab:
        $:
          mwc-tab-indicator $: |
           .mdc-tab-indicator__content--underline {
              border-color: var(--text-color-off) !important;
            }

          .: |
            .mdc-tab {
              min-width: 40px !important;
            }
            .material-icons {
              display: contents !important;
            }
            .mdc-tab--active {
              --mdc-icon-size: {{states('input_number.active_icon_size')}}px;
              /*background: var(--text-color-off) !important;*/
            }

does it. I feared to add the pipe at the top

tabbed-card $: |

but it works, very nice indeed:

[Tarcisio (Tarcisio Alves de Menezes)]

Hello guys!
Does anybody know how would be the yaml to change this --mdc-icon-size property in card-mod?
Changing on chrome does exactly what I need, but I can’t find out how I’m supposed to do in yaml.

[Mariusthvdb (Marius)]

first real hit in the correct thread

Mushroom Cards - Build a beautiful dashboard easily (Part 1)

No, just icons. You can tweak the icon size so that it centers better. [winner] type: custom:mushroom-template-card primary: Winner secondary: '' icon: mdi:trophy badge_icon: mdi:numeric-1-circle icon_color: amber badge_color: blue card_mod: style: | ha-card { --badge-icon-size: 0.8em; }

but, I see your not looking for the badge icon?
anyways, your chances are best in that thread, Rhys has an enormous amount of posts there

[Tarcisio (Tarcisio Alves de Menezes)]

I thought I’d be here cause I’m using card-mod to style the cards.
Anyways, I posted there. Thank you.

[Mariusthvdb (Marius)]

Sure, I’ll follow along, like to know what the result will be

[rhysb (Rhys)]

For reference, answered here:

Mushroom Cards - Build a beautiful dashboard easily (Part 1)

You can control the Mushroom Badge & Icon sizes like this. Mushroom Icon Size: [Mushroom Icon Size] type: custom:mushroom-template-card primary: Mushroom icon: mdi:mushroom icon_color: red card_mod: style: | :host { --mush-icon-size: 50px; --mush-icon-symbol-size: 0.8em; } If you want to change it globally, then add this to your theme: mush-icon-size: 50px; mush-icon-symbol-size: 0.8em; Mushroom Badge Size: [Mushroom Badge Size] type: custom:mushroom-tem…

[DuckDuck25]

I’m new to HA, but having a problem getting Card-mod installed/working properly. I’m using HACS to install it, latest HAOS version on a RPi. I got Card-mod listed under Frontend. I’m also using Watchman that has a couple of card-mod uses.

I’m not sure if the path my configuration.yaml is right. I first started with the GiHub suggested path if using HACS. Restarted HA services, and the watchman cards aren’t rendering with the card-mod changes. I then tried other js paths such as:

Load frontend themes from the themes folder

frontend:
themes: !include_dir_merge_named themes
extra_module_url:
- /root/config/www/community/lovelace-card-mod/card-mod.js

But the Watchman card mods aren’t actually rendering at all…I just see the card_mod css style text. What am I doing wrong?

[derekisastro (derek bredl)]

Looking for some help here. I am a noob and I’m trying to piece some things together.

The basic issue relates to Tuya based thermostats. I’m trying to display a sensor value within the thermostat card so I can get the correct unit value for the current temperature. And for the life of me, I just can’t work out how people know what code to use to fill what areas. I sort of get the whole ‘inspect’ thing and I can drill down to the attribute I believe I want to change but beyond that, I’m lost. Is there a good guide somewhere to learn this stuff?

I want that number, the ‘64’ to be repalced with a value from a sensor. I have the template to get the value just don’t get how to use card-mod to alter the card to reference the template to replace the ‘64’?

Thanks for any kind input.

[Richi (Stefan Richter)]

Hello! I have used a button card for my media player. The problem is, when a song is playing i can not see the full text. Is it possible to let the text sliding from the right side to the left?
Best regards
Stefan

[Faecon (Jo)]

how do you use this ?

[dansity]

Hi,
Can someone explain me why is this not working? For clarity: the plugin does working, I have trouble with this particular override.

[Maxi1134]

Hey guys!

I am trying to get media players to stack nicely on a given vertical space.
This is the code I am trying.

Does anyone sees what I’m doing wrong?

type: custom:mod-card
style: |
  ha-card {
    height: 423px;
  }
card:
  type: custom:hui-vertical-stack-card
  cards:
    - type: conditional
      conditions:
        - entity: media_player.office_chromecast
          state_not: 'off'
        - entity: media_player.plex_office_chromecast
          state_not: unavailable
      card:
        type: custom:config-template-card
        variables:
          real_media_entity: states['media_player.office_chromecast'].entity_id
          plex_media_entity: states['media_player.plex_office_chromecast'].entity_id
        entities:
          - ${plex_media_entity}
        card:
          type: custom:mini-media-player
          entity: ${plex_media_entity}
          group: true
          volume_stateless: false
          toggle_power: true
          artwork: full-cover
          scale: '1'
          shortcuts:
            columns: 5
            buttons:
              - icon: mdi:play-pause
                type: service
                id: media_player.media_play_pause
                data:
                  entity_id: ${real_media_entity}
              - icon: mdi:stop
                type: service
                id: media_player.turn_off
                data:
                  entity_id: ${real_media_entity}
              - icon: mdi:volume-minus
                type: service
                id: media_player.volume_down
                data:
                  entity_id: ${real_media_entity}
              - icon: mdi:volume-plus
                type: service
                id: media_player.volume_up
                data:
                  entity_id: ${real_media_entity}
              - icon: mdi:skip-next
                type: service
                id: media_player.media_seek
                data:
                  entity_id: ${real_media_entity}
                  seek_position: 56000
          card_mod:
            style: |
              ha-card {
                height: auto;
              }
              :host {
                --mini-media-player-overlay-base-color: white;
                --mini-media-player-overlay-accent-color: red;
                --mini-media-player-media-cover-info-color: white;
                --mini-media-player-accent-color: red;
                --mini-media-player-background-opacity: 1;
                --mini-media-player-progress-height: 10px;
                --mini-media-player-button-color: rgba(0,0,0,0.75);
                } 
    - type: conditional
      conditions:
        - entity: media_player.office_chromecast
          state_not: 'off'
        - entity: media_player.plex_office_chromecast
          state: unavailable
      card:
        type: custom:config-template-card
        variables:
          real_media_entity: states['media_player.office_chromecast'].entity_id
          plex_media_entity: states['media_player.office_chromecast'].entity_id
        entities:
          - ${plex_media_entity}
        card:
          type: custom:mini-media-player
          entity: ${plex_media_entity}
          group: true
          volume_stateless: false
          toggle_power: true
          artwork: full-cover
          scale: '1'
          shortcuts:
            columns: 5
            buttons:
              - icon: mdi:play-pause
                type: service
                id: media_player.media_play_pause
                data:
                  entity_id: ${real_media_entity}
              - icon: mdi:stop
                type: service
                id: media_player.turn_off
                data:
                  entity_id: ${real_media_entity}
              - icon: mdi:volume-minus
                type: service
                id: media_player.volume_down
                data:
                  entity_id: ${real_media_entity}
              - icon: mdi:volume-plus
                type: service
                id: media_player.volume_up
                data:
                  entity_id: ${real_media_entity}
              - icon: mdi:skip-next
                type: service
                id: media_player.media_seek
                data:
                  entity_id: ${real_media_entity}
                  seek_position: 56000
          card_mod:
            style: |
              ha-card {
                height: auto;
              }
              :host {
                --mini-media-player-overlay-base-color: white;
                --mini-media-player-overlay-accent-color: red;
                --mini-media-player-media-cover-info-color: white;
                --mini-media-player-accent-color: red;
                --mini-media-player-background-opacity: 1;
                --mini-media-player-progress-height: 10px;
                --mini-media-player-button-color: rgba(0,0,0,0.75);
                } 
    - type: conditional
      conditions:
        - entity: media_player.group_home_speakers
          state_not: 'off'
        - entity: media_player.plex_group_home_speakers
          state_not: unavailable
      card:
        type: custom:config-template-card
        variables:
          real_media_entity: states['media_player.office_speaker'].entity_id
          plex_media_entity: states['media_player.plex_group_home_speakers'].entity_id
        entities:
          - ${plex_media_entity}
        card:
          type: custom:mini-media-player
          entity: ${plex_media_entity}
          group: true
          volume_stateless: false
          toggle_power: true
          artwork: full-cover
          scale: '1'
          shortcuts:
            columns: 5
            buttons:
              - icon: mdi:play-pause
                type: service
                id: media_player.media_play_pause
                data:
                  entity_id: ${real_media_entity}
              - icon: mdi:stop
                type: service
                id: media_player.turn_off
                data:
                  entity_id: ${real_media_entity}
              - icon: mdi:volume-minus
                type: service
                id: media_player.volume_down
                data:
                  entity_id: ${real_media_entity}
              - icon: mdi:volume-plus
                type: service
                id: media_player.volume_up
                data:
                  entity_id: ${real_media_entity}
              - icon: mdi:skip-next
                type: service
                id: media_player.media_seek
                data:
                  entity_id: ${real_media_entity}
                  seek_position: 56000
          card_mod:
            style: |
              ha-card {
                height: auto;
              }
              :host {
                --mini-media-player-overlay-base-color: white;
                --mini-media-player-overlay-accent-color: red;
                --mini-media-player-media-cover-info-color: white;
                --mini-media-player-accent-color: red;
                --mini-media-player-background-opacity: 1;
                --mini-media-player-progress-height: 10px;
                --mini-media-player-button-color: rgba(0,0,0,0.75);
                } 
    - type: conditional
      conditions:
        - entity: media_player.group_home_speakers
          state_not: 'off'
        - entity: media_player.plex_group_home_speakers
          state: unavailable
      card:
        type: custom:config-template-card
        variables:
          real_media_entity: states['media_player.office_speaker'].entity_id
          plex_media_entity: states['media_player.office_speaker'].entity_id
        entities:
          - ${plex_media_entity}
        card:
          type: custom:mini-media-player
          entity: ${plex_media_entity}
          group: true
          volume_stateless: false
          toggle_power: true
          artwork: full-cover
          scale: '1'
          shortcuts:
            columns: 5
            buttons:
              - icon: mdi:play-pause
                type: service
                id: media_player.media_play_pause
                data:
                  entity_id: ${real_media_entity}
              - icon: mdi:stop
                type: service
                id: media_player.turn_off
                data:
                  entity_id: ${real_media_entity}
              - icon: mdi:volume-minus
                type: service
                id: media_player.volume_down
                data:
                  entity_id: ${real_media_entity}
              - icon: mdi:volume-plus
                type: service
                id: media_player.volume_up
                data:
                  entity_id: ${real_media_entity}
              - icon: mdi:skip-next
                type: service
                id: media_player.media_seek
                data:
                  entity_id: ${real_media_entity}
                  seek_position: 56000
          card_mod:
            style: |
              ha-card {
                height: auto;
              }
              :host {
                --mini-media-player-overlay-base-color: white;
                --mini-media-player-overlay-accent-color: red;
                --mini-media-player-media-cover-info-color: white;
                --mini-media-player-accent-color: red;
                --mini-media-player-background-opacity: 1;
                --mini-media-player-progress-height: 10px;
                --mini-media-player-button-color: rgba(0,0,0,0.75);
                } 

But the cards inside are overflowing

[derekisastro (derek bredl)]

Maybe a silly question given that I am also a noob but are you able to confirm that the card you are trying to modify (the stack card) is/or has the ha-card element in inspector?

It has been mentioned many times that the stack cards, vertical and horizontal do not have the ha-card element and I do realize your card is a community designed stack card but figured it’s worth confirming if you haven’t already done so, Again, might be a silly noob question.

[robinmull112 (Robin)]

Hello everyone,

I have read this topic and I have gained a lot of inspiration from it!

I’m having a problem with a card that I have build. It’s a card to start my favourite radio stations via a script on one of my Sonos speakers. It works, but it’s not visually pleasing. As you can see, there are still some borders and lines that I wish to hide. So I want to create a single card without borders with the information / scripts / volume sliders in it. I guess it is possible via media player card edit / card mods, but I don’t know how. Can anyone please help me?

This is the code that I have used:

cards:
  - cards:
      - entity: media_player.sonos_move_keuken
        type: media-control
        tap_action:
          action: more-info
      - entity: media_player.sonos_move_keuken
        hide:
          icon: true
          info: true
          mute: true
          power: true
          source: true
          volume: true
          name: true
          controls: true
        mini-media-player-progress-height: 1px
        progress: true
        shortcuts:
          buttons:
            - data:
                entity_id: script.new_script
              image: /local/SLAM-MM.png
              id: script.turn_on
              name: null
              type: service
            - data:
                entity_id: script.new_script_2
              image: /local/SLAM40!.png
              id: script.turn_on
              name: null
              type: service
            - data:
                entity_id: script.new_script_3
              image: /local/SLAM Hardstyle.png
              id: script.turn_on
              name: null
              type: service
            - data:
                entity_id: script.new_script_4
              image: /local/SLAMFM.png
              id: script.turn_on
              name: null
              type: service
            - data:
                entity_id: script.new_script_5
              image: /local/Radio 538.png
              id: script.turn_on
              name: null
              type: service
            - data:
                entity_id: script.new_script_6
              image: /local/Radio 538 DD.png
              id: script.turn_on
              name: null
              type: service
          columns: 3
        show_group_count: true
        show_progress: true
        type: custom:mini-media-player
        volume_stateless: true
      - entity: media_player.sonos_move_keuken
        hide:
          controls: true
          icon: true
          info: true
          max_volume: 100
          min_volume: 0
          name: hide
          play_pause: true
          power: true
          progress: true
          source: true
        type: custom:mini-media-player
    type: vertical-stack
mode: vertical
type: custom:stack-in-card

Thanks!

[davo]

I am wanting to pad input_datetime on/off label without moving icon, and increase size of font in the time select numbers.

If I add the following code it moves/pads the icon and text over, and only increases the font size for the label.

  - entity: input_datetime.hotwater_on
    card_mod:
      style: |
        hui-generic-entity-row {
          color: white;
          padding-left 52px; 
          font-size: 22px;
        }
    name: 'On time'

For the time select numbers i have tried to modify input.mdc-text-field_input but that didnt work.

Thanks