Thank you as well… this looks so awesome! Will take a look at your pastebin!
Smooth dude! Link to your ui conf?
Looking great Tom
Hey @sunny could you post your card config for any one of your transparent stacked graph cards?
I’m trying to work out how to do that and get a card title.
1 Like
@Yoinkz and @tom_l
Sorry for my late response, I was on holidays 
.
Well the Theme is from here: Clear Theme
And my config looks like this:
Note: I used some custom components!
cch:
hide_help: true
swipe: true
swipe_animate: fade
resources:
- type: js
url: /community_plugin/monster-card/monster-card.js
- type: module
url: /community_plugin/compact-custom-header/compact-custom-header.js
- type: js
url: /community_plugin/mini-media-player/mini-media-player.js
- type: js
url: /community_plugin/group-card/group-card.js
- type: js
url: /community_plugin/vertical-stack-in-card/vertical-stack-in-card.js
- type: module
url: /community_plugin/weather-card/weather-card.js
- type: module
url: /community_plugin/mini-graph-card/mini-graph-card.js
- type: js
url: /community_plugin/vertical-stack-in-card/vertical-stack-in-card.js
- type: js
url: /community_plugin/bar-card/bar-card.js
- background: var(--background-image)
title: System
icon: 'mdi:server-network'
path: system
badges: []
cards:
- cards:
- entities:
- entity: sensor.smarty_status
name: Status
type: entities
- entity: sensor.smarty_system_temperature
height: 30
severity:
- color: green
value: 33
- color: orange
value: 66
- color: red
value: 100
title: Temperatur
type: 'custom:bar-card'
width: 65%
- entity: sensor.smarty_cpu_temperature
height: 30
severity:
- color: green
value: 33
- color: orange
value: 66
- color: red
value: 100
title: CPU Temperatur
type: 'custom:bar-card'
width: 65%
- entity: sensor.smarty_cpu_usage
height: 30
severity:
- color: green
value: 33
- color: orange
value: 66
- color: red
value: 100
title: CPU
type: 'custom:bar-card'
width: 65%
- entity: sensor.smarty_memory_usage
height: 30
severity:
- color: green
value: 33
- color: orange
value: 66
- color: red
value: 100
title: RAM
type: 'custom:bar-card'
width: 65%
title: QNAP
type: 'custom:vertical-stack-in-card'
- cards:
- cards:
- entities:
- entity: sensor.smarty_smart_status_drive_0_1
name: HDD1 Status
type: entities
- entities:
- entity: sensor.smarty_smart_status_drive_0_2
name: HDD2 Status
type: entities
type: horizontal-stack
- entity: sensor.smarty_volume_used_hdd
height: 30
severity:
- color: green
value: 33
- color: orange
value: 66
- color: red
value: 100
title: Belegt
type: 'custom:bar-card'
width: 65%
- entity: sensor.smarty_temperature_drive_0_1
height: 30
severity:
- color: green
value: 33
- color: orange
value: 66
- color: red
value: 100
title: HDD1 Temperatur
type: 'custom:bar-card'
width: 65%
- entity: sensor.smarty_temperature_drive_0_2
height: 30
severity:
- color: green
value: 33
- color: orange
value: 66
- color: red
value: 100
title: HDD2 Temperatur
type: 'custom:bar-card'
width: 65%
- cards:
- entities:
- entity: sensor.smarty_smart_status_drive_23_1
name: SSD1
type: entities
- entities:
- entity: sensor.smarty_smart_status_drive_23_1
name: SSD2
type: entities
type: horizontal-stack
- entity: sensor.smarty_volume_used_ssd
height: 30
severity:
- color: green
value: 33
- color: orange
value: 66
- color: red
value: 100
title: Belegt
type: 'custom:bar-card'
width: 65%
- entity: sensor.smarty_temperature_drive_23_1
height: 30
severity:
- color: green
value: 33
- color: orange
value: 66
- color: red
value: 100
title: SSD1 Temperatur
type: 'custom:bar-card'
width: 65%
- entity: sensor.smarty_temperature_drive_23_2
height: 30
severity:
- color: green
value: 33
- color: orange
value: 66
- color: red
value: 100
title: SSD2 Temperatur
type: 'custom:bar-card'
width: 65%
title: QNAP Drives
type: 'custom:vertical-stack-in-card'
- cards:
- entities:
- entity: sensor.smarty_network_link_eth0
name: Network eth0
type: entities
- cards:
- color_thresholds_transition: smooth
entities:
- sensor.smarty_network_down_eth0
group: false
hour24: true
line_width: 6
lower_bound: 0
name: Download
points_per_hour: 1
show:
extrema: true
fill: fade
icon: true
labels: false
name: true
state: true
type: 'custom:mini-graph-card'
- color_thresholds_transition: smooth
entities:
- sensor.smarty_network_up_eth0
group: false
hour24: true
line_width: 6
lower_bound: 0
name: Upload
points_per_hour: 1
show:
extrema: true
fill: fade
icon: true
labels: false
name: true
state: true
type: 'custom:mini-graph-card'
type: horizontal-stack
- entities:
- entity: sensor.smarty_network_link_eth1
name: Network eth1
type: entities
- cards:
- color_thresholds_transition: smooth
entities:
- sensor.smarty_network_down_eth1
group: false
hour24: true
line_width: 6
lower_bound: 0
name: Download
points_per_hour: 1
show:
extrema: true
fill: fade
icon: true
labels: false
name: true
state: true
type: 'custom:mini-graph-card'
- color_thresholds_transition: smooth
entities:
- sensor.smarty_network_up_eth1
group: false
hour24: true
line_width: 6
lower_bound: 0
name: Upload
points_per_hour: 1
show:
extrema: true
fill: fade
icon: true
labels: false
name: true
state: true
type: 'custom:mini-graph-card'
type: horizontal-stack
title: QNAP Network
type: 'custom:vertical-stack-in-card'
- cards:
- entities:
- entity: sensor.fritzbox
icon: 'mdi:router-wireless'
- entity: sensor.fritzbox_external_ip
icon: 'mdi:wan'
- entity: sensor.fritzbox_uptime
icon: 'mdi:timelapse'
- entity: binary_sensor.remote_ui
icon: 'mdi:cloud'
- entity: sensor.hacs
icon: 'mdi:update'
name: Community Store
type: entities
- cards:
- color_thresholds_transition: smooth
entities:
- entity: sensor.speedtest_ping
name: Ping
font_size: 70
group: false
hour24: true
line_width: 6
lower_bound: 0
points_per_hour: 1
show:
extrema: true
fill: fade
icon: true
labels: false
name: true
state: true
type: 'custom:mini-graph-card'
- color_thresholds_transition: smooth
entities:
- entity: sensor.speedtest_download
name: Download
font_size: 70
group: false
hour24: true
line_width: 6
lower_bound: 0
points_per_hour: 1
show:
extrema: true
fill: fade
icon: true
labels: false
name: true
state: true
type: 'custom:mini-graph-card'
- color_thresholds_transition: smooth
entities:
- entity: sensor.speedtest_upload
name: Upload
font_size: 70
group: false
hour24: true
line_width: 6
lower_bound: 0
points_per_hour: 1
show:
extrema: true
fill: fade
icon: true
labels: false
name: true
state: true
type: 'custom:mini-graph-card'
name: Speedtest
type: horizontal-stack
title: System Status
type: 'custom:vertical-stack-in-card'
- cards:
- cards:
- entity: switch.adguard_filtering
hold_action:
action: more-info
name: Filtering
tap_action:
action: toggle
type: entity-button
- entity: switch.adguard_parental_control
hold_action:
action: more-info
name: Parental Control
tap_action:
action: toggle
type: entity-button
- entity: switch.adguard_protection
hold_action:
action: more-info
name: Protection
tap_action:
action: toggle
type: entity-button
type: horizontal-stack
- cards:
- entity: switch.adguard_query_log
hold_action:
action: more-info
name: Query Log
tap_action:
action: toggle
type: entity-button
- entity: switch.adguard_safe_browsing
hold_action:
action: more-info
name: Safe Browsing
tap_action:
action: toggle
type: entity-button
- entity: switch.adguard_safe_search
hold_action:
action: more-info
name: Safe Search
tap_action:
action: toggle
type: entity-button
type: horizontal-stack
title: AdGuard
type: 'custom:vertical-stack-in-card'
- cards:
- entities:
- entity: sensor.adguard_average_processing_speed
name: AdGuard Processing Speed
type: entities
- cards:
- color_thresholds_transition: smooth
entities:
- sensor.adguard_dns_queries
group: false
hour24: true
hours_to_show: 24
line_width: 6
lower_bound: 0
name: DNS Queries
points_per_hour: 1
show:
extrema: true
fill: fade
icon: true
labels: false
name: true
state: true
type: 'custom:mini-graph-card'
unit: ' '
- entities:
- sensor.adguard_rules_count
name: Rules Count
type: 'custom:mini-graph-card'
unit: ' '
type: horizontal-stack
- cards:
- entities:
- sensor.adguard_parental_control_blocked
name: Parental Control
type: 'custom:mini-graph-card'
unit: ' '
- entities:
- sensor.adguard_safe_browsing_blocked
name: Safe Browsing
type: 'custom:mini-graph-card'
unit: ' '
type: horizontal-stack
- color_thresholds_transition: smooth
entities:
- sensor.adguard_dns_queries_blocked
group: false
hour24: true
hours_to_show: 24
line_color: red
line_width: 6
lower_bound: 0
name: DNS Queries Blocked
points_per_hour: 1
show:
extrema: true
fill: fade
icon: true
labels: false
name: true
state: true
type: 'custom:mini-graph-card'
unit: ' '
title: AdGuard
type: 'custom:vertical-stack-in-card'
- entities:
- zwave.z_wave_sigma_designs_uzb_z_wave_usb_adapter
show_header_toggle: false
title: Z-Wave
type: entities
- card:
show_header_toggle: false
title: Shelly need update
type: entities
filter:
include:
- entity_id: '*firmware_update*'
type: 'custom:monster-card'
- entities:
- entity: zha.lumi_lumi_sensor_magnet_aq2_03217ca6_1_6
- entity: zha.lumi_lumi_sensor_magnet_aq2_03214427_1_6
- entity: zha.lumi_lumi_sensor_magnet_aq2_0321662d_1_6
show_header_toggle: false
title: ZigBee
type: entities
3 Likes
Thanks Sunny. You’re using the vertical-stack-in card. I tried that and now that I look really closely I see why I stopped using it. Not as obvious with the light colours you are using but the background alpha transparency doubles up. Also a lot more obvious if you use horizontal stacks in the vertical stack as well.
Can you share your cpu mini-graph-card yaml? I want to try something similar…
on second thought can you share the entire vertical-stack yaml for Hassio?
Here is my vertical-stack-in-card I use for monitoring server hardware. It’s based on the configuration of krovachek but updated to use the “Lovelace Card Mod” add-on.
cards:
- cards:
- animate: true
card: null
entities:
- sensor.processor_use
graph: line
hour24: true
name: Processor
show:
extrema: true
icon: false
name: false
style: |
ha-card {
border-radius: 15px;
transform: scale(0.95);
background-size: 100% 100%;
border-style: dotted;
border-width: 1px;
}
type: 'custom:mini-graph-card'
- animate: true
card: null
entities:
- sensor.memory_use_percent
graph: line
hour24: true
name: Processor
show:
extrema: true
icon: false
name: false
style: |
ha-card {
border-radius: 15px;
transform: scale(0.95);
background-size: 100% 100%;
border-style: dotted;
border-width: 1px;
}
type: 'custom:mini-graph-card'
type: horizontal-stack
- cards:
- entities:
- sensor.processor_use
title: CPU
title_position: inside
title_style:
font-size: 12px
type: 'custom:bar-card'
- entities:
- sensor.memory_use_percent
title: Memory
title_position: inside
title_style:
font-size: 12px
type: 'custom:bar-card'
type: horizontal-stack
- entities:
- sensor.disk_use_percent
title: Disk Usage
type: 'custom:bar-card'
- entities:
- sensor.last_boot
- sensor.uptime
- entity: sensor.certificate_hassio
name: Certificate Valididty
type: entity
- type: divider
- entity: sensor.hacs
name: Component Updates
type: entity
type: entities
title: Hassio
type: 'custom:vertical-stack-in-card'
3 Likes
Ah… That’s the ticket!! Time to install card-mod…
Thank you very much!
1 Like
Mine is pretty basic, but here it is. The media and dev servers were tricky to set up (using Glances for the data) because media didn’t have a CPU temp, and the CPU temp for dev wasn’t correct. So I had to trial and error grabbing the core temps from the Glances API using the RESTful sensor and templates.
6 Likes
At the moment mine is very minimalist and basic, but it monitors HA, my NUC, let’s me know what’s broken/disconnected and if I have sensor batteries going dead. It works so far, though every day something changes (because I look at all these wonderful examples and take a little bit of inspiration from each one)!
I just wish I could get that gauge card to be the same size as the sensor card next to it
1 Like
Looks good!
What Theme are you using?
Can you perhaps post it?
1 Like
Thanks! (It’s changed a bunch in the last few days already.)
But I’m still using the same themes. I slightly modified PxMonoNight and PxMonoLight that I found while searching for themes a while back. I’ll post the my version shortly, and if I find the original place where I found it I’ll post that too. (Give credit where credit is due and all…)
What theme is that friend ? :o
Here are the themes: Px MonoLight (I use that one during the day), and the dark version, Px MonoNight.
I still haven’t been able to track down the link where I originally found them, but they’re not my work, and I’ll post if I find the originals too. Found the original creator… a member here… @PhysicalMagic !
Hey @PhysicalMagic! Thanks for these themes! You nailed it. I’ve been using these themes for as long as I’ve known what a HA theme is. Simple, clean… well done!
PmxMononight:
# Main colors #5294E2 #363941
primary-color: '#39679e' # Header
accent-color: '#919191' # Accent color
dark-primary-color: 'var(--accent-color)' # Hyperlinks
light-primary-color: 'var(--accent-color)' # Horizontal line in about
# Text colors
primary-text-color: '#FFFFFF' # Primary text colour, here is referencing dark-primary-color
text-primary-color: 'var(--primary-text-color)' # Primary text colour
secondary-text-color: '#5294E2' # For secondary titles in more info boxes etc.
disabled-text-color: '#7F848E' # Disabled text colour
label-badge-border-color: 'green' # Label badge border, just a reference value
# Background colors
primary-background-color: '#383C45' # Settings background
secondary-background-color: '#656e82' # Main card UI background
divider-color: 'rgba(0, 0, 0, .12)' # Divider
# Table rows
table-row-background-color: '#353840' # Table row
table-row-alternative-background-color: '#3E424B' # Table row alternative
# Nav Menu
paper-listbox-color: 'var(--accent-color)' # Navigation menu selection hoover
paper-listbox-background-color: '#2E333A' # Navigation menu background
paper-grey-50: 'var(--primary-text-color)'
paper-grey-200: '#414A59' # Navigation menu selection
# Paper card
paper-card-header-color: 'var(--accent-color)' # Card header text colour
paper-card-background-color: '#434954' # Card background colour
paper-dialog-background-color: '#434954' # Card dialog background colour
paper-item-icon-color: 'var(--primary-text-color)' # Icon color
paper-item-icon-active-color: '#F9C536' # Icon color active
paper-item-icon_-_color: 'green'
paper-item-selected_-_background-color: '#434954' # Popup item select
paper-tabs-selection-bar-color: 'green'
ha-card-border-radius: 5px
# Labels
label-badge-red: 'var(--accent-color)' # References the brand colour label badge border
label-badge-text-color: 'var(--primary-text-color)' # Now same as label badge border but that's a matter of taste
label-badge-background-color: '#2E333A' # Same, but can also be set to transparent here
# Switches
paper-toggle-button-checked-button-color: 'var(--accent-color)'
paper-toggle-button-checked-bar-color: 'var(--accent-color)'
paper-toggle-button-checked-ink-color: 'var(--accent-color)'
paper-toggle-button-unchecked-button-color: 'var(--disabled-text-color)'
paper-toggle-button-unchecked-bar-color: 'var(--disabled-text-color)'
paper-toggle-button-unchecked-ink-color: 'var(--disabled-text-color)'
# Sliders
paper-slider-knob-color: 'var(--accent-color)'
paper-slider-knob-start-color: 'var(--accent-color)'
paper-slider-pin-color: 'var(--accent-color)'
paper-slider-active-color: 'var(--accent-color)'
paper-slider-container-color: 'linear-gradient(var(--primary-background-color), var(--secondary-background-color)) no-repeat'
paper-slider-secondary-color: 'var(--secondary-background-color)'
paper-slider-disabled-active-color: 'var(--disabled-text-color)'
paper-slider-disabled-secondary-color: 'var(--disabled-text-color)'
# Google colors
google-red-500: '#E45E65'
google-green-500: '#39E949'
sidebar-selected-icon-color: 'var(--accent-color)'
sidebar-selected-text-color: 'var(--accent-color)'
PmxMonolight:
### Main Interface Colors ###
primary-color: "#93abca" #"#395274"
light-primary-color: "#5F81B0"
primary-background-color: "#F0F5FF" # "#F6F7F9"
secondary-background-color: var(--primary-background-color)
divider-color: "#D6DFEB"
### Text ###
primary-text-color: "#395274"
secondary-text-color: "#919191"
text-primary-color: "#FFFFFF"
disabled-text-color: "#88A1C4"
### Sidebar Menu ###
sidebar-icon-color: "#395274"
sidebar-text-color: var(--sidebar-icon-color)
sidebar-selected-background-color: var(--primary-background-color)
sidebar-selected-icon-color: "#919191"
sidebar-selected-text-color: var(--sidebar-selected-icon-color)
### States and Badges ###
state-icon-color: "#395274"
state-icon-active-color: "#FBCD41"
state-icon-unavailable-color: var(--disabled-text-color)
### Sliders ###
paper-slider-knob-color: "#919191"
paper-slider-knob-start-color: var(--paper-slider-knob-color)
paper-slider-pin-color: var(--paper-slider-knob-color)
paper-slider-active-color: var(--paper-slider-knob-color)
paper-slider-secondary-color: var(--light-primary-color)
### Labels ###
label-badge-background-color: "#FFFFFF"
label-badge-text-color: "#395274"
label-badge-red: "#FF8888"
### Cards ###
paper-card-background-color: "#FFFFFF"
paper-listbox-background-color: var(--primary-background-color)
### Toggles ###
paper-toggle-button-checked-button-color: "#919191"
paper-toggle-button-checked-bar-color: "#919191"
paper-toggle-button-unchecked-button-color: "#395274"
paper-toggle-button-unchecked-bar-color: "#9CB2CE"
### Table row ###
table-row-background-color: var(--primary-background-color)
table-row-alternative-background-color: var(--secondary-background-color)
ha-card-border-radius: 5px
2 Likes
Yum!
Out of curiosity, how does your automation look for switching between the two themes during the day?
Here’s the automation:
- id: ThemeChange
alias: System - Theme Change
trigger:
- event: start
platform: homeassistant
- entity_id: sun.sun
platform: state
to: above_horizon
- entity_id: sun.sun
platform: state
to: below_horizon
action:
- data_template:
name: "{% if states.sun.sun.state == \"above_horizon\" %}\n PmxMonolight\n\
{% else %}\n PmxMononight\n{% endif %}\n"
service_template: frontend.set_theme
5 Likes