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

[ebasta]

I am trying to center a popup card on the companion app for iOS horizontally and vertically, It seems like the card popup card sits on the bottom of the screen by default,

type: custom:mushroom-entity-card
entity: switch.group_air
secondary_info: none
name: Air
icon_color: green
layout: vertical
primary_info: name
tap_action:
  action: call-service
  service: browser_mod.popup
  service_data:
    title: Air
    card:
      type: entities
      entities:
        - switch.fan
        - switch.purifier
    style: |
      ha-dialog {
        --mdc-dialog-min-width: 300px !important;
        --mdc-dialog-max-width: 300px !important;
        --mdc-dialog-min-height: 200px !important;
        --mdc-dialog-max-height: 200px !important;
      }
      .container {
        position: relative;
      }
      .center {
        position: absolute;
        top: 50%;
        left: 10vw;
        right: 10vw;
        height: 50vh;
        margin-top: -25vh;
      }
      .content {
        width: auto !important;
        height: auto !important 
      }
  target: {}

[nthulke]

Hello. I have been using this for my kids lamps in their rooms so I know if they are not going to sleep at night:

type: grid
cards:
  - type: entity
    entity: sensor.kid1_lamp_power
    state_color: true
    name: Kid1
    card_mod:
      style: |
        ha-card { 
          background-color: {{ '#00' if is_state('sensor.kid1_lamp_power', '0.0') else '#D0342C' }};
            }
        }
  - type: entity
    entity: sensor.kid2_lamp_power
    state_color: true
    name: Kid2
    card_mod:
      style: |
        ha-card { 
          background-color: {{ '#00' if is_state('sensor.kid2_lamp_power', '0.0') else '#D0342C' }};
            }
        }
square: true
columns: 2
title: Girl's Lamp Status

Is there a way I can change the background image rather than color? I have tried a few things and nothing is working for me.

The current setup shows the default color is the lamp power registers at 0.0 and turns red if anything else.

I would love to have a photo of a light turn on when they turn it on, just becasue it would look cool haha.

I tried variations of this:

background-image: {{ url('/local/icons/girls/lamp_off.jpg') if is_state('sensor.khaleesis_lamp_power', '0.0') else url('/local/icons/girls/lamp_on.jpg') }};

[DeltaNu1142]

I may have missed it, but don’t know how to change the “inactive” part of a regular Gauge card to something other than white:

type: gauge
title: Basement
entity: sensor.basement_baseboards_temperature
name: Basement
min: 55
max: 85
background_color: rgba(7, 103, 215, 0.4)
segments:
  - from: 55
    color: rgb(50,100,255)
  - from: 60
    color: rgb(50,200,200)
  - from: 66
    color: rgb(0,200,0)
  - from: 73
    color: rgb(255,100,0)
  - from: 75
    color: rgb(255,0,0)
style: |
  ha-card {
  --primary-text-color: #FFFFFF;
  --secondary-text-color: #FFFFFF;
  background: rgba(7, 103, 215, 0.24);
  }

Everything else works fine. Any ideas?

[Ildar_Gabdullin]

@nthulke

Is there a way I can change the background image rather than color?

Check the updated post.
First apply static styles (w/o if … else), see if it works.

[e-raser]

Thank you. One simple question: where to put that decluttering template section code at?

[Ildar_Gabdullin]

@e-raser

where to put that decluttering template section code at

Details may be read here.

1. In Storage mode:
   Open “Raw configuration editor”, place this on the top:

decluttering_templates:
  decl_XXXXX:
    card:
      ....

2. In yaml mode:
   Declare a folder with templates in a dashboard file:

decluttering_templates: !include_dir_merge_named templates-decluttering/
views:
  - !include page_1.yaml
  - !include page_2.yaml

Place your templates in separate files (or all templates in one file, or several templates in one file, other templates in own files) in that “templates-decluttering” folder (paths must be specified properly):

An example of some yaml file for a decluttering template (contains 3 templates in this example):

decl_template_1:
  default:
    ...
  card:
    ...

decl_template_2:
  default:
    ...
  card:
    ...

decl_template_3:
  default:
    ...
  card:
    ...

Whenever a decluttering template is edited - reload it by editing the dashboard file (edit/undo/save) + refreshing the page.

[nthulke]

Yeah the images work, if I set a static image it shows, so its not an issue with that.

[arganto]

@DeltaNu1142

Everything else works fine. Any ideas?

The easiest way is to set the variable in host. With that you don’t have to go into the shadow roots

type: gauge
entity: sensor.thermometer_ausen_maximum
card_mod:
  style: |
    :host { --primary-background-color: red; }

[Ildar_Gabdullin]

What you cannot do then?
Check your templates again.

[Mariusthvdb (Marius)]

If anything, you’ve got to quote the full url string, not only what’s inside the url

background-image: {{ "url('/local/icons/girls/lamp_off.jpg')" if is_state('sensor.khaleesis_lamp_power', '0.0') else "url('/local/icons/girls/lamp_on.jpg')" }};

or shorter:

{% set state = iif(is_state('sensor.khaleesis_lamp_power', '0.0'),'on','off') %}
{{ "url('/local/icons/girls/lamp_" + state + ".jpg')" }}

[DeltaNu1142]

@arganto

The easiest way is to set the variable in host. With that you don’t have to go into the shadow roots

type: gauge
entity: sensor.thermometer_ausen_maximum
card_mod:
  style: |
    :host { --primary-background-color: red; }

Thanks! I am still learning, so rather than set the variable (which I’m entirely unfamiliar with), I just used:

--primary-background-color: rgba(xxx,xxx,xxx,x.xx);

[arganto]

@DeltaNu1142

so rather than set the variable (which I’m entirely unfamiliar with), I just used:

But you did it.

The other way would be to define the CSS of stroke

of

which need to dig into the shadow root. And with the tweak above, you are only changing the variable, which is then later used by the dial-class-stroke.

[haze.1986 (Hay Kay)]

Hi All,

At this moment would we still be able to change a sensor card’s line/graph color using card-mod as by default it cant be changed anymore?

[Ildar_Gabdullin]

@haze.1986

sensor card’s line/graph color

Styling a Sensor card with a graph:

type: vertical-stack
cards:
  - type: sensor
    entity: sensor.xiaomi_cg_1_temperature
    graph: line
    hours_to_show: 12
    detail: 1
  - type: sensor
    entity: sensor.xiaomi_cg_1_temperature
    graph: line
    hours_to_show: 12
    detail: 1
    card_mod:
      style: |
        ha-card {
          --accent-color: red;
        }
        .header .name {
          color: red;
          font-size: 11px;
        }
        .header .icon {
          color: cyan;
          --mdc-icon-size: 40px;
        }
        .info .value {
          color: orange;
          font-size: 14px;
        }
        .info .measurement {
          color: brown;
          font-size: 28px;
        }

---

More examples are described here.

[haze.1986 (Hay Kay)]

Thank you very much

[sheddc75 (Shedd)]

Working on a dashboard and i’m trying to use the custom text-divider-row (seems to be the best divider / header row without a lot of wasted space). The developer said the variable for font size is: text-divider-font-size and that it could be changed using card modder (i’m assuming he meant card-mod). I believe i’ve tried everything in this thread but I cannot get this to respond to my attempt to change font size. Here’s my card yaml, please let me know if any one sees an issue. thanks

type: custom:text-divider-row
text: doors & windows
card_mod:
  style: |
    ha-card {
        text-divider-font-size: 8px;
    }

[Ildar_Gabdullin]

Styling text-divider-row:

type: vertical-stack
cards:
  - type: entities
    entities:
      - entity: sun.sun
      - type: custom:text-divider-row
        text: default
      - entity: sun.sun
      - type: custom:text-divider-row
        text: modded
        card_mod:
          style: |
            :host {
              --text-divider-line-size: 5px;
              --text-divider-color: red;
              --text-divider-font-size: 10px;
              --text-divider-margin: 0px 4px 40px 64px;
            }
      - entity: sun.sun
      - type: custom:text-divider-row
        text: modded
        card_mod:
          style: |
            .text-divider {
              border-bottom: 3px dotted cyan !important;
            }
            .text-divider span {
              color: orange !important;
              background-color: green !important;
              padding-left: 32px !important;
              padding-right: 32px !important;
            }

---

More examples are described here.

[nthulke]

Thanks got it working using this:

card_mod:
  style: |
    ha-card { 
      background: {{ "center /cover no-repeat url('/local/icons/girls/n_lamp_off_bw.jpg')" if is_state('sensor.xxxxs_lamp_power', '0.0') else "center /cover no-repeat url('/local/icons/girls/n_lamp_on.jpg')" }};
    }

[Recte]

Hi all,
I am trying to get my head around the logic, which I am sure there is, but I just cannot figure it out. Can someone explain to me how to identify what style element I need to change when I want to change the text color of the Mini Media Player button?

When I toggle the highlighted ‘–mmp-text-color’ the color changes, so I assume that’s the element to change, but how do I get there?

This is what I tried so far:

    - name: Follow Me
      type: service
      id: automation.toggle
      data:
        entity_id: automation.follow_me
      card_mod:
        style: |
          :host {
            --mmp-text-color:{{ iif(is_state("automation.follow_me","on"),"var(--state-icon-active-color)",iif(is_state("media_player.kitchen","unavailable"),"red")) }} ;
          }

and

      card_mod:
        style: |
          .mmp-button {
            --mmp-text-color:{{ iif(is_state("automation.follow_me","on"),"var(--state-icon-active-color)",iif(is_state("media_player.kitchen","unavailable"),"red")) }} ;
          }

and

      card_mod:
        style: |
          ha-card {
            --mmp-text-color:{{ iif(is_state("automation.follow_me","on"),"var(--state-icon-active-color)",iif(is_state("media_player.kitchen","unavailable"),"red")) }} ;
          }

Where it says --mmp-text-color:, I also tried mmp-text-color: and color:. Finaly. I know the iif works fine since I am already using it in a regular button setup, but I am moving towards mmp.

[Ildar_Gabdullin]

1st post → link at the bottom → styles for mini-media-player