You need to include show_state: true with your button card.
Are you trying to use the logo as a header as I did? You would need the image saved in your www folder.
The relevant code and screenshot, what I am doing wrong?
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: button
entity: sensor.msmalikhdd_cpu_utilization_total
tap_action:
action: more-info
show_state: true
show_name: false
show_icon: true
icon: mdi:memory
- type: button
entity: sensor.msmalikhdd_memory_usage_real
tap_action:
action: more-info
name: memory
show_state: true
show_icon: true
icon: mdi:memory
Your second button card doesn’t have show_state: true. I’m guessing there’s a few in there that are missing that line
EDIT: just check all your buttons for that line of code
I have four buttons all have that line. here is the complete code I have used internet images. I also need to re-scale the images and use those side-by-side horizontally.
type: vertical-stack
mode: horizontal
show_header_toggle: false
cards:
- type: picture
image: https://upload.wikimedia.org/wikipedia/commons/4/48/Synology_Logo.svg
- type: picture
image: >-
https://www.trustedreviews.com/wp-content/uploads/sites/54/2013/11/DS214play-angle-2-1-772x920.png
- type: entities
entities:
- sensor.msmalikhdd_volume_1_used_space
- type: horizontal-stack
cards:
- type: custom:mini-graph-card
icon: mdi:network
entities:
- sensor.msmalikhdd_network_down
- sensor.msmalikhdd_network_up
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: button
entity: sensor.msmalikhdd_cpu_utilization_total
tap_action:
action: more-info
show_state: true
show_name: false
show_icon: true
icon: mdi:cpu-64-bit
- type: button
entity: sensor.msmalikhdd_memory_usage_real
tap_action:
action: more-info
name: memory
show_state: true
show_icon: true
icon: mdi:memory
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: button
entity: sensor.msmalikhdd_volume_1_used_space
tap_action:
action: more-info
name: Vol 1 space
show_state: true
show_icon: true
icon: mdi:harddisk
- type: button
entity: sensor.msmalikhdd_volume_2_used_space
tap_action:
action: more-info
name: memory
show_state: true
show_icon: true
icon: mdi:harddisk
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: gauge
entity: sensor.msmalikhdd_cpu_utilization_total
min: 0
max: 100
- type: gauge
entity: sensor.msmalikhdd_memory_usage_real
min: 0
max: 100
- type: gauge
entity: sensor.msmalikhdd_volume_1_volume_used
min: 0
max: 100
- type: gauge
entity: sensor.msmalikhdd_volume_2_volume_used
min: 0
max: 100
- type: horizontal-stack
cards:
- type: button
entity: sensor.msmalikhdd_drive_1_status
name: Disk A Status
show_icon: true
show_state: true
- type: button
entity: sensor.msmalikhdd_drive_2_status
name: Disk B Status
show_state: true
- type: horizontal-stack
cards:
- type: gauge
entity: sensor.msmalikhdd_drive_1_temperature
name: Disk A Temperaure
- type: gauge
entity: sensor.msmalikhdd_drive_2_temperature
name: Disk B Temperature
It’s the indentation. You currently have show_state: true under the tap_action section but it needs to be two spaces left so it’s under the main button card section
1 Like
Thanks, @sparkydave you saved my day. Updated code and update screenshot. Now I need to re-size the images and use both sides by side horizontally
type: vertical-stack
mode: horizontal
show_header_toggle: false
cards:
- type: picture
image: https://upload.wikimedia.org/wikipedia/commons/4/48/Synology_Logo.svg
- type: picture
image: >-
https://www.trustedreviews.com/wp-content/uploads/sites/54/2013/11/DS214play-angle-2-1-772x920.png
- type: entities
entities:
- sensor.msmalikhdd_volume_1_used_space
- type: horizontal-stack
cards:
- type: custom:mini-graph-card
icon: mdi:network
entities:
- sensor.msmalikhdd_network_down
- sensor.msmalikhdd_network_up
- type: horizontal-stack
cards:
- type: horizontal-stack
cards:
- type: button
entity: sensor.msmalikhdd_cpu_utilization_total
tap_action:
action: more-info
show_state: true
show_name: false
show_icon: true
icon: mdi:cpu-64-bit
- type: button
entity: sensor.msmalikhdd_memory_usage_real
tap_action:
action: more-info
name: memory
show_state: true
show_icon: true
icon: mdi:memory
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: button
entity: sensor.msmalikhdd_volume_1_used_space
tap_action:
action: more-info
name: Vol 1 space
show_state: true
show_icon: true
icon: mdi:harddisk
- type: button
entity: sensor.msmalikhdd_volume_2_used_space
tap_action:
action: more-info
name: Volume 2 space
show_state: true
show_icon: true
icon: mdi:harddisk
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: gauge
entity: sensor.msmalikhdd_cpu_utilization_total
min: 0
max: 100
- type: gauge
entity: sensor.msmalikhdd_memory_usage_real
min: 0
max: 100
- type: gauge
entity: sensor.msmalikhdd_volume_1_volume_used
min: 0
max: 100
- type: gauge
entity: sensor.msmalikhdd_volume_2_volume_used
min: 0
max: 100
- type: horizontal-stack
cards:
- type: button
entity: sensor.msmalikhdd_drive_1_status
name: Disk A Status
show_icon: true
show_state: true
- type: button
entity: sensor.msmalikhdd_drive_2_status
name: Disk B Status
show_state: true
- type: horizontal-stack
cards:
- type: gauge
entity: sensor.msmalikhdd_drive_1_temperature
name: Disk A Temperaure
- type: gauge
entity: sensor.msmalikhdd_drive_2_temperature
name: Disk B Temperature
I’ve done a little more playing around…
type: custom:stack-in-card
mode: vertical
card_mod:
style: |
ha-card {
background: url('/local/images/synology_ds218.jpg');
background-size: cover;
}
cards:
- type: entities
entities:
- sensor.synology_total_size_volume_1
header:
image: /local/images/synology_logo.jpg
type: picture
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: gauge
entity: sensor.synology_cpu_load_total
min: 0
max: 100
- type: gauge
entity: sensor.synology_memory_usage_real
min: 0
max: 100
- type: gauge
entity: sensor.synology_volume_used_volume_1
min: 0
max: 100
- type: 'custom:button-card'
color_type: blank-card
- type: horizontal-stack
cards:
- type: button
entity: sensor.synology_status_smart_sda
name: Disk A Status
show_icon: true
show_state: true
- type: button
entity: sensor.synology_status_volume_1
name: Volume 1 Status
show_icon: true
show_state: true
- type: button
entity: sensor.synology_status_smart_sdb
name: Disk B Status
show_state: true
- type: 'custom:button-card'
color_type: blank-card
- type: horizontal-stack
cards:
- type: gauge
entity: sensor.synology_temperature_sda
name: Disk A Temperaure
- type: gauge
entity: sensor.synology_temperature_sdb
name: Disk B Temperature
- type: 'custom:button-card'
color_type: blank-card
I will play with it some more later to tidy it up, this was just a test more than anything.
My old Synology card actually used small red rectangles to change the LED’s on the image of the NAS if a disk was unhealthy. Was kinda cool but I had chosen not to use a background image.
The sensor comes from netdata, but here’s the UI yaml:
- type: custom:apexcharts-card
config_templates: nas_chart
header:
title: NAS Throughput
series:
- entity: sensor.netdata_nas_network_rx
name: Download
transform: return x / 1000;
unit: Mbit/s
group_by:
duration: 1h
func: max
- entity: sensor.netdata_nas_network_tx
name: Upload
transform: return (x / 1000) * -1;
unit: Mbit/s
invert: true
group_by:
duration: 1h
func: max
apex chart’s template:
apexcharts_card_templates:
default:
color_list:
- red
- green
- blue
nas_chart:
graph_span: 12h
stacked: true
config_templates: default
header:
show: true
show_states: true
colorize_states: true
all_series_config:
stroke_width: 2
opacity: 0.3
type: column
1 Like
Hello I ve created the sensor from systemmonitor for my raspberry HA.
Ho to delete the 2 decimal for mem and cpu used. Prefer 40% than 40,02%, it took less places in the cards.
Just popping my head back in after more then a year hiatus. I’ll have a bit of time up my sleeves for some custom UI work in the coming xmas weeks as I’m homeless whilst we do some renovations but I’ll have some freeking cool automations particularly if your into Whisky and have a large collection 
1 Like
Kind of a simple overview for me 
The load-shedding is for us in South Africa that has blackouts planned by our wonderful power company.
why is sensor.date the entity id? not sure if I get that part?
This is the old way of forcing the template to update daily. It no longer works.
Hi, which card did you use for access point? thanks! 