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

@Ildar_Gabdullin Thank you so much. That answers my question.

Hi guys, I’m getting nuts trying to figure this out. I want to style the shopping list card. I managed to style the font-family and font-size but cannot get the font color to change. Inspecting the elements I get this:

Manually manipulating the value from the color field characters do change color but I fail miserably when trying to put that into yaml, nothing works:

        - type: shopping-list
          style: |
            ha-card {
                --mdc-typography-subtitle1-font-size: 1.5em;
            }
            :host {
                color: rgba(255,255,255,1);
            }

thanks in advanded

Since you can see a path in a Code inspector you may define a path for required element/elements.
Now using a “:host” is just a guess.

Yeah, previously to that, I tried that too to no avail:

        - type: shopping-list
          style: 
            ha-textfield$: |
                What should go here?  {
                color: red;
                  }

this won’t work and I tried several variations

        - type: shopping-list
          style:
            ha-textfield$: |
                .mdc-text-field:not  {
                color: red;
                  }

this won’t either:

        - type: shopping-list
          card_mod:
            style:
              ha-textfield$: |
                .mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__input {
                  color: red;
                    }

I’m really lost

I always suggest to start more granular and then limit afterwards.

Why not (without test) starting/trying such things first.

card_mod:
  style:
    ha-textfield:
      $: |
        input {
          color: red !important;
        }

Hello Folks,

I’m trying to manipulate a paper-button-row custom card.
I have an AirConditioner which I control with paper-buttons: turn on for time period, or off.
Also I have an automation to control it based on a preset.
I figured, if the automation is ON, i do not want anyone to mess around with the manual settings, so I disabled them with card-mode.
image
Problem, is I cannot disable only the paper-buttons, but the whole entity-row, with the icon (visual issue) and the title, which means I cannot access the state history and such.
image

Could someone help me please to apply my mods only on the paper-buttons?

My code would be this so far:

type: entities
entities:
  - entity: automation.toohotinhere
    card_mod:
      style: |
        :host {
          {% if is_state('automation.toohotinhere','on') %}
            --paper-item-icon-color: var(--disabled-text-color);
            pointer-events: none;
          {% endif %}
          }
    extend_paper_buttons_row:
      position: right
      base_config:
        style:
          button:
            background-color: lightblue
            border-radius: 4px
            padding-top: 2px
            padding-right: 6px
            padding-bottom: 2px
            padding-left: 5px
            margin-right: 5px
            border-style: solid
            border-width: 2px
            font-weight: 500
      buttons:
        - entity: asd.asd
          layout: icon|name
          name: auto
          style:
            button:
              width: 100%
              background-color: none
              border-style: none
              border-width: 2px
              font-weight: 500
              justify-content: flex-start
            ripple:
              display: none
        - name: 30M
          tap_action:
            action: call-service
            service: script.KlimaFor30Script
        - name: 1H
          tap_action:
            action: call-service
            service: script.KlimaFor1hScript
        - name: 2H
          tap_action:
            action: call-service
            service: script.1656525217310
        - name: 'OFF'
          tap_action:
            action: call-service
            service: script.offklima

Oh my, you got it! How did you get to this? why did you suggest input?

Hi guys, I have this two styled cards working separately but I don’t know how to put them together in the same card? Thanks in advaned, any help is appreciated.

Card 1

        - type: shopping-list
          card_mod:
            style:
              ha-textfield:
                $: |
                    input {
                      color: #c8c8c8 !important; --mdc-typography-subtitle1-font-size: 1.5em;
                    }

Card 2

        - type: shopping-list
          card_mod:
            style: |
                    ha-card {
                        --mdc-text-field-fill-color: rgba(0,0,0,0);
                    }

Look at your picture. This is the element, you want to style. And as suggested, this is more granular to start. If you want only style the same element, if it has a special id or class, you can narrow down afterwards.

Please always have a look in the examples in this thread, esp. in the ones from Ildar in den Link at the first post. You would see a lot (!) of examples, which give the answer directly.

card_mod:
  style:
    .: |
      ha-card {
    ha-textfield:
      $: |
        input {
2 Likes

@arganto but in my picture I see tons of things besides “input”, call me idiot but I still can’t realize where you get the input thing exactly from.

I just saw it, thanks.

sorry mate, I saw 3429 posts and I didn’t even consider reading one and using the search tool didn’t help. I appreciate!

Hello,

I use plenty of “custom:stack-in-card” with “custom:multiple-entity-row” and other integrated cars - and in these cards “card_mod” to colour or exchange icons or to adjust the borders.

So far this has always worked, but now it doesn’t (without me changing anything!?) The icons are not coloured, the spacing is ignored.

An example with an icon:

type: custom:stack-in-card
card_mod:
  style:
    .: |
      ha-card {      
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 10px;
        padding-top: 10px;
      }
cards:
  - type: markdown
    content: |
      ## Küche und Vorräte
  - entity: binary_sensor.hmipw_dri32_1_2_r02_kellerfenster_state
    type: custom:multiple-entity-row
    icon: mdi:chili-hot
    show_state: false
    state_color: false
    name: Vorratskeller
    card_mod:
      style: >
        {% if
        (states("sensor.zigbee_tempsensor_tz2000_r02_1_temperature"))|float
        > 20 %}
          :host { 
             --card-mod-icon-color: red; 
             --card-mod-icon: mdi:corn-off}     
        {% endif %}
    entities:
      - entity: binary_sensor.hmipw_dri32_1_1_r03_kellerfenster_state
        name: false
        icon: mdi:door
        state_color: true
      - entity: sensor.zigbee_tempsensor_tz2000_r02_1_temperature
        name: Temperatur
        hide_unavailable: true
        format: precision0
      - entity: sensor.zigbee_tempsensor_tz2000_r02_1_humidity
        name: Feuchte
        format: precision0
        hide_unavailable: true

Card-Mod works if I use it within an regular entity card, i. e:

type: entities
entities:
  - entity: sensor.irmelder_1_r53_gartenhaus_brightness
    type: custom:multiple-entity-row
    name: Helligkeit
    state_header: Lux
    unit: false
    secondary_info: false
    card_mod:
      style: |
        {% if (states("sun.sun")) == 'below_horizon' %}
          :host { --card-mod-icon: mdi:weather-night; }
        {% elif (states("sensor.k68_ha_uv_index")) | float(0) > 3 %}
           :host { --card-mod-icon-color: #FF8F00; }
        {% elif (states("sensor.k68_ha_uv_index")) | float(0) > 5 %}
           :host { --card-mod-icon-color: red; }
        {% endif %}    

So it may be a conflicct between “custom:stack-in-card” and “card_mod”?

I’ve searched here but haven’t found anything - or overlooked it. Sorry if that was the case.

Grateful for any help,
Eckart

First, instead of this:

    card_mod:
      style: |
        {% if ... %}
          element { prop: value; }
        {% endif %} 

use this:

    card_mod:
      style: |
        element {
          {% if ... %}
          prop: value;
          {% endif %} 
        }

since it will let you build more complex styles.

Next, regarding using “--card-mod-icon-xxx”.
This is not a “pure card-mod”. This is a “trick” added by card-mod - which is not obliged to work always & everywhere. See Github issues.
For styling multiple-entity-row - see post #1.

Also, multiple-entity-row is NOT supposed to be used as a separate card, it should be inside Entities card. I am not saying that it will not work. But it will have some unexpected features.

building on that buttons post, I am trying to mod the footer section of an entities card:

to have that button centered (and if that works out, make the container a bit tighter, by applying margin or padding)

footer:

  type: buttons
  entities:
    - entity: sensor.speedtest_download
      name: Run Speedtest
      icon: mdi:speedometer
      tap_action:
        action: call-service
        service: speedtestdotnet.speedtest

card_mod:
  style:
    hui-buttons-base $ .ha-scrollbar ha-chip:
      $: |
        .mdc-chip {
          width: 120px;
          justify-content: center;
        }

does exactly nothing, even though the path seems to be correct

Not really sure how to combine that with the generic header-footer stylings of the header/footer post though…
do I set it on the entities card as a whole, or on the buttons in the footer?

give the fact I also have a class for the header, I suppose to would need to be on the entities card:

type: entities
title: Speedtest
card_mod:
  class: class-header-margin
  style:
    hui-buttons-base $ .ha-scrollbar ha-chip:
      $: |
        .mdc-chip {
          width: 120px;
          justify-content: center;
        }
    .: |
      .header-footer.footer {
        padding: 0px;
      }
entities:

hmm, get a mapping error:

type: entities
title: Speedtest
card_mod:
  class: class-header-margin
  style:
    hui-buttons-header-footer $ hui-buttons-base $
      .ha-scrollbar {
        justify-content: center;
      }

The pipe symbol is clipped on the screenshot.

hui-buttons-base $: |

duh… sorry bout that.

better indeed. but see what happens when I set a margin: 20px on the footer:

type: entities
title: Speedtest
card_mod:
  class: class-header-margin
  style:
    hui-buttons-header-footer $ hui-buttons-base $ : |
      .ha-scrollbar {
        justify-content: center;
      }
    .: |
      .header-footer.footer {
        margin: 20px;
      }

it also sets that to the fold-entity-row above the footer…

setting the margin/padding to the same selector is a bit better, but not yet as I want it, top is untouched so it seems:

  style:
    hui-buttons-header-footer $ hui-buttons-base $ : |
      .ha-scrollbar {
        justify-content: center;
        margin: 0px;
        padding-top: 8px;
        padding-bottom: 8px;
      }

but this is getting more like it:

  style:
    hui-buttons-header-footer $ hui-buttons-base $ : |
      .ha-scrollbar {
        justify-content: center;
        height: 40px;
        align-content: center;
      }

thought as you can see it is still not vertically aligned fully, probably because of the following above it?

It cannot be. I do not see it on your picture. And I cannot reproduce it:

type: vertical-stack
cards:
  - type: entities
    entities:
      - sun.sun
      - type: custom:fold-entity-row
        padding: 0
        head:
          entity: sun.sun
        entities:
          - sun.sun
          - sun.sun
    footer:
      type: buttons
      entities:
        - entity: sun.sun
    card_mod:
      style:
        hui-buttons-header-footer $ hui-buttons-base $: |
          .ha-scrollbar {
            justify-content: center;
          }
        .: |
          .header-footer {
            margin: 50px;
          }

image
Compare with “w/o a footer” card;
image

dont you see the huge space in the fold? I mean directly above the divider line of the footer?

yeah, not sure why that happens. just like the vertical aligning, which is not centered.

guess I need to check the default styling of the footer margins, because without a fold it is also vertically off center:

The margin does not affect the fold-entity-row.
It may affect a margin above a divider - which is a part of the footer.
Do not see a margin ABOVE the footer:


The margin-top property is not changed:
image