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!
Hi Thomas, I am trying to integrate card-mod with my custom card but not having much success. In my render method, I output an ha-card tag. I looked at the new build chain for your ha-card.js which inserts a shadowdom at that element when entity_ids is populated. How/where does entity_ids get set in the ha-card lifecycle?
Card-mod looks for a property named config or _config in the parent nodes of the ha-card element (keeps looking up the tree if necessary).
Pretty much every card Iāve seen sets this property in the setConfig function, and itās the only requirement for card-mod to work.
entity_ids is a property in the card configuration, but is entirely optional. It can be used to tweak the update behavior of templates, but should generally not be necessary.
Anyway, itās nothing you should need to bother with.
I installed the card-mod using HACS. After a moment wondering the missing style changes, I noticed the error in web-console:
TypeError: Error resolving module specifier: card-tools/src/templates.js
Iām running HA 0.105.2, card-mod 12. Any hint how to resolve this error, a resource missing from the installation, maybe? Thanks!
Update hacs to 0.21.2 and then try again.
Update HACS to 0.21.3 and then try again.
Thank you! Update to the latest HACS + reinstall did it. 
Iām trying to adjust the font-weight as it quite bold on default, everything else seems to work fine, but any syntax for font-weight doesnāt change anything, Iāve tried the following:
font-weight: normal;
font-weight: bold;
font-weight: lighter;
font-weight: 300;
Any ideas? thanks