šŸ”¹ Card-mod - Add css styles to any lovelace card

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,

1 Like

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

ŠøŠ·Š¾Š±Ń€Š°Š¶ŠµŠ½ŠøŠµ

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.

2 Likes

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!

1 Like

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!

image

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

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:

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.

first real hit in the correct thread :wink:

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

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

1 Like

Sure, Iā€™ll follow along, like to know what the result will be :wink:

For reference, answered here:

2 Likes

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?

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.

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

how do you use this ?

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

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

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.

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!

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