Hi,
I’m a little stuck with the yaml to format my home screen for use on a tablet. My cards are formatted 3 along the top row and 2 along the bottom, the top 3 I am happy with them taking up equal spacing (a third of the panel each) but I would like the bottom 2 to be 1/3 and 2/3 sizes. I have installed layout cards but can’t figure out what I’m doing wrong.
You have to post some more details. Share your config, what you’ve tried, and any logs with errors.
Hi Petro, thanks for getting back to me. Is it ok to post the config unedited or should I remove my entities first?
just post what you have, there’s no reason to hide entity_ids
Hopefully the formatting comes through.
title: "Home"
path: "home"
panel: true
cards:
- type: custom:stack-in-card
mode: vertical
cards:
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:stack-in-card
mode: horizontal
cards:
- type: "custom:button-card"
template: "card_esh_welcome"
triggers_update: "input_boolean.minimalist_dropdown"
variables:
ulm_card_esh_welcome_collapse: input_boolean.minimalist_dropdown
ulm_weather: "weather.openweathermap"
entity_1:
nav: "house"
icon: "mdi:home"
name: "House"
color: "blue"
entity_2:
nav: "lights"
icon: "mdi:lightbulb"
name: "Lights"
color: "yellow"
entity_3:
nav: "heating"
icon: "mdi:radiator"
name: Heating
color: "red"
entity_4:
nav: "cctv"
icon: "mdi:cctv"
name: Secure
color: "purple"
entity_5:
nav: "speedtest"
icon: "mdi:speedometer"
name: Speed
color: "green"
- type: custom:stack-in-card
mode: vertical
cards:
- type: 'custom:button-card'
template: card_title
name: ""
- type: custom:stack-in-card
mode: horizontal
cards:
- type: 'custom:button-card'
template: card_binary_sensor_alert
variables:
ulm_card_binary_sensor_alert: true
ulm_show_last_changed: true
ulm_card_binary_sensor_alert_name: Living Room
entity: binary_sensor.living_room_motion_occupancy
- type: 'custom:button-card'
template: card_binary_sensor_alert
variables:
ulm_card_binary_sensor_alert: true
ulm_show_last_changed: true
ulm_card_binary_sensor_alert_name: Dining Room
entity: binary_sensor.dining_room_motion_occupancy
- type: custom:stack-in-card
mode: horizontal
cards:
- type: 'custom:button-card'
template: card_binary_sensor_alert
variables:
ulm_card_binary_sensor_alert: true
ulm_show_last_changed: true
ulm_card_binary_sensor_alert_name: Hallway
entity: binary_sensor.hallway_motion
- type: 'custom:button-card'
template: card_binary_sensor_alert
variables:
ulm_card_binary_sensor_alert: true
ulm_show_last_changed: true
ulm_card_binary_sensor_alert_name: Bathroom
entity: binary_sensor.bathroom_motion_ias_zone
- type: custom:stack-in-card
mode: horizontal
cards:
- type: 'custom:button-card'
template: card_binary_sensor_alert
variables:
ulm_card_binary_sensor_alert: true
ulm_show_last_changed: true
ulm_card_binary_sensor_alert_name: Our Bedroom
entity: binary_sensor.our_bedroom_motion_occupancy
- type: 'custom:button-card'
template: card_binary_sensor_alert
variables:
ulm_card_binary_sensor_alert: true
ulm_show_last_changed: true
ulm_card_binary_sensor_alert_name: Kitchen
entity: binary_sensor.kitchen_motion_ias_zone
- type: weather-forecast
entity: weather.openweathermap
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:stack-in-card
mode: vertical
cards:
- type: custom:stack-in-card
mode: vertical
cards:
- type: custom:stack-in-card
mode: horizontal
cards:
- type: 'custom:button-card'
template: card_person
entity: person.gareth_main
variables:
ulm_card_person_entity: person.gareth_main
ulm_card_person_use_entity_picture: true
ulm_card_person_zone1: zone.home
ulm_card_person_zone2: zone.work_2
- type: 'custom:button-card'
template: card_battery
entity: sensor.sm_s908b_battery_level
variables:
ulm_card_battery_charger_type_entity_id: sensor.sm_s908b_battery_level
ulm_card_battery_battery_level_danger: 30
ulm_card_battery_battery_level_warning: 80
ulm_card_battery_name: Smartphone
- type: custom:stack-in-card
mode: horizontal
cards:
- type: 'custom:button-card'
template: card_person
entity: person.louise_gray
variables:
ulm_card_person_entity: person.louise_gray
ulm_card_person_use_entity_picture: true
ulm_card_person_zone1: zone.home
- type: 'custom:button-card'
template: card_battery
entity: sensor.sm_n986b_battery_level_2
variables:
ulm_card_battery_charger_type_entity_id: sensor.sm_n986b_battery_level_2
ulm_card_battery_battery_level_danger: 30
ulm_card_battery_battery_level_warning: 80
ulm_card_battery_name: Smartphone
- type: custom:stack-in-card
mode: horizontal
cards:
- type: 'custom:button-card'
template: card_person
entity: person.lucas
variables:
ulm_card_person_entity: person.lucas
ulm_card_person_use_entity_picture: true
ulm_card_person_zone1: zone.home
- type: 'custom:button-card'
template: card_battery
entity: sensor.sm_g975f_battery_level
variables:
ulm_card_battery_charger_type_entity_id: sensor.sm_g975f_battery_level
ulm_card_battery_battery_level_danger: 30
ulm_card_battery_battery_level_warning: 80
ulm_card_battery_name: Smartphone
- type: custom:stack-in-card
mode: horizontal
cards:
- type: 'custom:button-card'
template: card_binary_sensor_alert
variables:
ulm_card_binary_sensor_alert: true
ulm_show_last_changed: true
ulm_card_binary_sensor_alert_name: Front Door
entity: binary_sensor.front_door_ias_zone
- type: 'custom:button-card'
template: card_binary_sensor_alert
variables:
ulm_card_binary_sensor_alert: true
ulm_show_last_changed: true
ulm_card_binary_sensor_alert_name: Living Room Door
entity: binary_sensor.living_room_door_ias_zone
- type: 'custom:button-card'
template: card_binary_sensor_alert
variables:
ulm_card_binary_sensor_alert: true
ulm_show_last_changed: true
ulm_card_binary_sensor_alert_name: Bathroom Door
entity: binary_sensor.bathroom_door_ias_zone
- type: custom:stack-in-card
mode: vertical
cards:
- type: horizontal-stack
cards:
- type: vertical-stack
cards:
#ROOM1~
- type: 'custom:button-card'
template:
- card_room
- red_no_state
name: Living Room
entity: climate.living_room
icon: mdi:sofa-outline
tap_action:
action: navigate
navigation_path: 'living_room'
variables:
label_use_temperature: true
label_use_brightness: true
entity_1:
entity_id: group.living_room
templates:
- yellow_on
tap_action:
action: toggle
entity_2:
entity_id: binary_sensor.living_room_motion_occupancy
templates:
- blue_on
tap_action:
action: none
entity_3:
entity_id: binary_sensor.living_room_door_ias_zone
templates:
- green_on
- red_off
tap_action:
action: none
#ROOM2#
- type: 'custom:button-card'
template:
- card_room
- red_no_state
name: Dining
entity: sensor.living_room_motion_temperature
icon: mdi:table-chair
tap_action:
action: navigate
navigation_path: dining_room
variables:
label_use_temperature: true
label_use_brightness: true
entity_1:
entity_id: light.dining_room_lamp
templates:
- yellow_on
tap_action:
action: toggle
entity_2:
entity_id: binary_sensor.dining_room_motion_occupancy
templates:
- blue_on
tap_action:
action: none
- type: vertical-stack
cards:
#ROOM3#
- type: 'custom:button-card'
template:
- card_room
- red_no_state
name: Bathroom
entity: sensor.bathroom_humidity_temperature
icon: mdi:bathtub-outline
tap_action:
action: navigate
navigation_path: bathroom
variables:
label_use_temperature: true
label_use_brightness: true
entity_1:
entity_id: light.bathroom_light
templates:
- yellow_on
tap_action:
action: toggle
entity_2:
entity_id: binary_sensor.bathroom_motion_ias_zone
templates:
- blue_on
tap_action:
action: none
entity_3:
entity_id: binary_sensor.bathroom_door_ias_zone
templates:
- green_on
- red_off
tap_action:
action: toggle
#ROOM4#
- type: 'custom:button-card'
template:
- card_room
- red_no_state
name: Our bedroom
entity: sensor.our_bedroom_motion_temperature
icon: mdi:bed-king-outline
tap_action:
action: navigate
navigation_path: our_bedroom
variables:
label_use_temperature: true
label_use_brightness: true
entity_1:
entity_id: group.our_bedroom
templates:
- yellow_on
tap_action:
action: toggle
entity_2:
entity_id: binary_sensor.our_bedroom_motion_occupancy
templates:
- blue_on
tap_action:
action: none
- type: vertical-stack
cards:
#ROOM5#
- type: 'custom:button-card'
template:
- card_room
- red_no_state
name: Lucas room
entity: climate.my_bedroom
icon: mdi:bed-outline
tap_action:
action: navigate
navigation_path: lucas_room
variables:
label_use_temperature: true
label_use_brightness: true
entity_1:
entity_id: group.my_bedroom
templates:
- yellow_on
tap_action:
action: toggle
entity_2:
entity_id: binary_sensor.lucas_room_motion_ias_zone
templates:
- blue_on
tap_action:
action: none
#ROOM6#
- type: 'custom:button-card'
template:
- card_room
- red_no_state
name: Hallway
entity: climate.hall
icon: mdi:coat-rack
tap_action:
action: navigate
navigation_path: hallway
variables:
label_use_temperature: true
label_use_brightness: true
entity_1:
entity_id: group.hallway
templates:
- yellow_on
tap_action:
action: toggle
entity_2:
entity_id: binary_sensor.hallway_motion
templates:
- blue_on
tap_action:
action: none
entity_3:
entity_id: binary_sensor.front_door_ias_zone
templates:
- green_on
- red_off
tap_action:
action: toggle
My humble advice: go to the dedicated layout-card thread and ask how to make widths 1/3 & 2/3 for these two Entity cards:
title: "Home"
path: "home"
panel: true
cards:
- type: horizontal-stack
cards:
- type: entity
entity: sun.sun
- type: entity
entity: sun.sun
Alternatively - use card-mod, like:
type: custom:mod-card
card_mod:
style:
hui-horizontal-stack-card $: |
hui-entity-card:nth-of-type(1) {
flex-grow: 2 !important;
}
hui-entity-card:nth-of-type(2) {
flex-grow: 1 !important;
}
card:
type: horizontal-stack
cards:
- type: entity
entity: sun.sun
- type: entity
entity: sun.sun
3 Likes
Thanks Ildar, will give your second suggestion a go first to see how that goes.
Hi Ildar. Unfortunately that didn’t work, I assume it’s because I’m not trying to split entities but cards. Thanks for the suggestion anyway.
That should work, it is splitting cards. He used the entity card.
I provided a screenshot above, it works with any cards inside a vertical-stack.
In case of using stack-in-card instead of vertical-stack - surely you should change a card-mod path to a styled element and do not use a mod-card because I posted a general idea how to style, not a 100% universal solution.
See more examples in a dedicated card-mod thread for stacks.
Strange, I’ll try again. It worked perfectly when I copied your code with the entities but not when I included it in my yaml, assume the problem is where I am adding it. It’s all really new for me so maybe a little more research. Thanks for the suggestion.
Just been testing and I think it is the stack-in-cards that are causing the problems. I have changed to the horizontal and vertical stacks and it appears to be working correctly now.
where do you declare your templates inside the card?