this should explain the gradients CSS Gradients
however, there is no true explanation for the non gradient effect I am after (and apparently accidentally found by setting the 2 percentages)
Definitely an interesting topic/insightful subject. I know that link well and donât understand what causes the non-gradient effect. Youâd think the spread would be based on a value of 100%, but that does not appear to be the case.
here is a bit more variation:
card_mod:
style: |
hui-generic-entity-row {
padding-right: 16px;
margin: 0px -16px;
background:
{% set kans = states(config.entity)|float(0) %}
{% set rest = 100 - kans %}
{% if kans >= 75 %} {% set bar = 'gold' %}
{% elif kans >= 50 %} {% set bar = 'orange' %}
{% elif kans >= 25 %} {% set bar = 'skyblue' %}
{% else %} {% set bar = 'gray' %}
{% endif %}
linear-gradient(to left,ivory {{rest}}%, {{bar}} {{kans}}%);
color: var(--primary-color);
}
with some sky colors in mind⊠utterly gray day here today, so I changed the template limits to show skyblue⊠
- type: entities
title: Zonkans
card_mod:
class: class-header-margin
style: |
ha-card {
background: transparent;
}
entities:
- entity: sensor.buienradar_sunchance_1d
name: Morgen
<<: &style
card_mod:
style: |
hui-generic-entity-row {
padding-right: 16px;
margin: 0px -16px;
background:
{% set kans = states(config.entity)|float(0) %}
{% set rest = 100 - kans %}
{% if kans >= 75 %} {% set bar = 'gold' %}
{% elif kans >= 50 %} {% set bar = 'orange' %}
{% elif kans >= 25 %} {% set bar = 'skyblue' %}
{% else %} {% set bar = 'gray' %}
{% endif %}
linear-gradient(to left,ivory {{rest}}%, {{bar}} {{kans}}%);
}
- entity: sensor.buienradar_sunchance_2d
name: Overmogen
<<: *style
- entity: sensor.buienradar_sunchance_3d
name: 3 dagen
<<: *style
- entity: sensor.buienradar_sunchance_4d
name: 4 dagen
<<: *style
- entity: sensor.buienradar_sunchance_5d
name: 5 dagen
<<: *style
- entity: sensor.diskstation_cpu_utilization_total
name: Cpu totaal
<<: *style
- entity: sensor.processor_use
<<: *style
suppose it would be even nicer if I could find the way to have the bar background of the rest percentage (the ivory sections now) glow in a gradient of the actual color, a bit like the Tile icon and icon background, or the hover glow of the tile. Must be doable
maybe like this (with colors changed to rgb values, so we can use rgba() for the rest of the bar:
card_mod:
style: |
hui-generic-entity-row {
padding-right: 16px;
margin: 0px -16px;
background:
{% set kans = states(config.entity)|float(0) %}
{% set rest = 100 - kans %}
{% if kans >= 75 %} {% set bar = '255,215,0' %}
{% elif kans >= 50 %} {% set bar = '255,165,0' %}
{% elif kans >= 25 %} {% set bar = '135,206,235' %}
{% else %} {% set bar = '128,128,128' %}
{% endif %}
/*linear-gradient(to left,ivory {{rest}}%, {{bar}} {{kans}}%);*/
linear-gradient(to right, rgb({{bar}}) 0%, rgb({{bar}}) {{kans}}%, rgba({{bar}},0.4) {{kans}}%, rgba({{bar}},0.1) 100%);
color: black;
}
but tbh, I dont really like the gradient as it is not contrasty enough for me:
2 Likes
If anyone is struggling to get the Calendar card to show a full-page agenda when using a vertically oriented tablet and the Fully Kiosk browser (single grid card, single calendar card), hereâs the trick.
Instead of setting min-height or just height, you have to redefine the --calendar-height variable as it appears Fully Kiosk is ignoring the !important flag that would otherwise override the height setting.
Granted, this is on an older tablet that I canât upgrade past Android 8.1, so YMMV. Works on Chrome & FKB. Tested with the latest version of FKB: 1.55.3
card_mod:
style:
ha-full-calendar$:
.: |
#calendar {
--calendar-height: 100vh;
}
Hello everyone,
I wanted to ask for help 
After updating to version 2024.6.0/1/2, my card_mod stopped working properly. Specifically, one configuration of it stopped working.
I am using âposition: stickyâ for my footer card to have it floating, but it stopped floating. It is now just at the bottom of the dashboard. I welcome any suggestions.
My code is:
type: custom:vertical-stack-in-card
cards:
- type: custom:decluttering-card
template: footer_sticky_menu
card_mod:
style: |
:host {
position: sticky !important;
bottom: 26px;
margin-bottom: 10px !important;
animation: 1.2s position ease-in-out;
}
@keyframes position {
0% { bottom: -80px; }
20% { bottom: -80px; }
70% { bottom: 26px; }
90% { bottom: 24px; }
100% { bottom: 26px; }
}
ha-card {
background: none;
border-radius: 26px !important;
}
:host:before {
content: '';
display: block;
position: absolute;
bottom: -26px;
left: -8px;
padding-right: 16px;
height: 130px;
width: 100%;
background: linear-gradient(180deg, rgba(45, 56, 76, 0) 0%, rgba(35, 46, 66, 0.85) 50%);
pointer-events: none;
animation: 1.2s opacity ease-in-out;
}
@keyframes opacity {
0% { opacity: 0; }
20% { opacity: 0; }
100% { opacity: 1; }
}
How it was:
I would suggest to simplify the case:
- Place a standard Entity card instead of that decluttering-card.
- Get rid of unimportant styles like animation, âbackground: noneâ etc.
Is this your code? If yes - you surely do know how to simplify it.
Hi,
âbackground: none:â is not unimportant. It makes card look smoother. I did not find other way to do that.
With none:
I cannot post two images as new user. I will provide screen of one without none in few minutes
Code without decluttering-card:
type: custom:vertical-stack-in-card
cards:
- type: entities
entities:
- type: custom:paper-buttons-row
buttons:
- entity: lock.drzwi
layout: icon
name: Drzwi
style:
button:
width: 42px
height: 42px
icon:
background: var(--background-color)
padding: 10px 26px
border-radius: 26px
margin-top: 0
name:
margin-top: 20px
- layout: icon
icon: mdi:window-shutter
name: Volets
tap_action:
action: navigate
navigation_path: /lovelace/shutters
style:
button:
width: 42px
height: 42px
icon:
margin-top: 0
name:
margin-top: 20px
- layout: icon
icon: mdi:cart-outline
name: Liste
tap_action:
action: navigate
navigation_path: /lovelace/liste
style:
button:
width: 42px
height: 42px
icon:
margin-top: 0
name:
margin-top: 20px
- icon: mdi:video
layout: icon
name: Sécurité
tap_action:
action: navigate
navigation_path: /lovelace/security
style:
button:
width: 42px
height: 42px
icon:
margin-top: 0
name:
margin-top: 20px
- layout: icon
icon: mdi:power-off
name: 'Off'
tap_action:
action: call-service
service: script.off
style:
button:
width: 42px
height: 42px
icon:
margin-top: 0
name:
margin-top: 20px
card_mod:
style: |
div.flex-box {
display: flex;
justify-content: space-between;
align-items: center;
margin: -14px !important;
}
card_mod:
style: |
ha-card {
margin-bottom: 10px !important;
padding: 0 16px;
border-radius: 34px !important;
margin-left: 20px;
margin-right: 20px;
}
card_mod:
style: |
:host {
position: sticky !important;
bottom: 26px;
margin-bottom: 10px !important;
animation: 1.2s position ease-in-out;
}
@keyframes position {
0% { bottom: -80px; }
20% { bottom: -80px; }
70% { bottom: 26px; }
90% { bottom: 24px; }
100% { bottom: 26px; }
}
ha-card {
background: none;
border-radius: 26px !important;
}
:host:before {
content: '';
display: block;
position: absolute;
bottom: -26px;
left: -8px;
padding-right: 16px;
height: 130px;
width: 100%;
background: linear-gradient(180deg, rgba(45, 56, 76, 0) 0%, rgba(35, 46, 66, 0.85) 50%);
pointer-events: none;
animation: 1.2s opacity ease-in-out;
}
@keyframes opacity {
0% { opacity: 0; }
20% { opacity: 0; }
100% { opacity: 1; }
}
heâs not suggesting you get rid of your styles indefinitely, simplify it for testing. then add your styles back once youâve worked out whatâs causing your issue.
Surely, just for testing.
1 Like
without none:
Sure, I will try that approach and get back to you with any comments.
The code is not entirely mine; I made some changes to make it suitable for me.
Meanwhile you may test another âsticky cardsâ code:
1st post â link at the bottom â sticky
Works at least in 2024.6.1 in Chrome+Win 10, Companion app (iOS 15.x)
1 Like
I tried your example and it worked, but I noticed it only worked within a single card. To address this, I modified a small part of my code to combine all cards into one big vertical stack. This was successful, and my footer worked as intended. It seems something changed that affected the sticky card, causing it to stop working between different cards.
My question is: what can be done to fix this without having to redo the entire dashboard by combining all cards into one big vertical stack?
My experience is that a âsticky cardâ is useful on a client with a small viewport - like a mobile phone.
All my dashboards are usually do not need to be scrolled up/down on âbig clientsâ like a desktop PC or iPad (handheld or wall-mounted); so these âsticky cardsâ are only needed on iPhones. For mobile phones I use (where it is needed) a combination âpanel view + vertical-stack + sticky cardsâ.
As for other layouts like âmasonryâ - guess making âsticky cardsâ is possible as well, but I do not have a ready code for sharing.
I have been suggesting changing position: sticky to position: fixed in a few other threads, but you may need additional adjustments. That has worked with the dashboard types I have tested.
thats interesting. Ive been using some other css to get the menubar âfloatingâ at the bottom section, but would love to understand the difference:
- type: conditional
conditions:
- condition: state
entity: input_boolean.sticky_menu
state: 'on'
card:
type: custom:mod-card
card_mod:
style: |
ha-card {
position: fixed;
background: var(--primary-color);
width: 494px;
/*top: 68px;*/
bottom: 10px;
z-index: 1;
}
card: !include /config/dashboard/buttons/buttons_dashboards.yaml
only negative thing I could find, is with this, it might cover cards that are directly under it. Have been considering adding an additional empty card because of that, but didnt get around it yet.
1 Like
challenge: color the suffix on a type: attribute in an entities card:
entities:
- type: custom:hui-element
card_type: entities
card_mod:
style:
hui-attribute-row:
$: |
hui-generic-entity-row {
padding: 0px 16px;
margin: 0px -16px;
border-radius: 24px;
border: 2px solid rgb(49,150,207);
border-shadow: 2pt;
height: 25px;
}
ha-attribute-value {
color: var(--primary-color);
}
.: |
ha-card {
color: black;
--card-mod-icon-color: gold;
--mdc-icon-size: 20px;
/*font-weight: bold;*/
box-shadow: none;
}
entities:
- type: attribute
entity: binary_sensor.knmi_zon
name: Vandaag
attribute: sun_chance0
suffix: '%'
only colors the value of the attribute (which seems correct, as that is the elements name )
however, the suffix now stands out (besidess the fact the % should be connected and not separated)
if we do the same but for an entity directly:
- type: custom:hui-element
card_type: entities
card_mod:
style:
hui-sensor-entity-row:
$: |
hui-generic-entity-row {
padding: 0px 16px;
margin: 0px -16px;
border-radius: 24px;
border: 2px solid rgb(49,150,207);
border-shadow: 2pt;
height: 25px;
}
.text-content:not(.info) {
color: var(--primary-color);
}
.: |
ha-card {
color: black;
--card-mod-icon-color: gold;
--mdc-icon-size: 20px;
box-shadow: none;
}
entities:
- entity: sensor.buienradar_sunchance_1d
name: Morgen
the text-content also colorizes the unit %, which is what I am after:
any thoughts on how to get to the % ? it seems not directly connected to an element in the Inspector pane, as far as I can check
Thank you for your support, that partially fixed the issue. The footer is now moving again, but when I scroll down to the bottom, it hovers over the card, making it inaccessible.
Any ideas on how to resolve this, apart from making a blank card at the bottom?
I mostly use mobile, as does the rest of my family. The sticky card was meant to ease the opening of doors and a few other things.
Putting the whole dashboard into one more vertical stack would be a pain, so Iâm hoping for a fix. Any further suggestions? When I quickly tested it yesterday, an additional vertical stack messed up the alignments and other settings.
Set the z-index: to 0 on the menu card and a z-index: of 1 on the last card
This will ensure the menu is placed under the last card when they align.
card_mod:
style: |
ha-card {
z-index: 1;
}
type: custom:vertical-stack-in-card
cards:
- type: entities
entities:
- type: custom:paper-buttons-row
buttons:
- entity: lock.drzwi
layout: icon
name: Drzwi
icon: mdi:lock-plus
style:
button:
width: 42px
height: 42px
icon:
background: var(--background-color)
padding: 10px 26px
border-radius: 26px
margin-top: 0
name:
margin-top: 20px
- layout: icon
icon: mdi:window-shutter
name: Volets
tap_action:
action: navigate
navigation_path: /lovelace/shutters
style:
button:
width: 42px
height: 42px
icon:
margin-top: 0
name:
margin-top: 20px
- layout: icon
icon: mdi:cart-outline
name: Liste
tap_action:
action: navigate
navigation_path: /lovelace/liste
style:
button:
width: 42px
height: 42px
icon:
margin-top: 0
name:
margin-top: 20px
- icon: mdi:video
layout: icon
name: Sécurité
tap_action:
action: navigate
navigation_path: /lovelace/security
style:
button:
width: 42px
height: 42px
icon:
margin-top: 0
name:
margin-top: 20px
- layout: icon
icon: mdi:power-off
name: 'Off'
tap_action:
action: call-service
service: script.off
style:
button:
width: 42px
height: 42px
icon:
margin-top: 0
name:
margin-top: 20px
card_mod:
style: |
div.flex-box {
display: flex;
justify-content: space-between;
align-items: center;
margin: -14px !important;
}
card_mod:
style: |
ha-card {
border-radius: 34px !important;
}
card_mod:
style: |
:host {
position: fixed !important;
bottom: 10px;
z-index: 0;
animation: 1.2s position ease-in-out;
}
@keyframes position {
0% { bottom: -80px; }
20% { bottom: -80px; }
70% { bottom: 26px; }
90% { bottom: 24px; }
100% { bottom: 26px; }
}
ha-card {
background: none;
border-radius: 26px !important;
}
:host:before {
content: '';
display: block;
position: absolute;
bottom: -26px;
left: -8px;
padding-right: 16px;
height: 130px;
width: 100%;
background: linear-gradient(180deg, rgba(45, 56, 76, 0) 0%, rgba(35, 46, 66, 0.85) 50%);
pointer-events: none;
animation: 1.2s opacity ease-in-out;
}
@keyframes opacity {
0% { opacity: 0; }
20% { opacity: 0; }
100% { opacity: 1; }
}
how would that move the bottom card in the view up, or put differently, make more space in the view for the sticky menu card to show below that vertically?
the z-index property is only for layering (stacking) the elements on top of each other, not moving them in vertical directions?
His complaint was that he canât see the bottom card because the menu was covering it. z-index places the last card on top of the menu.
I donât appreciate the link.
