Is there a way to apply the same style to all the cards on the dashboard? Currently I have to repeat the same style on every card, but there has to be a better way?
H!! can we change color of background based on image main color?
Helo.
I found a frame like this. how can I do it for HA ?
.ramka-4 {
position: relative;
width: 200px;
height: 200px;
margin: 30px auto;
box-sizing: border-box;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
font-family: 'Roboto', sans-serif;
}
.ramka-4 span {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
box-sizing: border-box;
z-index: -1;
}
.ramka-4 span:nth-child(1) {
transform:rotate(0deg);
}
.ramka-4 span:nth-child(2) {
transform:rotate(90deg);
}
.ramka-4 span:nth-child(3) {
transform:rotate(180deg);
}
.ramka-4 span:nth-child(4) {
transform:rotate(270deg);
}
.ramka-4 span:before {
content: '';
position: absolute;
width:100%;
height: 6px;
background: #BFE2FF;
animation: anim-ramka-4 4s linear infinite;
}
@keyframes anim-ramka-4 {
0% {
transform:scaleX(0);
transform-origin: left;
}
50% {
transform:scaleX(1);
transform-origin: left;
}
50.1% {
transform:scaleX(1);
transform-origin: right;
}
100% {
transform:scaleX(0);
transform-origin: right;
}
}
Hello modders! I’ve got a map with 5 entities on it that I’d like to reduce in size.
I’m able to navigate down the dom tree to the first and change it with:
card_mod:
style:
ha-map $ ha-entity-marker $: |
.marker {
height: 30px !important;
width: 30px !important:
}
The others are in branches below that first one.
I tried to play around with multiple instances of div:nth-child(X), but, that approach quickly exceeded my current level of css fluency and didn’t seem like an efficient way to do it.
Any help or pointers would be appreciated!
(is there a best resource or reference that covers the general concepts for dissecting dom tree paths and applying css? There are so many great posts, but they’re a bit specific sometimes and can be time-consuming to comb through for general concepts. I’d love to be able to dig into a definitive reference so I can post questions less 
)
Is that what you need:
– there are 100500 child elements;
– there is a style for the 1st element;
– need to specify the style for all elements;
– and the code must be short.
???
Try this from my example above:
ha-map $ div#map .leaflet-pane.leaflet-map-pane .leaflet-pane.leaflet-marker-pane:
.leaflet-marker-icon:
ha-entity-marker $: |
.marker {
...
}
1 Like
Thank you as always, Ildar! (I tried adding that code on the ISS map, but it didn’t work the first time I tried. I’m not sure what I missed, but trying it again now it’s working AND it’s working on all the entities on this new map!!! Although, I’m not sure why! 
does it have to do with div#map?
No idea)))
- As I already said, the style for map’s marker is unstable.
- This is not your case but selecting an element may work differently in Win+Chrome & MacOS/iPad.
Thanks for previous advice. I made good progress.
For some reason however, I cannot get the header and footer buttons changed as per the code in the post.
with code
header:
type: buttons
entities:
- entity: scene.living_daylight
card_mod:
style: |
:host {
--ha-chip-background-color: yellow;
--ha-chip-text-color: red;
font-size: 40px;
}
any advice is appreciated
Would someone know how to change the color of one of the shortcut buttons on mini media player? I know how to change them all, but I want to be able to target just 1 single button
2 Likes
1st post → link at the bottom
Dude, sorry Im late to the party, but that is one hell of a link you put together. Alreday found what I needed. Thanks a lot. 
To everyone looking a solution for this issue (as few sent me a direct message and I don’t like “loose ends”):
I could not manage to make this work. Latest idea of Ildar was this, which is - tbh - a bit too complicated for me, maybe others do manage to solve it this way:
Hello, I have some issue configuring a card, I have 3 temperature sensors and would like they will change icon color depending on value (cold, normal, hot). If I define ‘entire.config’ below each sensor - works fine. How to get it works for all sensors and not write style to separate sensor. So shortly - need a style in one place to be applied to all sensors on card. Here it is:
type: entities
entities:
- entity: sensor.temp_1_temperature
style: |
:host {
--paper-item-icon-color:
{% if states(config.entity) | int >= 23 and states(config.entity) | int < 25 %}
yellow
{% elif states(config.entity) | int <= 21 %}
cyan
{% elif states(config.entity) | int >= 25 %}
orange
{% elif states(config.entity) | int > 25 %}
red
{% else %}
green
{% endif %}
;
}
- entity: sensor.temp_2_temperature
- entity: sensor.temp_3_temperature
Your options:
- Create a card-mod theme, specify a style dependingly on “config.entity” - for some “my-class” class. Then use this class for all rows you need to style. Discussing card-mod themes - in another thread.
- Specify a style with “config.entity” - as you already did - then specify the same style for other rows; use yaml anchors to make a code shorter.
Thanks Ildar, will check card-mod themes, would like to try both options.
i very like this card, can you please post the code ? 
Here ya go. As far as the picture of the echo dot thats just something I found on Google and stored locally.
square: false
columns: 1
type: grid
cards:
- type: conditional
conditions:
- entity: input_number.alexa
state: '1.0'
card:
type: custom:mini-media-player
entity: media_player.living_room_2
style: |
ha-card {
height: 250px;
}
background: /local/echo2.jpg
group: true
source: null
info: null
hide:
icon: true
volume: true
power: true
controls: true
source: true
shortcuts:
columns: 6
buttons:
- icon: mdi:sofa
type: script
id: script.alexa_livingroom
- icon: mdi:pot-steam
type: script
id: script.alexa_kitchen
- icon: mdi:toilet
type: script
id: script.alexa_bathroom
- icon: mdi:movie-check
type: script
id: script.alexa_movieroom
- icon: mdi:desk
type: script
id: script.alexa_office
- icon: mdi:bed-king
type: script
id: script.alexa_bedroom
card_mod:
style:
mmp-shortcuts $: |
mmp-button:nth-of-type(0) ha-icon {
color: cyan;
}
mmp-button:nth-of-type(1) {
background-color: rgb(50,50,50,.6);
}
style: |
ha-card {
height: 250px;
}
tts:
platform: alexa
- type: conditional
conditions:
- entity: input_number.alexa
state: '2.0'
card:
type: custom:mini-media-player
entity: media_player.kitchen
style: |
ha-card {
height: 250px;
}
background: /local/echo2.jpg
group: true
source: null
info: null
hide:
icon: true
volume: tru
power: true
controls: true
source: true
shortcuts:
columns: 6
buttons:
- icon: mdi:sofa
type: script
id: script.alexa_livingroom
- icon: mdi:pot-steam
type: script
id: script.alexa_kitchen
- icon: mdi:toilet
type: script
id: script.alexa_bathroom
- icon: mdi:movie-check
type: script
id: script.alexa_movieroom
- icon: mdi:desk
type: script
id: script.alexa_office
- icon: mdi:bed-king
type: script
id: script.alexa_bedroom
card_mod:
style:
mmp-shortcuts $: |
mmp-button:nth-of-type(0) ha-icon {
color: cyan;
}
mmp-button:nth-of-type(2) {
background-color: rgb(50,50,50,.6);
}
style: |
ha-card {
height: 250px;
}
tts:
platform: alexa
- type: conditional
conditions:
- entity: input_number.alexa
state: '3.0'
card:
type: custom:mini-media-player
entity: media_player.bathroom
style: |
ha-card {
height: 250px;
}
background: /local/echo2.jpg
group: true
source: null
info: null
hide:
icon: true
volume: tru
power: true
controls: true
source: true
shortcuts:
columns: 6
buttons:
- icon: mdi:sofa
type: script
id: script.alexa_livingroom
- icon: mdi:pot-steam
type: script
id: script.alexa_kitchen
- icon: mdi:toilet
type: script
id: script.alexa_bathroom
- icon: mdi:movie-check
type: script
id: script.alexa_movieroom
- icon: mdi:desk
type: script
id: script.alexa_office
- icon: mdi:bed-king
type: script
id: script.alexa_bedroom
card_mod:
style:
mmp-shortcuts $: |
mmp-button:nth-of-type(0) ha-icon {
color: cyan;
}
mmp-button:nth-of-type(3) {
background-color: rgb(50,50,50,.6);
}
style: |
ha-card {
height: 250px;
}
tts:
platform: alexa
- type: conditional
conditions:
- entity: input_number.alexa
state: '4.0'
card:
type: custom:mini-media-player
entity: media_player.movie_room
name: Theater Room
style: |
ha-card {
height: 250px;
}
background: /local/echo2.jpg
group: true
source: null
info: null
hide:
icon: true
volume: tru
power: true
controls: true
source: true
shortcuts:
columns: 6
buttons:
- icon: mdi:sofa
type: script
id: script.alexa_livingroom
- icon: mdi:pot-steam
type: script
id: script.alexa_kitchen
- icon: mdi:toilet
type: script
id: script.alexa_bathroom
- icon: mdi:movie-check
type: script
id: script.alexa_movieroom
- icon: mdi:desk
type: script
id: script.alexa_office
- icon: mdi:bed-king
type: script
id: script.alexa_bedroom
card_mod:
style:
mmp-shortcuts $: |
mmp-button:nth-of-type(0) ha-icon {
color: cyan;
}
mmp-button:nth-of-type(4) {
background-color: rgb(50,50,50,.6);
}
style: |
ha-card {
height: 250px;
}
tts:
platform: alexa
- type: conditional
conditions:
- entity: input_number.alexa
state: '5.0'
card:
type: custom:mini-media-player
entity: media_player.basement
name: Office
style: |
ha-card {
height: 250px;
}
background: /local/echo2.jpg
group: true
source: null
info: null
hide:
icon: true
volume: tru
power: true
controls: true
source: true
shortcuts:
columns: 6
buttons:
- icon: mdi:sofa
type: script
id: script.alexa_livingroom
- icon: mdi:pot-steam
type: script
id: script.alexa_kitchen
- icon: mdi:toilet
type: script
id: script.alexa_bathroom
- icon: mdi:movie-check
type: script
id: script.alexa_movieroom
- icon: mdi:desk
type: script
id: script.alexa_office
- icon: mdi:bed-king
type: script
id: script.alexa_bedroom
card_mod:
style:
mmp-shortcuts $: |
mmp-button:nth-of-type(0) ha-icon {
color: cyan;
}
mmp-button:nth-of-type(5) {
background-color: rgb(50,50,50,.6);
}
style: |
ha-card {
height: 250px;
}
tts:
platform: alexa
- type: conditional
conditions:
- entity: input_number.alexa
state: '6.0'
card:
type: custom:mini-media-player
entity: media_player.bedroom_2
style: |
ha-card {
height: 250px;
}
background: /local/echo2.jpg
group: true
source: null
info: null
hide:
icon: true
volume: tru
power: true
controls: true
source: true
shortcuts:
columns: 6
buttons:
- icon: mdi:sofa
type: script
id: script.alexa_livingroom
- icon: mdi:pot-steam
type: script
id: script.alexa_kitchen
- icon: mdi:toilet
type: script
id: script.alexa_bathroom
- icon: mdi:movie-check
type: script
id: script.alexa_movieroom
- icon: mdi:desk
type: script
id: script.alexa_office
- icon: mdi:bed-king
type: script
id: script.alexa_bedroom
card_mod:
style:
mmp-shortcuts $: |
mmp-button:nth-of-type(0) ha-icon {
color: cyan;
}
mmp-button:nth-of-type(6) {
background-color: rgb(50,50,50,.6);
}
style: |
ha-card {
height: 250px;
}
tts:
platform: alexa
1 Like
Founded a 3rd option for my integration, using * value. So using template sensor.temp_*_temperature work great and code is short, please see below:
type: custom:auto-entities
show_empty: false
card:
type: entities
show_header_toggle: false
state_color: true
title: Температура
filter:
include:
- entity_id: sensor.temp_*_temperature
options:
style: |
:host {
--paper-item-icon-color:
{% if states(config.entity) | int >= 23 and states(config.entity) | int <= 24 %}
#ccff00
{% elif states(config.entity)|float > 25 %}
#fc3735
{% elif states(config.entity)|float < 21 %}
cyan
{% else %} white
{% endif %}
;
}
exclude:
- state: '>100'
- state: unavailable
sort:
method: state
reverse: false
numeric: true
count: 100
UPD: If in mobile application sensors do not change a color relogin.
2UPD: Colors dissapear from mobile app.
Good afternoon to all.
I’m a noob of Card-mod and I’ve been trying to fix this for a few hours with no results. On my lovelace I have a button for turning a light switch on and off, and I would like to make sure that when the switch is “on”, the background of the button turns yellow, while when it is on “off”, it turns gray. I have tried various ways and have not succeeded, so I ask you … is it possible to do it ???
Yes, it is possible. However, to get some help you’ll need to give a bit more information, e.g. post your code.