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

andy_mk3 · June 24, 2023, 7:31pm

Can anyone please help me to increase the font size for the Mushroom Thermostat card temperature control?

type: custom:mushroom-climate-card
entity: climate.bedroom_ac
layout: vertical
show_temperature_control: true
secondary_info: none
tap_action:
  action: call-service
  service: switch.toggle
  target:
    entity_id: switch.bedroom_ac_toggle
  data: {}
icon: mdi:snowflake
collapsible_controls: false
hvac_modes: []
fill_container: false
card_mod:
  style: |
    ha-card { 
    --card-primary-font-size: 1.6em;
    }

Any help would be greatly appreciated.

joseecm · June 25, 2023, 6:13pm

Hi all!

I have a vertical-stack with a media-control card and a custom-button card. I have modified the size of the button so that it does not occupy the entire width of the column and my ultimate goal is to place the button on top of the control-card and align it after the next track button.

Below I show my code.

- type: custom:mod-card
  card:
    type: vertical-stack
    card-mod:
      style: |
        ha-card {
          display: flex;
          justify-content: center;
        }
    cards:
      - type: media-control
        entity: media_player.musiccast_kitchen

      - type: custom:button-card
        icon: mdi:link-variant
        styles:
          card:
            - width: 50px
            - height: 50px
            - position: relative
            - transform: translate(100px, -100px)

The problem is that depending on the screen (mobile, tablet…) the relative position of the button with respect to the media-control card varies.
Is there a way to make this not happen?
If it’s not possible, how can I at least make the button appear centered in the column?

I’m totally new to card-mod, so I’d appreciate if someone could help me.

Ildar_Gabdullin · June 25, 2023, 6:24pm

Start with fixing this:

When using mod-card - styles are supposed to be defined on mod-card level.

spunkt123 · June 26, 2023, 9:08am

I would like to change the style “–grid-card-column-count” of a hui-grid-card.

<hui-grid-card style="--grid-card-column-count: 2;"></hui-grid-card>

I tried the following - but it does not work

  type: grid
  card_mod:
    style:
      hui-grid-card$: |
        hui-grid-card {
          --grid-card-column-count: {{ 1 if user == 'handy' else 2 }} !important;
        }

Could please someone help?

oneseventhree · June 26, 2023, 9:12am

Hi everyone,
I’ve noticed that the newer HA updates have added a box around my once boxless/shadowless card:

I can’t seem to figure out how to remove it.

I’ve tried:
ha-card-border: 0px
ha-card-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.16)
ha-card-border-width: 0
ha-card-box-shadow: 0px
with no luck.

Am I missing anything in the below code?:

type: custom:mod-card
card:
  type: custom:mushroom-title-card
  title: '{{ now().strftime(''%I'') }}:{{ now().strftime(''%M %p'') | lower }}'
  subtitle: >-
    {{ now().strftime('%A') }}, {{ now().strftime('%B') }} {{
    now().strftime('%d') }}
card_mod:
  style:
    mushroom-title-card$: |
      .header {
        --title-padding: 12px 12px 3px;
      }
      .title {
        font-size: 34px!important;
        spacing: 100px;
      }
      .subtitle {
        font-size: 25px!important;
      }
      ha-card {
        height: 98px !important;
      }
      ha-card-border: 0px
      }
      ha-card-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.16)
      }
      ha-card-border-width: 0
      }
      ha-card-box-shadow: 0px
      }

Thanks in advance

arganto · June 26, 2023, 9:30am

Same as for the stack cards. Have a look in the developer tools of your browser. There is no ha-card element, which is needed for ingesting code via card-mod. So you have to place a mod-card around it here as well. See here.

joseecm · June 26, 2023, 2:39pm

Thanks for pointing me in the right direction. I have put the styles on mod-card level and tried to apply the style only for the custom:button-card but the code doesn’t work. Surely because the selector is not correct.
Please, could you tell me what I’m doing wrong.

- type: custom:mod-card
  card:
    type: vertical-stack
    cards:
      - type: media-control
        entity: media_player.musiccast_kitchen
      - type: custom:button-card
        icon: mdi:link   
  card_mod:
    style: 
      ha-card $: 
        hui-vertical-stack-card $: 
          div#root button-card$:
            div#aspect-ratio ha-card: |
              .button-card-main {
                  position: relative;
                  display: block;
                  margin: auto;
                  width: 60%;
                  justify-content: center;
              }

Ildar_Gabdullin · June 26, 2023, 3:34pm

Path must be defined in accordance to Code Inspector.

type: custom:mod-card
card:
  type: vertical-stack
  cards:
    - type: media-control
      entity: media_player.kodi_rpi_1
    - type: custom:button-card
      icon: mdi:link-variant
card_mod:
  style:
    hui-vertical-stack-card $ div#root button-card $: |
      div#aspect-ratio .button-card-main {
        ...
      }

joseecm · June 26, 2023, 5:24pm

Thank you very much for your help, the truth is that I am having a hard time understanding how to build the selector.
I have a question, why the selector you have indicated works and the following doesn’t?

hui-vertical-stack-card $ div#root button-card $ div#aspect-ratio: |
  .button-card-main {
    ...
  }

Ildar_Gabdullin · June 26, 2023, 5:30pm

¯\_(ツ)_/¯
probably because this is how card-mod works)))

joseecm · June 26, 2023, 5:59pm

Sorry if my questions are too basic but, what means when you put div#aspect-ratio in the next line? I am not supposed to follow the objects in the code Inspector?

Ildar_Gabdullin · June 26, 2023, 6:11pm

Frankly speaking, from my experience I do not expect some 100% predicted behaviour.
Sometimes I need to do this:

xxx $:
  xxx $: |
    xxx {...}

sometimes it does not work and I have to do this:

xxx $ xxx $: |
    xxx {...}

Next, instead of this:

xxx $ xxx $ xxx: |
    xxx {...}

I usually use this:

xxx $ xxx $: |
    xxx xxx {...}

but may be in some cases the upper variant can work, I am not sure ))).
Experiment!

parautenbach · June 27, 2023, 5:00am

Basically what Ildar said, but to add on a bit:

What you need to understand is that after the | the CSS that follows will go into a <card-mod> element inside the last element you navigated to with the part before the |.

My guess here (without seeing the HTML) is that the .button-card-main class sits on that last div so you can’t apply the style inside it — it’s a done deal by that point. You must go up one level.

Also, that div selector targets specifically a div with ID #aspect-ratio to disambiguate it from other divs there possibly might be at the same level.

The least frustrating approach for me to do things with card-mod is to add or change the CSS in a live page until I get what I want and then backwards to figure out how I must configure it.

Krispkiwi · June 28, 2023, 6:33am

Is there a way to make mushroom chip cards transparent? I can make other mushroom cards transparent with card mod using the following but it doesn’t work with chip cards

card_mod:
      style: |
        ha-card {
          --paper-card-background-color: transparent;
          --secondary-background-color: transparent;
          background: transparent;
          border: transparent;
          box-shadow: none
        }

david-romero · June 28, 2023, 7:56am

Hi, I need some help with a conditional card that I need to configure with a max width.

type: conditional
    conditions:
      - entity: input_boolean.mail_to_collect
        state: 'on'
    card:
      type: custom:mushroom-template-card
      entity: input_boolean.mail_to_collect
      icon: mdi:mailbox
      primary: Hay Cartas
      content_info: name
      icon_color: red
      badge_icon: mdi:email
      badge_color: red
      tap_action:
        action: more-info
      card_mod:
        style: |
          :host {
            max-width: 120px;
          }
    card_mod:
      style: |
        hui-conditional-card {
          max-width: 5px;
        }
        hui-conditional-card:first-child {
          max-width: 120px;
        }
        :host {
          --column-max-width: 120px;
          max-width: 120px;
        }
        #root {
          max-width: 120px;
        }

Could you help me, please? I want to configure the conditional card with a max width of 120 px.

NuttShell · June 28, 2023, 8:49am

type: custom:mushroom-chips-card
chips:
  - type: menu
  - type: back
  - type: entity
  - type: spacer
  - type: light
    entity: light.yeelight_lamp
  - type: spacer
card_mod:
  style: |
      ha-card {
         --chip-background: red; #in your case --chip-background: none;
         --chip-border-width:0px;
         --chip-box-shadow: none;
       }

For mushroom card all, what you need is here:
Mushroom Cards - Build a beautiful dashboard easily - Share your Projects! - Home Assistant Community (home-assistant.io)
for example

Krispkiwi · June 28, 2023, 9:53pm

Cheers mate

guensen0 · June 29, 2023, 6:45am

your code is working, but not this one:

card:
  show_name: true
  show_icon: true
  show_state: false
  type: glance
  style:
    .entitiy:
      $: |
        state-badge {
          margin: 0px !important;
          background: pink;
          margin-top: 0px;
          margin-bottom: 0px;
        }
  columns: 24
  state_color: false
  card_mod:
    style: |
      ha-card {
       background: rgb(0,0,0,0) !important;
      }
      .entity {
        border-left: 0.1em solid #aaaaaa;
      }
      .entity:nth-of-type(24)  {
        border-right: 0.1em solid #aaaaaa;
      } 
      {%- for i in range(1,25) -%}
        .entity:nth-of-type({{i}})  {
          padding: 0 0 7em;
          margin: 0 0 7em; 
        }
      {% endfor %}
card_param: entities
filter:
  include:
    - entity_id: sensor.forecast_new_h*
  exclude: null
sort:
  method: entity_id
  numeric: true
show_empty: true
view_layout:
  grid-area: header```

guensen0 · June 29, 2023, 6:46am

I cannot get rid of the margin in my code… could you help?

card:
  show_name: true
  show_icon: true
  show_state: false
  type: glance
  style:
    .entitiy:
      $: |
        state-badge {
          margin: 0px !important;
          background: pink;
          margin-top: 0px;
          margin-bottom: 0px;
        }
  columns: 24
  state_color: false
  card_mod:
    style: |
      ha-card {
       background: rgb(0,0,0,0) !important;
      }
      .entity {
        border-left: 0.1em solid #aaaaaa;
      }
      .entity:nth-of-type(24)  {
        border-right: 0.1em solid #aaaaaa;
      } 
      {%- for i in range(1,25) -%}
        .entity:nth-of-type({{i}})  {
          padding: 0 0 7em;
          margin: 0 0 7em; 
        }
      {% endfor %}
card_param: entities
filter:
  include:
    - entity_id: sensor.forecast_new_h*
  exclude: null
sort:
  method: entity_id
  numeric: true
show_empty: true
view_layout:
  grid-area: header```

KTibow · June 29, 2023, 1:52pm

I can’t easily reproduce that card so I can’t help you beyond telling you that you misspelled entity.