Hi. Could you share your every desktop config?
Why is my footer taking so much space?
And why are my 64x64px circle png logos cut off in the picture element? (the background is white for testing purposes)
The background128wh.png is 32px by 128px but it seems like the size doesn’t matter.
#################################################
# #
# FOOTER #
# #
#################################################
- type: grid
view_layout:
grid-area: footer
columns: 2
cards:
- type: horizontal-stack
cards:
- type: picture-elements
image: /local/xboxavatar/background128wh.png
elements:
- type: image
entity: binary_sensor.xxxpaul
state_image:
'on': /local/xboxavatar/paul.png
'off': /local/xboxavatar/paulbw.png
style:
left: 10%
top: 20%
height: 15%
width: 15%
- type: image
entity: binary_sensor.xxxcookie
state_image:
'on': /local/xboxavatar/cookie.png
'off': /local/xboxavatar/cookiebw.png
style:
left: 30%
top: 20%
height: 15%
width: 15%
- type: image
entity: binary_sensor.xxxpoz
state_image:
'on': /local/xboxavatar/dpoz.png
'off': /local/xboxavatar/dpozbw.png
style:
left: 50%
top: 20%
height: 15%
width: 15%
- type: image
entity: binary_sensor.xxxtony
state_image:
'on': /local/xboxavatar/tony.png
'off': /local/xboxavatar/tonybw.png
style:
left: 70%
top: 20%
height: 15%
width: 15%
- type: picture-elements
image: /local/xboxavatar/background128wh.png
elements:
- type: image
entity: binary_sensor.xxxpaul
state_image:
'on': /local/xboxavatar/paul.png
'off': /local/xboxavatar/paulbw.png
style:
left: 10%
top: 0%
height: 5%
width: 5%
In the end I’ll have 4 of those rectangles (that will be transparent) showing png’s depending on statuses
because grid card defaults to square: true 
edit: don’t know why the images are cut off though, add overflow: visible to each image style
I’m interested in how you did the number on the sidebar icon. I’m thinking of adding something similar to sidebar updates.
Nice modifications! I think all the community will appreciate if you will show your configuration.
Hi there. Thanks Mattias for this wonderful work. I am just a C software engineer and don’t know much about CSS things.
I am now modifying Mattias’s code for my setup, everything go fine. But I have a maybe silly question. I can use the CSS fonts, font show correctly on my browser. But when I try it on the IOS app and my FireHD 8, I found that the fonts of the clock in the sidebar is not showing the correct size. The size should be 5vw so it looks larger than other text and no matter what value I change, the time text is still as small as the other. Testing it on my Macbook has no problem.
Is there any limitation about font-size on ios app or other tablet?
If I change this value and call service: frontend.reload_themes it changes size.
Are you sure that it’s not browser cache related?
It’s the layout-card grid gap. You can add a negative margin with card-mod.
https://matt8707.github.io/card-mod-helper/
#################################################
# #
# SWIPE CARD MARGIN #
# #
#################################################
$swipe-card$:
...
hui-grid-card:nth-child(9):
$: |
#root {
margin-top: -5vh;
}
No, not browser cache issue. I change it value and it takes effect on my Mac Safari. But it never change on ios app and Fire tablet. But it has effect on all device if I change the font weight.
Not sure why, in template.yaml, only specify the <span class="time"> cannot control the font size. But using <span style="font-size:5vw"> instead can do.
I also notice the button has no round corner on both IOS and my FireHD tablet, I guess some CSS may not working in these device…
Looks like I found what’s wrong. In IOS and my FireHD 8, value specified by var(--xxxxxx) is not respected. When I replaced the var(--xxxxxx) with its actual value, everything is fine.
Any idea how to get it refer to a variable rather than hard code the value everywhere?
You need to select the theme ”tablet” on all devices
Ya! I just figured this out, how silly I am!
1 Like
May I ask another question? Which method are you using to hide the HA sidebar and top menu bar completely?
1 Like
Where I’m wrong?
I have an pop up and I want to modify the gap betweens buttons that are inside a grid.
I use this code:
- type: horizontal-stack
cards:
- type: grid
columns: 4
card_mod:
style:
hui-grid-card:
$: |
#root {
grid-gap: 4px;
}
and also used like this:
- type: horizontal-stack
cards:
- type: grid
columns: 4
card_mod:
style: |
hui-grid-card {
--grid-card-gap: 4px important!;
}
hey!
im trying to add your calendar button but when i add the Dada di oggi Sensor in my config i get a error message:
Invalid config for [sensor.template]: expected dictionary for dictionary value @ data['sensors']. Got None
extra keys not allowed @ data['pretty_date']. Got OrderedDict([('friendly_name', 'Data di oggi'),
('value_template', '{% set today = states("sensor.date") %} {% set arr_week_days = ["Domenica", "Lunedì", "Martedì", "Mercoledì", "Giovedì", "Venerdì", "Sabato"] %} {% set arr_months = ["Gennaio", "Febbraio", "Marzo", "Aprile", "Maggio", "Giugno", "Luglio", "Agosto", "Settembre", "Ottobre", "Novembre", "Dicembre"] %} {% set week_day = as_timestamp(today) | timestamp_custom(\'%w\') | int %} {% set day = as_timestamp(today) | timestamp_custom(\'%d.... (See ?, line ?).
I added a time_date sensor already…
Do you have a idea why its not working?
If you already have a data sensor you can modify the template to your liking to take the data you need.