Hello. I have several cards. custom:button-card, custom:weather-card and gauge. All are visible in single column.
How to get the goal to have 2 columns. Button in one (or 50% page width). Gauge in second (or 50% page width). And weather under them wide (both 2 columns or 100% page width). How to prepare it? Thanks.
GNU nano 2.7.4 File: /home/homeassistant/.homeassistant/ui-lovelace.yaml
cards:
- id: 7f854071c9054131b0a07602572b49ec # Automatically created id
type: custom:button-card
entity: switch.pump
icon: mdi:sofa
color: auto
action: toggle
default_color: rgb(255, 233, 155)
color_type: card
name: Heating
style:
- font-size: 12px
- font-weight: bold
- id: e780c04e491b4050a2745e0346aab069 # Automatically created id
type: gauge
title: Temperature
unit_of_measurement: °C
entity: sensor.temperature
severity:
blue: 0
yellow: 45
red: 90
- id: f84a9a7f674c4ee183d3745f056affb5 # Automatically created id
type: custom:weather-card
entity_weather: weather.yweather
entity_sun: sun.sun
Well I know about those stacks. I tried them without succes.
But how to use them?
Are You sure You need whole config? There must must be some Common code sample to get what I need.
LIke what Petro said, you need to use a combination of vertical and horizontal stack cards. Look at this example to help, specifically the ‘combination of both’ section:
Best way to learn is to do it yourself. To utilize all the space in the UI instead of one column, you use ‘panel: true’ and then a combination of horizontal and vertical stacks. Here is my example, which has some comments that may help you to visualize what each stack is doing:
- icon: mdi:home
title: Home
id: home
panel: true
cards:
- type: horizontal-stack # forces everything to fit in one row
cards:
- type: vertical-stack # column 1
cards:
- type: custom:quote-day
entity: sensor.quote_of_the_day
- type: vertical-stack # column 2
cards:
- type: weather-forecast
title: Forecast
entity: weather.yweather
- type: vertical-stack # column 3
cards:
- type: picture-entity
entity: camera.traffic_map
image: http://link.here
show_name: false
show_state: false
# Media Players (only show up when playing a video/music)
- type: conditional
conditions:
- entity: media_player.tv
state_not: "off"
card:
type: media-control
entity: media_player.tv
Nothing promising about it, It will work. Here’s an almost identical solution that I’m using. Only difference is that I’m using a custom vertical stack card that attempts to remove card borders to make it look like a large card.
well let me explain
i have made the card as the photo i showed on top…but without card-modder…
just with vertical and horizontal stack…but i want to remove the frames so i installed card-modder and card-tools…but gives me the error
