Thanks for your reply but that doesn’t really helps me. My initial question was clear: icons based on shutter position:
I believe somewhere it should be defined like:
Position 0 = icon shutter-0
Position 1 - 30 = shutter-1
Position 31 - 60 = shutter-2
Position 61 - 99 = shutter-3
Position 100 = shutter-4
I am on 2021.12.X
Hope someone can help, maybe @thomasloven
e.g. as starting point
if state_attr('cover.alle_rolladen', 'current_position')|int(default=0) < 100
Hi there,
Trying to modify a hui-element as I have begin to replace the “custom:hui-” trick.
- type: custom:hui-element
card_type: horizontal-stack
card_mod:
style:
hui-horizontal-stack-card$: |
#root {
justify-content: center;
margin-bottom: 1em;
}
With the dirty hack it worked before.
I’m trying to achieve what this image shows (cannot upload more than one media file):
Basically trying to center custom:button-card under the custom:light-popup-card.
Styling “chip” buttons:
Distribution of buttons in a row:
code
type: entities
title: distribution
entities:
- type: section
label: default
- type: buttons
entities: &ref_buttons
- entity: sun.sun
show_name: true
show_icon: true
- entity: sun.sun
show_name: true
show_icon: true
- entity: sun.sun
show_name: true
show_icon: true
- entity: sun.sun
show_name: true
show_icon: true
- type: section
label: card-mod
- type: buttons
entities: *ref_buttons
card_mod:
style:
hui-buttons-base $: |
.ha-scrollbar {
justify-content: flex-end;
}
- type: buttons
entities: *ref_buttons
card_mod:
style:
hui-buttons-base $: |
.ha-scrollbar {
justify-content: center;
}
- type: buttons
entities: *ref_buttons
card_mod:
style:
hui-buttons-base $: |
.ha-scrollbar {
justify-content: space-between;
}
- type: buttons
entities: *ref_buttons
card_mod:
style:
hui-buttons-base $: |
.ha-scrollbar {
justify-content: space-evenly;
}
- type: buttons
entities: *ref_buttons
card_mod:
style:
hui-buttons-base $: |
.ha-scrollbar {
justify-content: space-around;
}
Distribution for all rows (same method may be used for other styles):
code
type: entities
title: distribution for all rows
entities:
- &ref_buttons
type: buttons
entities:
- &ref_button
entity: sun.sun
show_name: true
show_icon: true
- *ref_button
- *ref_button
- *ref_button
- *ref_buttons
- *ref_buttons
card_mod:
style:
hui-buttons-row:
$ hui-buttons-base $: |
.ha-scrollbar {
justify-content: center;
}
Colored background, border & text, rectangular shape (for all buttons and for some button), 3D-shape (+ changed styles on hover & select):
code
type: entities
entities:
- type: section
label: default
- type: buttons
entities: &ref_buttons
- entity: sun.sun
show_name: true
show_icon: true
- entity: sun.sun
show_name: true
show_icon: true
- entity: sun.sun
show_name: true
show_icon: true
- entity: sun.sun
show_name: true
show_icon: true
- type: section
label: card-mod
- type: buttons
entities: *ref_buttons
card_mod:
style:
hui-buttons-base $: |
ha-assist-chip {
--ha-assist-chip-filled-container-color: yellow;
}
- type: buttons
entities: *ref_buttons
card_mod:
style:
hui-buttons-base $: |
ha-assist-chip:nth-child(3) {
--ha-assist-chip-filled-container-color: yellow;
}
- type: buttons
entities: *ref_buttons
card_mod:
style:
hui-buttons-base $: |
ha-assist-chip {
--ha-assist-chip-filled-container-color: yellow;
--_label-text-color: red;
border: 1px solid cyan;
border-radius: 4px;
--_label-text-weight: 800;
}
- type: buttons
entities: *ref_buttons
card_mod:
style:
hui-buttons-base $: |
ha-assist-chip {
--_focus-label-text-color: cyan;
--_hover-label-text-color: white;
--_pressed-label-text-color: green;
--_hover-state-layer-color: red;
--_hover-state-layer-opacity: 0.5;
--_pressed-state-layer-color: cyan;
--_pressed-state-layer-opacity: 0.5;
}
- type: buttons
entities: *ref_buttons
card_mod:
style:
hui-buttons-base $: |
ha-assist-chip {
box-shadow: var( --ha-card-box-shadow, 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12) ) !important;
}
before 2023.12
Code
type: entities
title: colors & shape
entities:
- type: section
label: default
- type: buttons
entities: &ref_buttons
- entity: sun.sun
show_name: true
show_icon: true
- entity: sun.sun
show_name: true
show_icon: true
- entity: sun.sun
show_name: true
show_icon: true
- entity: sun.sun
show_name: true
show_icon: true
- type: section
label: card-mod
- type: buttons
entities: *ref_buttons
card_mod:
style: |
:host {
--ha-chip-background-color: yellow;
--ha-chip-text-color: red;
}
- type: buttons
entities: *ref_buttons
card_mod:
style:
hui-buttons-base $ .ha-scrollbar: |
ha-chip:nth-child(3) {
--ha-chip-background-color: yellow;
--ha-chip-text-color: red;
}
- type: buttons
entities: *ref_buttons
card_mod:
style:
hui-buttons-base $ .ha-scrollbar ha-chip:
$: |
.mdc-chip {
border: 1px solid red !important;
border-radius: 4px !important;
}
.mdc-chip__ripple {
border-radius: 4px !important;
}
- type: buttons
entities: *ref_buttons
card_mod:
style:
hui-buttons-base $ .ha-scrollbar ha-chip:nth-child(3):
$: |
.mdc-chip {
border: 1px solid red !important;
border-radius: 4px !important;
}
.mdc-chip__ripple {
border-radius: 4px !important;
}
- type: buttons
entities: *ref_buttons
card_mod:
style:
hui-buttons-base $ .ha-scrollbar ha-chip:
$: |
.mdc-chip {
box-shadow: var( --ha-card-box-shadow, 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12) ) !important;
border-radius: 4px !important;
}
.mdc-chip__ripple {
border-radius: 4px !important;
}
- type: buttons
entities: *ref_buttons
card_mod:
style:
hui-buttons-base $ .ha-scrollbar ha-chip:
$: |
.mdc-chip {
box-shadow: var( --ha-card-box-shadow, 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12) ) !important;
border-radius: 4px !important;
--ha-chip-background-color: transparent;
}
.mdc-chip__ripple {
border-radius: 4px !important;
}
Colored icon:
code
type: entities
entities:
- type: section
label: default
- type: buttons
entities: &ref_buttons
- entity: sun.sun
show_name: true
show_icon: true
- entity: sensor.processor_use
name: sensor
show_name: true
show_icon: true
- entity: binary_sensor.service_off_value
name: 'binary_sensor: off'
show_name: true
show_icon: true
- entity: binary_sensor.service_on_value
name: 'binary_sensor: on'
show_name: true
show_icon: true
- type: section
label: card-mod
- type: buttons
entities: *ref_buttons
card_mod:
style:
hui-buttons-base $: |
ha-assist-chip:nth-child(1) {
--state-sun-below_horizon-color: green;
--state-sun-above_horizon-color: magenta;
}
ha-assist-chip:nth-child(2) {
--secondary-text-color: red;
}
ha-assist-chip:nth-child(n+3) {
--state-binary_sensor-on-color: green;
--state-binary_sensor-off-color: cyan;
}
before 2023.12
Code
type: entities
entities:
- type: section
label: default
- type: buttons
entities: &ref_buttons
- entity: sun.sun
show_name: true
show_icon: true
- entity: sensor.cleargrass_1_co2
show_name: true
show_icon: true
- entity: binary_sensor.service_off_value
show_name: true
show_icon: true
- entity: binary_sensor.service_on_value
show_name: true
show_icon: true
- type: section
label: card-mod
- type: buttons
entities: *ref_buttons
card_mod:
style: |
:host {
--paper-item-icon-active-color: magenta;
--secondary-text-color: cyan;
}
- type: buttons
entities: *ref_buttons
card_mod:
style:
hui-buttons-base $ .ha-scrollbar: |
ha-chip:nth-child(3) {
--paper-item-icon-active-color: magenta;
--secondary-text-color: cyan;
}
Changed width:
code
type: entities
entities:
- type: section
label: default
- type: buttons
entities: &ref_buttons
- entity: sun.sun
show_name: true
show_icon: true
- entity: zone.home
show_name: true
show_icon: true
- type: section
label: card-mod
- type: buttons
entities: *ref_buttons
card_mod:
style:
hui-buttons-base $: |
ha-assist-chip {
width: 110px;
}
before 2023.12
Code
type: entities
entities:
- type: section
label: default
- type: buttons
entities: &ref_buttons
- entity: sun.sun
show_name: true
show_icon: true
- entity: sensor.cleargrass_1_co2
show_name: true
show_icon: true
name: CO2 value
- entity: zone.home
show_name: true
show_icon: true
- type: section
label: card-mod
- type: buttons
entities: *ref_buttons
card_mod:
style:
hui-buttons-base $ .ha-scrollbar ha-chip:
$: |
.mdc-chip span {
width: 60px;
}
hui-buttons-base $: |
.ha-scrollbar {
justify-content: center;
}
Changed width + centered icon & text:
code
type: entities
entities:
- type: section
label: default
- type: buttons
entities: &ref_buttons
- entity: sun.sun
show_name: true
show_icon: true
- entity: sensor.xiaomi_cg_1_co2
show_name: true
show_icon: true
name: CO2
- entity: zone.home
show_name: true
show_icon: true
- type: section
label: card-mod
- type: buttons
entities: *ref_buttons
card_mod:
style:
hui-buttons-base $ ha-assist-chip:
$: |
.container {
justify-content: center;
}
.: |
ha-assist-chip {
width: 120px;
}
before 2023.12
Code
type: entities
title: centered icon & text
entities:
- type: section
label: default
- type: buttons
entities: &ref_buttons
- entity: sun.sun
show_name: true
show_icon: true
- entity: sensor.cleargrass_1_co2
show_name: true
show_icon: true
name: CO2
- entity: zone.home
show_name: true
show_icon: true
- type: section
label: card-mod
- type: buttons
entities: *ref_buttons
card_mod:
style:
hui-buttons-base $ .ha-scrollbar ha-chip:
$: |
.mdc-chip {
width: 120px;
justify-content: center;
}
Disabling a button:
code
type: entities
entities:
- entity: input_boolean.test_boolean
name: disable
- type: buttons
entities:
- entity: sun.sun
show_name: true
show_icon: true
- entity: sun.sun
show_name: true
show_icon: true
- entity: sun.sun
show_name: true
show_icon: true
- entity: sun.sun
show_name: true
show_icon: true
card_mod:
style:
hui-buttons-base $: |
ha-assist-chip:nth-child(2) {
{% if is_state('input_boolean.test_boolean','on') %}
pointer-events: none;
opacity: 0.2;
{% endif %}
}
More examples are described here.
Nice.
Are these buttons a new option for entities?
I have been creating something similar with a custom button template for some time now and wondered if I might pose a different kind of question? Rather than ask how to do something I can’t do, I am interested in whether there is a better way to achieve this. I have my method which I’m happy to share but I wonder if these (new?) buttons allow for a simpler method?
Both are based on an input_boolean…
these are ‘on’
these are ‘off’
Note the use of a second checkbox icon and different entity icon and labels based on state
Hello all,
With 2021.12.0 and up, the style seems to be broken :’(
Here is a style that was working perfectly in 2021.11.5
type: custom:mod-card
style: |
ha-card {
background-image: url('/local/ww90t554aaw-s2.jpg');
background-size: 145% 100%;
--ha-card-background: rgba(255,255,255,0);
--primary-text-color: #000000;
--secondary-text-color: #E0E0E0;
--paper-item-icon-color: #44739E;
card:
(...)
It was showing all my texts in black on white background (–primary-text-color), independantly of the selected theme, which was what I wanted.
But since the latest version of HA, if I select a dark theme (or in the companion app in dark mode), the text is white, as configured in the theme css file and as a consequence my text, on a white background, is unreadable.
Is it possible that the classes had changed?
What are the new names?
Please help me.
- Closing bracket is missing.
- Why using mod-card? What card are you talking about?
It is not missing in my config, it is in the copy/paste that I screwedup.
Let me post the full card, it will make more sense probably. As I’m using a light background image, I’m using mod-card to force the text in black and icons in blue (default HA color scheme).
type: custom:mod-card
style: |
ha-card {
background-image: url('/local/ww90t554aaw-s2.jpg');
background-size: 145% 100%;
--ha-card-background: rgba(255,255,255,0);
--primary-text-color: #000000;
--secondary-text-color: #E0E0E0;
--paper-item-icon-color: #44739E;
}
card:
type: custom:vertical-stack-in-card
cards:
- type: glance
title: Samsung EcoBubble
entities:
- entity: sensor.samsung_machine_state
- entity: sensor.samsung_washing_time
icon: mdi:clock-outline
name: Fin du programme
- entity: sensor.samsung_prog_state
icon: mdi:debug-step-over
name: Etape du programme
- type: iframe
url: https://localhost/HomeAssistant/EcoBubble/index.html
aspect_ratio: 78%
- type: glance
entities:
- entity: sensor.lave_linge_energy_daily
name: Aujourd'hui
icon: mdi:calendar-today
- entity: sensor.lave_linge_energy_weekly
name: Cette semaine
icon: mdi:calendar-week
- entity: sensor.lave_linge_energy_monthly
name: Ce mois-ci
icon: mdi:calendar-month
With the default HA theme
But in dark mode:
Again:
Does the vertical-stack-in-card
have ha-card
element?
Do you see changes in Code Inspector?
If “Always need black text and blue icons because of the background image I’ve set” doesn’t answer that question then obviously I did not understand the question. Or, you try to tell me that there is another way to achieve my goal but how then?
Does the
vertical-stack-in-card
haveha-card
element?
Do you see changes in Code Inspector?
I don’t see any change, especially because this was working in 2021.11.5 and no longer in 2021.12.0 (and 2021.12.1, 2021.12.2 and 2021.12.3).
Nothing was updated but HA core (neither mod-card, neither vertical-stack-in-card)
vertical-stack-in-card is just vertical-stack without separators. And replacing it with the regular vertical-stack doesn’t change my issue.
Obviously, mod-card is working, as I’ve the requested background
background-image: url('/local/ww90t554aaw-s2.jpg');
but the text remains white, despite the
--primary-text-color: #000000;
did not understand the question.
Do you understand a difference between card-mod and mod-card? The latter is supposed to be used only for cards w/o ha-card. That is why I asked you about ha-card.
I think you would greatly benefit from re-reading the documentation on GitHub.
Judging from your code, there have been significant changes that you need to catch up with.
Yes, probably, my code is from a very old version of the card/module.
I did the change to “load it as a module” in the frontend section when it was advised.
Using the new way of working, I managed to change my text to black again, keeping my background.
Thanks
Is it possible to change the border thickness of the person icon/badge on the maps card? I see it’s in the .marker style but can’t find a way to change it with card_mod.
haha, thats wild for Sylvester . And yes, Ive been using gifs for buttons since forever, btw, also as entity_picture. use
for my app device_trackers
Was wondering if you could help me fix this glowing Christmas card I tried…
cleaned that up a bit…: [Dec-18-2021 15-13-07] type: custom:button-card entity: input_boolean.pulsate_light variables: duration: > [[[ return states['input_number.transition_time'].state; ]]] tooltip: > [[[ return entity.state == 'on'? 'Fixed lights' :'Breathing lights'; ]]] show_name: false size: 95% aspect_ratio: 1/1 state: - value: 'on' icon: mdi:hexagram styles: card: - background-color: ivory - animation: > [[[ return 'glow ' + variables…
Id like it to appear glowing from the background of the card, but for now managed to set the box-shadow like this.
can we at all use word wrap on an individual glance state (3d (last) one, Prediction)?
type: entities
title: Buienradar Iungo
card_mod:
style: |
.card-header {
background-color: var(--background-color-off);
color: var(--text-color-off);
padding-top: 0px;
padding-bottom: 0px;
margin: 0px 0px 16px 0px;
}
entities:
- type: custom:hui-element
card_type: glance
card_mod:
style: |
ha-card {
box-shadow: none;
margin: 0x -16px 0px -16px;
}
entities:
- sensor.temp_current
- sensor.windspeed
- sensor.prediction. # <--- needs word-wrap
- type: custom:fold-entity-row
I checked the examples for word-wrap but probably missed it, and this is what is actually in the state:
geez, really did a word search for that… still, doesnt work out of the box (the mod still has the old style though, so I used it as:)
card_mod:
style: |
ha-card {
box-shadow: none;
margin: 0x -16px 0px -16px;
}
.entities .entity:
$: |
div:not(.name) {
text-overflow: unset !important;
white-space: unset !important;
}
no change unfortunately nor does
- entity: sensor.prediction
card-mod:
style: |
div:not(.name) {
text-overflow: unset !important;
white-space: unset !important;
}
work