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

homeassken · May 4, 2023, 11:00pm

Hi, I’ve figured out how to change background color on state, but how do I also make the icon color change along with it? Thanks!

type: custom:mushroom-entity-card
entity: lock.back_door_lock
secondary_info: none
tap_action:
  action: toggle
hold_action:
  action: none
double_tap_action:
  action: none
layout: vertical
primary_info: name
fill_container: true
name: Back
icon_color: grey
card_mod:
  style: |
    ha-card {
      {% if is_state('lock.front_door_lock','locked') %}
        --ha-card-background: rgb(212, 80, 0); {% endif %}
    }```

tfmeier · May 4, 2023, 11:21pm

I have this remote in my dashboard but would like to change the color of the icons.

Can I use card-mod to do that?

Along the same lines there’s nothing in the code to indicate blue so there must be a default color for the dashboard somewhere

nsnui0 · May 5, 2023, 5:14am

Many thanks for the comment, but I don’t know how to use button card styles. The documentation is far too complex to understand and I couldn’t find anyone trying to do the same in the forums.
Would you help me with the code for my specifications (wrote them in the first comment)?

Thank you in advance!

onepointbrewing · May 5, 2023, 5:30am

@thomasloven and @olijouve

Ive just tried this and it doesnt seem to work for me.

Could you please post the fill card code so I can see what Im doing wrong???
Full disclosure - it is nested inside a custom:vertical-stack-in-card

Heres my code:

  - type: custom:mod-card
    cards:
      type: entities
      entities:
        - entity: input_select.test_dropdown_for_profiles
          style: |
            state-badge{
              display: none;
            }

plus what is the entity to change the card background color. Entities cards are really picky about the properties

Thanks

arganto · May 5, 2023, 8:22am

Please have a look on the first post of this thread. Link at the bottom from Ildar with lots of examples. And in your case with lots of basics. Unfortunately there are so many errors in your code, that you really should read and try to understand how it is working.

And don’t ping people here in the forum.

arganto · May 5, 2023, 8:26am

Ask e.g. here: Fun with custom:button-card - #711 by onepointbrewing

You should really use the options of custom:button-card and not apply card-mod here.

olijouve · May 5, 2023, 8:51pm

Things have changed a bit since 2020 and indeed it doesn’t work anymore that way.

I also use vertical and horizontal stack in card as you can see below.

Here is a small portion of my card for the 1st input_select, the 2nd input_select is conditional depending on what was selected one the 1st one so the code for the all card would be too long.

cards:
  - type: 'custom:vertical-stack-in-card'
    cards:
      - type: horizontal-stack
        cards:
          - type: entities
            show_name: false
            show_header_toggle: false
            entities:
              - entity: input_select.heater_mode
                style:
                  hui-generic-entity-row $: |
                    state-badge {
                      display: none;
                    }                   
            style: |
              ha-card {
                padding: 0px 5px 0px 0px  !important;
                margin: 0px 0px 0px 0px  !important;    
                box-shadow: none !important;
                border: none !important;
              }
              #states.card-content {
                padding: 0px 0px 0px 0px !important;
              }

onepointbrewing · May 5, 2023, 11:30pm

Thank you for providing a CONSTRUCTIVE reply.

Very much apprecated when people help rather than criticize.

onepointbrewing · May 6, 2023, 3:18am

Would you happen to know the property for the font-family???

Currently it doesnt seem to pick up for an entities card (even though I have it loaded as a typescript resource)

- type: entities
  show_name: true
  show_header_toggle: false
  entities:
    - entity: input_select.fv1_profile_selector
      style:
        hui-generic-entity-row $: |
          state-badge {
            display: none;
          }                   
  style: |
    ha-card {
      padding: 0px 0px 0px 0px  !important;
      margin: 0px 0px 0px -12px  !important;    
      box-shadow: none !important;
      border: none !important;
      font-family: Barlow Condensed !important;
                                
    }
    .card-content {
      padding: 0px 0px 0px 0px !important;
      background: rgba(0,0,0,0) !important; 
      font-family: Barlow Condensed !important;

Capture8

“Profile” and “Time remaining” are markdown cards using Barlow Condensed but the entities card “Not Active” seems to be using Sans Serif??

Might also not be possible from this issue Lovelace card title custom font · Issue #3115 · home-assistant/frontend (github.com)

olijouve · May 6, 2023, 8:23pm

You should use developper tools to inspect the DOM on elements you want to apply changes.
Entries in the “select” element are encapsulated in a ha-select component so you need to do it that way:

- type: entities
  show_name: true
  show_header_toggle: false
  entities:
    - entity: input_select.fv1_profile_selector
      style:
        ha-select $: |
          * { 
            font-family:Barlow Condensed !important; 
          }
        hui-generic-entity-row $: |
          state-badge {
            display: none;
          }                   
  style: |
    ha-card {
      padding: 0px 0px 0px 0px  !important;
      margin: 0px 0px 0px -12px  !important;    
      box-shadow: none !important;
      border: none !important;
    }
    .card-content {
      padding: 0px 0px 0px 0px !important;
      background: rgba(0,0,0,0) !important;

onepointbrewing · May 7, 2023, 4:01am

You are an absolute genlteman. Tq so much for this.

I know where to look at DOM for elements but TBH I dont know how to interpret them

ibocharov · May 7, 2023, 4:46pm

Hi all,

I’m trying to style standard entities card to kinda mushroom style

Could you please suggest to me a way to do a wildcard style for all types of the entity row (hui-simple-entity-row, hui-sensor-entity-row, hui-toggle-entity-row, hui-input-text-entity-row etc.) to reduce this card mod style part

type: entities
entities:
  - entity: switch.bathroom_socket
    name: Socket
  - entity: sensor.bathroom_socket_current
    name: Current
  - entity: sensor.bathroom_socket_power
    name: Power
  - entity: sensor.bathroom_socket_voltage
    name: Voltage
  - entity: sensor.bathroom_ths_temperature
    name: Temperature
  - entity: sensor.bathroom_ths_humidity
    name: Humidity
  - entity: input_text.washing_machine_status
show_header_toggle: false
state_color: true
card_mod:
  style:
    .: |
      .card-content {
        padding: var(--spacing) !important;
      }
      .card-content div:not(:last-child)::after {
        content: "";
        display: block;
        height: 1px;
        background: var(--divider-color);
        margin: var(--spacing) 0 var(--spacing) calc(var(--mush-icon-size) + var(--spacing));
      }
    hui-simple-entity-row:
      $:
        .: |
          hui-generic-entity-row {
            display: grid;
            grid-template:
              "i n"
              "i s" / min-content 1fr;
          }
        hui-generic-entity-row$:
          .: |
            state-badge {
              grid-area: i / i / i / i;
              width: var(--mush-icon-size) !important;
              height: var(--mush-icon-size) !important;
              border-radius: var(--inner-border-radius) !important;
              flex: 0 0 var(--mush-icon-size) !important;
            }
            .info {
              grid-area: n / n / n / n;
              margin: 0 var(--spacing) !important;
              font-weight: var(--mush-card-primary-font-weight);
              font-size: var(--mush-card-primary-font-size);
              line-height: var(--mush-card-primary-line-height);
              color: var(--primary-text-color);
            }
            .value {
              grid-area: s / s / s / s;
              margin: 0 var(--spacing) !important;
              font-weight: var(--mush-card-secondary-font-weight);
              font-size: var(--mush-card-secondary-font-size);
              line-height: var(--mush-card-secondary-line-height);
              color: var(--secondary-text-color);
              display: flex;
              justify-content: start;
              align-items: start;
              text-transform: capitalize;
            }
          state-badge$:
            .: |
              ha-state-icon {
                display: flex;
                justify-content: center;
                align-items: center;
                height: var(--mush-icon-size);
                width: var(--mush-icon-size);
              }
              ha-state-icon:before {
                content: "";
                position: absolute;
                width: var(--mush-icon-size);
                height: var(--mush-icon-size);
                border-radius: var(--inner-border-radius);
                background: currentColor;
                opacity:0.2;
              }
            ha-state-icon:
              $:
                .: |
                  ha-svg-icon {
                    font-size: var(--mush-icon-size) !important;
                    width: var(--mush-icon-symbol-size) !important;
                    height: var(--mush-icon-symbol-size) !important;
                  }
                ha-icon:
                  $: |
                    ha-svg-icon {
                      font-size: var(--mush-icon-size) !important;
                      width: var(--mush-icon-symbol-size) !important;
                      height: var(--mush-icon-symbol-size) !important;
                    }
    hui-sensor-entity-row:
      $:
        .: |
          hui-generic-entity-row {
            display: grid;
            grid-template:
              "i n"
              "i s" / min-content 1fr;
          }
        hui-generic-entity-row$:
          .: |
            state-badge {
              grid-area: i / i / i / i;
              width: var(--mush-icon-size) !important;
              height: var(--mush-icon-size) !important;
              border-radius: var(--inner-border-radius) !important;
              flex: 0 0 var(--mush-icon-size) !important;
            }
            .info {
              grid-area: n / n / n / n;
              margin: 0 var(--spacing) !important;
              font-weight: var(--mush-card-primary-font-weight);
              font-size: var(--mush-card-primary-font-size);
              line-height: var(--mush-card-primary-line-height);
              color: var(--primary-text-color);
            }
            .value {
              grid-area: s / s / s / s;
              margin: 0 var(--spacing) !important;
              font-weight: var(--mush-card-secondary-font-weight);
              font-size: var(--mush-card-secondary-font-size);
              line-height: var(--mush-card-secondary-line-height);
              color: var(--secondary-text-color);
              display: flex;
              justify-content: start;
              align-items: start;
              text-transform: capitalize;
            }
          state-badge$:
            .: |
              ha-state-icon {
                display: flex;
                justify-content: center;
                align-items: center;
                height: var(--mush-icon-size);
                width: var(--mush-icon-size);
              }
              ha-state-icon:before {
                content: "";
                position: absolute;
                width: var(--mush-icon-size);
                height: var(--mush-icon-size);
                border-radius: var(--inner-border-radius);
                background: currentColor;
                opacity:0.2;
              }
            ha-state-icon:
              $:
                .: |
                  ha-svg-icon {
                    font-size: var(--mush-icon-size) !important;
                    width: var(--mush-icon-symbol-size) !important;
                    height: var(--mush-icon-symbol-size) !important;
                  }
                ha-icon:
                  $: |
                    ha-svg-icon {
                      font-size: var(--mush-icon-size) !important;
                      width: var(--mush-icon-symbol-size) !important;
                      height: var(--mush-icon-symbol-size) !important;
                    }
    hui-toggle-entity-row:
      $:
        hui-generic-entity-row$:
          .: |
            state-badge {
              width: var(--mush-icon-size) !important;
              height: var(--mush-icon-size) !important;
              border-radius: var(--inner-border-radius) !important;
              flex: 0 0 var(--mush-icon-size) !important;
            }
            .info {
              margin: 0 var(--spacing) !important;
              font-weight: var(--mush-card-primary-font-weight);
              font-size: var(--mush-card-primary-font-size);
              line-height: var(--mush-card-primary-line-height);
              color: var(--primary-text-color);
            }
          state-badge$:
            .: |
              ha-state-icon {
                display: flex;
                justify-content: center;
                align-items: center;
                height: var(--mush-icon-size);
                width: var(--mush-icon-size);
              }
              ha-state-icon:before {
                content: "";
                position: absolute;
                width: var(--mush-icon-size);
                height: var(--mush-icon-size);
                border-radius: var(--inner-border-radius);
                background: currentColor;
                opacity:0.2;
              }
            ha-state-icon:
              $:
                .: |
                  ha-svg-icon {
                    font-size: var(--mush-icon-size) !important;
                    width: var(--mush-icon-symbol-size) !important;
                    height: var(--mush-icon-symbol-size) !important;
                  }
                ha-icon:
                  $: |
                    ha-svg-icon {
                      font-size: var(--mush-icon-size) !important;
                      width: var(--mush-icon-symbol-size) !important;
                      height: var(--mush-icon-symbol-size) !important;
                    }
    hui-input-text-entity-row:
      $:
        .: |
          ha-textfield {
            margin-left: var(--spacing) !important;
          }
        ha-textfield$: |
          label {
            height: 38px !important;
            padding: 0 var(--spacing) !important;
          }
          #label {
            left: var(--spacing) !important;
          }
          .mdc-text-field__input {
            position: absolute !important;
            top: 12px;
          }
        hui-generic-entity-row$:
          .: |
            state-badge {
              width: var(--mush-icon-size) !important;
              height: var(--mush-icon-size) !important;
              border-radius: var(--inner-border-radius) !important;
              flex: 0 0 var(--mush-icon-size) !important;
            }
            ha-textfield {
              margin: var(--spacing) !important;
            }
          state-badge$:
            .: |
              ha-state-icon {
                display: flex;
                justify-content: center;
                align-items: center;
                height: var(--mush-icon-size);
                width: var(--mush-icon-size);
              }
              ha-state-icon:before {
                content: "";
                position: absolute;
                width: var(--mush-icon-size);
                height: var(--mush-icon-size);
                border-radius: var(--inner-border-radius);
                background: currentColor;
                opacity:0.2;
              }
            ha-state-icon:
              $:
                .: |
                  ha-svg-icon {
                    font-size: var(--mush-icon-size) !important;
                    width: var(--mush-icon-symbol-size) !important;
                    height: var(--mush-icon-symbol-size) !important;
                  }
                ha-icon:
                  $: |
                    ha-svg-icon {
                      font-size: var(--mush-icon-size) !important;
                      width: var(--mush-icon-symbol-size) !important;
                      height: var(--mush-icon-symbol-size) !important;
                    }

Thanks in advance for any advice

ibocharov · May 7, 2023, 5:23pm

I’ve decided to use mushroom cards and group them using custom:stack-in-card with minimal styling to achieve the same look and even better, but anyway I’m interested in the previous question (for future cards styling )

type: custom:stack-in-card
mode: vertical
cards:
  - type: custom:mushroom-entity-card
    entity: switch.bathroom_socket
    name: Socket
    icon_color: teal
  - type: custom:mushroom-entity-card
    entity: sensor.bathroom_socket_current
    name: Current
  - type: custom:mushroom-entity-card
    entity: sensor.bathroom_socket_power
    name: Power
  - type: custom:mushroom-entity-card
    entity: sensor.bathroom_socket_voltage
    name: Voltage
  - type: custom:mushroom-entity-card
    entity: sensor.bathroom_ths_temperature
    name: Temperature
  - type: custom:mushroom-entity-card
    entity: sensor.bathroom_ths_humidity
    name: Humidity
  - type: custom:mushroom-entity-card
    entity: input_text.washing_machine_status
card_mod:
  style:
    hui-vertical-stack-card$:
      .: |
        #root *:not(:last-child)::after {
          content: "";
          display: block;
          height: 1px;
          background: var(--divider-color);
          margin-left: calc(var(--mush-icon-size) + var(--mush-spacing) * 2);
          margin-right: var(--mush-spacing);
        }

Mobiledude · May 8, 2023, 6:56am

Need your help guys, this is driving me nuts. I have 3 top cards representing a “header menu” in my dashboard. SInsce latest release the left menu of HA falls under these cards, making the left menu unusable. Do you see what is wrong? This is my code:

type: custom:vertical-stack-in-card
horizontal: true
view_layout:
  grid-area: header
cards:
  - type: custom:mushroom-chips-card
    alignment: justify
    chips:
      - type: menu
        card_mod:
          style: |
            ha-card {
              border: 0px !important;
              box-shadow: none !important;
              padding-top: 8px;
              --chip-height: 60px;
              --chip-background: none;
            }
      - type: template
        content: Casa
        card_mod:
          style: |
            ha-card {
              border: 0px !important;
              box-shadow: none !important;
              padding-top: 8px;
              --chip-height: 60px;
              --chip-background: none;
            }
      - type: entity
        entity: input_button.dummy
        icon: mdi:magnify
        tap_action:
          action: fire-dom-event
          browser_mod:
            service: browser_mod.popup
            data:
              title: ' '
              size: fullscreen
              content:
                type: custom:search-card
                max_results: 50
        hold_action:
          action: fire-dom-event
          browser_mod:
            service: browser_mod.sequence
            data:
              sequence:
                - service: browser_mod.navigate
                  data:
                    path: '?disable_km&edit=1'
                - service: browser_mod.refresh
              browser_id: THIS
        content_info: none
        card_mod:
          style: |
            ha-card {
              border: 0px !important;
              box-shadow: none !important;
              padding-top: 8px;
              --chip-height: 60px;
              --chip-background: none;
            }
card_mod:
  style: |
    ha-card {
      --ha-card-border-radius: 0px;
      margin-right: -10px;
      margin-left: -10px;
      margin-top: -10px;
      height: 70px !important;
      border: 0px !important;
    }
    :host {
      z-index: 999;
      position: sticky;
      position: -webkit-sticky;
      top: 0;
    }

ibocharov · May 8, 2023, 9:43am

@Mobiledude
In my case it works with z-index 199 and lower, so just try to lower your z-index

Saranger · May 8, 2023, 10:17am

Hi guy’s,

i need your help, i’m a newbie in HA. My Problem, i send a msg.Payload from Nodered with the sensor node to Homassistant . When the Payload is “ok” then the entität value must be green is the payload everything else then the entität value must be red.

I hope you know what i mean

thank you so much

Saranger

type: entities
entities:
  - entity: sensor.rwm_k5
    card_mod:
      style:
        hui-generic-entity-row$: >-
          .info.pointer.text-content { color: black; } .text-content:not(.info)
          { color: green; }

marcorm69 · May 8, 2023, 2:24pm

Hi all.

I need your help.
I have this situation.

I need to change attribute to

state-badge, info, flex, state

but I can’t combine them.
This work

card_mod:
  style:
	hui-generic-entity-row$: |
	  state-badge {
		color: orange;
	  }
	  .info {
		display: none;
	  }

But I don’t know how to add the other two.
This not work, because flex and state are out of shadow

card_mod:
  style:
	hui-generic-entity-row$: |
	  state-badge {
		color: orange;
	  }
	  .info {
		display: none;
	  }
  	  .flex {
		justify-content: center!Important;
		padding-top: 10px;
	  }
	  .state {
		margin-left: 20px;
	  }

This work only for last 2

card_mod:
  style:
	hui-generic-entity-row: 
  	  .flex {
		justify-content: center!Important;
		padding-top: 10px;
	  }
	  .state {
		margin-left: 20px;
	  }

How to combine the two settings?

Regards,
Marco

critical_limit · May 8, 2023, 9:24pm

Trying to center the Title of the Card, but can´t get it centered:

type: entities
title: '‏Kochen'
show_header_toggle: false
state_color: true
theme: Dirk
card_mod:
  style: |
    .card-header {
      text-align: center;
    }
entities:
  - entity: switch.kueche_licht_automatik
    name: Automatik Licht
    icon: mdi:power
  - type: custom:slider-entity-row
.
.
.

haven´t found a solution here by searching and reading. I guess .card-header is not the title?

ibocharov · May 9, 2023, 5:31am

@marcorm69 try to use this one

card_mod:
  style:
    hui-generic-entity-row:
      .: |
        .flex {
          justify-content: center !important;
          padding-top: 10px;
        }
        .state {
          margin-left: 20px;
        }
      $: |
        state-badge {
          color: orange;
        }
        .info {
          display: none;
        }

marcorm69 · May 9, 2023, 5:42am

Thank you!
I’m still having a little trouble navigating the DOM!

Regards,
Marco