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

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.

2 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

We need a bot for that. :rofl:

3 Likes

Either that, or help someone understand the logic.
The bot would probably be reliable in referring to post only if it was actually mentioned there.

Anyway, it’s like complaining about someone asking for a sandwich all the time instead of learning them how to bake a loaf of bread…

What is possible here:

  1. Read Github manual.
  2. Learn provided examples.
  3. Ask any questions like “why is it so?”

Your response is full of assumptions, but it’s fine.

What enigmatic assumptions are you talking about?
I just wrote a common scenario: read manual, learn examples, ask questions.

https://www.google.com/search?client=firefox-b-d&q=change+the+text+color+of+the+Mini+Media+Player+button

You will notice, that the 2 first “links” goes to MMP-Lovalace and GitHub for same , and in your PIC above

image

where var = =“reference” … ( but don’t ask me what your “template” does, i would try it in the template-editor )

PS: I just noticed IIdar’s reference to mmp styles, looks like an easier “shortcut” :slight_smile:

Hi everybody. Has anyone who is using Atomic Calendar Revive applied some style changes using card-mod?
I want to display the day-date-month on a single line. By default they are vertically stacked as in this example. I really don’t have a clue as to how to do this!

Thx,
KA.

There are some theme’s vars for MMP
Probably some styles described here may be replaced/expanded/duplicated by using these vars.
Card-mod is supposed to apply styles which are not limited to using these vars, card-mod is a universal tool.
May be I will review that post and add something about these vars some day.

Yes i assumed the -overlay-base-color came from his Theme, i also use card-mod when i want to change my Theme-settings, if i not decide to make it a global change

Also, some variable may affect ALL labels (or icons etc) on the card - what if I need to style a particular element? So, changing vars within a theme has a limited use.
P.S. sorry for my broken English, it too late, in Russian I may speak much better although it became toxic these months.

Yes you are right, it could affect alot, thou when i looked at the pic, it seems like alot of the color was variables to mmp-text-color, which in turn was to mmp-overlay-base-color , seems to me very “conflict” prone :slight_smile: , but i think it’s difficult to “read” from browser-tools what actually comes from Themes or Card-Script, im still not “comfortable” with inspector :slight_smile:
So in his case, as you say it’s better to go for the element in specific
PS: I would love if one could define i.e. icon_colors based on icon_id(name) in Theme … i.e mdi:power-socket-de: ‘green’ :slight_smile: