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 
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
2 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?