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

1st post - link at the bottom - picture-elements

hey,
your instructions are always amazing!
but how does that work for a type:entities:light ?!

for example if the icon should be red when the lamp is switched on?!

type: entities
entities:
  - entity: light.your_light
    style:
      ......???

Sometimes I’m surprised, that Ildar is still answering, if really 99,9% of all answers is (as here again!):

1st post - link at the bottom - e.g. Light entity row and/or already in Entities card

Not only for you in special, but as this is here the case: Is it really not possible to have first a look in the excellent examples or use the search in this thread in general and ask then afterwards only, if there is really something not already in the examples?

1 Like

thanks for your answer =)
and also for the text :wink: I read this very often ^^

but believe me, if i didn’t know better, i wouldn’t have asked this question… my dashboard consists of 99.9% of the custom:button-card and actually i know very well what i’m doing…

I also only asked how it could work with the type:entities:light.
and actually I should have gone through all the contributions from this thread, but this question never came up.

And it’s not like I haven’t tried it myself.
and maybe i should have mentioned it: this is not for me personally, but was the question of a third party. because I don’t need all that type:entities stuff…

type: entities
entities:
  - entity: light.nachttisch_nathalie
    style:
      hui-toggle-entity-row:
        $:
          hui-generic-entity-row:
            $:
              state-badge:
                $:
                  ha-state-icon:
                    $: |
                      ha-svg-icon {
                        color: red;
                      }    

it IS described in the consolidation post:
изображение

Update: mmm, this was an answer to the last post, not to Arganto )).

I thank you! I missed this post…
if someone uses the search function for this thread, they will be taken there :wink:

I also felt very addressed ^^

I’m using card-mod to change background color of the tile card when a light is on. How can I have the background fill the card from left to right based on the brightness percentage? Or even how can I have the alpha of the color change based on the brightness percentage?

I tried using a template inside a template but that didn’t work. :slight_smile:

Here’s my base code:

type: tile
entity: light.table_lamp
tap_action:
  action: toggle
card_mod:
  style: |
    ha-card {
      {{ '--primary-text-color: black;' if is_state(config.entity, 'on') }}
      --secondary-text-color: gray;
      {{ 'background: rgba(255, 230, 140);' if is_state(config.entity, 'on') }}
    }

Might be a good one for @Ildar_Gabdullin :wink:

Hello Guys, I really need some help. I success add style of padding-bottom: 67px !important; to .swiper-slide.swiper-slide-active but I want to add this style to the orange circle root area which is the next lever of .swiper-slide.swiper-slide-active. >> shadow root >>> <div id='root">
I don’t know what should I type. Is there any one can tell me that? Thanks a lot.

document.querySelector("#syno-nsc-ext-gen3 > home-assistant").shadowRoot.querySelector("home-assistant-main").shadowRoot.querySelector("app-drawer-layout > partial-panel-resolver > ha-panel-lovelace").shadowRoot.querySelector("hui-root").shadowRoot.querySelector("#view > hui-view > grid-layout").shadowRoot.querySelector("#root > hui-grid-card:nth-child(3)").shadowRoot.querySelector("#root > swipe-card").shadowRoot.querySelector("#swiper-wrapper-64fbcf4d2bc3b55f > hui-grid-card.swiper-slide.swiper-slide-active").shadowRoot.querySelector("#root")

      card-mod-view-yaml: |
        .: |
          hui-view {
            background: none !important;
            min-height: 100vh;
          }
  
        #################################################
        #                                               #
        #              GRID CARD HEADINGS               #
        #                                               #
        #################################################
  
        grid-layout$:
          hui-grid-card:
            .: |
              hui-grid-card {
                padding-bottom: 1vw;
              }
            $: |
              /* default */
              h1 {
                font-size: 2.5vw !important;
                line-height: 0 !important;
                font-weight: 600 !important;
                color: rgba(255, 255, 255, 0.8) !important;
                padding: 0.2vw 0 2vw 0 !important;
                letter-spacing: 0.07vw !important;
              }
              /* portrait */
              @media screen and (max-width: 1200px) {
                h1 {
                  font-size: 3.3vw !important;
                  line-height: 1.1vw !important;
                }
              }
              /* phone */
              @media screen and (max-width: 800px) {
                h1 {
                  font-size: 5.5vw !important;
                  line-height: 6vw !important;
                  margin: 2vw 0 0 0 !important;
                }
              }
  
        #################################################
        #                                               #
        #               SWIPE CARD MARGIN               #
        #                                               #
        #################################################

            $swipe-card$:
              .: |
                div {
                  height: 100%;
                }
                .swiper-container {
                  margin: -1.5vw !important;
                  padding: 2vw 2vw 4vw 2vw !important;
                }
                
                .swiper-slide.swiper-slide-active{
                  padding-bottom: 67px !important;
                }

All described in examples.
And please stop direct pinging.

I looked through all your examples first before asking. Can you at least point to where you covered this?

My apologize. This is a tile card, first I thought this is an entity card which is described.
I am not using a tile card, it’s design too different from other Lovelace cards.

Either

card_mod:
  style: |
    ha-card {
      background: rgba(0,0,255,1);
    }

And then change the 1 to the brightness % via jinja2

or

card_mod:
  style: |
    ha-card {
      background-image: linear-gradient(to right, rgb(0, 0, 255) 70%, rgb(238, 238, 238) 70%);
    }

And then change both 70% to the brightness % via jinja2

In desperation and hoping not to be off topic, and despite going to work a lot on HA, I can’t manage to make a seemingly simple button;

I would like to have a single button with the maximum space for the title and an icon to have just the state of the lamp, to have only a slight border around it and only one click anywhere on the button, changes the state of the lamp to me, without opening another field, to switch the state of the lamp.
I tried with Card-mod, but I think I got off to a bad start, but where???

My current button:

My current code :

type: horizontal-stack
cards:
  - show_name: true
    show_icon: false
    type: button
    styles:
      card:
        - background-color: transparent
      style: |
        ha-card {
          box-shadow: none;
          border-width: 0px !important;
          icon-size: 15px;
        }
    tap_action:
      action: toggle
    entity: light.bureau_haut
  - type: custom:button-card
    entity: light.bureau_haut
    name: 1/1.3
    show_name: false
    icon: mdi:lightbulb
    aspect_ratio: 3/1

I would like to achieve this:
perfect button

Thanks for your help

The first one works for me if I convert from 255 brightness to percentage (1 being max). But when the light is off, the background color remains. Any ideas on how to fix that since I can’t put a template inside a template?

Also, for lights that don’t support brightness the background does not appear. Can I somehow use the same card for those with some tweaking?

Hm. But all this is just templating. I always advice to do some community search, read the docs and try it first on your own. This way you will learn more and are able to solve you next problem most problay easier on your won. E.g. that way.

Don’t get this. Just build one template according to your needs.

What about (but please try to understand for next requirement :wink:)

card_mod:
  style: |
    {% if states("light.wohnzimmerschrank") == "on" and state_attr('light.wohnzimmerschrank', 'brightness') != "None" %}
      {% set temp = state_attr("light.wohnzimmerschrank", "brightness")|int(default=0) %}
      ha-card {
        background-image: linear-gradient(to right, rgb(0, 0, 255) {{temp}}%, rgb(238, 238, 238) {{temp}}%);
      }
    {% endif %}

or

card_mod:
  style: |
    {% if states("light.wohnzimmerschrank") == "on" and state_attr('light.wohnzimmerschrank', 'brightness') != "None" %}
      {% set temp = state_attr("light.wohnzimmerschrank", "brightness")|int(default=0)/100 %}
      ha-card {
        background: rgba(0,0,255,{{temp}})
      }
    {% endif %}

And try such things first in developer tools template section, so that you see, what is happening (and later ingested in card_mod).

1 Like

HA Core 2022.12 uses different colors per domain when an entity is active. This means the below CSS variables are no longer used (link):

  • --paper-item-icon-active-color
  • --state-icon-active-color

Does anyone know if there is a 1-to-1 replacement for these variables?

I’ve used them in some card-mods, where I’d like to have a different template driven color, but also the fallback of the default active icon color.

There isn’t as there are not multiple color depending on class, etc. You have to use the use case depending fitting variables not. See release thread with links to github for the names.

Apologies for my ignorance here, but if I include var(--rgb-state-light-color) or var(--rgb-amber-color) (from here), this doesn’t seem to work. Could you help me with an example, assuming it’s about lights? My card-mod style code is below.

(I’ve left a few other ‘elifs’ out, to avoid putting too much code here, but they’re the main reason to actually do this through card-mod. I understand the sample code simply replicates default behavior)

style: |
  ha-card {
    font-size: 1rem !important;
    --paper-item-icon-color:
        {% if is_state('switch.innr_smart_plug_1','unavailable') %} var(--state-unavailable-color)
        {% elif is_state('switch.innr_smart_plug_1','on') %} #ffc107
        {% else %} var(--paper-item-icon-color)
        {% endif %};
  }

Hello, apologies if I’m asking this wrong. Yes, I am that dumb. I am currently trying to modify the media player card using card-mod. I am wondering how to address specific elements in the yaml of the card. I am able to find the elements and change them in the inspect element of chrome, but I can’t seem to find the right combination to edit them with card-mod. For example I am trying to hide the red circled elements, and edit the green.