How to set space between columns?
Layout type masonry
Copy to clipboard
columns: 4
width: 280
max_cols: 4
I tried different layouts and adding custom CSS, but doesn’t work
please help
Hi!
Im pretty new at HA but I was able to solve that with lovelace-layout-card
The dashboard of my livingroom was originally like this
but I started making some tests with layout card and then…
What I did was set the width of the view bigger then the width of the cards
- title: Sala
path: sala
icon: 'hass:sofa'
type: custom:layout-card
layout_type: custom:horizontal-layout
layout:
width: 400
max_cols: 4
cards:
- type: custom:layout-card
layout_type: custom:masonry-layout
layout:
width: 300
cards:
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: button
tap_action:
action: toggle
entity: light.sala_tv
icon_height: 100px
- type: button
tap_action:
action: toggle
entity: light.sala_estar
icon_height: 100px
- type: horizontal-stack
cards:
- type: button
tap_action:
action: toggle
entity: light.corredor_sala
icon_height: 100px
- type: button
tap_action:
action: toggle
entity: switch.tomada_tv
icon: 'hass:power-plug-outline'
show_state: false
icon_height: 100px
- type: button
tap_action:
action: none
entity: binary_sensor.porta_sala
icon_height: 50px
- type: custom:layout-card
layout_type: custom:masonry-layout
layout:
width: 300
cards:
- type: vertical-stack
cards:
- type: media-control
entity: media_player.tv_sala
- type: 'custom:lg-remote-control'
entity: media_player.tv_sala
dimensions:
scale: 0.80
border_width: 2px
colors:
buttons: rgba(100,100,100)
texts: rgba(198,198,198)
background: rgba(30,30,30)
sources:
- icon: 'mdi:netflix'
name: "Netflix"
- icon: 'mdi:amazon'
name: "Amazon Prime Video"
- icon: 'mdi:youtube'
name: "YouTube"
- icon: 'mdi:dot-net'
name: "NET-Cable(Marília)"
- type: custom:layout-card
layout_type: custom:masonry-layout
layout:
width: 300
cards:
- type: thermostat
entity: climate.ar_sala
I still want to make some changes but with this you can start changing yours too, if you liked it.
2 Likes
Could you please give advice: How do you set the transparency of the panels?
I use:
style: |
ha-card {
background-color: rgba(255,255,255,0.2);
}
for each card…
but I don’t think that’s a good approach. And also it affects the perfomance.
What is your way?
OMG YOU ARE KILLING ME! I have been going crazy trying to make a D-Pad like my roku remote and yours is HOT! I am going to go cry now…