I am hoping someone can help me figure this out… I have been using a template on this which looks really good, I am trying to re-create parts of it in sections. last night after battling for days on getting the picture, temp, weather working on the header from the example, today I have tried to take the learning and implement it in a different dashboard using sections. But I am failing. Has anyone done this before or have the code, or able to look at my YAML and see where I am going wrong. here is my current code https://dpaste.org/DwwOj
I have the weather and temp fine, but the picture just is not showing, I think I can see it loading as I refresh though
After nearly giving up, trying to get this working in sections view, I decided to enlist the help of chat gpt, starting off with a working version of the sidebar view and nothing else I managed to get the same functionality working; almost, I have a slight line around the outside of the card which I can’t seem to resolve, but I think that will do for me to move into building out my cards. below is the image, footer seems to work
decluttering_templates:
header_live_weather_background:
card:
type: custom:stack-in-card
cards:
- type: picture-glance
entities: []
image: https://images.pexels.com/photos/2470655/pexels-photo-2470655.jpeg
card_mod:
style: |
ha-card {
position: absolute;
filter: blur(2px);
border-radius: 0 !important;
background: none;
width: 1500px;
top: 0px;
right: 0px;
}
card_mod:
style: |
ha-card {
position: relative !important;
margin-bottom: -164px;
height: 164px;
margin-top: -8px;
margin-left: -8px;
margin-right: -8px;
background: none;
animation: opacity 0s ease-in;
border-radius: 0 var(--ha-card-border-radius) 0 0;
}
ha-card:after {
content: '';
display: block;
position: absolute;
top: 0px;
left: -180px;
height: 170px;
width: 1700px;
background: radial-gradient(ellipse at 50% -100%, rgba(35, 46, 66, 0) 25%, rgba(35, 46, 66, 0.8) 55%, rgba(35, 46, 66, 1) 67%);
}
@media only screen and (max-width: 768px) {
ha-card {
border-radius: 0 !important;
}
}
@keyframes opacity {
0% { opacity: 0; }
40% { opacity: 0; }
100% { opacity: 1; }
}
header_temperature_graph:
card:
type: custom:mini-graph-card
entities:
- entity: sensor.lounge_temp_temperature
color: null
hours_to_show: 24
hour24: true
animate: true
update_interval: 30
aggregate_func: avg
line_width: 1
bar_spacing: 10
height: 40
group: true
show:
labels: false
fill: false
state: false
name: false
icon: false
card_mod:
style: |
ha-card {
height: 84px;
position: absolute;
box-shadow: none;
background: none;
border-radius: 0;
opacity: 0.3;
margin-bottom: -90px;
margin-left: -0.6em;
margin-right: -0.6em;
}
header_main:
card:
type: custom:paper-buttons-row
styles:
justify-content: space-between
background: none
margin: 24px 20px 16px
text-shadow: 0px 0px 20px var(--card-background-color);
buttons:
- layout: name_state
name: '{{ states(''sensor.day_eng'') }}, {{ states(''sensor.date_eng'') }}'
state: '{{ now().strftime(''%H'') }}:{{ now().strftime(''%M'')}}'
styles:
name:
font-weight: 400
font-size: 16px
margin-left: 0
display: block
text-align: left
float: left
width: 140px
button:
pointer-events: none
align-items: left
width: 140px
line-height: 1.6em
state:
font-weight: 700
font-size: 30px
letter-spacing: '-1px'
margin-left: 0
display: block
text-align: left
float: left
width: 140px
- layout: icon|name_state
name: ⌂ {{ states('sensor.openweathermap_temperature') }}°C
state: '{{ state_attr(''weather.openweathermap'',''temperature'') }}°C'
image: |
{% set mapper =
{ 'breezy':'cloudy',
'clear-night':'night',
'clear':'day',
'mostly-clear':'day',
'clear-day':'day',
'cloudy':'cloudy',
'fog':'fog',
'hail':'rainy-7',
'haze':'haze',
'lightning':'thunder',
'mostly-cloudy':'cloudy',
'partlycloudy':'cloudy-day-3',
'partly-cloudy-day':'partly-cloudy-day',
'partly-cloudy-night':'partly-cloudy-night',
'rain':'rainy-4',
'scattered-showers':'rainy-3',
'showers':'rainy-6',
'sleet':'sleet',
'snow':'snowy-6',
'mostly-sunny':'day',
'sunny':'day',
'thunderstorm':'thunder',
'tornado':'tornado',
'wind':'wind',
'windy':'wind'} %}
{% set state = states('weather.openweathermap') %}
{% set weather = mapper[state] if state in mapper else 'weather' %}
{% set path = '/local/icons/weather_icons/animated/' %}
{% set ext = '.svg'%}
{{[path,weather,ext]|join('')}}
styles:
name:
font-weight: 400
font-size: 16px
margin-left: 0
display: block
text-align: right
width: 140px
button:
pointer-events: none
align-items: right
width: 140px
line-height: 1.6em
state:
font-weight: 600
font-size: 30px
letter-spacing: '-1px'
margin-left: 0
display: block
text-align: right
width: 140px
icon:
position: absolute
left: 2px
transform: scale(0.17)
transform-origin: 0 19.5%
top: '-48px;'
padding: 0;
height: 380px !important;
width: 380px !important;
footer_sticky_menu:
card:
type: entities
entities:
- type: custom:paper-buttons-row
buttons:
- layout: icon
icon: mdi:home-circle-outline
name: Volets
tap_action:
action: navigate
navigation_path: '#house'
style:
button:
width: 42px
height: 42px
icon:
margin-top: 0
name:
margin-top: 20px
- layout: icon
icon: mdi:lightbulb-group
name: Liste
tap_action:
action: navigate
navigation_path: '#alllights'
style:
button:
width: 42px
height: 42px
icon:
margin-top: 0
name:
margin-top: 20px
- icon: mdi:video
layout: icon
name: Sécurité
tap_action:
action: navigate
navigation_path: '#security'
style:
button:
width: 42px
height: 42px
icon:
margin-top: 0
name:
margin-top: 20px
- layout: icon
icon: mdi:thermostat
name: Heating
tap_action:
action: navigate
navigation_path: '#heating'
style:
button:
width: 42px
height: 42px
icon:
margin-top: 0
name:
margin-top: 20px
card_mod:
style: |
div.flex-box {
display: flex;
justify-content: space-between;
align-items: center;
margin: -14px !important;
}
card_mod:
style: |
ha-card {
margin-bottom: 10px !important;
padding: 0 16px;
border-radius: 34px !important;
margin-left: 20px;
margin-right: 20px;
}
views:
- title: Home
theme: noctis
type: sections
sections:
- type: grid
cards:
- type: custom:layout-card
layout: vertical
cards:
- type: custom:stack-in-card
cards:
- type: custom:decluttering-card
template: header_live_weather_background
- type: custom:decluttering-card
template: header_temperature_graph
- type: custom:decluttering-card
template: header_main
- type: custom:vertical-stack-in-card
cards:
- type: custom:decluttering-card
template: footer_sticky_menu
card_mod:
style: |
:host {
position: sticky !important;
bottom: 26px;
margin-bottom: 10px !important;
animation: 1.2s position ease-in-out;
}
@keyframes position {
0% { bottom: -80px; }
20% { bottom: -80px; }
70% { bottom: 26px; }
90% { bottom: 24px; }
100% { bottom: 26px; }
}
ha-card {
background: none;
border-radius: 26px !important;
}
:host:before {
content: '';
display: block;
position: absolute;
bottom: -26px;
left: -8px;
padding-right: 16px;
height: 130px;
width: 100%;
background: linear-gradient(180deg, rgba(45, 56, 76, 0) 0%, rgba(35, 46, 66, 0.85) 50%);
pointer-events: none;
animation: 1.2s opacity ease-in-out;
}
@keyframes opacity {
0% { opacity: 0; }
20% { opacity: 0; }
100% { opacity: 1; }
}
@media only screen and (min-width: 768px) {
:host {
position: fixed !important;
width: 520px;
bottom: 26px;
margin-bottom: 10px !important;
animation: 1.2s position ease-in-out;
}
}
@media only screen and (max-width: 768px) {
:host {
position: fixed !important;
width: 100vw;
bottom: 26px;
margin-bottom: 10px !important;
animation: 1.2s position ease-in-out;
}
}
max_columns: 1
