Layout wise, something like this but you have to edit the styles
- type: grid
square: false
columns: 1
cards:
- type: custom:button-card
aspect_ratio: 2/1
- type: custom:button-card
aspect_ratio: 2/1
1 Like
Could you please share button_card_templates.yaml for the coronavirus footer?
Hello! Pretty new on this HA lovelace coding. I follow the steps and going to the settings to choose Tablet theme. There is nothing there?
What am i missing?
I understood that it should still work. Enter your repository and the code was. I thought the mistake could be somewhere else. I am trying to understand and learn from what you did. But I apologize for not understanding. I understand that you are tired of the stupid questions I ask but to me they are not stupid. I understood that it should still work. Enter your repository and the code was. I thought the mistake could be somewhere else. I am trying to understand and learn from what you did. But I apologize for not understanding. I understand that you are tired of the stupid questions I ask but to me they are not stupid.
Sure:
ui-lovelace.yaml:
- type: custom:button-card
view_layout:
grid-area: footer
entity: sensor.covid
template: coronavirus
sensor.yaml:
- platform: rest
name: covid
resource: https://services7.arcgis.com/mOBPykOjAyBO2ZKk/arcgis/rest/services/rki_key_data_hubv/FeatureServer/0/query?where=%20(AdmUnitId%20%3D%200%20OR%20AdmUnitId%20%3D%208127)%20&outFields=*&outSR=4326&f=json
value_template: >
{{ value_json.features[1].attributes.Inz7T }}
json_attributes_path: "$.features[0].attributes"
json_attributes:
- AnzFallNeu
- AnzGenesenNeu
- AnzTodesfallNeu
scan_interval: 3600
button_card_templates.yaml:
coronavirus:
show_state: true
show_name: false
show_icon: false
tap_action:
action: none
state_display: >
[[[
if (entity) {
let Inz7T = entity.state,
AnzFallNeu = entity.attributes.AnzFallNeu,
AnzGenesenNeu = entity.attributes.AnzGenesenNeu,
AnzTodesfallNeu = entity.attributes.AnzTodesfallNeu,
spacer = '<div><span>|</span></div>';
return `
<div id="footer_container">
<div><ha-icon icon="mdi:virus"></ha-icon> <b>Coronavirus</b></div>
${spacer}
<div><ha-icon icon="mdi:chart-bar"></ha-icon> <b>${Inz7T}</b> 7-Tages Inzidenz</div>
${spacer}
<div><ha-icon icon="mdi:account-plus"></ha-icon> <b>+${AnzFallNeu}</b> Fälle</div>
${spacer}
<div><ha-icon icon="mdi:medical-bag"></ha-icon> <b>+${AnzGenesenNeu}</b> Genesene</div>
${spacer}
<div><ha-icon icon="mdi:grave-stone"></ha-icon> <b>+${AnzTodesfallNeu}</b> Todesfälle</div>
</div>
`;
}
]]]
styles:
state:
- place-self: start
- font-family: SF Display
- font-weight: 400
- font-size: 1.26vw
- letter-spacing: 0.05vw
- white-space: nowrap
- opacity: 0.6
- width: 100%
card:
- background: none
- padding: 0
- margin-top: -1vw
- overflow: hidden
extra_styles: |
ha-icon {
vertical-align: 5%;
opacity: 0.4;
width: 1.2vw;
}
#footer_container {
display: flex;
justify-content: space-between;
}
span {
color: #2f3436;
}
.ellipsis {
color: #6a7377;
}
/* phone */
@media screen and (max-width: 800px) {
#state {
display: none;
}
}
2 Likes
Thank you so much of course, i missread the instructions a bit!
Another quick question, how do i begin adding a light source to a card?
For example Hörnlampan card with a light i have. Just trying to figure out how to get the basics of the coding done.
Im using Zigbee2mqtt with a deconz conbee 2 if that makes a difference and I can control the light via zigbee2mqtt so how do i get my dashboard to control it ?
Tack så mycket för hjälpen, har mycket att lära mig men snart så har jag förhoppningsvis något som liknar din läckra dashboard! 
Normally, the footer is deactivated in phone-view, so I’m not sure why u even see it there.
Personally, I added a second footer by myself so that I have a more compact one on the phone:
Have you maybe changed something in views > layout at the top of ui-lovelace.yaml?
I do desktop editing not via ui-lovelace.yaml but from the dashboard
Does someone of you has a good looking Solution to integrate Open Windows and Doors?
Maybe in the sidebar or the footer?
Many thanks
Hi Andy,
I might have missed it but I don’t seem to find your configuration on the git?
The screenshot you shared looks awesome and I am looking for a simular set-up.
BTW: also dutch so it helps that your config is in dutch for me to understand the components.
Grtz, Robert
Can you Show me your config? I’m also from Germany but I don’t know how I can manipulate the sensor.
Nice! Now I’am going to use your widgets 
1 Like
I shared every config which is important. What exactly do you need?
1 Like
Sorry, I found it.
Timo, yes in ui-lovelace.yaml. You can also add more views
- path: living_room
title: "Living Room"
- path: bedroom
title: Bedroom
- path: office
title: Office
- path: guest_room
title: "Guest Room"
- path: out_side
title: Outside
Sorry for the late response
I think something went wrong with posting your code, could you try again?
Also: did you add the SVG to the button_card_templates?
Hi. Thanks for the awesome theme, it looks fantastic. I’m having a bit of trouble on having it auto-resize to my PC browser, it makes the icons too big and needs to scroll. I’m not seeing where can I say to the grid layout to fit the browser/make the buttons and fonts resize properly. If I make the browser smaller eventually it fits and it keeps resizing the buttons to make them fit, but once it is bigger than a certain size, it will just scroll. Some pointers on how can I fix it? I could not find how to do it in the forum or in Github. Thanks!
1 Like