For about 1 month Iām struggling with this error. When navigating to a tab from another the front-end ārandomly freezesā for a second with a blank screen and āReload lovelaceā message then after a couple of seconds it reloads itself with this error in developer tools. The problem is that after reload the page doesnāt load correctly. This happens approx. every hour. Iām using Hass.io (0.104.3) and card-mod v.12. Please anybody has any idea why this is happening?
Have you tried it without using mod-card? Something like this:
- type: thermostat
entity: climate.dining_room_thermostat
name: Nest
style: |
ha-card {
--heat-color: #ffffff;
}
round-slider {
--round-slider-bar-color: #ffffff;
}
New feature!
There is a pre-release for version 13 of card-mod which allows for setting styles in your theme, so that they are applied to all cards at once.
Hereās a recording from during development, to show how this can be used to do things which are not normally possible with themes.
See card-mod-themes.md for more info.
To get this in HACS, you need to enable āShow Betaā in the card-mod page.
3 Likes
That looks really useful. It would have been a lot more useful, if youād released it before I spent my weekend adding almost identical styles to lots of cards 
.
If I understand it right, I can add settings to a theme which will then affect all relevant elements e.g. cards or other. Unless, the element has itās own dedicated style: section.
So, if I want to tweak a particular card, Iād have to duplicate all of the theme settings to that cardās style: and then modify what I wanted to change?
Iām probably missing something, but would it be better to always apply the theme settings and then any style: settings, which would act as an override, for individual element tweaks?
Combining styles isnāt entirely straight forward, and Iām still conflicted about whether thatās a good of bad idea. Thatās part of why I call it beta.
Yes, I do get some odd results even just using card-mod now. But at the end of the day all these tweaks are just merging CSS from a variety of locations arenāt they? Anyhow, Iām no expert and I certainly donāt have your knowledge of how it works.
Hereās an example:
# themes/airy.yaml
airy:
rgb-card-mod-card: |
ha-card.type-entities, ha-card.type-glance {
background: rgba(0,0,0,0);
box-shadow: none;
}
ha-card.type-picture-entity > .footer{
bottom: unset;
top: 0;
}
rgb-card-mod-row: |
:host(:not(.type-section)) {
display: block;
background: var(--ha-card-background);
box-shadow: var(
--ha-card-box-shadow,
0 2px 2px 0 rgba(0, 0, 0, 0.14),
0 1px 5px 0 rgba(0, 0, 0, 0.12),
0 3px 1px -2px rgba(0, 0, 0, 0.2)
);
border-radius: 10px;
padding: 4px;
}
:host(.type-custom-slider-entity-row) {
padding-right: 16px;
}
.divider {
display: none;
}
.label {
color: var(--primary-text-color);
font-variant: small-caps;
}
rgb-card-mod-glance: |
:host {
display: block;
background: var(--ha-card-background);
box-shadow: var(
--ha-card-box-shadow,
0 2px 2px 0 rgba(0, 0, 0, 0.14),
0 1px 5px 0 rgba(0, 0, 0, 0.12),
0 3px 1px -2px rgba(0, 0, 0, 0.2)
);
border-radius: 10px;
padding: 4px !important;
margin: 0 4px 12px;
width: calc(var(--glance-column-width, 20%) - 8px) !important;
}
.name {
overflow: unset;
white-space: unset;
}
rgb-card-mod-badge-json: |
{
".": "
:host {
--label-badge-red: {% if is_state(config.entity, 'home') %}green{%else%}red{%endif%};
}",
"ha-state-label-badge": {
"$": {
"ha-label-badge": {
"$": ".label-badge {
border: 0px;
box-shadow: var(
--ha-card-box-shadow,
0 2px 2px 0 rgba(0, 0, 0, 0.14),
0 1px 5px 0 rgba(0, 0, 0, 0.12),
0 3px 1px -2px rgba(0, 0, 0, 0.2)
);
border-radius: 10px;
--label-badge-text-color: var(--label-badge-red);
}"
}
}
}
}
#ui-lovelace.yaml
views:
- title: Showcase
badges:
- device_tracker.demo_anne_therese
- device_tracker.demo_home_boy
- device_tracker.demo_paulus
cards:
- type: custom:auto-entities
card:
type: entities
title: Lights
show_header_toggle: false
filter:
include:
- type: section
label: Dimmable
- domain: light
attributes:
supported_features: ">0"
options:
type: custom:slider-entity-row
- type: section
label: On/Off
- domain: light
attributes:
supported_features: 0
- type: custom:auto-entities
card:
type: glance
title: Current state
columns: 3
filter:
include:
- domain: binary_sensor
- domain: sensor
exclude:
- attributes:
type: browser_mod
sort:
method: name
- type: picture-entity
entity: camera.demo_camera
2 Likes
Nobody had this error before me? 
Please! Anybody can guide me to resolve this error. 
Thank you.
Have you deactivated card-mod to make sure thatās the problem?
Yes. After deactivating card-mod the problem disappears. Tested for about 6 hours without card-mod.
this sounds very promising indeed! thank you for keeping up in developing this great tool.
would this also allow us to set eg state_color: true and use it as a global ācustomizingā tool, a bit like custom-ui allowed us to do in states-ui?
If not, would be willing to consider thinking about that please? We really could use a global customizing tool for Lovelace.
Since updating to 0.105.x (currently 0.105.2), some entity types in glance cards no longer accept my styles for the āactiveā color. Examples are input_boolean & automation, and both worked fine under 0.104.x. Hereās a snippet from a glance card:
- entity: input_boolean.heat_water
name: Heat
tap_action:
action: toggle
hold_action:
action: more-info
icon: 'mdi:fire'
style: |
:host {
--paper-item-icon-color:
{% if states(config.entity) == 'on' %} red;
{% else %} green;
{% endif %}
}
type: glance
When the input_boolean is off, the icon is green as expected. When itās on, I get the default color (yellow) instead of red. If I open the inspector, I still see the card-mod element in what looks like the correct place with the correct color based on the state, but the icon itself gets the default active color (yellow).
Adding state_color: true to the glance card doesnāt help, but I donāt think itās supposed to be used there anyway. Same happens for automation entities in a glance card.
Please help me disable the sticky button. My Hass.io ver:0.105.2 (yaml configuration method). In the previous version (card-modder.js) everything worked great! Now - button staying selected after a click. How to apply a style to a pressed button (when pressed and removed the pointer)? Or how to turn off sticking?
- type: entity-button
icon: hide
name: Receiver
entity: input_select.remote
hold_action: none
tap_action:
action: call-service
service: input_select.set_options
service_data:
entity_id: input_select.remote
options: āVSXā
style: |
:host {
āha-card-background: linear-gradient(rgba(235,145,70,1), rgba(70,35,0,1) 65%);
}
or this:
style: |
ha-card {
background: linear-gradient(rgba(235,145,70,1), rgba(70,35,0,1) 65%);
}
I have created (inspired by @BrianHanifin) what I think is quite a nice UI of for my new garden irrigation system. Except for some empty space Iād like to remove between each ālineā.
In the following pictures I have left a border around each horizontal-stack just to aid seeing what is going on. Each horizontal-stack is made up of one entity and one custom-button but Iād like them to not have so much space around them. The config is at the end of this post.
Is this possible? Is there anyone who can help? Thanks in advanceā¦
Lovelace View - Each Zone line is an include
#=== Zone 1
- !include
- includes/irrigation/zone_duration_line.yaml
- cycle: 1
zone: 1
zone_duration_line.yaml (which has another include for the button)
# lovelace_gen
type: custom:mod-card
style: |
ha-card {
border: 1px solid green;
}
card:
type: custom:hui-horizontal-stack-card
cards:
- type: custom:hui-entities-card
show_header_toggle: false
entities:
- entity: input_number.irrigation_cycle{{ cycle }}_zone{{ zone }}_duration
name: Zone {{ zone }}
#=== Skip Zone
- !include
- ../button_boolean_check_box.yaml
- entity: input_boolean.irrigation_cycle{{ cycle }}_skip_zone{{ zone }}
layout: name_over_icon
name: Skip
on_icon: mdi:close-box-outline
card_width: 50px
card_margin_top: 1.4em
card_height: 40px
card_font_size: 12px
grid_template_areas: >
"l" "n" "i" "s"
grid_template_columns: 1fr
grid_template_rows: min-content min-content 1fr min-content
name_justify_self: auto
button_boolean_check_box.yaml
# lovelace_gen
#======================
#=== Boolean Check Box
#======================
type: custom:button-card
entity: {{ entity }}
show_name: {{ show_name | default('true') }}
name: {{ name }}
icon: {{ on_icon | default('mdi:check-box-outline') }}
size: {{ size | default('80%') }}
lock:
enabled: {{ lock_enabled | default('false') }}
styles:
lock:
- color: {{ lock_color | default('red') }}
grid:
- grid-template-areas: >
{{ grid_template_areas | default('"n i"') }}
- grid-template-columns: {{ grid_template_columns | default('1fr 15%') }}
- grid-template-rows: {{ grid_template_rows | default('1fr') }}
card:
- width: {{ card_width | default('') }}
- height: {{ card_height | default('40px') }}
- margin-top: {{ card_margin_top | default('-0.3em') }}
- font-size: {{ card_font_size | default('14px') }}
- border-radius: {{ card_border_radius | default('10px') }}
name:
- justify-self: {{ name_justify_self | default('right') }}
state:
- value: 'off'
icon: {{ off_icon | default('mdi:checkbox-blank-outline') }}
styles:
card:
- color: {{ card_off_color | default('var(--secondary-text-color)') }}
icon:
- color: {{ icon_off_color | default('var(--secondary-text-color)') }}
2 Likes
Dear community,
I am using a custom:vertical-stack-in-card to compile data from different sensors.
Part of the cards of this main card are conditional cards combined with entity card. How can I remove space between each card when they appear?
- card:
entities:
- sensor.paris_rain_chance
type: entities
conditions:
- entity: sensor.paris_rain_chance
state_not: '0'
type: conditional
I will take a look at this. I havenāt used lovelace_gen before (Iāve been using decluttering-card) so I have to get it setup. I have been meaning to explore it anyway.
Damn, I love your UI BTW! I love your super compact checkbox with label.
UPDATE: @klogg in zone_duration_line.yaml add the 4 style lines to shrink the top and bottom padding from 16 pixels to 0 pixels.
- type: custom:hui-entities-card
show_header_toggle: false
style: |-
#states {
padding: 0px 16px;
}
entities:
- entity: input_number.irrigation_zone{{ zone }}_duration
name: Zone {{ zone }}
I had trouble tracking down why the checkbox stayed lower than the entity on the left, but I found an inelegant, but workingā¦ work-around. In button_boolean_check_box.yaml add the style lines.
type: custom:button-card
style: |-
ha-card#card.button-card-main {
position: relative;
top: -8px;
}
1 Like
Thanks, Like I said, entirely inspired by your post elsewhere!
And even bigger thanks for the white space removal!
I must admit that I play around blindly with those style entries as I donāt entirely understand how to identify the elements. But I never would have stumbled upon this solution. Thanks againā¦
1 Like
Just for completeness I included a default so that the Weather Adjust check box stays in the right place 
style: |
ha-card#card.button-card-main {
position: relative;
top: {{ vertical_shift | default('auto') }};
}
2 Likes
Indeed, that is great! I didnāt see this coming. Thank you!