Been trying to get the numbers larger for the longest time! Thanks for sharing your code - this has helped me get the numbers bigger on my alarm clock page 
2 Likes
I really like your layout! I would like to implement something similar on a Shelly Wall display.
How did you create this dashboard? What integrations do I need for it? Could you share the code for it?
Here is the full code for that dashboard:
wallpanel:
enabled: true
debug: false
hide_toolbar: false
hide_sidebar: false
fullscreen: false
idle_time: 0
keep_screen_on_time: 86400
black_screen_after_time: 7200
control_reactivation_time: 1
views:
- type: sections
path: ''
max_columns: 2
sections:
- type: grid
cards:
- aspect_ratio: 2/1
entity: sensor.time
tap_action: none
hold_action:
action: none
show_icon: false
show_name: false
show_state: true
styles:
card:
- font-size: 10em
- font-weight: bold
- background-color: hsla(0, 0%, 0%, 0.30)
type: custom:button-card
- aspect_ratio: 6/1
entity: sensor.date_formatted
hold_action:
action: more-info
show_icon: false
show_name: false
show_state: true
styles:
card:
- font-size: 30px
- font-weight: bold
grid: null
type: custom:button-card
- type: custom:time-picker-card
entity: input_datetime.alarmclock_time
hour_step: 1
minute_step: 5
name: Alarm
layout:
name: inside
align_controls: center
hour_mode: double
hour_mode: 24
link_values: false
hide:
name: false
second_step: 5
view_layout:
name: header
align_controls: center
hour_mode: double
card_mod:
style:
.time-picker-row:
time-unit:
$: |
.time-input {
width: 100px !important;
background-color: transparent !important;
color: var(--card-primary-color) !important;
border: 0px !important;
font-size: 6em !important;
font-weight: bold;
font-family: var(--paper-font-body1_-_font-family) !important;
}
ha-card:
$: |
ha-card {
--tpc-elements-background-color: #1a2636 !important;
}
- type: grid
cards:
- type: custom:mushroom-entity-card
entity: input_boolean.house_option_alarmclock
layout: vertical
icon: ''
tap_action:
action: toggle
icon_color: accent
card_mod:
style: |
:host {
--mush-icon-size: 60px !important;
--card-primary-font-size: 1.2rem !important;
}
- type: custom:mushroom-entity-card
entity: input_boolean.alarm_clock_weekend
layout: vertical
icon: mdi:calendar-weekend
tap_action:
action: toggle
icon_color: accent
card_mod:
style: |
:host {
--mush-icon-size: 60px !important;
--card-primary-font-size: 1.2rem !important;
}
- type: custom:mushroom-template-card
primary: Stream Radio
secondary: |-
{% if is_state('media_player.master_bed_speaker', 'playing') %}
on
{% else %}
Off
{% endif %}
icon: |-
{% if is_state('media_player.master_bed_speaker', 'playing') %}
mdi:radio
{% else %}
mdi:radio-off
{% endif %}
entity: input_boolean.stream_radio
icon_color: |-
{% if is_state('media_player.master_bed_speaker', 'playing') %}
orange
{% else %}
grey
{% endif %}
layout: vertical
card_mod:
style: |
:host {
--mush-icon-size: 60px !important;
--card-primary-font-size: 1.2rem !important;
}
- type: custom:mushroom-entity-card
entity: group.master_bedroom
layout: vertical
icon: mdi:bed-king-outline
tap_action:
action: toggle
card_mod:
style: |
:host {
--mush-icon-size: 60px !important;
--card-primary-font-size: 1.2rem !important;
}
- show_current: true
show_forecast: true
entity: weather.home
name: Denby Village
type: weather-forecast
forecast_type: daily
background:
image: /api/image/serve/d36c15aab5e7a1988a53b2804b1e0e71/original
cards: []
title: Alarm Clock
icon: mdi:bed-clock
- title: Bedroom Lights
path: bedroom-lights
type: sections
sections:
- type: grid
cards:
- type: custom:bubble-card
card_type: separator
name: Master Bedroom
icon: mdi:bed-king-outline
sub_button:
- entity: group.master_bedroom
icon: mdi:lightbulb-group
show_state: true
show_attribute: false
tap_action:
action: toggle
- type: tile
entity: light.master_wall_1
name: Wall 1
icon: phu:pendant-round
- type: tile
entity: light.master_wall_2
name: Wall 2
icon: phu:pendant-round
- type: tile
entity: light.masterbedside1a
name: Bedside Clare
- type: tile
entity: light.masterbedside2a
name: Bedside Mart
- type: tile
entity: light.besta_led
name: Besta LED
icon: mdi:led-strip-variant
- type: tile
entity: light.ensuite_hall
- type: grid
cards:
- type: custom:bubble-card
card_type: separator
name: Dressing Room
icon: mdi:hanger
sub_button:
- entity: group.dressing_room
icon: mdi:lightbulb-group
show_state: true
show_attribute: false
tap_action:
action: toggle
state_background: true
show_background: true
show_name: false
- type: tile
entity: light.wardrobe_clare
- type: tile
entity: light.dressing_room_pendant
name: Pendant
- type: tile
entity: light.wardrobe_mart
- type: tile
entity: light.dressing_room_spots
name: Spots
- type: tile
entity: light.dressing_love
name: Love lamp
- type: grid
cards:
- type: heading
icon: mdi:palette
heading: Scenes
heading_style: title
- type: custom:mushroom-entity-card
entity: scene.master_bed_bright
layout: vertical
name: Bright
secondary_info: none
fill_container: true
tap_action:
action: toggle
- type: custom:mushroom-entity-card
entity: scene.master_bed_dim
layout: vertical
secondary_info: none
name: Dim
fill_container: true
tap_action:
action: toggle
- type: custom:mushroom-entity-card
entity: scene.master_bed_no_dressing
layout: vertical
name: No dressing
secondary_info: none
tap_action:
action: toggle
fill_container: true
- type: custom:mushroom-entity-card
entity: scene.master_bed_off
layout: vertical
name: 'Off'
secondary_info: none
icon: mdi:palette
icon_color: blue
fill_container: true
icon_type: icon
tap_action:
action: toggle
column_span: 2
max_columns: 2
cards: []
icon: mdi:lightbulb-group
background:
image: /api/image/serve/d36c15aab5e7a1988a53b2804b1e0e71/original
4 Likes
Thanks for sharing!
Unfortunately, I can’t get the background of the TimePicker tile to turn grey. I have copied your code, but the tile remains white. What am I doing wrong?
Difficult to say to be honest. Could it be down to your theme? have you tried selecting a different theme?
Why is this limited to time only? What about date?
How can I minimise the time picker? I need it as small as possible for my dashboard. Just that:
without the spaces between and smaller blue fields.
For dates along with time you may try the inbuilt helper names as Date and/or Time option.
type: custom:time-picker-card
entity: input_datetime.datetime
hour_mode: 24
hour_step: 5
minute_step: 5
layout:
hour_mode: single
align_controls: center
name: header
hide:
seconds: true
card_mod:
style:
.time-picker-row:
time-unit:
$: |
.time-input {
margin: -16px !important;
}
2 Likes
Thank you @LiQuid_cOOled.
Is it possible to reduce the gap between hours and minutes?
Play around with the padding setting I added to get the look you want.
card_mod:
style:
.time-picker-row:
time-unit:
$: |
.time-input {
margin: -16px !important;
padding: 0px;
}
.time-picker-icon {
padding: 0px 0px 0px 0px !important;
}
1 Like
Thanks again @LiQuid_cOOled
Hoping for some guidance, I’ve installed the via HACs, and despite reloads, restarts of HA and a full reboot, even on different devices I’m receiving an error that the custom element time-picker-card does not exist.
Is anyone aware of any installation issues resulting from recent updates that might becausing this problem, or how I might go about resolving it?
I have reinstalled several times and changed between versions 1.31 and 1.40 to no avail.
Any help is appreciated, thanks.
Did this work for you? I tried the same, to make it fit on my phone screen. I’ve added this snippet to the code, but it still looks like this:
This is the code:
- type: custom:time-picker-card
entity: input_datetime.koffie_warm
link_values: true
layout:
embedded: true
align_controls: center
#thin: true
hour_mode: 24
hide:
name: true
icon: true
card_mod:
style: |
.time-picker-row:
time-unit:
$: |
.time-input {
margin: -16px !important;
padding: 0px;
}
.time-picker-icon {
padding: 0px 0px 0px 0px !important;
}
::-webkit-scrollbar {
display: none;
}
body {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
I shared the files on github: GitHub - TurboTronix/Hassio-DIY-ethernet-controlled-irrigation
Not sure if it’s up to date. Been tweeking this from time to time, like adding months:
These are the cards in my dashboard:
And here is the code (identical for both):
- type: custom:time-picker-card
entity: input_datetime.wecker_xxx
hour_mode: 24
hour_step: 1
minute_step: 5
layout:
hour_mode: single
align_controls: center
name: header
embedded: false
thin: true
hide:
seconds: true
icon: true
name: false
name: Wecker xxx
link_values: false
grid_options:
columns: 3
rows: 2
card_mod:
style:
.time-picker-row:
time-unit:
$: |
.time-input {
margin: -12px !important;
padding: 0px;
}
.time-picker-icon {
padding: 0px 0px 0px 0px !important;
}