Marius, I had to limit using Custom UI in my setup because of the same reasons - mutual negative effect between Custom UI & card-modā¦
Now I have Custom UI only for:
card-mod styling for these icons in my setup;could you help to understand how I can change border-radius for badge
This does not work 
badges:
- entity: person.alex
card_mod:
style: |
:host {
--ha-label-badge-size: 100px;
border-radius: 20%;
}
If you really want it:
- entity: sun.sun
card_mod: &ref_card_mod
style:
ha-state-label-badge:
$:
ha-label-badge:
$: |
.badge-container .label-badge {
border-radius: 20% !important;
}
- entity: sensor.cleargrass_1_co2
name: CO2
card_mod: *ref_card_mod
Update 27.02.23:
This approved PR is supposed to add a possibility to use a ā--ha-label-badge-border-radiusā variable.
Thank you Ildar.
what do this symbols mean $: $: | ?
or could you forward me to some information to read 
BTW Iām currently testing and trying to improve the performance of my card-mod-places.
Is anyone aware or did some tests, how it is implemented and/or better from a performance perspective, if I have e.g. only one child ābarā, which I want to mod.
foo:
$: |
bar { color: red }
foo$: |
bar { color: red }
would of course both work.
But is the first way still better, because e.g. it is implemented that way, that more generic is faster and even if there is only one ābarā or option b, because it is implemented that way, that it then really selects only the first and ingest there. Could be even the other way round and b is slower, because the āselect firstā is a whyever implemented special case and therefor perhaps more time consuming.
I fear only Thomas can aswer, but perhaps someone else was either more successfull in finding the answer in the source code than I was able or did tests or have experiences as well.
Same question (first faster, second faster, both equal) for notation/ingestion
card_mod:
style:
.: |
vs.
card_mod:
style: |
I thought I had the card-mod figured out but then I tried to add a vertical-stack to a modded horizontal-stack and that broke my code.
Does anybody see what I am doing wrong? Slider & ApexChart should take up 75 % and the buttons the remaining 25 %.
@Ildar_Gabdullin : I tried following your examples (amazing compilation by the way, thank you!) but I must be missing some important detail.
type: vertical-stack
cards:
- type: custom:mod-card
style:
hui-horizontal-stack-card$: |
hui-entities-card {
margin-left: 0px !important;
margin-right: 0px !important;
margin-bottom: 0px !important;
width: 75%;
flex: unset !important;
}
card:
type: horizontal-stack
cards:
- type: entities
state_color: true
entities:
- type: custom:slider-entity-row
entity: climate.eq_3_living_room
name: Living Room
min: 4.5
max: 23
step: 0.5
hide_state: false
icon: mdi:fire
- type: divider
- type: vertical-stack
cards:
- type: custom:button-card
entity: climate.eq_3_living_room
name: 'Off'
show_name: true
show_icon: false
show_state: false
state:
- operator: template
value: '[[[ return entity.attributes.temperature == 4.5; ]]]'
color: rgb(255, 0, 0)
tap_action:
action: call-service
service: climate.set_temperature
service_data:
temperature: 4.5
entity_id: climate.eq_3_living_room
- type: custom:button-card
entity: climate.eq_3_living_room
name: 18 Ā°C
show_name: true
show_icon: false
show_state: false
state:
- operator: template
value: '[[[ return entity.attributes.temperature == 18; ]]]'
color: rgb(255, 0, 0)
tap_action:
action: call-service
service: climate.set_temperature
service_data:
temperature: 18
entity_id: climate.eq_3_living_room
- type: custom:button-card
entity: climate.eq_3_living_room
name: 20 Ā°C
show_name: true
show_icon: false
show_state: false
state:
- operator: template
value: '[[[ return entity.attributes.temperature == 20; ]]]'
color: rgb(255, 0, 0)
tap_action:
action: call-service
service: climate.set_temperature
service_data:
temperature: 20
entity_id: climate.eq_3_living_room
type: custom:mod-card
style:
hui-horizontal-stack-card$: |
hui-vertical-stack-card {
margin-left: 0px !important;
margin-right: 0px !important;
margin-bottom: 0px !important;
width: 75%;
flex: unset !important;
}
hui-slider-entity-row {
margin-left: 0px !important;
margin-right: 0px !important;
margin-bottom: 0px !important;
width: 75%;
flex: unset !important;
}
hui-apexcharts-card {
margin-left: 0px !important;
margin-right: 0px !important;
margin-bottom: 0px !important;
width: 75%;
flex: unset !important;
}
card:
type: horizontal-stack
cards:
- type: vertical-stack
cards:
- type: custom:slider-entity-row
entity: climate.eq_3_living_room
name: Living Room
min: 4.5
max: 23
step: 0.5
hide_state: false
icon: mdi:fire
- type: custom:apexcharts-card
graph_span: 24h
experimental:
color_threshold: true
update_interval: 10 s
now:
show: false
color: red
label: Now
yaxis:
- min: 4
apex_config:
grid:
show: false
chart:
height: 250px
series:
- entity: sensor.eq_3_temperature_lr
stroke_width: 2
group_by:
func: last
fill_raw: zero
color_threshold:
- value: 4.5
color: blue
- value: 18
color: yellow
- value: 20
color: red
- type: vertical-stack
cards:
- type: custom:button-card
entity: climate.eq_3_living_room
name: 'Off'
show_name: true
show_icon: false
show_state: false
state:
- operator: template
value: '[[[ return entity.attributes.temperature == 4.5; ]]]'
color: rgb(255, 0, 0)
tap_action:
action: call-service
service: climate.set_temperature
service_data:
temperature: 4.5
entity_id: climate.eq_3_living_room
- type: custom:button-card
entity: climate.eq_3_living_room
name: 18 Ā°C
show_name: true
show_icon: false
show_state: false
state:
- operator: template
value: '[[[ return entity.attributes.temperature == 18; ]]]'
color: rgb(255, 0, 0)
tap_action:
action: call-service
service: climate.set_temperature
service_data:
temperature: 18
entity_id: climate.eq_3_living_room
- type: custom:button-card
entity: climate.eq_3_living_room
name: 20 Ā°C
show_name: true
show_icon: false
show_state: false
state:
- operator: template
value: '[[[ return entity.attributes.temperature == 20; ]]]'
color: rgb(255, 0, 0)
tap_action:
action: call-service
service: climate.set_temperature
service_data:
temperature: 20
entity_id: climate.eq_3_living_room
yes, I must say I am still much surprised, and this is a unique situation. I mean, most of my entities have some sort of customization, and it never has stopped the card-mods from working. I first took out my full custom-ui, so I noticed this worked, then found it was the
customize_domain:
automation:
templates:
<<: &state_color
icon_color: >
if (state == 'on') return 'var(--primary-color)';
return 'steelblue';
# binary_sensor:
# templates:
# <<: *state_color
template for the binary_sensor domain hindering. Ive commented that now and see the icon coloring and spinning in Safari tooā¦ (still not resizing though)
this probably means the custom-ui is either stronger than card-mod (not are how to call it) or executed later, so sticks.
If you have other examples please let me know, so I can have a look. DM if must be.
Iāve asked Thomas if he can explain why this happens.
Cards inside vertical stack are not obliged to stretch themselves vertically.
You need to try layout-card, grid card - cannot tell exactly, not used them so far (may be none of them can help, I do not know).
Also, you may try to specify heights of cards explicitly (do not like it myself since may give different results):
type: custom:layout-card
layout_type: custom:horizontal-layout
layout:
column_widths: 70% 30%
width: 220
cards:
- type: vertical-stack
cards:
- type: entities
entities:
- input_number.test_number
- type: history-graph
entities:
- sensor.cleargrass_1_co2
- type: vertical-stack
cards:
- type: custom:button-card
entity: sun.sun
name: 'Off'
styles:
card:
- height: 91px
show_name: true
show_icon: false
show_state: false
- type: custom:button-card
entity: sun.sun
name: 'Off'
styles:
card:
- height: 91px
show_name: true
show_icon: false
show_state: false
- type: custom:button-card
entity: sun.sun
name: 'Off'
styles:
card:
- height: 91px
show_name: true
show_icon: false
show_state: false
Some time ago I experienced some problems, used these medicals. May be it will help you, I do not know)))
haha, no Ive tried that before for another reason (users reported slow loading of the custom-ui some time ago), but I couldnāt find any advantage tbh. So move away from that again, using the advised method for installing custom cards again.
The current issue must be in the way both customizers do their job, where custom-ui touches the backend more (hence the customized icons on more-info panels too), and card_mod is solely in the frontend. I thinkā¦
Everything is changed - HA, custom cards - every new version may hide new surprises.
Now I am a little stuck with hui-elements, lot of things depend on it in my setup.
yes, its a bit frustrating not knowing what/whyā¦ in my case, the coloring worked just fine before, and I havent changed custom-ui at all, and neither has card-mod as far as I know. So why??
just as odd as not being able to hide the 3 dots in the header menu any longer, or replace it with some replacement
for referenceās sake:
edit
ive went back up to 3.0.9 to see if changed in Card-mod could have caused this, but unfortunately that isnt the caseā¦ All I can conclude is that some HA change causes this, and which one has to be answered yet ;-(
btw, on the latest download of 3.0.13, the inspector says its .14
Thank you @Ildar_Gabdullin , that fixed the column width problem.
But I have two (hopefully now small) issues remaining:
layout:
column_widths: 70% 30%
width: 220
But this results in the columns being pushed below each other depending on the amount of cards in the dashboard despite being shown correctly in editor mode.
The latter may also solve the first issue. Essentially I do not want to define the total width of the horizontal-stack, just the ratios inside it.
type: custom:layout-card
layout_type: custom:horizontal-layout
layout:
column_widths: 70% 30%
width: 200
cards:
- type: vertical-stack
cards:
- type: custom:slider-entity-row
entity: climate.eq_3_living_room
name: Living Room
min: 4.5
max: 23
step: 0.5
hide_state: false
icon: mdi:fire
- type: custom:apexcharts-card
graph_span: 24h
experimental:
color_threshold: true
update_interval: 10 s
now:
show: false
color: red
label: Now
yaxis:
- show: false
apex_config:
grid:
show: false
chart:
height: 100px
series:
- entity: sensor.eq_3_temperature_lr
stroke_width: 2
group_by:
func: last
fill_raw: zero
color_threshold:
- value: 4.5
color: blue
- value: 16
color: yellow
- value: 18
color: orange
- value: 20
color: red
- type: vertical-stack
cards:
- type: custom:button-card
entity: climate.eq_3_living_room
name: 'Off'
show_name: true
show_icon: false
show_state: false
styles:
card:
- height: 50px
state:
- operator: template
value: '[[[ return entity.attributes.temperature == 4.5; ]]]'
color: rgb(255, 0, 0)
tap_action:
action: call-service
service: climate.set_temperature
service_data:
temperature: 4.5
entity_id: climate.eq_3_living_room
- type: custom:button-card
entity: climate.eq_3_living_room
name: 18 Ā°C
show_name: true
show_icon: false
show_state: false
styles:
card:
- height: 50px
state:
- operator: template
value: '[[[ return entity.attributes.temperature == 18; ]]]'
color: rgb(255, 0, 0)
tap_action:
action: call-service
service: climate.set_temperature
service_data:
temperature: 18
entity_id: climate.eq_3_living_room
- type: custom:button-card
entity: climate.eq_3_living_room
name: 20 Ā°C
show_name: true
show_icon: false
show_state: false
styles:
card:
- height: 50px
state:
- operator: template
value: '[[[ return entity.attributes.temperature == 20; ]]]'
color: rgb(255, 0, 0)
tap_action:
action: call-service
service: climate.set_temperature
service_data:
temperature: 20
entity_id: climate.eq_3_living_room
new challenge: add a bit of vertical spacing to entities in an embedded fold-entity-row card:
this doesnt happen on all embedded f-e-r cards oddly enough, maybe its because of the entity_pictures. and the lack of a secondary row.
- type: entities
title: Family tracked
card_mod: *header_no_margin
entities:
- type: custom:fold-entity-row
head:
type: section
label: Marijn
padding: 0
entities:
- device_tracker.unifi_me
- device_tracker.ping_iphone_me
- device_tracker.life360_me
- device_tracker.me_app
- device_tracker.me
- device_tracker.owntracks_me
- device_tracker.calltheboss_me_bt
Still Id like to add spacing, like:
or, a regular entities with the exact same list:
can that be done?
wait, the secondary doesnt help:
now I definitely need a card_mod changeā¦
btw, ofc I tried to do without the padding: 0 but thats doesnt help.
Sorry about all the confusion here.
Hui-element is supposed to be transparent to card-mod. I.e. styling hui-element should be as if styling the element inside it.
I think Iāve managed to fix that for 1.1.2, but there are lots of edge casesā¦
- type: entities
entities:
- type: section
label: Default internal styling
card_mod:
style: .divider { background-color: red; }
- type: custom:hui-element
row_type: section
label: Hui-element internal styling
card_mod:
style: .divider { background-color: green; }
- type: entities
entities:
- type: section
label: Default styled from card
- type: custom:hui-element
row_type: section
label: Hui-element styled from card
card_mod:
style:
hui-section-row $: .divider { background-color: blue; }
hui-element $: .divider { background-color: orange;}
Seems that you applied a style to a wrong element - rotation is not centered, there is a shift.
Cannot react on this, know nothing about card-mod-themesā¦
Same on my setup, strange.
yes, ofc I noticed that, thought it might be the icon not being perfectly centered. Its the same in Chrome. And the code is the exact code you useā¦
Yesterday was the 2nd time I experimented with layout-card - it is better to discuss these issues in a corresponding thread.
That is why I wrote that this is not the best solutionā¦
I do not know how to align controls automatically.
on the coloring of the template-entity-row entityās icon:
for the sake of experiment (and see if the code itself is corrrect) I changed to:
@keyframes coloring {
0% {
background: red;
}
17% {
background: orange;
}
34% {
background: yellow;
}
51% {
background: green;
}
68% {
background: lightblue;
}
85% {
background: blue;
}
100% {
background: violet;
}
which looks like:
in Safari, and
in Chrome.
which could proof to be useful as a way around the issueā¦