ah ok. will look and try.
Wondering if you figured out your problem but if not I’ll explain my findings which may help (or prompt someone to post the fix to my issue).
I tried this dashboard months back and had this issue (no sidebar), tried everything, couldn’t figure it out and ditched the configuration.
Then a few days back thought I’d give it another go hoping maybe various updates might have resolved the issue but no it was still there.
So I again I tried to figure it out. Eventually I found the issue was because I already had the following in my configuration.yaml file
template: !include template.yaml
I’d added the line “template: sidebar.yaml” for the dashboards installation before my original line and in HA with “!include” only the last one in the configuration file is processed. Hence the custom sensor defined in sidebar.yaml doesn’t get created and therefore doesn’t get displayed.
Since I’ve figured that out I’ve been trying to figure out how to have multiple “template: !include …” in the configuration.yaml and working. I know I can put them in a subfolder and use “!include_dir_list” as explain in Splitting up the configuration but as I only have 2 files was hoping there was an simpler way.
I’ve tried various suggestions from other forums (even below, which is the most common) but non seem to work.
template:
- !include template.yaml
- !include sidebar.yaml
Any suggestions ??
that’s outside of my skill set is is possible, but I don’t know how. if you look in this thread some people have created new animated icons, I would ask them
1 Like
happy to help,
I would assume that the use of custom SVG paths are used to support the animated icons. There might be a way to mess with the template and css to use the default custom button card icon, but this method works for me. also it much faster to change all the icons of the same type to update the look,
Hi all,
After HA update I have noticed the border added to my popup cards, can you please take a look at my code and advise how to remove it:
The Code:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
large: true
hide_header: true
data:
content:
type: "custom:button-card"
styles:
grid:
- grid-template-areas: "'header' 'content2' 'buttons' 'footer'"
- grid-template-rows: "16vh 52vh 14vh 14vh;"
- grid-template-columns: "1fr"
card:
- background: "none"
- box-shadow: "none"
- padding: "4%"
custom_fields:
content1:
- display: "none"
content2:
- display: "block"
- align-self: "center"
content3:
- display: "none"
extra_styles: |
@media (max-width: 800px) {
#container {
grid-template-areas: "header" "content1" "buttons" "footer" !important;
grid-template-rows: 16vh 8vh 62vh 8vh !important;
grid-template-columns: 1fr !important;
}
#buttons {
display: block !important;
align-self: start !important;
}
#content1 {
display: none;
}
#content3 {
display: none;
}
custom_fields:
header:
card:
type: "custom:button-card"
template: "popup_list_3_items"
styles:
card:
- background: "none"
custom_fields:
item2:
card:
type: 'custom:decluttering-card'
template: popup-icon
variables:
- template: "[[template]]"
- entity-1: "[[entity-1]]"
- name-1: "[[name-1]]"
- state-1: 'on'
- state-2: 'off'
buttons:
card:
type: "custom:button-card"
template: "list_3_items"
styles:
card:
- background: "none"
custom_fields:
item2:
card:
type: custom:light-popup-card
entity: "[[entity-1]]"
fullscreen: false
hideIcon: true
hideState: true
borderRadius: "var(--popup-border-radius)"
brightnessHeight: 400px
brightnessWidth: 150px
switchHeight: 400px
switchWidth: 150px
switchColor: "rgba(var(--homekit-card-on), 0.9)"
switchTrackColor: "rgba(var(--homekit-popup-card-off), 0.6)"
footer:
card:
type: "custom:button-card"
template: "popup_list_2_items"
custom_fields:
item1:
card:
type: "custom:button-card"
template: "popup_button_back"
item2:
card:
type: "custom:button-card"
template: "popup_button_power"
entity: "[[entity-1]]"
Thanks
1 Like
1 Like
Packages will solve all problems.
You can also put the contents of sidebar.yaml in template.yaml.
Hi @Mattias_Persson do you have any idea on this topic?
Thanks a lot as usual for your support!
Davide
OMG I love it, iv been adding a space to my dashboard every time I want to view a change
beautiful. Thanks
Thanks Mattias
for me, this method of updating does not even work.
Thanks, I opted for the latter given the easier approach.
I have an iPad Air 3 and i can’t figure out a good layout setting. the phone layout is looking fine like this:
and my iPad is looking like:
Can someone point me into the right direction?
Similar question. Have various devices (iPad, Echo Show etc…) with varying screen resolutions. I can see you can create different layouts based on screen resolution but can you control the button / font size scaling in each layout so the Dashboard looks right on each device ??
Search for @media screen in themes.yaml and button_card_templates/extra_styles.yaml
I don’t have an ipad but “emulating” on desktop works fine
I can’t see why that wouldn’t work 
I fully agree with you but in the end nothing happens, button outside of popup on a separate dashboard works fine. I don’t know if maybe the template is generating some problem. Do you have suggestion on how to debug this?
Thanks,
Davide