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

[cooltings]

Hello I was wondering if it is possible to round the corners of a webpage card. This is what I have however it isn’t doing anything.

type: iframe
url: >-
  ----------------------
aspect_ratio: 57%
card_mod:
  style: |
    ha-card{
      border-radius: 25px
    }

[Ildar_Gabdullin]

The code you posted seems to be absolutely not related to the picture.
Explanations are needed.
Also, I strongly suggest you never ever use dark theme when asking questions - many users can barely see different shades in such dark pictures.
Sorry, this is absolutely not to teach you - just a matter of assistance!

[cooltings]

In the code i have set the border radius to be 25 px yet, as the picture shows, it is square

[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