Aaaah. Yes. Was not aware, that it only works with card_mod. Even without this completely, I got the errors. With card_mod and new notation, it is working. Great.
Update: No, not the root cause. It worked once. Back in edit mode, the errors are there again.
O.k. If I use something different than true or false, e.g. a or tru or ā¦ it is working without errors at the moment.
It was clearly specified āundocumented featureā - i.e. probably it is not supposed to work and it may stop working one day.
Here is a picture from my setup:
You can see that:
I bet that if you are in yaml-mode and create a card with this code then the card will work.
These are Editor issues. The Editor performs syntax checks and gives errors if smth is not as per syntax rules. But as we can see these wrong code works))).
Hi everybody
I have a few RGB downlighters on my verandah that are working great and I would like to display (not change) their status as a bunch of icons only in Lovelace. The native Button card works well and it updates the colour of the icon to match the colour of the light. My problem is I need to remove the background and the shadow. My CSS skills are non-existent, so I was unable to apply Card-mod to the Button card. Just to be clear, I tried this on the vanilla Lovelace Button card. Romriderās custom button card is incredible, but it doesnāt follow the colour of the light, so it wonāt work for my application.
The closest I could get using the Button card was to stack them in the ācustom:vertical-stack-in-cardā, but it still doesnāt remove all the shadows. It looks like this:
and the Yaml looks like this (up to the first light):
- type: custom:vertical-stack-in-card
horizontal: true
cards:
- entity: light.verandah
type: 'custom:button-card'
size: 60px
show_name: false
tap_action:
action: toggle
- type: custom:vertical-stack-in-card
cards:
- type: custom:vertical-stack-in-card
horizontal: true
cards:
- type: button
entity: light.vo2p
icon_height: 30px
show_name: false
So as you can see, it is close, but not there.
Next stop was to use the excellent custom:paper-buttons-row. It formats beautifully, but it doesnāt follow the colour. I set the icon colour with a template and it looks great, but it only updates on page reloads. 
I will also have to manage the colours with some more templating when the RGB attributes drop away.
Here is the yaml up to the first light:
- type: custom:vertical-stack-in-card
horizontal: true
cards:
- entity: light.verandah
type: 'custom:button-card'
size: 60px
show_name: false
tap_action:
action: toggle
- type: entities
entities:
- type: custom:paper-buttons-row
buttons:
- - entity: light.vo2p
layout: icon
style:
button:
color: >-
rgb({{(states.light.vo2p.attributes.rgb_color[0] | int)}},{{(states.light.vo2p.attributes.rgb_color[1] | int)}},{{(states.light.vo2p.attributes.rgb_color[2] | int)}})
So my question are:
- the style works
even not this. Most of the time, this is not the case as well and I have only a greyed out card with a ircle. And you are not able to save with these errors.
But anyway, as long it is working with foo or bar or tru or whatever <> true/false, is is finefor me for now. 
Did not understand you. But as long as it is fine for you - OK
Styling stack-in-card (specially for @Jens_Wymeersch):
Similar to vertical-stack:
type: 'custom:stack-in-card'
title: Some title
keep:
background: true
box_shadow: true
margin: true
outer_padding: true
border_radius: true
cards:
- type: entities
entities:
- entity: sun.sun
- entity: sun.sun
card_mod:
style: |
ha-card {
height: 200px !important;
}
- type: entity
entity: sun.sun
card_mod:
style: |
ha-card {
height: 150px !important;
}
card_mod:
style: |
ha-card {
border-style: solid;
border-width: 5px;
border-radius: 10px;
background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
--ha-card-header-color: white;
--ha-card-header-font-size: 40px;
height: 550px !important;
--vertical-stack-card-margin: 0px 20px 80px 20px;
--ha-card-background: rgba(50,50,50,0.3);
}
Thank you for your links, it gives a lot of new ideas. I was just wondering if you were able to use the layout card nested in a stack-in-card ?
Give me an example
In essence, Iām trying to create lights cards where I can change the colour without going to options. At the same time, I am trying to reduce the amount of space needed to control these lights.
The conclusion are after my research
So in essence, I thought to have each of the 5 spots to be presented first in a light type and then have the light group next to the 2 colour pickers (colour, temperature) in a 25/75 ratio.
OK, create an example card and tell what you want to style in this card, may be we can help.
Iām stuck trying to style a markdown-card and wonder if anyone has any pointersā¦
I have some text in the markdown card that Iād like to adjust font-weight and size of, I previously had this working via card-mod using;
style:
ha-markdown:
$: |
p {
font-size: 4em;
font-weight: 300;
}
however, I also need to disable box-shadow for the cardā¦ and this is where I come unstuck, as it is outside of shadow-rootā¦
I try this;
style: |
ha-card {
box-shadow: none;
}
ha-markdown:
$: |
p {
font-size: 4em;
font-weight: 300;
}
Which disables the box-shadow, but now the font size/weight are not set correctlyā¦
Hello,
Here is where Iām at
cards:
- type: vertical-stack
cards:
- type: "custom:stack-in-card"
keep:
background: true
outer_padding: true
margin: true
modus: vertical
triggers_update:
- sun.sun
cards:
- type: vertical-stack
cards:
- type: horizontal-stack
title: Master Colour Spots
cards:
- type: light
entity: light.lamp_colour_l1_master
name: L1
icon: mdi:wall-sconce-flat
hold_action:
action: more-info
card_mod:
style: |
mwc-icon-button {
display: none;
}
- type: light
entity: light.lamp_colour_r1_master
name: R1
icon: mdi:wall-sconce-flat
hold_action:
action: more-info
card_mod:
style: |
mwc-icon-button {
display: none;
}
- type: light
entity: light.lamp_colour_l2_master
name: L2
icon: mdi:wall-sconce-flat
hold_action:
action: more-info
card_mod:
style: |
mwc-icon-button {
display: none;
}
- type: light
entity: light.lamp_colour_r2_master
name: R2
icon: mdi:wall-sconce-flat
hold_action:
action: more-info
card_mod:
style: |
mwc-icon-button {
display: none;
}
- type: light
entity: light.lamp_colour_r3_master
name: R3
icon: mdi:wall-sconce-flat
hold_action:
action: more-info
card_mod:
style: |
mwc-icon-button {
display: none;
}
- type: entities
entities:
- type: "custom:slider-entity-row"
entity: input_number.input_color
full_row: true
hide_state: true
card_mod:
style: |
ha-card {
background: linear-gradient(to right, rgb(255,0,0) 0%, rgb(255,255,0) 16.6%, rgb(0,255,0) 33.2%, rgb(0,255,255) 49.8%, rgb(0,0,255) 66.4%, rgb(255,0,255) 83%, rgb(255,0,0) 100%);
height: 50px !important;
}
- type: entities
entities:
- type: "custom:slider-entity-row"
entity: input_number.input_color_temp
full_row: true
hide_state: true
card_mod:
style: |
ha-card {
background: linear-gradient(to right, rgb(195, 209, 255) 0%, rgb(255,255,255) 50%, rgb(255, 169, 87) 100%);
height: 50px !important;
}
resulting
I would like to get the light buttons inside the stack like the rest of my buttons, example
code associated
styles:
card:
- width: 120px
- height: 100px
- margin: 3px
- padding: 5px
- border-radius: 15px
- background-color: var(--primary-background-color)
- box-shadow: >
[[[
if (states['sun.sun'].state == "below_horizon")
return '-5px -5px 15px #2c2c2c, 5px 5px 15px #191919';
else if (states['sun.sun'].state == "above_horizon")
return '-5px -5px 15px #ffffff, 5px 5px 15px #ebebeb';
]]]
which I can easy use with the custom:button-card but I have trouble getting it into the code above.
Finally, I would like to get the slider more in the middle so I can make the cards a bit smaller still.
HI Ildar, a huge post, and still I couldnāt find what I am looking forā¦
using
- type: entities
title: Tradfri hub switch
card_mod:
style: |
.card-header {
background-color: var(--primary-color);
margin: 0px 0px -8px 0px;
}
show_header_toggle: false
entities:
- type: custom:toggle-lock-entity-row
entity: script.reset_ikea_hub
secondary_info: last-triggered
- type: divider
- type: custom:toggle-lock-entity-row
entity: switch.ikea_hub
I try to decrease the height of the header, but it only shifts the entities upward, and doesnt affect the coloring, resulting in:
normally I shift the entities down, to create a little gap,
- type: entities
title: Tradfri hub switch
card_mod:
style: |
.card-header {
background-color: var(--primary-color);
margin: 0px 0px 16px 0px;
}
resulting in
but I would rather decrease the header 8px
Can we do that with the same .card-header,albeit another option?
What is this?
These are not options for stack-in-card.
I still do not understand.
You gave two different cards - stack with light controls & button-card.
What exactly do you want to change?
Better to create a picture with MS Paint to explain your needs.
Hi Marius, check this:
type: horizontal-stack
cards:
- type: entities
title: Title
entities:
- sun.sun
- sun.sun
card_mod:
style: |
.card-header {
background-color: red;
color: white;
}
- type: entities
title: Title
entities:
- sun.sun
- sun.sun
card_mod:
style:
div:nth-child(1):
hui-text-entity-row:
$: |
hui-generic-entity-row {
margin-top: 10px;
}
.: |
.card-header {
background-color: red;
color: white;
}
- type: entities
title: Title
entities:
- sun.sun
- sun.sun
card_mod:
style:
div:nth-child(1):
hui-text-entity-row:
$: |
hui-generic-entity-row {
margin-top: 10px;
}
.: |
.card-header {
background-color: red;
color: white;
padding-top: 0px;
padding-bottom: 0px;
}
perfect!
card_mod: &header
style: |
.card-header {
background-color: var(--primary-color);
padding-top: 0px;
padding-bottom: 0px;
margin: 0px 0px 16px 0px;
}
is my new default anchor created
Great, better than my solution))
Unfortunately, only one yaml file-wide(((
I moved on. Got an other way of getting what I wanted. Thank you.
Another question. I want to use one button card template for my lights but I would like to have for some lights a different icon. Iāve been trying to use variables without success. Any idea how I can do it ?
I think this is not a card-mod issue.
Probably it may be solved by card-mod, but I think it is better to use button-card-template + use variables.
