Hi @tom_l
Awesome configuration by any chance do you have a github repo with the configuration?
I would be interested in following and look at some configurations.
Thanks in advance.
1 Like
No I don’t sorry. Also nothing in that old configuration has remained in my current one. Some examples of how it looks now:
2 Likes
Your setup looks really nice, theme and graphs… also seems a really complete setup.
I have tons of questions 
Until now my focus was mostly having the devices on HA, I still have a bunch to install and configure, but I am also looking to beautify some stuff andyour setups seems really neat.
Congrats.
Unfortunately it is a precarious “house of cards” (pun intended) at the moment. I use the custom tiles-card extensively and support for this card has been abandoned. Coupled with recent changes to the way home assistant handles custom cards this means I will probably have to re-write the whole front-end, again.
1 Like
How do you create that big time/date card?
Markdown card mostly. I’ll paste the config later today.
EDIT: here you go,
entities:
- content: |
# {{states("sensor.time")}}
## {{states('sensor.simple_time_date')}}
style: |
ha-card {
--ha-card-background: 'rgba(0, 0, 0, 0)';
--ha-card-box-shadow: 'none'
padding-top: 18px;
}
h1 {
text-align: center;
font-size: 6em;
margin-bottom: 0px;
}
h2 {
text-align: center;
}
type: 'custom:hui-markdown-card'
- entities:
- entity: sensor.casey
- entity: sensor.davis
- entity: sensor.macca
- entity: sensor.mawson
- entity: sensor.utc
show_icon: false
style: |
ha-card {
box-shadow: none;
--ha-card-background: 'rgba(0, 0, 0, 0)';
}
type: 'custom:hui-glance-card'
show_header_toggle: false
style: |
ha-card {
border: solid 2px var(--primary-color);
}
type: entities
Bit of a style update using card mod for day / night card backgrounds.
Home Day
Home Night
Lounge Room Day
Lounge Room Night
Lights Day
Lights Night
Irrigation Day
Irrigation Night
Security Day
Security Night
Cameras Day
Climate Day
Energy Day
System Day
Network Day
Wifi Day
6 Likes
Nice…
What is that day theme?
Oh… your own themes
Now I’m doubly impressed!
Building on the shoulders of giants…They started out as themes I found on the forum.
1 Like
I really like your Tv Remote and Tv Channels cards. Can you share lovelace configuration please?
Thanks a lot
TV Channels:
entities:
- card_type: horizontal-stack
cards:
- entity: script.lounge_tv_ch_abc
entity_picture: /local/tv_logos/abc.png
tap_action:
service: script.lounge_tv_ch_abc
template: picture_button
type: 'custom:button-card'
- entity: script.lounge_tv_ch_sbs
entity_picture: /local/tv_logos/sbs.png
tap_action:
service: script.lounge_tv_ch_sbs
template: picture_button
type: 'custom:button-card'
- entity: script.lounge_tv_ch_sbs_vice
entity_picture: /local/tv_logos/sbs-vice.png
tap_action:
service: script.lounge_tv_ch_sbs_vice
template: picture_button
type: 'custom:button-card'
- entity: script.lounge_tv_ch_sthnx
entity_picture: /local/tv_logos/southern-cross-television.png
tap_action:
service: script.lounge_tv_ch_sthnx
template: picture_button
type: 'custom:button-card'
type: 'custom:hui-element'
- card_type: horizontal-stack
cards:
- entity: script.lounge_tv_ch_nine
entity_picture: /local/tv_logos/nine.png
tap_action:
service: script.lounge_tv_ch_nine
template: picture_button
type: 'custom:button-card'
- entity: script.lounge_tv_ch_gem
entity_picture: /local/tv_logos/gem.png
tap_action:
service: script.lounge_tv_ch_gem
template: picture_button
type: 'custom:button-card'
- entity: script.lounge_tv_ch_go
entity_picture: /local/tv_logos/go.png
tap_action:
service: script.lounge_tv_ch_go
template: picture_button
type: 'custom:button-card'
- entity: script.lounge_tv_ch_7mate
entity_picture: /local/tv_logos/seven-mate.png
tap_action:
service: script.lounge_tv_ch_7mate
template: picture_button
type: 'custom:button-card'
type: 'custom:hui-element'
- card_type: horizontal-stack
cards:
- entity: script.lounge_tv_ch_7two
entity_picture: /local/tv_logos/seven-two.png
tap_action:
service: script.lounge_tv_ch_7two
template: picture_button
type: 'custom:button-card'
- entity: script.lounge_tv_ch_win
entity_picture: /local/tv_logos/win.png
tap_action:
service: script.lounge_tv_ch_win
template: picture_button
type: 'custom:button-card'
- entity: script.lounge_tv_ch_one
entity_picture: /local/tv_logos/one.png
tap_action:
service: script.lounge_tv_ch_one
template: picture_button
type: 'custom:button-card'
- entity: script.lounge_tv_ch_eleven
entity_picture: /local/tv_logos/eleven.png
tap_action:
service: script.lounge_tv_ch_eleven
template: picture_button
type: 'custom:button-card'
type: 'custom:hui-element'
show_header_toggle: false
title: TV Channels
type: entities
TV Remote
entities:
- card_type: horizontal-stack
cards:
- entity: script.lounge_tv_on
name: 'On'
tap_action:
service: script.lounge_tv_on
template: menu_button
type: 'custom:button-card'
- entity: script.lounge_tv_off
name: 'Off'
tap_action:
service: script.lounge_tv_off
template: menu_button
type: 'custom:button-card'
- entity: script.lounge_tv_input_tv
name: TV
tap_action:
service: script.lounge_tv_input_tv
template: menu_button
type: 'custom:button-card'
- entity: script.lounge_tv_input_kodi
icon: 'mdi:kodi'
name: Movie
tap_action:
service: script.lounge_tv_input_kodi
template: menu_button
type: 'custom:button-card'
type: 'custom:hui-element'
- card_type: horizontal-stack
cards:
- entity: script.lounge_tv_play
name: Play
tap_action:
service: script.lounge_tv_play
template: icon_button
type: 'custom:button-card'
- entity: script.lounge_tv_pause
name: Pause
tap_action:
service: script.lounge_tv_pause
template: icon_button
type: 'custom:button-card'
- entity: script.lounge_tv_stop
name: Stop
tap_action:
service: script.lounge_tv_stop
template: icon_button
type: 'custom:button-card'
- entity: script.lounge_tv_rec
name: Record
styles:
icon:
- color: red
tap_action:
service: script.lounge_tv_rec
template: icon_button
type: 'custom:button-card'
type: 'custom:hui-element'
- card_type: horizontal-stack
cards:
- entity: script.lounge_tv_menu
name: Menu
tap_action:
service: script.lounge_tv_menu
template: menu_button
type: 'custom:button-card'
- entity: script.lounge_tv_rewind
name: Rewind
tap_action:
service: script.lounge_tv_rewind
template: icon_button
type: 'custom:button-card'
- entity: script.lounge_tv_ffwd
name: F-Forwad
tap_action:
service: script.lounge_tv_ffwd
template: icon_button
type: 'custom:button-card'
- entity: script.lounge_tv_ch_up
name: Ch Up
tap_action:
service: script.lounge_tv_ch_up
template: menu_button
type: 'custom:button-card'
type: 'custom:hui-element'
- card_type: horizontal-stack
cards:
- entity: script.lounge_tv_option
name: Options
tap_action:
service: script.lounge_tv_option
template: menu_button
type: 'custom:button-card'
- entity: script.lounge_tv_skip_back
name: Skip Back
tap_action:
service: script.lounge_tv_skip_back
template: icon_button
type: 'custom:button-card'
- entity: script.lounge_tv_skip_fwd
name: Skip Fwd
tap_action:
service: script.lounge_tv_skip_fwd
template: icon_button
type: 'custom:button-card'
- entity: script.lounge_tv_last_ch
name: Last Ch
tap_action:
service: script.lounge_tv_last_ch
template: menu_button
type: 'custom:button-card'
type: 'custom:hui-element'
- card_type: horizontal-stack
cards:
- entity: script.lounge_tv_guide
name: Guide
tap_action:
service: script.lounge_tv_guide
template: menu_button
type: 'custom:button-card'
- entity: script.lounge_tv_info
icon: 'mdi:information-outline'
name: Info
tap_action:
service: script.lounge_tv_info
template: menu_button
type: 'custom:button-card'
- entity: script.lounge_tv_up
icon: 'mdi:arrow-up-bold'
name: Up
styles:
card:
- background: var(--secondary-background-color-alpha)
tap_action:
service: script.lounge_tv_up
template: icon_button
type: 'custom:button-card'
- entity: script.lounge_tv_ch_dn
name: Ch Dn
tap_action:
service: script.lounge_tv_ch_dn
template: menu_button
type: 'custom:button-card'
type: 'custom:hui-element'
- card_type: horizontal-stack
cards:
- entity: script.lounge_tv_media
icon: 'mdi:folder-multiple-image'
name: Media
tap_action:
service: script.lounge_tv_media
template: menu_button
type: 'custom:button-card'
- entity: script.lounge_tv_left
icon: 'mdi:arrow-left-bold'
name: Left
styles:
card:
- background: var(--secondary-background-color-alpha)
tap_action:
service: script.lounge_tv_left
template: icon_button
type: 'custom:button-card'
- entity: script.lounge_tv_ok
name: Ok
tap_action:
service: script.lounge_tv_ok
template: icon_button
type: 'custom:button-card'
- entity: script.lounge_tv_right
icon: 'mdi:arrow-right-bold'
name: Right
styles:
card:
- background: var(--secondary-background-color-alpha)
tap_action:
service: script.lounge_tv_right
template: icon_button
type: 'custom:button-card'
type: 'custom:hui-element'
- card_type: horizontal-stack
cards:
- entity: script.lounge_tv_www
name: Internet
tap_action:
service: script.lounge_tv_www
template: menu_button
type: 'custom:button-card'
- entity: script.lounge_tv_return
name: Return
tap_action:
service: script.lounge_tv_return
template: menu_button
type: 'custom:button-card'
- entity: script.lounge_tv_down
icon: 'mdi:arrow-down-bold'
name: Down
styles:
card:
- background: var(--secondary-background-color-alpha)
tap_action:
service: script.lounge_tv_down
template: icon_button
type: 'custom:button-card'
- entity: script.lounge_tv_exit
name: Exit
tap_action:
service: script.lounge_tv_exit
template: menu_button
type: 'custom:button-card'
type: 'custom:hui-element'
- card_type: horizontal-stack
cards:
- entity: script.lounge_tv_red
name: Red
styles:
icon:
- color: red
tap_action:
service: script.lounge_tv_red
template: icon_button
type: 'custom:button-card'
- entity: script.lounge_tv_green
name: Green
styles:
icon:
- color: '#00ff00'
tap_action:
service: script.lounge_tv_green
template: icon_button
type: 'custom:button-card'
- entity: script.lounge_tv_yellow
name: Yellow
styles:
icon:
- color: yellow
tap_action:
service: script.lounge_tv_yellow
template: icon_button
type: 'custom:button-card'
- entity: script.lounge_tv_blue
name: Blue
styles:
icon:
- color: blue
tap_action:
service: script.lounge_tv_blue
template: icon_button
type: 'custom:button-card'
type: 'custom:hui-element'
show_header_toggle: false
title: TV Remote
type: entities
Button card templates:
button_card_templates:
icon_button:
aspect_ratio: 4/3
color_type: icon
hold_action:
action: none
layout: vertical
show_label: false
show_name: false
show_state: false
styles:
card:
- border-radius: 10px
- border: solid 1px var(--primary-color)
- box-shadow: none
- padding: 6px 6px
- margin: 0px 0px
- '--ha-card-background': 'rgba(0, 0, 0, 0)'
icon:
- width: 28px
name:
- justify-self: middle
- align-self: end
- font-size: 14px
- padding: 0px 0px
- color: var(--secondary-text-color)
tap_action:
action: call-service
menu_button:
aspect_ratio: 4/3
color_type: icon
hold_action:
action: none
layout: vertical
show_label: false
show_name: true
show_state: false
styles:
card:
- border-radius: 10px
- border: solid 1px var(--primary-color)
- box-shadow: none
- padding: 6px 6px
- margin: 0px 0px
- '--ha-card-background': 'rgba(0, 0, 0, 0)'
icon:
- width: 28px
name:
- justify-self: middle
- align-self: end
- font-size: 14px
- padding: 0px 0px
- color: var(--secondary-text-color)
tap_action:
action: call-service
picture_button:
aspect_ratio: 4/3
color_type: icon
hold_action:
action: none
layout: vertical
show_entity_picture: true
show_icon: false
show_label: false
show_name: false
show_state: false
styles:
card:
- border-radius: 10px
- border: solid 1px var(--primary-color)
- box-shadow: none
- padding: 6px 6px
- margin: 0px 0px
- '--ha-card-background': 'rgba(0, 0, 0, 0)'
entity_picture:
- width: 100%
- height: 100%
- object-fit: contain
tap_action:
action: call-service
All scripts have icons associated with them using customize.
script.lounge_tv_blue:
icon: mdi:square
friendly_name: Blue
script.lounge_tv_ch_dn:
icon: mdi:arrow-down-bold-box-outline
friendly_name: Channel Down
script.lounge_tv_ch_up:
icon: mdi:arrow-up-bold-box-outline
friendly_name: Channel Up
script.lounge_tv_down:
icon: mdi:arrow-down-bold-circle
friendly_name: Down
script.lounge_tv_exit:
icon: mdi:backspace
friendly_name: Exit
script.lounge_tv_ffwd:
icon: mdi:fast-forward
friendly_name: Fast Forward
script.lounge_tv_green:
icon: mdi:square
friendly_name: Green
script.lounge_tv_guide:
icon: mdi:television-guide
friendly_name: Guide
script.lounge_tv_info:
icon: mdi:information
friendly_name: Info
script.lounge_tv_input_pc:
icon: mdi:desktop-classic
friendly_name: PC Input
script.lounge_tv_input_tv:
icon: mdi:television-classic
friendly_name: TV Input
script.lounge_tv_last_ch:
icon: mdi:arrow-left-bold-box-outline
friendly_name: Last Channel
script.lounge_tv_left:
icon: mdi:arrow-left-bold-circle
friendly_name: Left
script.lounge_tv_media:
icon: mdi:filmstrip
friendly_name: Media
script.lounge_tv_menu:
icon: mdi:menu
friendly_name: Menu
script.lounge_tv_off:
icon: mdi:power-off
friendly_name: TV Off
script.lounge_tv_ok:
icon: mdi:check-circle-outline
friendly_name: OK
script.lounge_tv_on:
icon: mdi:power-cycle
friendly_name: TV On
script.lounge_tv_option:
icon: mdi:playlist-edit
friendly_name: Options
script.lounge_tv_pause:
icon: mdi:pause
friendly_name: Pause
script.lounge_tv_play:
icon: mdi:play
friendly_name: Play
script.lounge_tv_rec:
icon: mdi:record-rec
friendly_name: Record
script.lounge_tv_red:
icon: mdi:square
friendly_name: Red
script.lounge_tv_return:
icon: mdi:backburger
friendly_name: Return
script.lounge_tv_rewind:
icon: mdi:rewind
friendly_name: Rewind
script.lounge_tv_right:
icon: mdi:arrow-right-bold-circle
friendly_name: Right
script.lounge_tv_skip_back:
icon: mdi:skip-previous
friendly_name: Skip Back
script.lounge_tv_skip_fwd:
icon: mdi:skip-next
friendly_name: Skip Forward
script.lounge_tv_stop:
icon: mdi:stop
friendly_name: Stop
script.lounge_tv_up:
icon: mdi:arrow-up-bold-circle
friendly_name: Up
script.lounge_tv_www:
icon: mdi:play-network
friendly_name: Internet
script.lounge_tv_yellow:
icon: mdi:square
friendly_name: Yellow
1 Like
What theme are you using here? I was going to ask about the github repo with your configs as well but I see that was asked a while ago. I saw your screenshot of the Tempest weather setup and I really like that blue theme a lot!
Thanks!
Neil
That’s quite an old screenshot (2 years ago). No idea what I was using then sorry.
Can you tell me what you are using now 
Something I’ve customised myself. And I’m not willing to share it. Sorry. It relies heavily on card mod classes and I don’t have the desire to support it.
Understood - thanks anyway. I really like the header of each card with its two tone. Super sharp!
That’s just a linear gradient applied to the card background:
background: linear-gradient(rgba(147, 171, 202, 1), rgba(255, 255, 255, 0.6) 56px, rgba(255, 255, 255, 0.6) 100%);
well that helps! Thanks for making my eyes bleed less