Sorry , for my stupid question
what’s the meaning of $ in style?
From the docs, would config somehow allow changing all paddings of all cards at once?
Hello,
I will just copy-paste my post from configuration-frontend as I was informed that someone here will be able to help me:
I have created custom sensors which are referencing local calendar events, and I was able to create dashboard with garbage collecting schedule.
My sensor gets 3 states
0 - when it’s takeout day
1 - day before takeout day
2 - every other day
I was able to bind different images depending on sensor stare using state_image. My problem is, I would like to make image blink when sensor stare is 1 (day before takeout). Here is my dashboard code for one of bins, rest is redundant:
type: custom:config-template-card
entities:
- sensor.bio_days
variables:
DAYS: states['sensor.bio_days'].attributes['days']+'d'
card:
type: picture-entity
entity: sensor.bio_days
name: ${DAYS}
show_name: true
show_state: false
state_image:
'0': /local/images/smieci/kosz_bio_state0.png
'1': /local/images/smieci/kosz_bio_state1.png
'2': /local/images/smieci/kosz_bio_state2.png
This is how it looks like:
As you can see name is set to show days left, and I also would want to do blinking animation, but have no idea how to do it. I tried styling suggested here:
but with no success.
So difficult sometimes and only few people who know how to help.
Good luck with your blinking issue @milanos94
There is an example by ThomasLoven here https://github.com/thomasloven/lovelace-card-mod/blob/c182987f7d134970ede640be6681a95f701ecd85/test/views/tricks.yaml
MAybe that will help you?
To the other experts here.
I am still struggling to somehow get my grid to remain aligned.
Using the dev tools in Chrome I found that setting display: flex instead of display: grid seemingly suffices to display the card as an aligned “table”.
<div id="root" style="grid-template: "name temperature humidity battery" / auto auto auto auto;"><auto-entities style="grid-area: name;"><!----><!--?lit$5126878477$--><hui-grid-card style="--grid-card-column-count: 1;"></hui-grid-card><!--?--></auto-entities><auto-entities style="grid-area: temperature;"><!----><!--?lit$5126878477$--><hui-grid-card style="--grid-card-column-count: 1;"></hui-grid-card><!--?--></auto-entities><auto-entities style="grid-area: humidity;"><!----><!--?lit$5126878477$--><hui-grid-card style="--grid-card-column-count: 1;"></hui-grid-card><!--?--></auto-entities><auto-entities style="grid-area: battery;"><!----><!--?lit$5126878477$--><hui-grid-card style="--grid-card-column-count: 1;"></hui-grid-card><!--?--></auto-entities></div>
Does anybody know how to achieve this? Ideally within a template?
"card_mod": {
"style": {
}
},
try this and adapt the template to use your entity
- type: picture-entity
card_mod:
style: |
ha-card {
box-shadow: none;
animation:
{% if is_state('input_boolean.afvalwijzer_vandaag_notificatie','on')
and states('sensor.afvalwijzer_vandaag') != 'geen' -%}
blink 2s linear infinite;
{% else -%} none
{% endif %}
}
@keyframes blink {
100% {opacity: 0;}
}
did you check the post by Ildar (linked in the first post) about combining $ and non $? 🔹 Card-mod - Add css styles to any lovelace card - #3905 by Ildar_Gabdullin
Oh my God, THANK YOU!
It was driving me crazy, you code worked like a charm after adjusting, thanks again.
card_mod:
style: |
ha-card {
box-shadow: none;
animation:
{% if states('sensor.bio_days') == '0' -%}
blink 1.5s linear infinite;
{% else -%} none
{% endif %}
}
@keyframes blink {
from {opacity: 100;}
to {opacity: 0;}
from {opacity: 0;}
to {opacity: 100;}
}
1 Like
What am I missing here? This is what my card currently looks like:
and this is the code I wrote:
type: custom:stack-in-card
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-select-card
entity: input_select.target
primary_info: none
secondary_info: none
icon_type: none
fill_container: true
card_mod:
style:
mushroom-state-info$: |
.container {
--card-primary-font-size: 20px;
--card-secondary-font-size: 20px;
}
.: |
ha-card {
background: none !important;
font-variant: small-caps;
height: 96px !important;
border: none;
box-shadow: none;
}
mushroom-badge-icon {
--badge-size: 24px;
}
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: person.maui
use_entity_picture: true
content_info: none
card_mod: null
style: |
ha-card {
border: none;
box-shadow: none;
}
- type: entity
entity: person.maui
content_info: none
use_entity_picture: true
style: |
ha-card {
border: none;
box-shadow: none;
}
- type: entity
entity: person.maui
use_entity_picture: true
content_info: none
card_mod: null
style: |
ha-card {
border: none;
box-shadow: none;
}
- type: entity
entity: person.maui
content_info: none
use_entity_picture: true
style: |
ha-card {
border: none;
box-shadow: none;
}
alignment: justify
card_mod: null
style: |
ha-card {
position: absolute;
top: 2px;
right: 30px;
width: 80px;
--chip-spacing: 2px;
--chip-background: none;
}
card_mod:
style: |
ha-card {
border: 0.5px outset grey !important;
}
What I would like is for the custom:mushroom-select-card to take almost all the card, and just leave space to its right for 4 chips. As always, thanks for the help!
This work for your usecase?
type: custom:stack-in-card
cards:
- type: custom:mushroom-select-card
entity: input_select.bedroom_fan_direction
primary_info: none
secondary_info: none
icon_type: none
fill_container: true
card_mod:
style:
mushroom-state-info$: |
.container {
--card-primary-font-size: 20px;
--card-secondary-font-size: 20px;
}
.: |
ha-card {
background: none !important;
font-variant: small-caps;
height: 96px !important;
border: none;
box-shadow: none;
width: 70%;
}
mushroom-badge-icon {
--badge-size: 24px;
}
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: person.dimitri_landerloos
use_entity_picture: true
content_info: none
card_mod: null
style: |
ha-card {
border: none;
box-shadow: none;
}
- type: entity
entity: person.dimitri_landerloos
content_info: none
use_entity_picture: true
style: |
ha-card {
border: none;
box-shadow: none;
}
- type: entity
entity: person.dimitri_landerloos
use_entity_picture: true
content_info: none
card_mod: null
style: |
ha-card {
border: none;
box-shadow: none;
}
- type: entity
entity: person.dimitri_landerloos
content_info: none
use_entity_picture: true
style: |
ha-card {
border: none;
box-shadow: none;
}
alignment: justify
card_mod: null
style: |
ha-card {
position: absolute;
top: 2px;
right: 30px;
width: 80px;
--chip-spacing: 2px;
--chip-background: none;
}
card_mod:
style: |
ha-card {
border: 0.5px outset grey !important;
}
1 Like
Thanks. Based on your post I tried to get what I want but I got this:
As you can see the second bard, where I want to write the message, is all misaligned. I basically followed your example, but set the width: 90%; for the message. This is the code:
type: vertical-stack
cards:
- type: custom:stack-in-card
cards:
- type: custom:mushroom-select-card
entity: input_select.target
primary_info: none
secondary_info: none
icon_type: none
fill_container: true
card_mod:
style:
mushroom-state-info$: |
.container {
--card-primary-font-size: 20px;
--card-secondary-font-size: 20px;
}
.: |
ha-card {
background: none !important;
font-variant: small-caps;
height: 96px !important;
border: none;
box-shadow: none;
width: 70%;
}
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: person.ignacio_martinez
content_info: none
use_entity_picture: true
card_mod: null
style: |
ha-card {
border: none;
box-shadow: none;
}
- type: entity
entity: person.emilie_bagby
content_info: none
use_entity_picture: true
style: |
ha-card {
border: none;
box-shadow: none;
}
- type: entity
entity: person.maui
use_entity_picture: true
content_info: none
card_mod: null
style: |
ha-card {
border: none;
box-shadow: none;
}
- type: entity
entity: person.yina
content_info: none
use_entity_picture: true
style: |
ha-card {
border: none;
box-shadow: none;
}
alignment: justify
card_mod: null
style: |
ha-card {
position: absolute;
top: 2px;
right: 30px;
width: 80px;
--chip-spacing: 2px;
--chip-background: none;
}
card_mod:
style: |
ha-card {
border: 0.5px outset grey !important;
}
- type: custom:stack-in-card
cards:
- type: custom:text-input-row
name: ' '
entity: input_text.announcement_text
fill_container: true
card_mod:
style:
mushroom-state-info$: |
.container {
--card-primary-font-size: 20px;
--card-secondary-font-size: 20px;
}
.: |
ha-card {
background: none !important;
font-variant: small-caps;
height: 96px !important;
border: none;
box-shadow: none;
width: 90%;
}
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: script.inotify
use_entity_picture: false
content_info: none
tap_action:
action: call-service
service: script.inotify
target: {}
data:
message: ' {{ states(''input_text.announcement_text'') }} '
target: Ignacio
icon: mdi:message
icon_color: green
card_mod: null
style: |
ha-card {
border: none;
box-shadow: none;
}
alignment: justify
card_mod: null
style: |
ha-card {
position: absolute;
top: 30px;
right: -30px;
width: 80px;
--chip-spacing: 2px;
--chip-background: none;
}
card_mod:
style: |
ha-card {
border: 0.5px outset grey !important;
}
What am I missing? Thanks!
For me this works on mobile:
entity: script.1698099026408
use_entity_picture: false
content_info: none
tap_action:
action: call-service
service: script.inotify
target: {}
data:
message: ' {{ states(''input_text.announcement_text'') }} '
target: Ignacio
icon: mdi:message
icon_color: green
card_mod: null
style: |
ha-card {
border: none;
box-shadow: none;
}
alignment: justify
card_mod: null
style: |
ha-card {
position: absolute;
right: 10px;
top: 10px;
--chip-spacing: 2px;
--chip-background: none;
}
card_mod:
style: |
ha-card {
border: 0.5px outset grey !important;
}
Keep in mind that when you set something to position: absolute; it will start the element at the place you declare. So if you say right: 0px;, top: 0px; it will move itself to the top right of the parent element (most likely atleast). It will not be moved by 0px in either direction. Whereas if you use position: relative; it will move it by the amount you specify.
thanks. Is there a way of making your light.bedroom_lights narrower so it does not overlaps with the chat icon? In the code I have in my original post I tried width: 90%; but made no difference.
Yes, and I seemingly am not looking in the right places or getting the syntax right if I am.
Tried asking Bard and Bing AI but they were equally as useless as myself 
I am giving up on that test and trying to go for something simpler: entities card.
I checked the examples by Ildar but could not find an option there or in dev tools to minimize the spaces between entities.
The distance between the scripts/automations is quite big. I would happily go without the icons, too. But mainly I want to make the card as tight as possible.
padding and margin did not seem to solve it or I did not find the right place to do so.
Anybody know if it is possible?
Same: 1st post → link t the bottom → space between rows
1 Like
Apologies, I went through your posts on entities cards because a lot of things are specific to cards (or so it always seems to me).
I tried adjust the row height but I am seeing weird behaviour when combining it with auto-entities. Only the first entity row is being styled.
type: custom:auto-entities
filter:
include:
- entity_id: script.climate*
- entity_id: automation.climate*
card:
type: entities
state_color: true
card_mod:
style:
hui-toggle-entity-row $: |
hui-generic-entity-row {
color: magenta;
height: 25px;
}
hui-script-entity-row $: |
hui-generic-entity-row {
color: green;
height: 25px;
}
Hi @arganto, I have tried the mentioned code regarding the slider with pointer-events: none. It’s not working for me.
You will see same w/o auto-entities as well.
That example was for “one row of type” case.
1st post → link … → other → important notes about navigation
Use this
hui-simple-entity-row:
$: |
hui-generic-entity-row {
color: red;
height: 25px;
}
instead of
hui-simple-entity-row $: |
hui-generic-entity-row {
color: red;
height: 25px;
}
for all types.
1 Like
Hm, no clue. Perhaps browser dependend? Your icon looks different than mine. Which one are you using?
Can you double-check these parts
If you select/cklick on the input-element, is the css of the style part look like the two arrows at the bottom of my screenshot, so is the style is applied?
Basis for this is, that the sytle is ingested correctly ar right spot. Blue arrows.
Ah, sorry perhaps I missed the !important in my posting, which you can see in my screenshot as well. Try to add it as well.
1 Like