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