šŸ”¹ Card-mod - Add css styles to any lovelace card

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: {}

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') }};

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:

Gauge

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?

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

Thank you. One simple question: 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:
      ....
  1. 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.

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

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; }
1 Like

What you cannot do then?
Check your templates again.

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')" }}

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);

But you did it. :wink:

The other way would be to define the CSS of stroke
image

of
image

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.

1 Like

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?

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.

Thank you very much

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;
    }

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.

3 Likes

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')" }};
    }
1 Like

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.

1st post ā†’ link at the bottom ā†’ styles for mini-media-player