It is centered. Probably you need to remove top padding for the bottom part of the footer (which is below the divider).
thank you Ildar. I am really trying to understand what youâre saying, but sorry I dontâŚ
this is the full card:
type: entities
title: Speedtest
card_mod:
class: class-header-margin
style:
hui-buttons-header-footer $ hui-buttons-base $ : |
.ha-scrollbar {
justify-content: center;
height: 40px;
align-content: center;
margin: 0px;
}
entities:
- type: custom:mini-graph-card
card_mod:
style: |
ha-card {
box-shadow: none;
margin: -8px -16px -16px -16px;
}
align_state: center
icon: mdi:speedometer
entities:
- entity: sensor.speedtest_download
name: Download
color: green
- entity: sensor.speedtest_upload
name: Upload
color: red
# - entity: sensor.speedtest_ping
# name: Ping
# color: yellow
show:
extrema: true
labels: true
points: true
- type: custom:fold-entity-row
head:
type: section
label: Speedtest entities
card_mod:
style: |
.label {
margin-left: 0px;
}
padding: 0
entities:
- entity: sensor.speedtest_download
name: Download
- entity: sensor.speedtest_upload
name: Upload
- entity: sensor.speedtest_ping
name: Ping
# - type: button
# name: Run Speedtest
# tap_action:
# action: call-service
# service: speedtestdotnet.speedtest
footer:
type: buttons
entities:
- entity: sensor.speedtest_download
name: Run Speedtest
icon: mdi:speedometer
tap_action:
action: call-service
service: speedtestdotnet.speedtest
and this the result:
its almost what I want, and you can celerity see the âuncenteredâ button in the footer.
if you say:
I am struggling to understand that. I did play with the paddings, even added padding-top: 0px; which at first sight does change it it, but, when looking more closely, simply cuts of the top of the button background:
which is odd, because padding: 0px should not cut it, but touch it?
but wait! this helps:
style:
hui-buttons-header-footer $ hui-buttons-base $ : |
.ha-scrollbar {
justify-content: center;
height: 50px;
align-content: center;
margin: -8px 0px 0px 0px;
}
its not the padding, but the margin that needs to be adjusted! and because of that, also the height.
footer:
type: buttons
entities:
- entity: sun.sun
name: some very very very very long button
card_mod:
style:
hui-buttons-header-footer $ hui-buttons-base $: |
.ha-scrollbar {
justify-content: center;
padding-top: 0px !important;
}
Check MY screenshot - it is centered.
The âha-scrollbarâ is placed under the âdividerâ which has margins 16px.
Since you removed top padding from the âha-scrollbarâ & it has bottom padding 16px, the button becomes centered between divider & bottom edge.
Probably there are other reasons.
Just take this and test:
type: vertical-stack
cards:
- type: entities
entities:
- sun.sun
- type: custom:fold-entity-row
padding: 0
head:
entity: sun.sun
entities:
- sun.sun
- sun.sun
footer:
type: buttons
entities:
- entity: sun.sun
name: some very very very very long button
card_mod:
style:
hui-buttons-header-footer $ hui-buttons-base $: |
.ha-scrollbar {
justify-content: center;
padding-top: 0px !important;
}
Not literally âyouâ. This is just a translation from Russian.
Means - âif someone did A and then did B, then âŚâ
1 Like
yep, thats it changing the height takes the button off-center:
card_mod:
style:
hui-buttons-header-footer $ hui-buttons-base $: |
.ha-scrollbar {
height: 50px;
justify-content: center;
padding-top: 0px !important;
}
btw why use the vertical-stack, its not needed:
- type: entities
entities:
- sun.sun
- type: custom:fold-entity-row
padding: 0
head:
entity: sun.sun
entities:
- sun.sun
- sun.sun
footer:
type: buttons
entities:
- entity: sun.sun
name: some very very very very long button
card_mod:
style:
hui-buttons-header-footer $ hui-buttons-base $: |
.ha-scrollbar {
height: 50px;
justify-content: center;
padding-top: 0px !important;
}
yields the exact same result
Itâs left from my test. Each test has a description in a markdown card placed above the test card in the stack.
Get rid of it.
no, itâs the whole purpose of this effort.
I find the height if the footer way too big, and want it to be close to the height of the fold. Or, even better, the height of the button plus top and bottom margin 8px.
Try to operate by paddings for âha-scrollbarâ + margins for âdividerâ instead of overall height.
I will.
just as another example for the use of this:
see the difference between regular button entities in the entities list, and the footer. Ive not yet added the additional styling, this is more of an exercise for the spacing.
- type: entities
title: Soundbites
card_mod:
class: class-header-margin
style:
hui-buttons-header-footer $ hui-buttons-base $ : |
.ha-scrollbar {
justify-content: space-evenly;
height: 50px;
align-content: center;
margin: -8px 0px 0px 0px;
}
show_header_toggle: false
entities:
- input_select.sound_bite
- input_select.sound_bite_player
- input_number.sound_bite_volume
- type: divider
- type: custom:hui-element
card_type: horizontal-stack
cards:
- type: custom:button-card
entity: input_boolean.loop_sound_bite
<<: &style_boolean
show_name: false
aspect_ratio: 4/1
icon: >
[[[ return (entity.state === 'on') ? 'mdi:restart' : 'mdi:restart-off'; ]]]
styles:
icon:
- color: >
[[[ return (entity.state === 'on') ? 'green' : 'var(--text-color)'; ]]]
card_mod:
style: |
ha-card {
box-shadow: none;
}
- type: custom:button-card
entity: script.play_sound_bite
<<: &style_script
show_name: false
aspect_ratio: 4/1
icon: >
[[[ return (entity.state === 'on') ? 'mdi:stop' : 'mdi:play' ]]]
styles:
card:
- box-shadow: none
icon:
- color: >
[[[ return (entity.state === 'on') ? 'red' : 'var(--text-color)'; ]]]
tap_action:
action: call-service
service: script.toggle
service_data:
entity_id: entity
haptic: light
hold_action:
action: more-info
haptic: light
footer:
type: buttons
entities:
- entity: input_boolean.loop_sound_bite
name: Loop Soundbite
- entity: script.play_sound_bite
name: Play soundbite
icon: mdi:play
- type: entities
card_mod: *header
title: Tunes
entities:
- input_select.tune
- input_select.tune_player
- input_number.tune_volume
- type: divider
# - type: buttons
# entities:
# - input_boolean.loop_tune
# - script.play_tune
- type: custom:hui-element
card_type: horizontal-stack
cards:
- type: custom:button-card
entity: input_boolean.loop_tune
<<: *style_boolean
- type: custom:button-card
entity: script.play_tune
<<: *style_script
footer:
type: buttons
entities:
- entity: input_boolean.loop_tune
name: Loop Tune
- entity: script.play_tune
name: Play tune
icon: mdi:play
ofc, I could also change the height of the button cards in the entities list, but this was a quick fix, also trying to usage the core features as much as possible (I kind of like the visual difference of the footer entities opposed to the regular items
one more, adding some extra styling:
- type: entities
title: Intercom messages
card_mod:
class: class-header-margin
style: &footer
hui-buttons-header-footer $ hui-buttons-base $ : |
.ha-scrollbar {
justify-content: space-evenly;
height: 50px;
align-content: center;
margin: -8px 0px 0px 0px;
--ha-chip-background-color: var(--primary-color);
--ha-chip-text-color: var(--card-background-color);
--paper-item-icon-active-color: red;
--secondary-text-color: var(--card-background-color);
}
hui-buttons-header-footer $ hui-buttons-base $ .ha-scrollbar ha-chip:
$: |
.mdc-chip {
border: 1px solid green;
border-radius: var(--ha-card-border-radius);
}
Iâve added the chip border merely for syntactical checks, so I know it is the correct place for the element.
Not sure though is the Paths are as efficient as could be?
Hello,
I am trying to make transparent the background of the card âauto-entitiesâ but with no luck.
What am I doing wrong ?
- type: vertical-stack
cards:
- type: custom:auto-entities
card:
type: entities
style: |
ha-card: {
background: transparent;
}
filter:
include:
Thank you.
Remove â:â
It doesnât work. Here my full configuration:
- type: vertical-stack
cards:
- type: custom:auto-entities
card:
type: entities
style: |
ha-card {
background: transparent;
}
filter:
include:
- domain: device_tracker
options:
type: custom:template-entity-row
icon: mdi:network-outline
secondary: >-
{{ as_timestamp(states[config.entity].last_changed)|
timestamp_custom('%X - %d/%m/%Y') }}
state: >-
{{state_attr(config.entity, 'ip')}} |
{{state_attr(config.entity, 'mac')}}
style: |
:host {
{% if is_state('this.entity_id', 'home') %}
color: yellow
{% endif %}
}
exclude:
- state: unknown
- state: unavailable
show_empty: false
sort:
method: friendly_name
This is not important.
Your auto-list may include only âsun.sunâ, the style should work.
Put âredâ instead of âtransparentâ.
And for better compatibility - specify âcard_modâ keyword.
@Ildar_Gabdullin Thank you so much! With card_mod it works.
card_mod:
style: |
ha-card {
background: transparent;
}
I never use card_mod and I never had any problems but it is good to know that it is better specify this keyword for better compatibility.
Letâs consider âyou MUST use this keywordâ version))