The nth-child pseudo-class allows you to specify a selector. So, you can select the first element with the class sensor-value that matches the clickable selector:
card_mod:
style: |
.sensor-value:nth-child(1 of .clickable) {
color: #4285F4;
}
Good that you joined this thread, I myself come to know new things like using a selector in nth-child.
We need such contributions.
Hello everyone,
Can i please ask for your help⌠I am trying to change background-image in a card based on a dropdown menu. Kinda building theme options for specific cards. I cannot get the elif to work. I have tried this:
card_mod:
style: |
ha-card {
background-image:
{% if is_state('input_select.card_theme', 'Blue Waves') %}
url("/local/card.png");
{% elif is_state('input_select.card_theme', 'Dots 'n Gradients') %}
url("/local/card1.png");
{%- endif %}
background-position: 0% 0%;
background-repeat: no-repeat !important;
background-size: cover;
}
EDIT: i found it⌠The problem is with the name of the dropdown⌠I used double quotes for the state: âDots 'n Gradientsâ and it now works. The correct code is below:
card_mod:
style: |
ha-card {
background-image:
{% if is_state('input_select.card_theme', "Blue Waves") %}
url("/local/card.png");
{% elif is_state('input_select.card_theme', "Dots 'n Gradients") %}
url("/local/card1.png");
{%- endif %}
background-position: 0% 0%;
background-repeat: no-repeat !important;
background-size: cover;
}
Here is what i have added so far:
Is there a way that the heading badge can also use âconfig.entityâ?
This is not working for me.
type: heading
icon: mdi:sofa
heading: Wohnzimmer
heading_style: title
badges:
- type: entity
show_state: true
show_icon: true
entity: sensor.wohnzimmer_ultimatesensor_mini_scd41_co2
card_mod:
style:
.badges hui-heading-badge:nth-child(1) hui-entity-heading-badge $: |
state-display {
{% if states(config.entity)|float > 1500 %}
color: #F44336;
{% elif states(config.entity)|float > 1000 %}
color: #FF9800;
{% else %}
color: #4CAF50;
{% endif %}
}
Untested - try config.badges[0].entity
must be going blind here, but why doe this not kick ion:
- type: custom:fold-entity-row
card_mod:
style: |
div#head ha-icon:
$: |
ha-svg-icon {
color: var(--primary-color);
width: 24px;
}
I just want to decrease the size of the icon and have it use my primary-colorâŚ
using
- type: custom:fold-entity-row
card_mod:
style: |
div#head ha-icon {
color: var(--primary-color);
width: 24px;
}
does change the color alright, but does not touch the size.
nvm, it was:
card_mod:
style:
ha-icon:
$: |
ha-svg-icon {
color: var(--primary-color);
width: 24px;
}
now to get that into the card-mod theming, hopping over
works fine! Thank you
Is there any way to add inner shadow to the slider of the tile card?
Thanks
Still havenât found a way to change the display of one of the new badges? Not change them all, but one by one (icon color, icon, etc.)?
Trying to add an inset box shadow on the slider of a tile card but also keep my backgrounds. I have identified via the inspect function the card-mod view yaml as follows:
"body>home-assistant$home-assistant-main$ha-drawer>partial-panel-resolver>ha-panel-lovelace$hui-root$#view>hui-view>hui-sections-view$ha-sortable>div>div:nth-child(2)>hui-section>hui-grid-section$ha-sortable>div>div:nth-child(5)>hui-card>hui-tile-card$ha-card>div.container>hui-card-features$div>hui-card-feature$hui-light-brightness-card-feature$ha-control-slider$#slider"
This is the code i tried with card-mod but it doesnât seem to work:
card_mod:
style: |
ha-card {
hui-card-features$:
hui-card-feature$:
hui-light-brightness-card-feature$:
ha-control-slider$:
.slider {
box-shadow: inset 1px 1px 3px 1px #ADADAD;
}
background-image:
{% if is_state('input_select.card_theme', "Blue Waves") %}
url("/local/card.png");
{% elif is_state('input_select.card_theme', "Dots 'n Gradients") %}
url("/local/card1.png");
{% elif is_state('input_select.card_theme', "Blood Shapes") %}
url("/local/card2.png");
{% elif is_state('input_select.card_theme', "Color Lines") %}
url("/local/card3.png");
{% elif is_state('input_select.card_theme', "Navy Gold") %}
url("/local/card4.png");
{%- endif %}
background-position: 0% 0%;
background-repeat: no-repeat !important;
background-size: cover;
}
Can a more experienced user help me with this?
Thanks
No ))))
They are not card-moddable. The only way is using card-mod-themes - which will affect all badges. And is some extent can be styled by âjust themesâ by using some exposed css vars.
Horror, why break something that worked. Every innovation from a mushroom lover breaks everything that worked for years. And if we break it, then give people a chance to modify it. Itâs a pity, of course, maybe theyâll add such an opportunity someday.
Looking for some help. I am trying to apply two separate styles to a vertical stack to add a translucent border/background and change the font size and title spacing.
For the border I have
style: |
ha-card {
margin: 1rem 0.5rem;
-webkit-box-shadow: 0px 3px 6px 3px rgba(0,0,0,0.48);
-moz-box-shadow: 0px 3px 6px 3px rgba(0,0,0,0.48);
box-shadow: 0px 3px 6px 3px rgba(0,0,0,0.48);
padding: 0.5rem 1rem;
font-size: 0.8rem;
background-color: rgba(0, 0, 0, 0.25)
}
for the font size and spacing I have
style:
hui-vertical-stack-card$: |
.card-header {
font-size: 39px !important;
margin-top: -20px !important;
margin-bottom: -15px !important;
margin-left: -10px !important;
}
Both work independently but I am unable to combine both to work at the same time.
Is there a straight forward way to do this? All my attempts so far have failed as well as Chat-GPT that tried to help 
1st post in this thread â link in the bottom â others â combining â.:â & â$:â
Thankyou, that was just the pointer I needed. This is working perfectly.
style:
.: |
ha-card {
margin: 1rem 0.5rem;
-webkit-box-shadow: 0px 3px 6px 3px rgba(0,0,0,0.48);
-moz-box-shadow: 0px 3px 6px 3px rgba(0,0,0,0.48);
box-shadow: 0px 3px 6px 3px rgba(0,0,0,0.48);
padding: 0.5rem 1rem;
font-size: 0.8rem;
background-color: rgba(0, 0, 0, 0.25)
}
$: ââ
hui-vertical-stack-card$: |
.card-header {
font-size: 12px !important;
margin-top: -20px !important;
margin-bottom: -15px !important;
margin-left: -10px !important;
}
Hello, does anyone know of a way to add a border to a Heading Card.
I have tried this and other variations but does not work Thanks
type: heading
heading_style: title
icon: mdi:lightbulb-multiple
heading: Lights Status
card_mod:
style: |
ha-card {
border-width: 2px !important;
}
You managed to resolve this?
I have the same issue
Good afternoon!
Since the 2024.7 HA update, my sidebar icons no longer color themselves correctly and the align-items: flex-end no longer seems to pin them to the bottom of the view. The only fix has been to remain at 2024.6.4. I was hoping someone would be able to quickly identify what needs to be changed, I am struggling with the page inspector in Chrome to determine exactly what needs to be modified. No matter how I try and reformat it, all 6 icons are picking up the modifications from âlast-of-typeâ, where as pre 2024.7 they would all work with first-of, last-of, and nth-of selectors respectively. Appreciate any insight you have or pointing me in the right direction to figure it out myself, I am usually pretty good at figuring things out but this has stumped me for months⌠Thank you!
#################################################
# #
# SIDEBAR BOTTOM ICONS #
# #
#################################################
"grid-layout$hui-vertical-stack-card$hui-grid-card":
.: |
hui-grid-card {
display: flex;
flex: auto;
align-items: flex-end;
}
/* phone */
@media screen and (max-width: 800px) {
hui-grid-card {
position: absolute;
right: 5.5vw;
}
}
$: |
#root {
width: 100%;
padding: 0 13% 25% 13%;
}
/* phone */
@media screen and (max-width: 800px) {
#root {
padding: 0 0 0 55%;
}
}
#conditional color - Camera
"$hui-button-card:first-of-type$": |
{% if is_state('sensor.template_recent_outside_motion', 'True') %}
ha-card, ha-state-icon {
color: rgb(35, 78 ,106) !important;
opacity: 1 !important;
animation: update 1.5s ease-out infinite;
}
ha-card:hover {
filter: brightness(130%);
animation-play-state: paused;
}
{% endif %}
@keyframes update {
0% {
transform: scale(1);
}
40% {
transform: scale(1.08);
}
50% {
transform: scale(0.98);
}
55% {
transform: scale(1.02);
}
60% {
transform: scale(0.98);
}
100% {
transform: scale(1);
}
}
#conditional color - Music
"$hui-button-card:nth-of-type(2)$": |
{% if is_state('media_player.main_floor', 'playing') %}
ha-card, ha-state-icon {
color: rgb(35, 78 ,106) !important;
opacity: 1 !important;
animation: update 1.5s ease-out infinite;
}
ha-card:hover {
filter: brightness(130%);
animation-play-state: paused;
}
{% endif %}
@keyframes update {
0% {
transform: scale(1);
}
40% {
transform: scale(1.08);
}
50% {
transform: scale(0.98);
}
55% {
transform: scale(1.02);
}
60% {
transform: scale(0.98);
}
100% {
transform: scale(1);
}
}
#conditional color - Devices
"$hui-button-card:nth-of-type(3)$": |
{% if is_state('binary_sensor.template_upstairs_vaccuum_color', 'dummyvaluetoturnthisoff') %}
ha-card, ha-state-icon {
color: rgb(35, 78 ,106) !important;
opacity: 1 !important;
animation: update 1.5s ease-out infinite;
}
ha-card:hover {
filter: brightness(130%);
animation-play-state: paused;
}
{% endif %}
@keyframes update {
0% {
transform: scale(1);
}
40% {
transform: scale(1.08);
}
50% {
transform: scale(0.98);
}
55% {
transform: scale(1.02);
}
60% {
transform: scale(0.98);
}
100% {
transform: scale(1);
}
}
#conditional color - Weather
"$hui-button-card:nth-of-type(4)$": |
{% if is_state('binary_sensor.template_upstairs_vaccuum_color', 'dummyvaluetoturnthisoff') %}
ha-card, ha-state-icon {
color: rgb(35, 78 ,106) !important;
opacity: 1 !important;
animation: update 1.5s ease-out infinite;
}
ha-card:hover {
filter: brightness(130%);
animation-play-state: paused;
}
{% endif %}
@keyframes update {
0% {
transform: scale(1);
}
40% {
transform: scale(1.08);
}
50% {
transform: scale(0.98);
}
55% {
transform: scale(1.02);
}
60% {
transform: scale(0.98);
}
100% {
transform: scale(1);
}
}
#conditional color - Network Info
"$hui-button-card:nth-of-type(5)$": |
#{% if not is_state('sensor.template_hass_version', 'Latest') %}
{% if is_state('sensor.template_hass_version', 'Latest') %}
ha-card, ha-state-icon {
color: rgb(35, 78 ,106) !important;
opacity: 1 !important;
animation: update 1.5s ease-out infinite;
}
ha-card:hover {
filter: brightness(130%);
animation-play-state: paused;
}
{% endif %}
@keyframes update {
0% {
transform: scale(1);
}
40% {
transform: scale(1.08);
}
50% {
transform: scale(0.98);
}
55% {
transform: scale(1.02);
}
60% {
transform: scale(0.98);
}
100% {
transform: scale(1);
}
}
#conditional color - Vaccuum
"$hui-button-card:last-of-type$": |
{% if is_state('binary_sensor.template_mainfloor_vaccuum_color', 'on') or is_state('binary_sensor.template_upstairs_vaccuum_color', 'on') %}
ha-card, ha-state-icon {
color: rgb(35, 78 ,106) !important;
opacity: 1 !important;
animation: update 1.5s ease-out infinite;
}
ha-card:hover {
filter: brightness(130%);
animation-play-state: paused;
}
{% endif %}
@keyframes update {
0% {
transform: scale(1);
}
40% {
transform: scale(1.08);
}
50% {
transform: scale(0.98);
}
55% {
transform: scale(1.02);
}
60% {
transform: scale(0.98);
}
100% {
transform: scale(1);
}
}
And how does the whole config for grid layout look like? This is just part for card_mod, I think it would be better if you send the whole config for that card.
This is all based off the older version of Mattias_Persson 's theme, with the sidebar icons, before he switched to the bottom bar. Here is everything from that themes.yaml up to that point if it helps.
####################################################
# #
# CARD-MOD #
# #
####################################################
card-mod-theme: tablet
card-mod-root: |
#view {
background: url('/local/background.png') !important;
background-size: cover !important;
}
card-mod-view-yaml: |
.: |
hui-view {
background: none !important;
}
#################################################
# #
# GRID CARD HEADINGS #
# #
#################################################
grid-layout$:
hui-grid-card:
$: |
/* default */
h1 {
font-size: 2.4vw !important;
line-height: 0 !important;
font-weight: 500 !important;
color: rgba(255, 255, 255, 0.8) !important;
padding: 1vw 0 2vw 0 !important;
letter-spacing: 0.006vw !important;
}
/* portrait */
@media screen and (max-width: 1200px) {
h1 {
font-size: 3.3vw !important;
line-height: 1.1vw !important;
}
}
/* phone */
@media screen and (max-width: 800px) {
h1 {
font-size: 5.5vw !important;
line-height: 6vw !important;
margin: 2vw 0 0 0 !important;
}
}
#################################################
# #
# SWIPE CARD MARGIN #
# #
#################################################
$swipe-card$:
.: |
div {
height: 100%;
}
hui-horizontal-stack-card$:
.: |
hui-conditional-card {
margin: 1px !important;
}
#################################################
# #
# SIDEBAR VERTICAL-STACK #
# #
#################################################
grid-layout$hui-vertical-stack-card$: |
#root {
background-color: rgba(0, 0, 0, 0.06);
border-radius: 0;
border-right: 0.1vw solid rgba(58, 69, 73, 0.2);
min-height: 100vh;
}
/* phone */
@media screen and (max-width: 800px) {
#root {
background-color: rgba(0,0,0,0);
border-right: none;
min-height: 100%;
margin-left: -0.8%;
margin-bottom: -6%;
}
}
#################################################
# #
# SIDEBAR LAUNDRY TIMER #
# #
#################################################
grid-layout$hui-vertical-stack-card$hui-conditional-card:
.: |
hui-conditional-card {
display: flex;
justify-content: center;
}
/* phone */
@media screen and (max-width: 800px) {
hui-conditional-card > button-card {
zoom: 250%;
width: 100%;
filter: contrast(85%);
}
}
#################################################
# #
# SIDEBAR BOTTOM ICONS #
# #
#################################################
"grid-layout$hui-vertical-stack-card$hui-grid-card":
.: |
hui-grid-card {
display: flex;
flex: auto;
align-items: flex-end;
}
/* phone */
@media screen and (max-width: 800px) {
hui-grid-card {
position: absolute;
right: 5.5vw;
}
}
$: |
#root {
width: 100%;
padding: 0 13% 25% 13%;
}
/* phone */
@media screen and (max-width: 800px) {
#root {
padding: 0 0 0 55%;
}
}
#conditional color - Camera
"$hui-button-card:first-of-type$": |
{% if is_state('sensor.template_recent_outside_motion', 'True') %}
ha-card, ha-state-icon {
color: rgb(35, 78 ,106) !important;
opacity: 1 !important;
animation: update 1.5s ease-out infinite;
}
ha-card:hover {
filter: brightness(130%);
animation-play-state: paused;
}
{% endif %}
@keyframes update {
0% {
transform: scale(1);
}
40% {
transform: scale(1.08);
}
50% {
transform: scale(0.98);
}
55% {
transform: scale(1.02);
}
60% {
transform: scale(0.98);
}
100% {
transform: scale(1);
}
}
#conditional color - Music
"$hui-button-card:nth-of-type(2)$": |
{% if is_state('media_player.main_floor', 'playing') %}
ha-card, ha-state-icon {
color: rgb(35, 78 ,106) !important;
opacity: 1 !important;
animation: update 1.5s ease-out infinite;
}
ha-card:hover {
filter: brightness(130%);
animation-play-state: paused;
}
{% endif %}
@keyframes update {
0% {
transform: scale(1);
}
40% {
transform: scale(1.08);
}
50% {
transform: scale(0.98);
}
55% {
transform: scale(1.02);
}
60% {
transform: scale(0.98);
}
100% {
transform: scale(1);
}
}
#conditional color - Devices
"$hui-button-card:nth-of-type(3)$": |
{% if is_state('binary_sensor.template_upstairs_vaccuum_color', 'dummyvaluetoturnthisoff') %}
ha-card, ha-state-icon {
color: rgb(35, 78 ,106) !important;
opacity: 1 !important;
animation: update 1.5s ease-out infinite;
}
ha-card:hover {
filter: brightness(130%);
animation-play-state: paused;
}
{% endif %}
@keyframes update {
0% {
transform: scale(1);
}
40% {
transform: scale(1.08);
}
50% {
transform: scale(0.98);
}
55% {
transform: scale(1.02);
}
60% {
transform: scale(0.98);
}
100% {
transform: scale(1);
}
}
#conditional color - Weather
"$hui-button-card:nth-of-type(4)$": |
{% if is_state('binary_sensor.template_upstairs_vaccuum_color', 'dummyvaluetoturnthisoff') %}
ha-card, ha-state-icon {
color: rgb(35, 78 ,106) !important;
opacity: 1 !important;
animation: update 1.5s ease-out infinite;
}
ha-card:hover {
filter: brightness(130%);
animation-play-state: paused;
}
{% endif %}
@keyframes update {
0% {
transform: scale(1);
}
40% {
transform: scale(1.08);
}
50% {
transform: scale(0.98);
}
55% {
transform: scale(1.02);
}
60% {
transform: scale(0.98);
}
100% {
transform: scale(1);
}
}
#conditional color - Network Info
"$hui-button-card:nth-of-type(5)$": |
#{% if not is_state('sensor.template_hass_version', 'Latest') %}
{% if is_state('sensor.template_hass_version', 'Latest') %}
ha-card, ha-state-icon {
color: rgb(35, 78 ,106) !important;
opacity: 1 !important;
animation: update 1.5s ease-out infinite;
}
ha-card:hover {
filter: brightness(130%);
animation-play-state: paused;
}
{% endif %}
@keyframes update {
0% {
transform: scale(1);
}
40% {
transform: scale(1.08);
}
50% {
transform: scale(0.98);
}
55% {
transform: scale(1.02);
}
60% {
transform: scale(0.98);
}
100% {
transform: scale(1);
}
}
#conditional color - Vaccuum
"$hui-button-card:last-of-type$": |
{% if is_state('binary_sensor.template_mainfloor_vaccuum_color', 'on') or is_state('binary_sensor.template_upstairs_vaccuum_color', 'on') %}
ha-card, ha-state-icon {
color: rgb(35, 78 ,106) !important;
opacity: 1 !important;
animation: update 1.5s ease-out infinite;
}
ha-card:hover {
filter: brightness(130%);
animation-play-state: paused;
}
{% endif %}
@keyframes update {
0% {
transform: scale(1);
}
40% {
transform: scale(1.08);
}
50% {
transform: scale(0.98);
}
55% {
transform: scale(1.02);
}
60% {
transform: scale(0.98);
}
100% {
transform: scale(1);
}
}
card-mod-card: |
.header .card-header {
letter-spacing: 0.005em;
font-size: 1.6em;
font-weight: 500;
padding: 1em 0 0 1.68em;
line-height: initial;
cursor: default;
}
.content .card-content {
padding: var(--card-content-padding);
}
Before 2024.7, the 6 icons would stick to the bottom of the screen, but now they move with the sidebar text. And they should all be white, except the 6th icon which is active because the Vaccuum is going. Instead all 6 get the modifications for card 6, if that makes sense.
