Well, only move the header of the fold 8px to the leftā¦
I thought I had managed that by the edit of the resource but noticed I also moved the divider 8px outside of the card ;-(
its because of this:
using default mod:
card_mod:
style: |
ha-card {
margin: 0px -16px;
}
id like the
- type: custom:fold-entity-row
head:
type: section
label: Itinerary
to align with that horizontally
Sharing my glance card setup, thatās showing if any of the devices are on.
type: glance
entities:
- entity: sensor.dishwasher_operation_state
icon: mdi:dishwasher
card_mod:
style: |
:host {
--card-mod-icon-color:
{% if states(config.entity) != 'Inactive' %}
var(--primary-color)
{% endif %}
}
- entity: sensor.washing_machine_status_binary
icon: mdi:washing-machine
card_mod:
style: |
:host {
--card-mod-icon-color:
{% if states(config.entity) != 'off' %}
var(--primary-color)
{% endif %}
}
- entity: sensor.tumble_dryer_status_binary
icon: mdi:tumble-dryer
card_mod:
style: |
:host {
--card-mod-icon-color:
{% if states(config.entity) != 'off' %}
var(--primary-color)
{% endif %}
}
- entity: climate.daikin_ac
icon: mdi:air-conditioner
card_mod:
style: |
:host {
--card-mod-icon-color:
{% if states(config.entity) != 'off' %}
var(--primary-color)
{% endif %}
}
- entity: binary_sensor.keba_p30_plug
icon: mdi:ev-plug-type2
card_mod:
style: |
:host {
--card-mod-icon-color:
{% if states(config.entity) != 'off' %}
var(--primary-color)
{% endif %}
}
show_name: false
show_state: false
show_icon: true
state_color: false
a simple state_color: true should do the same, shouldnāt it?
I guess, but it doesnāt work for me. For none of the above entities. It never changed the color, so I came up with this solution with the help of some of the above examples.
Only for these entities:
I wonder, if there is a way to have a bit transparent background at the header - especially the state values (here the 4.1 Ā°C) - of the apex_chart Card?
And - as a joker - have the 77% right formatted?
Added the code:
type: custom:apexcharts-card
header:
show: true
title: AuĆen
floating: true
show_states: true
series:
- entity: sensor.xiaomiaqara_1_temperature
name: Temperatur
- entity: sensor.xiaomiaqara_1_humidity
name: rel. Luftfeuchtigkeit
show:
in_chart: false
all_series_config:
type: area
show:
extremas: true
apex_config:
legend:
show: false
stroke:
width: 2
yaxis:
- decimalsInFloat: 0
style: |
ha-card {
font-size: 15px;
}
I think it is possible. Cannot say w/o having the cardās code.
Added the code - stripped a bit, to focus on the main - to my original post.
type: custom:stack-in-card
cards:
- type: custom:apexcharts-card
header:
show: true
title: AuĆen
floating: true
show_states: true
series:
- entity: sensor.cleargrass_1_temperature
name: Temperatur
- entity: sensor.cleargrass_1_humidity
name: rel. Luftfeuchtigkeit
show:
in_chart: false
all_series_config:
type: area
show:
extremas: true
apex_config:
legend:
show: false
stroke:
width: 2
yaxis:
- decimalsInFloat: 0
style: |
ha-card {
font-size: 15px;
}
- type: custom:apexcharts-card
header:
show: true
title: AuĆen
floating: true
show_states: true
series:
- entity: sensor.cleargrass_1_temperature
name: Temperatur
- entity: sensor.cleargrass_1_humidity
name: rel. Luftfeuchtigkeit
show:
in_chart: false
all_series_config:
type: area
show:
extremas: true
apex_config:
legend:
show: false
stroke:
width: 2
yaxis:
- decimalsInFloat: 0
style: |
.wrapper div#header div#states__state:nth-child(2) div#state__value {
justify-content: end;
}
.wrapper div#header div#states__state div#state__value {
display: flex;
}
.wrapper div#header div#states__state:nth-child(1),
.wrapper div#header div#header__title {
margin-left: 30px;
}
Iāve finally gotten to the point where Iām needing card-modā¦ and @Ildar_Gabdullinās examples have been a tremendous help! Iām putting together my first wall-mounted tablet, but Iām not able to find any examples where card-mod is used to modify a custom:weather-card, specifically, to make the background transparent. Has anyone done this?
EDIT: This works great to change the background color of my custom:weather-card:
style: |
ha-card {
--primary-text-color: #FFFFFF;
--secondary-text-color: #FFFFFF;
background: rgba(7, 103, 215, 0.24);
}
secondary-text-color is the low temp font color. Terrific.
Iām playing with stylizing the new energy card. Hereās what I have so far:
type: energy-usage-graph
style: |
ha-card {
--primary-text-color: #FFFFFF;
--secondary-text-color: #FFFFFF;
--divider-color: #FFFFFF;
--rgb-primary-color: red;
background-color: rgba(7, 103, 215, 0.4);
}
I havenāt been able to find the colors for the bars themselves, thoughā¦ Iām a novice at searching the source code for the right terms. Also, the same code above doesnāt work for the energy-date-selection card.
Hi all - am really enjoying card-mod. I have successfully used it to modify the flex-horseshoe card to very closely resemble the light entity cards just to keep my dashboard uniform. Most notable to this question, I needed to change the height to 100% on some elements.
However, when I take exactly the same code that works on a flex-horseshoe card and encapsulate it in a declutter template, the height reverts to normal.
In the original, version (card-mod + flex-horseshoe), itās pretty easy to add āheight: 100% !important;ā to the ha-card with card-mod.
However, the addition of declutter (declutter + card-mod + flex-horseshoe) adds a number of encapsulating elements, most notably a div in a higher shadow root that also needs to get that mod. Verified that in developer mode and it works (highlighted below).
So guess, my question is how do I navigate up the shadow DOM to that element and mod it? Have tried various permutationsā¦ :host only goes one level up, and tried various permutations of $ to no avail. Is there a guide anywhere to $, # and the other syntax that I can read?
Try as I might, I am unable to query my way up to that div from inside the declutter template.
Any help for a community member who seems to be developing a case of OCD about this 
?
Code below for original
- type: custom:flex-horseshoe-card
style: |
circle {
cx: 50%;
cy: 50%;
r: 40%;
#stroke-linecap: round;
padding-top: -88em;
#transform: rotate(-220deg, 100, 100);
}
circle.horseshoe__scale {
stroke-dasharray: 363.028484, 180;
}
ha-card {
height: 100% !important;
box-sizing: border-box;
position: relative;
overflow: hidden;
}
div.container::after {
content: "Geyser(orig)";
margin-top: -6px;
font-size: 1.2rem;
text-align: center;
}
entities:
- entity: sensor.geyser_power
decimals: 0
name: Geyser
unit: W
tap_action:
action: more-info
- entity: switch.geyser
icon: mdi:water-boiler
tap_action:
action: call-service
service: switch.toggle
service_data:
entity_id: switch.geyser
horseshoe_scale:
min: 0
max: 4000
width: 5
color: var(--text-primary-color)
horseshoe_state:
width: 5
color: var(--primary-color)
animations:
entity.1:
- state: 'on'
icons:
- animation_id: 0
styles:
- color: var(--switch-checked-color);
- state: 'off'
icons:
- animation_id: 0
styles:
- color: var(--switch-unchecked-button-color);
show:
horseshoe_style: fixed
layout:
states:
- id: 0
entity_index: 0
xpos: 50
ypos: 90
uom_font_size: 1.5
styles:
- font-size: 1.5rem;
- opacity: 0.9;
icons:
- id: 0
animation_id: 0
xpos: 50
ypos: 63
entity_index: 1
icon_size: 8.5
styles:
- color: var(--primary-text-color);
color_stops:
'0': var(--primary-background-color)
'90': var(--primary-color)
Code below for declutter template (which renders, but as per above the height is off)
modded_horseshoe:
card:
type: custom:flex-horseshoe-card
card_mod:
style: |
circle {
cx: 50%;
cy: 50%;
r: 40%;
#stroke-linecap: round;
padding-top: -88em;
#transform: rotate(-220deg, 100, 100);
}
circle.horseshoe__scale {
stroke-dasharray: 363.028484, 180;
}
ha-card {
height: 100% !important;
box-sizing: border-box;
position: relative;
overflow: hidden;
}
div.container::after {
content: "Geyser(decl)";
margin-top: -6px;
font-size: 1.2rem;
text-align: center;
}
entities:
- entity: sensor.geyser_power
decimals: 0
name: Geyser
unit: W
tap_action:
action: more-info
- entity: switch.geyser
icon: mdi:water-boiler
tap_action:
action: call-service
service: switch.toggle
service_data:
entity_id: switch.geyser
horseshoe_scale:
min: 0
max: 4000
width: 5
color: var(--text-primary-color)
horseshoe_state:
width: 5
color: var(--primary-color)
animations:
entity.1:
- state: 'on'
icons:
- animation_id: 0
styles:
- color: var(--switch-checked-color);
- state: 'off'
icons:
- animation_id: 0
styles:
- color: var(--switch-unchecked-button-color);
show:
horseshoe_style: fixed
layout:
states:
- id: 0
entity_index: 0
xpos: 50
ypos: 90
uom_font_size: 1.5
styles:
- font-size: 1.5rem;
- opacity: 0.9;
icons:
- id: 0
animation_id: 0
xpos: 50
ypos: 63
entity_index: 1
icon_size: 8.5
styles:
- color: var(--primary-text-color);
color_stops:
'0': var(--primary-background-color)
'90': var(--primary-color)
Hi all, Iāve trying to build a dashboard with some oversized entity cards. Iāve been able to increase the value font and the size of the card, but havenāt figured out how to prevent the behavior in the image below. I suspect it is an easy fix that I just havenāt been able to find in this thread. Any suggestions? Thanks in advance!
card_mod:
style: |
ha-card {
--ha-card-background: white;
color: var(--primary-color);
height: 256px !important;
}
.value {
font-size: 160px !important;
}
type: entity
entity: sensor.tempest_st_00050852_temperature
name: temperature
Is there a way to style different from light and dark themes? Tried to add @media (prefers-color-scheme: dark) but no luckā¦
Thomas, thank you! You are the only one who has even tried to explain how to style this beast and the shadow beast underneath (or so I have found). I am trying to style an mdi:icon that is placed in a custom:button-card. I also have card-mod installed.
This is what I have in my ui-lovelace.yaml:
extra_styles: |
ha-icon {
--mdc-icon-size: 2vh !important;
},
"#hum ha-icon$": |
:host {
fill: rgb(0, 255, 255) !important;
}
I have several icons on the card and have managed to size them, but trying to change the fill has been challenging. In the above code I am trying to color the icon in the āhumā div. I cannot seem to get the āfillā attribute in the shadow to change. Help?
Hi is can anyone guide me i am trying to change the color of the icon instead of the whole card.
I have multiple buttons and i am trying to change the icon to go green when state is on.
I am new to this I am able to change the color of whole card but not sure how will i go about doing it for icon only.
type: button
tap_action:
action: toggle
entity: light.bedroom
icon: mdi:lightbulb
show_state: true
show_name: false
layout:
key: 11e7094b-6f3d-44bf-99f3-2cb0896af18c
This is how i am able to do the background of card but dont know how i can get it working for icon itself
type: button
tap_action:
action: toggle
entity: light.bedroom
icon: mdi:lightbulb
show_state: true
show_name: false
card_mod:
style: |
ha-card {
--ha-card-background: teal;
color: var(--primary-color);
}
Is it possible to change the icon and make it flashing at the same time depending on entityās state by using multiple-entity-row and card-mod? For now I can only make the icon flashing but I need to click on āEDITā button of the card to see the icon changed.
type: entities
entities:
- type: section
- entity: switch.mobile_charger_plug
type: custom:multiple-entity-row
entities:
- entity: switch.mobile_charger_plug
attribute: device_class
name: 1
styles:
width: 50px
text-align: left;
unit: ''
- entity: switch.mobile_charger_plug
name: false
styles:
width: 50px
text-align: left;
unit: false
icon: mdi:dots-hexagon
- entity: switch.mobile_charger_plug
name: 3
unit: ''
styles:
width: 50px
text-align: left;
- entity: switch.mobile_charger_plug
name: false
styles:
width: 50px
text-align: left;
unit: false
icon: mdi:car
tap_action:
action: url
url_path: xxxcc
name: Rotated icons
unit: ''
toggle: false
show_state: false
state_header: ''
secondary_info: last-changed
card_mod:
style:
hui-generic-entity-row:
$:
state-badge:
$:
ha-state-icon:
$:
ha-icon:
$: |
ha-svg-icon {
color: orange;
transform: rotate(-45deg);
animation: disappear 0.5s linear infinite alternate;
}
@keyframes disappear {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.: |
:host .entities-row div.entity:nth-child(1) span {
animation: disappear 0.5s linear infinite alternate;
color: orange;
}
div.entity:nth-child(2) div {
--card-mod-icon:
{% if states('input_boolean.test_mode')| string == "on" %} mdi:dolphin;
{% else %} mdi:dots-hexagon;
{% endif %}
animation: disappear 0.5s linear infinite alternate;
font-size: 0.7rem;
white-space: pre;
}
:host .entities-row div.entity:nth-child(3) div {
color: royalblue ;
animation: disappear 0.5s linear infinite alternate;
}
div.entity:nth-child(4) state-badge {
color: red;
transform: rotate(45deg);
font-size: 0.7rem;
white-space: pre;
}
@keyframes disappear {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
title: Individual Colored & Animated
Trying to make the icon in a button to change color depending on the state, but with no luck.It looks like this:
type: button
entity: binary_sensor.garageoppnare_channel_1_input
name: Garageport
show_name: true
show_state: true
show_icon: true
state_color: false
style: |
:host {
--paper-item-icon-color:
{% if states(config.entity) == 'on' %}
red;
{% elif states(config.entity) == 'off' %}
green;
{% else %}
gray;
{% endif %}
}
tap_action:
action: call-service
service: script.oppna_stang_garageport
confirmation:
text: ƶppna / StƤng ?
Wat am I doing wrong?
What should it be?
Thanks for your code hint. I got my button color to change
type: button
tap_action:
action: toggle
entity: light.bedroom
icon: mdi:lightbulb
show_state: true
show_name: false
state_color: false
card_mod:
style: |
ha-card {
--paper-item-icon-color:
{% if states(config.entity) == 'off' %}
yellow;
{% elif states(config.entity) == 'on' %}
green;
{% else %}
gray;
{% endif %}
}