yup, its in the docs.
to make an unfilled widget you use “spacer”
and please next time dont just put your question anywhere, because this has nothing to do with the topic 
Sorry. I was trying to search for this in the doc but couldn’t find it. I guess I was searching for the wrong thing. I try not to post randomly but I was looking through the images here and saw empty spaces so I figured someone in here knew how to do it. I will do better next time.
no problem.
if it is dashboard related and you cant find it in the docs, you also can ask me through PM.
1 Like
Hi jpez, curious how you got the artwork out of the spotify media player. your album cover entity is [redacted] :). It is somewhere since HA pulls it, but i tried “camera” with media_player.spotify and get nothing…thanks !
Will the basegooglemap work with google geocode api key?
@mviamin: The album cover i figured out from another thread on this forum. I believe this is the thread: Using media_player entity_picture
Essentially, you need to create a camera entity in home assistant, something like this:
camera:
- platform: generic
name: spotify_album_cover
still_image_url: http://[ip]:8123{{ states.media_player.spotify.attributes.entity_picture }}
Then, you reference that entity in your .dash file:
spotify_album_cover:
widget_type: camera
entity_picture: http://[ip]:8123/api/camera_proxy/camera.spotify_album_cover?{{ states.camera.spotify_album_cover.attributes.access_token }}&api_password=[api password here]
refresh: 10
I can’t remember the exact details but they’ll be covered in that thread~
I believe so, you may need to add the addition api’s to the project you have already
And which is the API i must add?
Very nice. Just started with my (docker version) today. How’d you do the calendar entry?
Zen, good god your Hvac dash is AWESOME ! ive been tryng to get the buttons just like yous without any luck, feel like sharing ? are you on discord ?
hi could you please share your yaml code for your dash that is a nice clean dashboard thankyou
This is jast a modified Obsydian skin, all credits to the author.
The variables.yaml:
white: "#fff"
red: "#ff0055"
green: "#aaff00"
blue: "#00aaff"
purple: "#aa00ff"
yellow: "#FAA916"
cyan: "#00BFFF"
gray_dark: "#444"
gray_medium: "#666"
gray_light: "#888"
#Page and widget defaults
text_style: "color: #fff"
#These are used for icons and indicators
style_inactive: "color: $white"
style_active: "color: $cyan"
style_active_warn: "color: $yellow"
style_info: "color: $cyan"
style_title: "color: $white"
style_title2: "color: $white"
# Alternate widget styles
# stripped is a transparent mod that removes the texture, border and drop shadows
# no_texture removes the texture and replaces it with a black background
stripped: "background-image: none; background-color: rgba(0,0,0,0.6); border-style: solid; border-width: 2px; border-color: dodgerblue; box-shadow: none !important"
no_texture: "background: black; background-image: none; color: black; border-style: inset"
# Widget Default Definitions
scene_icon_on: fas-square
scene_icon_off: fas-square
scene_icon_style_active: $style_active
scene_icon_style_inactive: $style_inactive
scene_title_style: $style_title
scene_title2_style: $style_title2
scene_widget_style: $background_style
scene_state_text_style: $style_info
mode_icon_on: fas-arrows-alt
mode_icon_off: fas-arrows-alt
mode_icon_style_active: $style_active
mode_icon_style_inactive: $style_inactive
mode_title_style: $style_title
mode_title2_style: $style_title2
mode_widget_style: $background_style
mode_state_text_style: $style_info
script_icon_on: fas-th-large
script_icon_off: fas-th-large
script_icon_style_active: $style_active
script_icon_style_inactive: $style_inactive
script_title_style: $style_title
script_title2_style: $style_title2
script_widget_style: $stripped
script_state_text_style: $style_info
binary_sensor_icon_on: fas-bullseye as-spin
binary_sensor_icon_off: fas-minus
binary_sensor_icon_style_active: $style_active_warn
binary_sensor_icon_style_inactive: $style_inactive
binary_sensor_title_style: $style_title
binary_sensor_title2_style: $style_title2
binary_sensor_widget_style: $stripped
binary_sensor_state_text_style: $style_info
icon_title_style: $style_title
icon_title2_style: $style_title2
icon_widget_style: $stripped
icon_state_text_style: $style_info
device_tracker_icon_on: fas-user
device_tracker_icon_off: fas-user
device_tracker_icon_style_active: $style_active
device_tracker_icon_style_inactive: $style_inactive
device_tracker_title_style: $style_title
device_tracker_title2_style: $style_title2
device_tracker_widget_style: $stripped
device_tracker_state_text_style: $style_info
input_boolean_icon_on: fas-sliders-h
input_boolean_icon_off: fas-sliders-h
input_boolean_icon_style_active: $style_active
input_boolean_icon_style_inactive: $style_inactive
input_boolean_title_style: $style_title
input_boolean_title2_style: $style_title2
input_boolean_widget_style: $stripped
input_boolean_state_text_style: $style_info
switch_icon_on: fas-circle
switch_icon_off: far-circle
switch_icon_style_active: $style_active
switch_icon_style_inactive: $style_inactive
switch_title_style: $style_title
switch_title2_style: $style_title2
switch_widget_style: $stripped
switch_state_text_style: $style_info
lock_icon_on: fas-unlock-alt
lock_icon_off: fas-lock
lock_icon_style_active: $style_active_warn
lock_icon_style_inactive: $style_inactive
lock_title_style: $style_title
lock_title2_style: $style_title2
lock_widget_style: $background_style
lock_state_text_style: $style_info
cover_icon_on: fas-arrows-alt-v
cover_icon_off: fas-arrows-alt-v
cover_icon_style_active: $style_active_warn
cover_icon_style_inactive: $style_inactive
cover_title_style: $style_title
cover_title2_style: $style_title2
cover_widget_style: $background_style
cover_state_text_style: $style_info
clock_date_style: "color: $white; font-size: 150%"
clock_time_style: "color: $cyan"
clock_widget_style: $stripped
weather_main_style: "color: $cyan; font-size: 75%"
weather_unit_style: "color: $cyan; font-size: 200%"
weather_sub_style: "color: $white; font-size: 100%"
weather_widget_style: $stripped
weather_summary_title_style: $style_title
weather_summary_text_style: "font-family: Climacons-Font; font-size: 100px"
weather_summary_state_text_style: "color: $white"
weather_summary_widget_style: $stripped
weather_summary_container_style: ""
london_underground_title_style: "color: $white; font-size: 150%"
london_underground_text_style: "color: $white; font-size: 200%"
london_underground_state_text_style: "color: $white; font-size: 150%"
london_underground_widget_style: $background_style
london_underground_container_style: ""
label_title_style: $style_title
label_title2_style: $style_title2
label_text_style: $style_info
label_widget_style: $stripped
label_state_text_style: $style_info
label_container_style: ""
sensor_title_style: $style_title
sensor_title2_style: $style_title2
sensor_value_style: "color: $cyan; font-size: 200%"
sensor_text_style: "color: $cyan; font-size: 100%"
sensor_state_text_style: "color: $cyan; font-size: 100%"
sensor_unit_style: "color: $cyan; font-size: 170%"
sensor_widget_style: $stripped
sensor_container_style: ""
reload_icon_active: fas-spinner fa-spin
reload_icon_inactive: mdi-sync
reload_icon_active_style: $style_active
reload_icon_inactive_style: "color: $cyan"
reload_title_style: "color: $white"
reload_title2_style: $style_title2
reload_widget_style: $stripped
javascript_icon_active: fas-asterisk
javascript_icon_inactive: fas-asterisk
javascript_icon_active_style: $style_active
javascript_icon_inactive_style: "color: $white"
javascript_title_style: "color: $white"
javascript_title2_style: $style_title2
javascript_widget_style: $background_style
navigate_icon_active: fas-spinner fa-spin
navigate_icon_inactive: fas-cog
navigate_icon_active_style: $style_active
navigate_icon_inactive_style: $style_active
navigate_title_style: $style_title
navigate_title2_style: $style_title2
navigate_widget_style: $stripped
media_player_icon_play: mdi-play
media_player_icon_pause: mdi-pause
media_player_icon_stop: fas-stop
media_player_icon_up: mdi-volume-plus
media_player_icon_down: mdi-volume-minus
media_player_title_style: $style_title
media_player_media_title_style: $style_title2
media_player_album_style: $style_title2
media_player_artist_style: $style_title2
media_player_icon_style_active: "color: $cyan"
media_player_icon_style_inactive: "color: $white"
media_player_state_text_style: "color: $white"
media_player_units_style: "color: $white"
media_player_level_style: "color: $white"
media_player_level_up_style: "color: $white"
media_player_level_down_style: "color: $white"
media_player_widget_style: $stripped
media_player_icon_previous: mdi-skip-backward
media_player_icon_next: mdi-skip-forward
media_player_icon_style_previous: "color: $cyan"
media_player_icon_style_next: "color: $cyan"
light_icon_on: fas-circle
light_icon_off: fas-circle
light_icon_up: mdi-plus
light_icon_down: mdi-minus
light_title_style: $style_title
light_title2_style: $style_title2
light_icon_style_active: $style_active
light_icon_style_inactive: $style_inactive
light_state_text_style: $style_info
light_level_style: $style_inactive
light_level_up_style: $style_inactive
light_level_down_style: $style_inactive
light_widget_style: $stripped
light_unit_style: $style_inactive
input_number_title_style: $style_title
input_number_title2_style: $style_title2
input_number_minvalue_style: $style_title
input_number_maxvalue_style: $style_title
input_number_value_style: $style_title2
input_number_slider_style: "background: rgba(0,191,255,0.5)"
input_number_cbutton_style: ""
input_number_widget_style: $stripped
climate_icon_up: fas-plus
climate_icon_down: fas-minus
climate_title_style: $style_title
climate_title2_style: $style_title2
climate_level_style: "color: $cyan; font-size: 300%"
climate_unit_style: "color: $cyan; font-size: 95%"
climate_level_up_style: $style_inactive
climate_level_down_style: $style_inactive
climate_widget_style: $background_style
climate_state_text_style: $white
climate_level2_style: "color: $cyan; font-size: 95%"
climate_unit2_style: "color: $cyan; font-size: 65%"
group_icon_on: fas-circle
group_icon_off: far-circle
group_icon_up: fas-plus
group_icon_down: fas-minus
group_title_style: $style_title
group_title2_style: $style_title2
group_icon_style_active: $style_active
group_icon_style_inactive: $style_inactive
group_state_text_style: $style_info
group_level_style: "$style_inactive"
group_level_up_style: "$style_inactive"
group_level_down_style: "$style_inactive"
group_widget_style: $background_style
group_unit_style: "$style_inactive"
iframe_title_style: "$style_title; background-color: rgba(0, 0, 0, 0.5)"
iframe_widget_style: $stripped
alarm_title_style: $style_title
alarm_widget_style: $stripped
alarm_title2_style: $style_title2
alarm_state_style: "color: $cyan;font-size: 100%"
alarm_panel_state_style: "color: $cyan"
alarm_panel_code_style: "color: $cyan"
alarm_panel_background_style: "background-color: rgba(0,0,30,1)"
alarm_panel_button_style: "color: $cyan; background-color: rgba(0,0,50,1)"
camera_widget_style: $background_style
camera_title_style: "$style_title; background-color: rgba(0, 0, 0, 0.5)"
gauge_widget_style: $stripped
gauge_title_style: $style_title
gauge_title2_style: $style_title2
gauge_low_value_color: "$cyan"
gauge_med_value_color: "$cyan"
gauge_high_value_color: "$cyan"
gauge_value_bgcolor: "$gray_medium"
gauge_text_color: "$cyan"
rss_title_style: $style_title
rss_title2_style: $style_title2
rss_text_style: "color: $cyan"
rss_widget_style: $background_style
input_select_title_style: $style_title
input_select_title2_style: $style_title2
input_select_widget_style: $stripped
input_select_select_style: "background-color:rgba(100,100,100,0.5);color:dodgerblue;"
input_select_container_style: ""
input_slider_icon_up: mdi-plus
input_slider_icon_down: mdi-minus
input_slider_title_style: $style_title
input_slider_title2_style: $style_title2
input_slider_unit_style: $style_info
input_slider_level_style: $style_info
input_slider_level_up_style: $style_inactive
input_slider_level_down_style: $style_inactive
input_slider_widget_style: $stripped
input_slider_value_style: ""
new_input_number_title_style: $style_title
new_input_number_title2_style: $style_title2
new_input_number_minvalue_style: $style_title
new_input_number_maxvalue_style: $style_title
new_input_number_value_style: $style_title
new_input_number_slider_style: "background: rgba(0,191,255,0.5)"
new_input_number_button_style: ""
new_input_number_widget_style: $background_style
vertical_input_number_title_style: $style_title
vertical_input_number_title2_style: $style_title2
vertical_input_number_minvalue_style: $style_title
vertical_input_number_maxvalue_style: $style_title
vertical_input_number_value_style: $style_title
vertical_input_number_slider_style: ""
vertical_input_number_container_style: ""
vertical_input_number_widget_style: $background_style
radial_widget_style: "background: none"
thermo_widget_style: "background: none"
heater_icon_on: fas-fire
heater_icon_off: fas-fire
heater_title_style: $style_title
heater_title2_style: $style_title2
heater_slider_style: ""
heater_widget_style: $background_style
heater_icon_style_active: $style_active
heater_icon_style_inactive: $style_inactive
wunderground_main_style: "color: $orange"
wunderground_unit_style: "color: $orange"
wunderground_sub_style: "color: $blue"
wunderground_widget_style: $background_style
vacuum_title_style: $style_title
vacuum_title2_style: $style_title2
vacuum_widget_style: $stripped #"background-color: rgba(0,191,255,.4); border-style: solid; border-width: 2px; border-color: dodgerblue; box-shadow: none !important"
vacuum_state_text_style: $style_title2
swipe_light_title_style: $style_title
swipe_light_title2_style: $style_title2
swipe_light_widget_style: $stripped
swipe_light_level_style: "font-size: 15px;"
swipe_light_unit_style: "font-size: 10px;"
swipe_light_button_style: ""
swipe_light_slider_style: "background: rgba(0,191,255,0.5)"
swipe_light_icon_on: mdi-lightbulb
swipe_light_icon_off: mdi-lightbulb
swipe_light_icon_style_active: "font-size: 250%!important; $style_active"
swipe_light_icon_style_inactive: "font-size: 250%!important; $style_inactive"
media_select_title_style: $style_title
media_select_title2_style: $style_title2
media_select_widget_style: $stripped
media_select_select_style: "background-color:rgba(100,100,100,0.5);color:dodgerblue;"
media_select_container_style: ""
media_with_volume_icon_style_active: $style_active
media_with_volume_icon_style_inactive: $style_inactive
media_with_volume_title_style: $style_title
media_with_volume_style: $style_title2
media_with_volume_widget_style: $stripped
media_with_volume_state_text_style: $style_info
media_with_volume_slider_style: "background: rgba(0,191,255,0.5)"
1 Like
Hi Rene, where did you get temperature icons level? in your settings in the above post? I do like but I’m unable to find out. Thanks
Using Full Kiosk Browser app on a tablet and created a new lovelace view for it.
Here are some screenshots:
and some popup cards:
Btw, i am keeping my tablet in portrait mode because it fitted better my ideas (using also 2 columns custom layout)
What is the code of the switches? Awesome!!!
Hi, i wasn’t able to create them only from css or cards, so i used a picture background for them, here is the code + the pics if someone wants them…they were inspired from the guy who is working to create a HA remote, cheers to him 
## Start of LoveTouch
type: "custom:swipe-card"
cards:
- type: "custom:vertical-stack-in-card"
title: Lights
cards:
- type: horizontal-stack
cards:
- type: picture-entity
entity: switch.floor
name: Floor
tap_action:
action: none
hold_action:
action: toggle
show_state: false
state_image:
"off": /local/img/light-off.gif
"on": /local/img/light-on.gif
- type: picture-entity
entity: switch.bar
name: Bar
tap_action:
action: none
hold_action:
action: toggle
show_state: false
state_image:
"off": /local/img/light-off.gif
"on": /local/img/light-on.gif
- type: picture-entity
entity: switch.table
name: Table
tap_action:
action: none
hold_action:
action: toggle
show_state: false
state_image:
"off": /local/img/light-off.gif
"on": /local/img/light-on.gif
##secondline
- type: horizontal-stack
cards:
- type: picture-entity
entity: switch.couch
name: Couch
tap_action:
action: none
hold_action:
action: toggle
show_state: false
state_image:
"off": /local/img/light-off.gif
"on": /local/img/light-on.gif
- type: picture-entity
entity: switch.moss
name: Moss
tap_action:
action: none
hold_action:
action: toggle
show_state: false
state_image:
"off": /local/img/light-off.gif
"on": /local/img/light-on.gif
- type: picture-entity
entity: group.living_lights
name: Living
tap_action:
action: none
hold_action:
action: toggle
show_state: false
state_image:
"off": /local/img/light-off.gif
"on": /local/img/light-on.gif
##third line
- type: horizontal-stack
cards:
- type: picture-entity
entity: switch.door
name: Door
tap_action:
action: none
hold_action:
action: toggle
show_state: false
state_image:
"off": /local/img/light-off.gif
"on": /local/img/light-on.gif
- type: picture-entity
entity: switch.dressing
name: Dressing
tap_action:
action: none
hold_action:
action: toggle
show_state: false
state_image:
"off": /local/img/light-off.gif
"on": /local/img/light-on.gif
- type: picture-entity
entity: switch.bath
name: Bathroom
tap_action:
action: none
hold_action:
action: toggle
show_state: false
state_image:
"off": /local/img/light-off.gif
"on": /local/img/light-on.gif
- type: custom:vertical-stack-in-card
title: Media devices
cards:
- type: horizontal-stack
cards:
- type: picture-entity
entity: media_player.philips_tv
name: Living TV
tap_action:
action: none
hold_action:
action: toggle
show_state: false
state_image:
"off": /local/img/media_player-off.gif
"idle": /local/img/media_player-on.gif
"on": /local/img/media_player-on.gif
- type: picture-entity
entity: media_player.kitchen_tv
name: Kitchen TV
tap_action:
action: none
hold_action:
action: toggle
show_state: false
state_image:
"off": /local/img/media_player-off.gif
"idle": /local/img/media_player-on.gif
"on": /local/img/media_player-on.gif
- type: picture-entity
entity: media_player.bedroom_tv
name: BedroomTV
tap_action:
action: none
hold_action:
action: toggle
show_state: false
state_image:
"off": /local/img/media_player-off.gif
"idle": /local/img/media_player-on.gif
"on": /local/img/media_player-on.gif
- type: horizontal-stack
cards:
- type: picture-entity
entity: group.all_tvs
name: All TVs
tap_action:
action: none
hold_action:
action: toggle
show_state: false
state_image:
"off": /local/img/media_player-off.gif
"idle": /local/img/media_player-on.gif
"on": /local/img/media_player-on.gif
- type: picture-entity
entity: media_player.samsung_soundbar
name: Soundbar
tap_action:
action: none
hold_action:
action: toggle
show_state: false
state_image:
"off": /local/img/music-off.gif
"on": /local/img/music-on.gif
- type: picture-entity
entity: media_player.robotelu_2
name: Echo
tap_action:
action: more-info
show_state: false
state_image:
"off": /local/img/music-off.gif
"standby": /local/img/music-off.gif
"on": /local/img/music-on.gif
##end of LoveTouchand pictures used are:
Enjoy
Thank you very much! 