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

[zavjah]

@Ildar_Gabdullin

            card_mod:
              style: |
                :host {
                  --paper-item-icon-color: red;
                }

Hi there,

I’m having this card with conditional switches in it and I just cannot get the icons colored:

type: entities
title: Schlafzimmer
entities:
  - type: conditional
    conditions:
      - entity: switch.drucker
        state: 'off'
    row:
      entity: switch.drucker
      type: button
      icon: mdi:printer-off
      name: Drucker aus
      action_name: Einschalten
      card_mod:
        style: |
          :host {
            --paper-item-icon-color: red;
          }
  - type: conditional
    conditions:
      - entity: switch.drucker
        state: 'on'
    row:
      entity: switch.drucker
      type: button
      icon: mdi:printer
      name: Drucker an
      action_name: Ausschalten
    style:
      hui-simple-entity-row$: |
        hui-generic-entity-row {
          --paper-item-icon-color: orange;          
        }
  - type: conditional
    conditions:
      - entity: input_boolean.fernsehereg
        state: 'off'
    row:
      entity: sun.sun
      icon: mdi:desk-lamp
      name: Test entity
    style:
      hui-simple-entity-row$: |
        hui-generic-entity-row {
          --paper-item-icon-color: red;          
        }

The icon in the last entry, conditional too, is colored red, just as wanted, but none of the above two work! Is it because they are switches?

Please help,
zavjah

[Ildar_Gabdullin]

@zavjah

but none of the above two work? Is it because they are switches?

No idea, getting some weird results…

[mkanet]

I am trying to change stack-in-card’s header “padding-bottom” to 0px globally to all my stack-in-card’s via my theme.yaml.

The only way I can change the CSS style is via a single stack-in-card via Developer Tools (in the screenshot example below). I’ve already spent hours on this trying to figure this out on my own without any luck. I am hoping someone will be able to help; as I’ve tried everything I possibly could.

I tried applying card-mod custom CSS via stack-in-card code below without any luck.

Things I’ve tried…

cards:
  - entities:
      - entity: sensor.titan_download_speed
        icon: mdi:speedometer
        name: Download Speed
      - entity: sensor.titan_upload_speed
        icon: mdi:speedometer
        name: Upload Speed
    type: entities
  - aspect_ratio: 56%
    camera_view: live
    entity: camera.desktop
    show_state: false
    type: picture-entity
title: Server
type: custom:stack-in-card
card_mod:
    style: |
        .card-header, :host ::slotted(.card-header) {
             padding-bottom: 0px !important;
        }

I also tried:

card_mod:
    style: |
        ha-card.card-header, h1.card-header {
           padding-bottom: 0 !important;
        }

and…

card_mod: |
    style: |
        ha-card.type-custom-stack-in-card, h1.card-header {
           padding-bottom: 0px !important;
        }

Not a single thing I tried works, unfortunately.

[Ildar_Gabdullin]

Don’t you see that the “card-header” is inside shadowRoot?

code

type: custom:stack-in-card
title: xxxxxxxxxxxxxxxxxxx
cards:
  - type: entities
    entities:
      - entity: sun.sun
  - show_state: false
    show_name: true
    type: picture-entity
    entity: sun.sun
    image: /local/images/test/ishimura.png
card_mod:
  style:
    $: |
      .card-header {
        background: cyan;
      }

[mkanet]

@Ildar_Gabdullin thank you so much. This is my first experience with shadowRoot. The code works within that specific card.

I tried to globally make this change in my theme.yaml (see code below); however, it doesn’t seem to affect any of my similar stack-in-cards. I completely deleted the web browser cache and reloaded the webpage without any luck.

I just appended the card-mod code you gave me to the bottom of my theme.yaml file (code below)… however, it didn’t make any difference:

  card-mod-theme: techleech
  header-height: 56px 
  card-mod-root: |
    .edit-mode, app-header, app-toolbar {
      background: var(--app-header-background-color) !important;
      color: var(--primary-text-color) !important;
    }
    ha-tabs {
      --paper-tabs-selection-bar-color: var(--primary-color) !important;
    }
    paper-tab[aria-selected=true] {
      color: var(--primary-color) !important;
    }
  card-mod-row-yaml: |
    .: |
      hui-generic-entity-row {
        height: 38px;
      }
  card_mod:
    $: |
      .card-header {
        padding-bottom: 0 !important;
      }

[Ildar_Gabdullin]

1. Card-mod-themes are discussed in another thread.
2. Check this: THIS thread → 1st post → link at the bottom → themes → styling classes.

[mkanet]

Thank you. This worked:

  card-mod-card-yaml: |
    $: |
      .card-header {
        padding-bottom: 0 !important;
      }

[Ildar_Gabdullin]

This style is applied to all cards with “.card-header” inside shadowRoot, not to “stack-in-card” only.

[mkanet]

I tried my best. I’m not sure how to specify only stack-in-card.

[FGOD1983 (Willem)]

just wanted to say thank you for all these examples and posts here which eventually (after several hours of reading and searching, brought me to the correct fix for what I wanted for the markdown card (see pastebin for the code I used: https://pastebin.com/v8aAqVYa)

[Ildar_Gabdullin]

@mkanet

tried my best. I’m not sure how to specify only stack-in-card.

I gave you a link how to style classes.

[Ildar_Gabdullin]

Statistics graph: replacing a label

Consider a Statistics graph with ONE selected line (let it be MAX):

If you do not like this “max” word - the label can be w/o it, any text may be specified here:

code

type: statistics-graph
entities:
  - sensor.xiaomi_cg_1_temperature
stat_types:
  - max
card_mod:
  style:
    .content statistics-chart $ ha-chart-base $: |
      .chartLegend li .label {
        font-size: 0px;
        display: flex;
      }
      .chartLegend li .label:before {
        color: var(--secondary-text-color);
        content: "any text";
        font-size: var(--mdc-typography-body1-font-size,1rem);
      }

[ipod86]

Hello,
I have the following “picture entity”:

type: picture-elements
elements:
  - type: custom:hui-element
    card_type: entities
    entities:
      - entity: input_select.aber
    style:
      top: 80%
      left: 50%
      width: 200px
image: /cards/roborock.png

Now I would like to remove everything and just keep the text from the dropdown and the arrow.

It should only look like text that you can fold out.

Unfortunately, I’m completely at the end of my rope.

[Ildar_Gabdullin]

Already told you where to start: 1st post → link at the bottom → styles for input-select (how to style the row).
Suggest you to start testing with a simple input_select inside Entities card, not for complex cases like “input-select inside hui-element inside Picture elements”.

[ipod86]

I read through the things. however, I have absolutely no knowledge of css. That then in connection with the google translator makes it very difficult for me (my English from school is very dusty).

I’ll keep testing.

[ipod86]

Made it this far now. A colleague helped me.

Now we only fail because of the shadow.

We actually thought we would have removed that too.

  - type: custom:hui-element
    card_type: entities
    entities:
      - entity: input_select.aber
        card_mod:
          style: 
            hui-generic-entity-row $: |
              state-badge {
                display: none;
              }
            ha-select $: |
              .mdc-select__anchor {
                height: 40px !important;
              }
              .mdc-select__selected-text-container {
                align-self: center;
              }
              span#label {
                display: none;
              }
              ha-card {
               border: 0px;
               background: none;
               box-shadow: none;
              } 
              .card-header {
                 background-color: var(--primary-background-color);
              }
            .: |
              ha-select {
                height: 40px;
                width: 120px;
              }
    style:
      top: 80%
      left: 50%
      width: 200px

[Ildar_Gabdullin]

@ipod86

border: 0px;

Try “border: none” (have not check other things)

[ipod86]

@ipod86

border: 0px;

Unfortunately, that makes no difference.

[Ildar_Gabdullin]

You have to use Code Inspector & learn CSS a little - using card-mod is not just “copy / paste” things ((((((
step by step…

[ipod86]

I’ll try it. If I don’t find out, I’ll get back to you later (at some point).