with most widgets you dont need to edit the css.
you can edit the css in the dashboard with commands like:
widget_style: “any valid css”
icon_style: “any valid css”
slider_style: “any valid css”
but it can be that you couldnt set some styleelements, and i didnt document it, because its default dashboard.
I really like it. Do you mind sharing it?
you can install appdaemon v3.0.1 or install v2.1.12 with My-Appdaemon(https://github.com/ReneTode/My-AppDaemon)
what is the line !important in reference too?
That’s css, !important makes this override other rules that may be taking precedence. More: https://stackoverflow.com/questions/9245353/what-does-important-in-css-mean?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa
Hi,
I really liked this dashboard , do you mind sharing the code , as I want something very similar for my setup too.
Thanks
Developed a few widgets, best efforts on my side I hope someone finds them useful.
hey guys you are doing realy an awesome job. I like it!
Could someone share is widget/config where i can see how you get the times from last changed?
I try to setup a Washing Status and would like to show since when it ist running or finished -like ReneTode has in one of his dashboards aswell.
thank you!
Hi @Rohit_Soni, most of what makes my dashboard look the way it does is custom css. Below is my latest code, it will take quite a bit of manual work for you to get it looking similar for your own dashboard, but this will at least show you how I did it all.
Here is my most recent dashboard.dash:
########################################################################################################################
## Main Config
########################################################################################################################
title: House
widget_dimensions: [24, 25]
widget_size: [1, 1]
widget_margins: [0, 0]
columns: 42
rows: 30
global_parameters:
use_comma: 0
precision: 1
use_hass_icon: 1
namespace: default
layout:
- spotify_album_cover(12x12), av_stereo(6x6), living_room_lights(6x5), top_deck_string(6x5), bitcoin(3x2), clock(9x6)
-
- spx(3x2)
-
- nasdaq(3x2)
- living_room_party(2x2), living_room_relaxed(2x2), living_room_bright(2x2), lower_deck_string(6x5)
- av_house(6x6), temperature_outside(6x3), temperature_inside(6x3)
- dining_lights(6x5)
-
- forecast_0(6x3), air_conditioner(3x5), heater(3x5)
- spa_lights(6x5)
-
- spotify_player(12x11), av_ps4(6x6), dining_room_party(2x2), dining_room_relaxed(2x2), dining_room_bright(2x2), forecast_1(6x3)
-
- kitchen_lights(6x5), living_room_blinds_open(6x5)
- lasers(6x4), forecast_2(6x3)
-
-
- av_ps4_stereo(3x3),av_bedroom(3x3), forecast_3(6x3)
- kitchen_party(2x2), kitchen_relaxed(2x2), kitchen_bright(2x2), top_deck_leds(6x4), living_room_blinds_close(6x5)
-
- av_plug(3x3),av_xbox(3x3), dining_pendants(6x5), forecast_4(6x3)
-
- living_volume_up(3x2), kitchen_volume_up(3x2), bedroom_volume_up(3x2), deck_volume_up(3x2), lower_deck_overhead(6x4)
- projector_daytime(3x6), projector_nighttime(3x6), forecast_5(6x3), front_door(3x3), garage(3x3)
- living_stereo_toggle(3x3), kitchen_stereo_toggle(3x3), bedroom_stereo_toggle(3x3), deck_stereo_toggle(3x3)
- reading_light(6x4)
- lower_deck_heater(6x3), forecast_6(6x3), reload(3x3)
- living_volume_down(3x2), kitchen_volume_down(3x2), bedroom_volume_down(3x2), deck_volume_down(3x2)
-
########################################################################################################################
## Misc
########################################################################################################################
reload:
widget_type: reload
weather_summary:
widget_type: weather_summary
entity: sensor.dark_sky_summary
clock:
widget_type: clock
reload:
widget_type: reload
bitcoin:
title: "BTC"
widget_type: sensor
entity: sensor.exchange_rate_1_btc
shorten: 1
units: ""
precision: 2
nasdaq:
title: "NASDAQ"
widget_type: sensor
entity: sensor.nasdaq
shorten: 1
units: ""
precision: 2
spx:
title: "S&P"
widget_type: sensor
entity: sensor.sp
shorten: 1
units: ""
precision: 2
########################################################################################################################
## Media
########################################################################################################################
spotify_player:
entity: media_player.spotify
widget_type: media_player
title: "Spotify"
spotify_album_cover:
widget_type: camera
entity_picture: [redacted]
refresh: 10
projector_daytime:
widget_type: switch
entity: script.projector_day
title: Daytime Video
icon_on: mdi-weather-sunny
icon_off: mdi-weather-sunny
projector_nighttime:
widget_type: switch
entity: script.projector_night
title: Nighttime Video
icon_on: mdi-weather-night
icon_off: mdi-weather-night
########################################################################################################################
## Lights
########################################################################################################################
living_room_lights:
widget_type: light_with_brightness
entity: light.living
title: Living Room Lights
icon_on: mdi-sofa
icon_off: mdi-sofa
kitchen_lights:
widget_type: light_with_brightness
entity: light.kitchen
title: Kitchen Lights
icon_on: mdi-fridge
icon_off: mdi-fridge
dining_lights:
widget_type: light_with_brightness
entity: light.dining
title: Dining Room Lights
icon_on: fa-cutlery
icon_off: fa-cutlery
dining_pendants:
widget_type: light_with_brightness
entity: light.dining_pendants
title: Pendant Lights
icon_on: mdi-ceiling-light
icon_off: mdi-ceiling-light
MaxValue: 100
reading_light:
widget_type: light_with_brightness
entity: light.reading_light
title: Reading Light
icon_on: mdi-lamp
icon_off: mdi-lamp
MaxValue: 100
########################################################################################################################
## Light States
########################################################################################################################
## Dining Room #########################################################################################################
dining_room_party:
widget_type: switch
entity: script.scene_dining_room_party
# title: Party
icon_on: fa-glass
icon_off: fa-glass
icon_style_inactive: "color: #96DCE4; font-size: 22px; bottom: auto; top: 10px;"
icon_style_active: "color: #96DCE4; font-size: 22px; bottom: auto; top: 10px; text-shadow: none;"
dining_room_relaxed:
widget_type: switch
entity: script.scene_dining_room_relaxed
# title: Relaxed
icon_on: mdi-brightness-6
icon_off: mdi-brightness-6
icon_style_inactive: "color: #96DCE4; font-size: 22px; bottom: auto; top: 10px;"
icon_style_active: "color: #96DCE4; font-size: 22px; bottom: auto; top: 10px; text-shadow: none;"
dining_room_bright:
widget_type: switch
entity: script.scene_dining_room_bright
# title: Bright
icon_on: mdi-lightbulb-on
icon_off: mdi-lightbulb-on
icon_style_inactive: "color: #96DCE4; font-size: 22px; bottom: auto; top: 10px;"
icon_style_active: "color: #96DCE4; font-size: 22px; bottom: auto; top: 10px; text-shadow: none;"
## Living Room #########################################################################################################
living_room_party:
widget_type: switch
entity: script.scene_living_room_party
# title: Party
icon_on: fa-glass
icon_off: fa-glass
icon_style_inactive: "color: #96DCE4; font-size: 22px; bottom: auto; top: 10px;"
icon_style_active: "color: #96DCE4; font-size: 22px; bottom: auto; top: 10px; text-shadow: none;"
living_room_relaxed:
widget_type: switch
entity: script.scene_living_room_relaxed
# title: Relaxed
icon_on: mdi-brightness-6
icon_off: mdi-brightness-6
icon_style_inactive: "color: #96DCE4; font-size: 22px; bottom: auto; top: 10px;"
icon_style_active: "color: #96DCE4; font-size: 22px; bottom: auto; top: 10px; text-shadow: none;"
living_room_bright:
widget_type: switch
entity: script.scene_living_room_bright
# title: Bright
icon_on: mdi-lightbulb-on
icon_off: mdi-lightbulb-on
icon_style_inactive: "color: #96DCE4; font-size: 22px; bottom: auto; top: 10px;"
icon_style_active: "color: #96DCE4; font-size: 22px; bottom: auto; top: 10px; text-shadow: none;"
living_room_dim:
widget_type: switch
entity: script.scene_living_room_dim
# title: Bright
icon_on: mdi-lightbulb-on
icon_off: mdi-lightbulb-on
icon_style_inactive: "color: #96DCE4; font-size: 22px; bottom: auto; top: 10px;"
icon_style_active: "color: #96DCE4; font-size: 22px; bottom: auto; top: 10px; text-shadow: none;"
## Kitchen #########################################################################################################
kitchen_party:
widget_type: switch
entity: script.scene_kitchen_party
# title: Party
icon_on: fa-glass
icon_off: fa-glass
icon_style_inactive: "color: #96DCE4; font-size: 22px; bottom: auto; top: 10px;"
icon_style_active: "color: #96DCE4; font-size: 22px; bottom: auto; top: 10px; text-shadow: none;"
kitchen_relaxed:
widget_type: switch
entity: script.scene_kitchen_relaxed
# title: Relaxed
icon_on: mdi-brightness-6
icon_off: mdi-brightness-6
icon_style_inactive: "color: #96DCE4; font-size: 22px; bottom: auto; top: 10px;"
icon_style_active: "color: #96DCE4; font-size: 22px; bottom: auto; top: 10px; text-shadow: none;"
kitchen_bright:
widget_type: switch
entity: script.scene_kitchen_bright
# title: Bright
icon_on: mdi-lightbulb-on
icon_off: mdi-lightbulb-on
icon_style_inactive: "color: #96DCE4; font-size: 22px; bottom: auto; top: 10px;"
icon_style_active: "color: #96DCE4; font-size: 22px; bottom: auto; top: 10px; text-shadow: none;"
########################################################################################################################
## Outside
########################################################################################################################
## Top Deck ############################################################################################################
top_deck_leds:
widget_type: switch
entity: switch.top_deck_leds
title: Upper LEDs
icon_on: mdi-led-on
icon_off: mdi-led-on
top_deck_string:
widget_type: light_with_brightness
entity: light.top_deck_string_lights
title: Upper String Lights
MaxValue: 100
## Lower Deck ############################################################################################################
lower_deck_heater:
widget_type: switch
entity: switch.lower_deck_heater
title: Deck Heater
icon_style_active: "color: red"
icon_on: mdi-fire
icon_off: mdi-fire
widget_style: ""
lower_deck_overhead:
widget_type: light_with_brightness
entity: light.lower_deck_overhead_light
title: Lower Overhead Light
icon_on: mdi-ceiling-light
icon_off: mdi-ceiling-light
MaxValue: 100
lower_deck_string:
widget_type: light_with_brightness
entity: light.lower_deck_string_lights
title: Lower String Lights
MaxValue: 100
## Spa #################################################################################################################
spa_lights:
widget_type: light_with_brightness
entity: light.spa_string_lights
title: Spa String Lights
MaxValue: 100
lasers:
widget_type: switch
entity: switch.lasers
title: Lasers
# icon_style_active: "color: yellow"
icon_on: mdi-flash
icon_off: mdi-flash
# widget_style: "border-top: 1px #222 solid;"
########################################################################################################################
## Sound
########################################################################################################################
## Modes ###############################################################################################################
av_stereo:
widget_type: switch
entity: switch.listen_in_living_area
title: Stereo
icon_on: mdi-music-note
icon_off: mdi-music-note
av_house:
widget_type: switch
entity: switch.listen_in_whole_house
title: Whole House
icon_on: fa-music
icon_off: fa-music
av_bedroom:
widget_type: switch
entity: switch.listen_in_bedroom
title: Bedroom
icon_on: mdi-hotel
icon_off: mdi-hotel
av_ps4:
widget_type: switch
entity: switch.play_ps4
title: PS4
icon_on: mdi-playstation
icon_off: mdi-playstation
av_ps4_stereo:
widget_type: switch
entity: switch.playstation_and_listen
title: PS4+Stereo
icon_on: mdi-playstation
icon_off: mdi-playstation
av_xbox:
widget_type: switch
entity: switch.play_xbox
title: XBOX
icon_on: mdi-xbox
icon_off: mdi-xbox
av_plug:
widget_type: switch
entity: switch.listen_to_phone
title: Plug
icon_on: mdi-cellphone-iphone
icon_off: mdi-cellphone-iphone
## Theater #############################################################################################################
living_stereo_toggle:
widget_type: switch
entity: script.living_toggle
title: Theater
icon_on: mdi-sofa
icon_off: mdi-sofa
living_volume_up:
widget_type: switch
entity: script.living_up
icon_on: mdi-chevron-up
icon_off: mdi-chevron-up
living_volume_down:
widget_type: switch
entity: script.living_down
icon_on: mdi-chevron-down
icon_off: mdi-chevron-down
## Kitchen #############################################################################################################
kitchen_stereo_toggle:
widget_type: switch
entity: script.kitchen_toggle
title: Kitchen
icon_on: mdi-fridge
icon_off: mdi-fridge
kitchen_volume_up:
widget_type: switch
entity: script.kitchen_up
# title: Volume Up
icon_on: mdi-chevron-up
icon_off: mdi-chevron-up
kitchen_volume_down:
widget_type: switch
entity: script.kitchen_down
# title: Volume Down
icon_on: mdi-chevron-down
icon_off: mdi-chevron-down
# widget_style: "border-top: 1px #222 solid;"
## Bedroom #############################################################################################################
bedroom_stereo_toggle:
widget_type: switch
entity: script.bedroom_toggle
title: Bedroom
icon_on: mdi-hotel
icon_off: mdi-hotel
icon_style_active: "color: white"
# widget_style: "border-top: 1px #222 solid;"
bedroom_volume_up:
widget_type: switch
entity: script.bedroom_up
# title: Volume Up
icon_on: mdi-chevron-up
icon_off: mdi-chevron-up
icon_style_active: "color: white"
# widget_style: "border-top: 1px #222 solid;"
bedroom_volume_down:
widget_type: switch
entity: script.bedroom_down
# title: Volume Down
icon_on: mdi-chevron-down
icon_off: mdi-chevron-down
icon_style_active: "color: white"
# widget_style: "border-top: 1px #222 solid;"
## Deck ################################################################################################################
deck_stereo_toggle:
widget_type: switch
entity: script.deck_toggle
title: Deck
icon_on: mdi-pine-tree
icon_off: mdi-pine-tree
icon_style_active: "color: white"
# widget_style: "border-top: 1px #222 solid;"
deck_volume_up:
widget_type: switch
entity: script.deck_up
# title: Volume Up
icon_on: mdi-chevron-up
icon_off: mdi-chevron-up
icon_style_active: "color: white"
# widget_style: "border-top: 1px #222 solid;"
deck_volume_down:
widget_type: switch
entity: script.deck_down
# title: Volume Down
icon_on: mdi-chevron-down
icon_off: mdi-chevron-down
icon_style_active: "color: white"
# widget_style: "border-top: 1px #222 solid;"
########################################################################################################################
## Weather Summary
########################################################################################################################
weather_summary:
widget_type: weather_summary
entity: sensor.dark_sky_daily_summary
forecast_0:
widget_type: day_forecast
entity: sensor.forecast_0
forecast_1:
widget_type: day_forecast
entity: sensor.forecast_1
forecast_2:
widget_type: day_forecast
entity: sensor.forecast_2
forecast_3:
widget_type: day_forecast
entity: sensor.forecast_3
forecast_4:
widget_type: day_forecast
entity: sensor.forecast_4
forecast_5:
widget_type: day_forecast
entity: sensor.forecast_5
forecast_6:
widget_type: day_forecast
entity: sensor.forecast_6
########################################################################################################################
## HVAC
########################################################################################################################
temperature_inside:
title: "Inside"
widget_type: sensor
entity: sensor.house_temperature
temperature_outside:
title: "Outside"
widget_type: sensor
entity: sensor.dark_sky_temperature
air_conditioner:
title: "A/C"
widget_type: switch
entity: switch.hvac_air_conditioner
icon_on: mdi-fan
icon_off: mdi-fan
heater:
title: "Heater"
widget_type: switch
entity: switch.hvac_heater
icon_on: mdi-fire
icon_off: mdi-fire
########################################################################################################################
## Doors
########################################################################################################################
front_door:
title: "Front"
widget_type: sensor_with_icon
entity: sensor.front_door
icon_on: mdi-door-open
icon_off: mdi-door
garage:
title: "Garage"
widget_type: sensor_with_icon
entity: sensor.garage
icon_on: mdi-garage-open
icon_off: mdi-garage
########################################################################################################################
## Blinds
########################################################################################################################
living_room_blinds_open:
title: "Blinds"
widget_type: switch
entity: switch.open_blinds
icon_on: mdi-weather-sunset-down
icon_off: mdi-weather-sunset-down
living_room_blinds_close:
title: "Blinds"
widget_type: switch
entity: switch.close_blinds
icon_on: mdi-weather-sunset-up
icon_off: mdi-weather-sunset-upAnd, because I hit the post size limit, here is my most recent dashboard.css
html {
font-size: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
padding: 0;
}
body {
margin: 0;
background-color: #000;
font-size: 13px;
color: #fff;
padding: 0;
line-height: 1;
/*font-family: 'Helvetica Neue', 'Helvetica', 'Open Sans', 'Arial'*/
/*font-family: 'Marvel', sans-serif;*/
/*font-family: 'Avenir Next Condensed', serif;*/
font-family: 'Asap Condensed', serif;
font-weight: 400;
/*-webkit-font-smoothing: subpixel-antialiased;*/
/*text-rendering: optimizeLegibility;*/
}
b, strong {
font-weight: bold;
}
a {
text-decoration: none;
color: inherit;
}
img {
border: 0;
-ms-interpolation-mode: bicubic;
vertical-align: middle;
}
img, object {
max-width: 100%;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;}
iframe {
max-width: 100%;
}
table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
}
td {
vertical-align: middle;
}
ul, ol {
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, p {
padding: 0;
margin: 0;
}
h1 {
margin-bottom: 6px;
text-align: center;
font-size: 100%;
font-weight: bold;
text-transform: uppercase;
z-index: 2;
}
h2 {
font-size: 300%;
font-weight: 400;
color: #fff;
}
h3 {
font-size: 125%;
font-weight: 300;
color: #fff;
}
input {
background-color: #444;
border: none;
}
.dashboard_main {
margin: 0px auto;
}
.gridster {
margin: 0px auto;
}
h2.icon{
height: 40px;
font-size: 35px;
line-height: 40px;
top: 50% !important;
margin-top: -20px;
}
/*
This code can make full width icons...I didn't like it though
h2.icon{
position: absolute;
font-size: 35px;
line-height: 100%;
text-align: center;
width: 100%;
height: 100% !important;
top: 0 !important;
z-index: 0;
}
h2.icon i{
position:absolute;
display:block;
height: 40px;
top: 50% !important;
margin-top: -20px;
width: 100%;
text-align: center;
}
*/
.icon-background {
pointer-events: none;
width: 100%!important;
height: 100%;
position: absolute;
left: 0;
top: 0;
opacity: 0.1;
font-size: 1375%;
text-align: center;
margin-top: 52px;
}
.list-nostyle {
list-style: none;
}
.gridster ul {
list-style: none;
}
.gs-w {
width: 100%;
display: table;
cursor: pointer;
z-index: auto !important;
}
.iframe {
position: relative;
overflow: hidden;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;}
.widget {
padding: 0px 0px;
text-align: center;
width: 100%;
display: table-cell;
vertical-align: middle;
/*box-shadow: 20px 20px 30px RGBA(255,255,255,.1) inset;*/
}
/*span.toggle-area{*/
/*background: linear-gradient(45deg, rgba(0,0,0,0.05) 0%,rgba(255,255,255,0.08) 100%);*/
/*}*/
.title {
color: #fff;
opacity: .6;
font-weight: 400 !important;
}
#container {
padding-top: 0;
}
.modalDialog {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 9999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialogOpen {
opacity:0.95;
pointer-events: auto;
}
.modalDialogClose {
opacity:0;
pointer-events: none;
}
.modalDialog > div {
width: 275px;
position: relative;
margin: 3% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
}
.modalDialogCloseButton {
line-height: 50px;
position: absolute;
right: -25px;
text-align: center;
top: -20px;
width: 50px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
}
.modalDialogCloseButton:hover { background: #444; }
/***********************************************************************************************************************
COLOR CUSTOMIZATIONS
***********************************************************************************************************************/
/* Media Left Column **************************************************************************************************/
.widget{
background-image: linear-gradient(45deg, rgba(0,0,0,0.2) 0%,rgba(255,255,255,0.1) 100%);
background-blend-mode: overlay;
}
#default-spotify-player{
background-color: #0a7679 !important;
vertical-align: top;
background-image: linear-gradient(45deg, rgba(0,0,0,0.2) 0%,rgba(255,255,255,0.1) 100%);
}
#default-spotify-player h1.album,
#default-spotify-player h1.title{
display: none;
}
#default-spotify-player h1.artist{
font-size: 36px;
position: relative;
top: auto;
padding-top: 15px;
color: #fff !important;
font-weight: 400;
}
#default-spotify-player h1.media_title{
top: auto;
font-size: 22px;
font-style: italic;
position: relative;
font-weight: 400;
}
#default-spotify-player h2#play,
#default-spotify-player h2#previous,
#default-spotify-player h2#next{
color: #96DCE4 !important;
font-size: 60px;
}
#default-spotify-player h2#play i.fa-pause{
color: #ffe000 !important;
text-shadow: 0 0 12px RGBA(255,255,0,.75);
font-size: 60px;
}
#default-spotify-player .secondary-icon{
bottom: 20px !important;
}
#default-spotify-player div.levelunit{
font-size: 120%;
color: #96DCE4 !important;
bottom: 26px !important;
}
#default-spotify-player p.minus i,
#default-spotify-player p.plus i{
font-size: 30px;
color: #96DCE4 !important;
}
#default-living-stereo-toggle,
#default-living-volume-up,
#default-living-volume-down{
background-color: #0b716c !important;
background-image: linear-gradient(90deg, rgba(0,0,0,0.05) 0%,rgba(255,255,255,0.05) 100%);
}
#default-kitchen-stereo-toggle,
#default-kitchen-volume-up,
#default-kitchen-volume-down{
background-color: #0c6165 !important;
background-image: linear-gradient(90deg, rgba(0,0,0,0.05) 0%,rgba(255,255,255,0.05) 100%);
}
#default-bedroom-stereo-toggle,
#default-bedroom-volume-up,
#default-bedroom-volume-down{
background-color: #015965 !important;
background-image: linear-gradient(90deg, rgba(0,0,0,0.05) 0%,rgba(255,255,255,0.05) 100%);
}
#default-deck-stereo-toggle,
#default-deck-volume-up,
#default-deck-volume-down{
background-color: #054954 !important;
background-image: linear-gradient(90deg, rgba(0,0,0,0.05) 0%,rgba(255,255,255,0.05) 100%);
}
#default-living-stereo-toggle .icon,
#default-kitchen-stereo-toggle .icon,
#default-bedroom-stereo-toggle .icon,
#default-deck-stereo-toggle .icon{
margin-top: -10px;
}
/* Harmony Mode Column ************************************************************************************************/
#default-av-stereo{
background-color: #0e5d79 !important;
}
#default-av-stereo .icon{
font-size: 59px;
}
#default-av-house{
background-color: #155e79 !important;
}
#default-av-house .icon{
font-size: 50px;
}
#default-av-ps4{
background-color: #065971 !important;
}
#default-av-ps4 .icon{
font-size: 69px;
}
#default-av-ps4-stereo{
background-color: #195e7d !important;
}
#default-av-bedroom{
background-color: #0d5079 !important;
}
#default-av-xbox{
background-color: #154b79 !important;
}
#default-av-plug{
background-color: #175c79 !important;
}
#default-projector-daytime{
background-color: #155e79 !important;
}
#default-projector-nighttime{
background-color: #124b70 !important;
}
/* House Lights Column ************************************************************************************************/
#default-living-room-bright,
#default-living-room-relaxed,
#default-living-room-party{
background-color: #1e5270 !important;
background-image: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.2) 100%);
}
#default-living-room-lights{
background-color: #1e5270 !important;
background-image: linear-gradient(0deg, rgba(0,0,0,0.2) 0%, rgba(255,255,255,0.1) 100%);
}
#default-living-room-lights .icon{
font-size: 60px;
}
#default-dining-room-bright,
#default-dining-room-relaxed,
#default-dining-room-party{
background-color: #174470 !important;
background-image: linear-gradient(180deg, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.2) 100%);
}
#default-dining-lights{
background-color: #174470 !important;
background-image: linear-gradient(0deg, rgba(0,0,0,0.2) 0%,rgba(255,255,255,0.1) 100%);
}
#default-dining-lights .icon{
font-size: 50px;
}
#default-kitchen-bright,
#default-kitchen-relaxed,
#default-kitchen-party{
background-color: #003770 !important;
background-image: linear-gradient(180deg, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.2) 100%);
}
#default-kitchen-lights{
background-color: #003770 !important;
background-image: linear-gradient(0deg, rgba(0,0,0,0.2) 0%,rgba(255,255,255,0.1) 100%);
}
#default-kitchen-lights .icon{
font-size: 55px;
}
#default-dining-pendants{
background-color: #054170 !important;
}
#default-dining-pendants .icon{
font-size: 50px;
}
#default-reading-light{
background-color: #154570 !important;
}
/* Outdoor Lights Column ************************************************************************************************/
#default-top-deck-string{
background-color: #1a3970 !important;
}
#default-top-deck-string .icon {
transform: rotate(180deg);
}
#default-top-deck-leds{
background-color: #183d70 !important;
}
#default-lower-deck-string{
background-color: #0a3070 !important;
}
#default-lower-deck-string .icon {
transform: rotate(180deg);
}
#default-lower-deck-overhead{
background-color: #183970 !important;
}
#default-spa-lights{
background-color: #011c70 !important;
}
#default-spa-lights .icon {
transform: rotate(180deg);
}
#default-lasers{
background-color: #123070 !important;
}
#default-lower-deck-heater{
background-color: #0b3070 !important;
}
/* Weather Column ************************************************************************************************/
#default-bitcoin{
background-color: #142670 !important;
}
#default-nasdaq{
background-color: #171e70 !important;
}
#default-spx{
background-color: #152c70 !important;
}
#default-bitcoin h2.value,
#default-nasdaq h2.value,
#default-spx h2.value{
padding-top: 12px;
font-size: 200% !important;
}
#default-temperature-outside{
background-color: #0f2470 !important;
}
#default-forecast-0{
background-color: #111f70 !important;
}
#default-forecast-1{
background-color: #0f2f70 !important;
}
#default-forecast-2{
background-color: #0f2470 !important;
}
#default-forecast-3{
background-color: #172170 !important;
}
#default-forecast-4{
background-color: #051370 !important;
}
#default-forecast-5{
background-color: #042570 !important;
}
#default-forecast-6{
background-color: #141670 !important;
}
/* Sensor Column ************************************************************************************************/
#default-clock{
background-color: #3a1770 !important;
}
#default-clock h2.time{
font-size: 450%;
/*font-weight: 600;*/
/*color: #ffe000 !important;*/
}
#default-clock h1.date{
font-size: 200%;
font-weight: 400;
}
#default-temperature-inside{
background-color: #2e1b70 !important;
}
#default-air-conditioner{
background-color: #191470 !important;
}
#default-heater{
background-color: #270d70 !important;
}
#default-front-door{
background-color: #1d1270 !important;
}
#default-garage{
background-color: #2d0970 !important;
}
#default-living-room-blinds-open{
background-color: #3a0970 !important;
}
#default-living-room-blinds-close{
background-color: #230a67 !important;
}
#default-living-room-blinds-open .icon,
#default-living-room-blinds-close .icon{
font-size: 58px;
transform:rotate(180deg);
}
#default-reload{
background-color: #400a70 !important;
}i never had last changed in my dashboards that i know of.
but last_changed is an attribute and at the moment there are 2 ways to show that in a dashboard.
from a sensor you can show an attribute as sub entity.
http://appdaemon.readthedocs.io/en/latest/DASHBOARD_CREATION.html#sensor
from all other entity types you can create a template sensor in HA and then use a sensor widget to show it.
Hey Rene, thank you for your answere. Actualy I tried to enable the last_changed attribute via
customize_glob:
input_boolean.*:
show_last_changed: true
and it work within homeassitant.
But, i dont get the value into the Dashboard, because the attributes I can see in the Entities is just show_last_changed: true; but not the timestamp when it was changed.
If you have a simple example, it would me help so much.
greatings
Sascha
you just did show the atrribute in homeassistant.
it made it clear that the entity is an imput boolean.
the way to go in that case is creating a template sensor in HA.
something like:
sensor:
your_name:
friendly_name: anything
value_template: '{states.input_boolean.something.last_changed}'
entity_id:
- input_boolean.something
the template is probably not right, but gives an idea.
then you create a sensor widget that show that newly created sensor.
forget my last post. that is a way to do it, but it is an old way and there is a new way that i didnt use untill now and just got reminded off.
you dont need to create a template sensor anymore to show an atrribute. the sensor widget is capable off more nowadays.
in your dashboard you can use:
widget_name:
widget_type: sensor
entity: input_boolean.your_boolean.last_changed
Hey @ReneTode
This was on my list of things to ask you as well. I have a few sensors that I would like to get the time they were last trigged on HADashboard, see picture,
They are binary sensors, here is the code for them in HAD
downstairs_motion_motion_sensor:
widget_type: binary_sensor
title: Downstairs Motion
icon_on: mdi-eye-outline
icon_off: mdi-eye-off-outline
entity: sensor.downstairs_motion_motion_sensor
hallway_motion_motion_sensor:
widget_type: binary_sensor
title: Hallway Motion
icon_on: mdi-eye-outline
icon_off: mdi-eye-off-outline
entity: sensor.hallway_motion_motion_sensor
front_door_sensor:
widget_type: binary_sensor
title: Front Door
icon_on: mdi-door-open
icon_off: mdi-door
icon_style_inactive: "color: green"
icon_style_active: "color: red"
entity: binary_sensor.front_door
state_text: 1
state_map:
"on": Open
"off": Closed
garage_door_sensor:
widget_type: binary_sensor
title: Garage Door
icon_on: mdi-door-open
icon_off: mdi-door
icon_style_inactive: "color: green"
icon_style_active: "color: red"
entity: binary_sensor.garage_door
state_text: 1
state_map:
"on": Open
"off": Closed
So can I add a sub_entity to display the last triggered state in the same tile ? I tried,
hallway_motion_motion_sensor:
widget_type: binary_sensor
title: Hallway Motion
icon_on: mdi-eye-outline
icon_off: mdi-eye-off-outline
entity: sensor.hallway_motion_motion_sensor
sub_entity: sensor.hallway_motion_motion_sensor.last_changed
But it didn’t seem to do anything. I am sure it’s something simple I am probably missing.
…
this is exactly what I was expecting and tried out, but unfortunatly does not work for me
I know @ReneTode is a busy man at the moment, but I am sure he will help us out when he gets some free time 
If I recall correctly, sub entity is only supported in the Sensor Widget and not the binary_sensor widget.
Thank you for the reply @aimc Do you know if there would be an easy way to get the time last changed into a binary sensor widget at all ?
your right andrew. the subentity is only inside the sensor widget.
@cee you could use the “normal” sensor widget, but the you get the state (on/off) instead of an icon.
only other option at the moment is create a custom widget. for that you need to compare the javascript from the sensor widget with the binary sensor widget and implement the sub entity part.
@Stiff04 it will work in a sensor widget, but you dont have an icon in that.
you would need to use it like i showed.