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

[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

[P6Dave (Dave Forrester)]

Hey folks. I’m struggling with a feature I’m trying to create in an entities card using card-mod. I have this card which is basically a control panel for a few helpers I use so I can see at a glance if anything is wrongly set. I want to be able to colour the text-field-fill either green or red based on an input_boolean , but I can’t get it to work. I don’t even know if it’s possible and I’ve been through this entire thread several times as well as reading all the documentation and guides on CSS variables and card-mod.

This is what I want to achieve:

This is the current yaml

- entity: select.solaredge_i1_storage_default_mode
        name: Actual Storage Default Mode
        card_mod: null
        style: |
          :host: >
             {% if is_state('input_boolean.default_battery_storage_mode_correct',    'on' ) %}
               { --mdc-select-fill-color: green;}
             {% else %}
               { --mdc-select-fill-color: red; }
             {% endif %}

If this is possible I’d really appreciate a steer in the right direction.

Just to add that

card_mod: null
        style: |
          :host { --mdc-select-fill-color: green; }

does change the fill colour to green.

[CDRX2]

Try removing the :> you have after the :host tag.

[Ildar_Gabdullin]

… or just go to the 1st post → link at the bottom → styles for input-select

[P6Dave (Dave Forrester)]

Try removing the :> you have after the :host tag.

This has absolutely no effect on the result. The fill stays white.

… or just go to the 1st post → link at the bottom → styles for input-select

That is an amazing thread. It’s where I got most of the info on how to do this from.

BUT

I can’t see anywhere in the

→ styles for input-select

where it explains how to use a template to change the fill colour based on the template result.

[Ildar_Gabdullin]

@P6Dave

fill colour based on the template result.

This is the simplest part, ANY style may be added like:

element {
  {% if .... %}
  property: value_1;
  {% else %}
  property: value_2; ### or just omit the whole "else" part if not needed
  {% endif %}
}