Sorry, right now have no time to investigate these “a → b → c” cases, but check this example:
- type: entities
style:
hui-text-entity-row:
$:
hui-generic-entity-row:
$: |
.info.pointer.text-content {
color: green;
}
.: |
.text-content {
color: red;
}
entities:
- entity: sun.sun
- entity: sun.sun
hui-generic-entity-row → shadowRoot → element
hui-generic-entity-row → element
Another example:
type: entities
style:
hui-text-entity-row:
$:
hui-generic-entity-row:
$: |
.info.pointer.text-content {
color: cyan;
}
.: |
hui-generic-entity-row {
color: red;
}
entities:
- entity: sun.sun
- entity: sun.sun
Same image:
hui-generic-entity-row → shadowRoot → element
hui-generic-entity-row (everything, probably except shadowRoot).
And there is no cases like this (at least not in my practice):
hui-generic-entity-row → shadowRoot
Then you may built your “style tree” for more complicated cases.
2 Likes
Exactly what I wanted to know. Thx a lot.
Botr16
July 11, 2021, 12:55am
1991
hey guys, I’m losing my mind here. I’m trying to assign classes to work with themes and avoid writing styles to every card, but nothing I do seems to work.
type: button
class: red
entity: script.ricarica_temi
show_state: false
name: TEMA
tap_action:
action: toggle
looking at the page cant find the class. btw i tried
class: red
card-mod:
class: red
and inspectng the page I don’t see any difference .
the theme looks like this:
gian-mono:
card-mod-theme: gian-mono
card-mod-card: |
ha-card {
backdrop-filter: blur(5px);
}
ha-card(.red) {
color: red;
background-color: red;
background: red;
}
ha-card-background: rgba(0, 207, 255, 0.16)
lovelace-background: 'center / cover no-repeat url("/local/wp_glitch.png") fixed'
Am I missing something?
1 Like
cenp86
July 13, 2021, 12:25am
1992
Hi, newbie here.
I’ve been trying to apply style to the badges using the raw editor as read above, but when I save the changes been getting a YAMLException.
This is the piece of code I’m trying to use.
- title: test
path: test
badges:
- binary_sensor.updater
name: TEST
style: |
:host {
{% if is_state('input_boolean.test_boolean','on') %}
display: inline-block;
{% else %}
display: none;
{% endif %}
}
cards:
- type: entities
entities:
- entity: input_boolean.test_boolean
name: Show badge
I’m running the latest version of Home Assistant 2021.7.1 and have installed the card-mod.
Does anybody else have stumble with this ? Thanks
Try this:
...
badges:
- entity: binary_sensor.updater
name: TEST
...
NdR
July 13, 2021, 1:47pm
1994
Hello guys, maybe you can help me.
Is there a way to center an horizontal or vertical stack?
cenp86
July 13, 2021, 2:24pm
1995
Thanks alot, this is what I was missing in my configuration.
bkr1969
July 13, 2021, 6:39pm
1996
OK…There’s a lot of info here and I scanned about half of it but couldn’t find what I’m looking for. Is there any way to use this (or anything else) to set the background color of the mini media player card? I just want a plain color when it’s idle. I can color other entity cards but not this one.
A simple search could help.
A possible solution:
type: custom:mini-media-player
name: Player
toggle_power: true
style: |
.mmp__bg {
background-image: url("/local/images/blue_low_2.jpg") !important;
background-size: 100% 100% !important;
}
artwork: material
entity: media_player.kodi_iiyama
idle:
Not clear what you got.
cenp86
July 13, 2021, 7:20pm
1999
Hi, I was able to achieve this by using this.
type: calendar
title: Calendar
initial_view: listWeek
entities:
- calendar.mail_email_com
card_mod:
style:
ha-full-calendar$: |
#calendar {
min-height: 200px !important
}
Hope this helps.
2 Likes
Hi @cenp86 , thanks for your answer , I actually managed to get something similar working yesterday . Kind of you to answer!
hey @Ildar_Gabdullin Ildar
please help me out… struggling to get my icon spinning using (a copied path from another card, so this must be incorrect…):
card_mod:
style: |
:host {
--paper-item-icon-color:
{% set speed = states(config.entity)|int %}
{% set mapper = {0:'green',1:'darkgreen',3:'orange',
33:'orangered',66:'maroon'} %}
{{ mapper[speed] if speed in mapper else 'red'}}
}
.: div#container > div#fan > ha-icon {
animation:
{% set speed = states(config.entity)|int %}
{% if speed != 0 -%}
{% set mapper = {1:'4',3:'3',33:'2',66:'1'} %}
{% set rotation = mapper[speed] if speed in mapper else '0.3' %}
{{'rotation ' + rotation + 's ' + 'linear infinite'}}
{% else %} null
{% endif %}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
the icon coloring works perfect, but the animation in isolation doesn’t.
document.querySelector("body > 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 > hui-masonry-view").shadowRoot.querySelector("#columns > div:nth-child(1) > hui-entities-card:nth-child(5)").shadowRoot.querySelector("#states > div:nth-child(5) > multiple-entity-row").shadowRoot.querySelector("hui-generic-entity-row").shadowRoot.querySelector("state-badge").shadowRoot.querySelector("ha-icon").shadowRoot.querySelector("ha-svg-icon")
is the full copied js path.
please have a look? thanks!
Hi Marius, please give me the whole card, so far unclear what kind of card this is.
sorry bout that:
- type: custom:multiple-entity-row
entity: sensor.argon_one_addon_fan_speed
name: Fan
secondary_info: last-changed
card_mod:
style: |
:host {
--paper-item-icon-color:
{% set speed = states(config.entity)|int %}
{% set mapper = {0:'green',1:'darkgreen',3:'orange',
33:'orangered',66:'maroon'} %}
{{ mapper[speed] if speed in mapper else 'red'}}
}
.: div#container > div#fan > ha-icon {
animation:
{% set speed = states(config.entity)|int %}
{% if speed != 0 -%}
{% set mapper = {1:'4',3:'3',33:'2',66:'1'} %}
{% set rotation = mapper[speed] if speed in mapper else '0.3' %}
{{'rotation ' + rotation + 's ' + 'linear infinite'}}
{% else %} null
{% endif %}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
entities:
- attribute: Temperature C
name: Temp
unit: '°C'
- attribute: mode
name: Mode
- attribute: fan level
name: Level
Try this:
type: entities
entities:
- input_number.test_number
- type: custom:multiple-entity-row
entity: input_number.test_number
entities:
- entity: sun.sun
- entity: sun.sun
name: Fan
icon: mdi:fan
unit: '%'
format: precision0
show_state: true
secondary_info: last-changed
styles:
width: 50px
card_mod:
style:
hui-generic-entity-row:
$:
state-badge:
$:
ha-icon:
$: |
ha-svg-icon {
{% set speed = states(config.entity)|int %}
{% set mapper = {0:'green',1:'darkgreen',3:'orange',33:'orangered',66:'maroon'} %}
color: {{ mapper[speed] if speed in mapper else 'red'}};
{% set speed = states(config.entity)|int %}
{% if speed != 0 -%}
{% set mapper = {1:'4',3:'3',33:'2',66:'1'} %}
{% set rotation = mapper[speed] if speed in mapper else '0.3' %}
animation: rotation {{rotation}}s linear infinite;
{% endif %}
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
Consider that icon_color & rotation_speed are only set for certain values, for example:
for “0” - no rotation;
for “1” - fast rotation;
for “2” - very very fast fast rotation;
for “3” - slow rotation;
for “4” - very very fast fast rotation;
thanks!, unfortunately it doesnt work. even the color alone doesnt work…
Ive tested this standalone:
card_mod:
style: |
hui-generic-entity-row:
$:
state-badge:
$:
ha-icon:
$: |
ha-svg-icon {
{% set speed = states(config.entity)|int %}
{% set mapper = {0:'green',1:'darkgreen',3:'orange',33:'orangered',66:'maroon'} %}
color: {{ mapper[speed] if speed in mapper else 'red'}};
}
without luck.
where this format does:
:host {
--paper-item-icon-color:
{% set speed = states(config.entity)|int %}
{% set mapper = {0:'green',1:'darkgreen',3:'orange',
33:'orangered',66:'maroon'} %}
{{ mapper[speed] if speed in mapper else 'red'}}
}
yes! was just editing that…!
thanks Ildar, once again.
so there is no chance of the shorter syntax here? that seems so much easier to code (and better on the eye)
there’s a double line in your template for set speed, so I took that out, and, for the sake of the guard, also tested this, which is fine too:
card_mod:
style:
hui-generic-entity-row:
$:
state-badge:
$:
ha-icon:
$: |
ha-svg-icon {
{% set speed = states(config.entity)|int %}
{% set mapper = {0:'green',1:'darkgreen',3:'orange',33:'orangered',66:'maroon'} %}
color: {{ mapper[speed] if speed in mapper else 'red'}};
animation:
{% if speed != 0 -%}
{% set mapper = {1:'4',3:'3',33:'2',66:'1'} %}
{% set rotation = mapper[speed] if speed in mapper else '0.3' %}
{{'rotation ' + rotation +'s linear infinite'}}
{% else %} null
{% endif %}
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
1 Like
NdR
July 14, 2021, 2:18pm
2008
Sorry It wasn’t clear.
I have a grid layout done with Layout Card . The point is that: based on the screen dimension, the columns have different sizes.
When I’m looking my lovelace dashboard from a tablet or from a PC, the column is really large but my cards (no matter wich one) starts from the left side.
This is the card:
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: 'custom:button-card'
icon: 'mdi:home-roof' # Change this to the icon you want to display
[...]
- type: 'custom:button-card'
icon: 'mdi:floor-plan' # Change this to the icon you want to display
[...]
- type: 'custom:button-card'
icon: 'mdi:youtube-tv' # Change this to the icon you want to display
[...]
- type: 'custom:button-card'
icon: 'mdi:server' # Change this to the icon you want to display
[...]
Is there a way to center a card, or a stack, in the column?
