Hi, are you trying to add the panel code in a lovelace card?
I try to create a new dashboard with the hide toolbar and hide sidebar features using this wallpanel addon.
What am I doing wrong…? 
Thanks!
Specifically on how you tried to do it: did you create a card ON an existing dashboard and put the code for the panel in there?
Your question helped a lot! Thank you!
I should add the wallpanel codes at dashboard level using the raw configuration editor.
I too would like to know how to get the cards in a different location than vertically along the left. Thanks!
wallpanel:
enabled: true
debug: false
hide_toolbar: true
show_progress_bar: true
image_animation_ken_burns: false
hide_toolbar_action_icons: false
hide_sidebar: true
fullscreen: false
idle_time: 10
screensaver_stop_navigation_path: /dashboard-new/home
image_url: >-
https://source.unsplash.com/random/${width}x${height}?wallpapers/android&sig=${timestamp}
image_fit: cover
show_image_info: true
image_list_update_interval: 3600
image_order: sorted
cards:
- type: custom:digital-clock
dateFormat:
weekday: long
day: 2-digit
month: long
timeFormat:
hour: 2-digit
minute: 2-digit
card_mod:
style: |
ha-card {
text-align: right!important;
font-weight: 300!important;
padding: 8px 0px;
background: transparent;
border: 0px;
color: rgb(255, 255, 255);
position: absolute;
right: 80px;
bottom: 70px;
}
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: person.*******
content_info: none
use_entity_picture: true
tap_action:
action: navigate
navigation_path: '#hidde'
card_mod:
style: |
/* Color border around avatar to show person status */
ha-card {
--chip-background:
{% if is_state(config.entity, ['home', 'not_home', 'unknown']) %}
rgb(var(--rgb-state-person-{{ states(config.entity) | replace('_', '-') }} ))
{% else %}
rgb(var(--rgb-state-person-zone))
{% endif %};
}
/* Slightly enlarge & bring to front on hover */
ha-card:hover {
transform: scale(1.2);
transform-origin: top center;
z-index: 1;
transition: all 1s;
}
- type: entity
entity: person.*******
use_entity_picture: true
content_info: none
card_mod:
style: |
/* Color border around avatar to show person status */
ha-card {
--chip-background:
{% if is_state(config.entity, ['home', 'not_home', 'unknown']) %}
rgb(var(--rgb-state-person-{{ states(config.entity) | replace('_', '-') }} ))
{% else %}
rgb(var(--rgb-state-person-zone))
{% endif %};
}
/* Slightly enlarge & bring to front on hover */
ha-card:hover {
transform: scale(1.2);
transform-origin: top center;
z-index: 1;
transition: all 1s;
}
- type: template
entity: sensor.afvalwijzer_next_type
tap_action:
action: navigate
navigation_path: '#afval'
card_mod:
style: |
/* Color border around avatar to show person status */
ha-card {
--chip-background:
{% set state=states('sensor.afvalwijzer_next_type') %}
{% if state=='pmd' %}
orange
{% elif state=='restafval' %}
grey
{% else %}
green
{% endif %}
}
ha-card:after {
content: "{{states("sensor.afvalwijzer_next_in_days") | capitalize}}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-orange));
color: var(--card-background-color);
border-radius: 100%;
top: -5px;
width: 50%;
height: 50%;
font-size: 0.3em;
right: -5px;
}
icon: |
{% set state=states('sensor.afvalwijzer_next_type') %}
{% if state=='pmd' %}
mdi:trash-can
{% elif state=='restafval' %}
mdi:trash-can
{% else %}
mdi:food
{% endif %}
icon_color: |-
{% set state=states('sensor.afvalwijzer_next_type') %}
{% if state=='pmd' %}
white
{% elif state=='restafval' %}
white
{% else %}
white
{% endif %}
- type: template
entity: sensor.window_count
card_mod:
style: |
/* Color border around avatar to show person status */
ha-card {
--chip-background:
{% set state = states('sensor.window_count')|float(-1) %}
{% if state >= 1 %} rgb(var(--rgb-green))
{% elif state >= 0 %} rgb(var(--rgb-orange))
{% else %} green
{% endif %}
}
ha-card:after {
content: "{{states("sensor.window_count") | capitalize}}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-orange));
color: var(--card-background-color);
border-radius: 100%;
top: -5px;
width: 50%;
height: 50%;
font-size: 0.3em;
right: -5px;
}
icon: |
{% set state = states('sensor.window_count')|float(-1) %}
{% if state >= 1 %} mdi:window-open-variant
{% elif state >= 0 %} mdi:window-closed-variant
{% else %} green
{% endif %}
icon_color: white
card_mod:
style: |
ha-card {
position: absolute!important;
left: 40px!important;
bottom: 80px!important;
}
- type: custom:mod-card
view_layout:
grid-area: title
card:
type: custom:mushroom-title-card
title: |-
{% set time = now().hour %} {% if (time >= 18) %}
Goedenavond, {{user}}
{% elif (time >= 12) %}
Goedemiddag, {{user}}
{% elif (time >= 5) %}
Goedemorgen {{user}}
{% else %}
Slaap lekker, {{user}}!
{% endif %}
subtitle: |-
{% set state=states('light.alle_verlichting') %} {% if state=='on' %}
{% set lights = [
states.light.verlichting_bureaulamp, states.light.verlichting_kerstboom,
states.light.verlichting_erker, states.light.verlichting_slaapkamer_puck,
states.light.verlichting_eettafel, states.light.verlichting_pui,
states.light.verlichting_entree, states.light.verlichting_overkapping,
states.light.verlichting_wand_buiten,
states.light.verlichting_badkamerspiegel,
states.light.verlichting_koffiecorner, states.light.verlichting_kookeiland,
states.light.verlichting_entree, states.light.verlichting_tuinspots ] %}Het is binnen {{states("sensor.woonkamer_temperatuur")}} °C er zijn {{ lights | selectattr('state','eq','on') | list | count }} lampen aan
{% else %}
Het is binnen {{states("sensor.woonkamer_temperatuur")}} °C
{% endif %}
card_mod:
style:
mushroom-title-card$: |
h1 {
--title-font-size: 4vh;
--title-font-weight: 300;
--title-line-height: 1;
color: #FFFFFF!important;
position: absolute;
top: -20px!important;
text-shadow: #F5F5F5 1px 0 20px;
width: 620px;
}
h2 {
--title-font-size: 16px;
color: #FFFFFF!important;
position: relative;
top: 5px;
}
.header {
--title-padding: 12px 12px 0px;
}
- show_current: true
show_forecast: false
type: weather-forecast
entity: weather.buienradar_2
forecast_type: hourly
name: ' '
card_mod:
style: |
ha-card {
bottom: 18px!important;
background-color: transparent;
position: absolute;
color: #FFFFFF;
font-weight: 300;
height: 150px!important;
left: 220px;
border: 0px;
columns: 2;
width: 250px;
}
.state {
display: none!important;
}
.temp-attribute {
text-align: right;
text-shadow: 0 0 20px rgba(198,28,39,0.8), 0 0 0 black;
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
}
card_interaction: true
style:
wallpanel-screensaver-info-box:
font-size: 3vh
font-weight: 600
color: '#eeeeee'
6 Likes
How can I make the weather widget width 100% of the screen width?
wallpanel:
enabled: true
hide_toolbar: true
hide_sidebar: false
fullscreen: false
image_url: media-entity://camera.google_photos_favorites_media
style:
wallpanel-screensaver-container:
background-color: '#333333dd'
wallpanel-screensaver-info-box:
'--wp-card-width': 100%
background-color: '#ffffff99'
box-shadow: >-
0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0,
0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12)
wallpanel-screensaver-info-box-content:
'--ha-card-background': none
'--ha-card-box-shadow': none
'--primary-background-color': '#fafafa'
'--secondary-background-color': '#e5e5e5'
'--primary-text-color': '#212121'
'--secondary-text-color': '#727272'
'--wp-card-width': 100%
cards:
- type: vertical-stack
cards:
- type: custom:clock-weather-card
entity: weather.casa
title: Home
sun_entity: sun.sun
temperature_sensor: sensor.strips_multisensor_comfort_drip_air_temperature
weather_icon_type: line
animated_icon: true
forecast_days: 5
locale: en
time_format: 12
date_pattern: P
hide_today_section: false
hide_forecast_section: false
hide_clock: false
hide_date: false
hourly_forecast: true
use_browser_time: true
1 Like
Why not using card-mod for your cards?
Old plain ignorance
Does anyone know how to have multiple views to retyain the hidden sidebar. I use a navigate button to get to the second page (view) but when I go there it brings up the top and side bars. Appreciate any help on how to achieve this. Thanks
Sorted. You need to set the suffix on the path within the raw editor accordingly with ?wp_enabled=true at the end .
I got myself all over the place - best to just test the path in the browser first.
Does anyone know if it’s possible to have an image url such as DAKboard for a screen saver? Thanks.
Any ideas or hints how to set up a wall panel with alternating views? An entire alternate view would be nice, but currently I’m trying to find a way to just rotate between different room temperature / climate graphs and possibly weather for multiple locations. Found an old slideshow card, but it seems to have been abandoned years ago.
I doubt it’s possible to sync transitions between multiple cards sharing the same grid position with only css 
Big Thank You to the developer for this Addon!
I use it (together with Fully Kiosk) as a screen saver for a Fire Stick, showing family pictures from a NAS. I have a question: does anyone know how to make the “image info” box moveable (i.e. every X seconds jump to upper right corner and jump back to previous position) or at least to disappear for some seconds and reappear? It usually sits on the bottom right corner and I am concerned about screen burn (from the text box background, where the right side sits always in same place).
Can you share this code, please?
Hi I have a problem with second tablet running wall panel. When i enable mqtt on second tablet, sensors are available in HA on this device but are overwriten by sensors of first device. I tried changing device name, base topic, but still the same, any ideas?
Hi I’m having some issues regarding the combination of using the wallpanel with Fully Kiosk Browser (FKB). I understand that it is possible to make a boolean for the wallpaper screensaver and activate that in FKB?
this way I would also have the luxury to dim the brightness of the screensaver ánd keep my motion trigger?
haven’t been able to pull this off, can somebody point me in the right direction?
also: how do I exclude every device HA is shown exept the wallmounted tablet where the wallpanel is active? can’t seem to figure out the code…
Would be so nice if someone made a youtube tutorial with the basics and how to get started
1 Like