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

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

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.

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

ā€¦ or just go to the 1st post ā†’ link at the bottom ā†’ styles for input-select

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.

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 %}
}
1 Like

Sorted, thanks. Not quite the solution you posted, although Iā€™m sure that would work too. What didnā€™t help was that I was using the wrong :host.

Hereā€™s the working code:

card_mod: null
style: >
  {% if is_state('input_boolean.default_battery_storage_mode_correct' ,  'on' )  %}
   :host { --mdc-select-fill-color: green;}
  {% else %}
   :host { --mdc-select-fill-color: red; }
  {% endif %}

Has anyone modified their expander card with card-mod, particularly the title size and color?

could anyone help me with this? I want to put a background color in green when certain input boolean is true, but itā€™s not working:

type: gauge
entity: sensor.mysensor
name: name
card_mod:
  style: |
    ha-card[state='on'] {
      {% if is_state('input_boolean.mybool', 'on') %}
        --ha-card-background: #30bf51;
      {% endif %}
    }

also tried:

type: gauge
entity: sensor.mysensor
name: name
card_mod: null
style: |
  {% if is_state('input_boolean.mybool' ,  'on' )  %}
   :host {ha-card: green;}
  {% else %}
   :host {ha-card: red; }
  {% endif %}