Please use formatted code. And for layout card you will need a mod card around it.
If anyone is having the same issue as I haveā¦ Itās the semicolons! They were part of the code I got from the CSS template generators, but they are not needed in YAML. I removed them, and everything is suddenly working perfectly!
I would like to make a layout which fits on the Google Nest Hub.
It should contain te columns; in the left column a number of custom:mushroom-template-cardās and in the left column i would like to see two video images.
But I am not able to get this in two columns. This is what i have now:
And this is the Yaml code:
type: custom:layout-card
layout_type: masonry
layout: {}
path: default_view
title: Home
panel: true
badges: []
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Camera's
secondary: ''
icon: mdi:video
icon_color: blue
layout: vertical
tap_action:
action: navigate
navigation_path: /g-home-b/camera
- type: custom:mushroom-template-card
primary: Alarm
secondary: ''
icon: mdi:shield-alert
icon_color: green
layout: vertical
tap_action:
action: navigate
navigation_path: /g-home-b/alarm
- type: custom:mushroom-template-card
primary: Lampen
secondary: ''
icon: mdi:lightbulb-group
icon_color: amber
layout: vertical
tap_action:
action: navigate
navigation_path: /g-home-b/lampen
- type: custom:mushroom-template-card
primary: Wk-Bert
secondary: ''
icon: mdi:tools
layout: vertical
tap_action:
action: navigate
navigation_path: /g-home-b/wk-bert
icon_color: ''
- type: custom:mushroom-template-card
primary: Netwerk
secondary: ''
icon: mdi:network
icon_color: light-green
layout: vertical
tap_action:
action: navigate
navigation_path: /g-home-b/netwerk
- type: custom:layout-card
column-with: 100%
layout: vertical
max_columns: 3
cards:
- type: custom:homekit-card
title: Bikolaan 45 (Homekit Cards)
useBrightness: false
useTemperature: false
useRGB: true
titleColor: '#FFF'
enableColumns: true
statePositionTop: true
rulesColor: '#FFF'
rows:
- row: 1
columns:
- column: 1
tileOnRow: 3
entities:
- title: Kamers
entities:
- entity: sensor.buienradar_temperature
icon: mdi:video
spin: false
name: Camera's
tap_action:
action: navigate
navigation_path: /g-home-b/camera
- entity: sensor.buienradar_temperature
icon: mdi:shield
spin: false
name: Alarm
tap_action:
action: navigate
navigation_path: /g-home-b/alarm
- entity: light.sonoff_4s20
icon: mdi:lightbulb
name: lampen
tap_action:
action: navigate
navigation_path: /g-home-b/lampen
- entity: sensor.buienradar_temperature
icon: mdi:video
spin: false
name: Camera's
tap_action:
action: navigate
navigation_path: /g-home-b/camera
- entity: sensor.buienradar_temperature
icon: mdi:shield
spin: false
name: Alarm
tap_action:
action: navigate
navigation_path: /g-home-b/alarm
- entity: light.sonoff_4s20
icon: mdi:lightbulb
name: lampen
tap_action:
action: navigate
navigation_path: /g-home-b/lampen
- entity: sensor.buienradar_temperature
icon: mdi:video
spin: false
name: Camera's
tap_action:
action: navigate
navigation_path: /g-home-b/camera
- entity: sensor.buienradar_temperature
icon: mdi:shield
spin: false
name: Alarm
tap_action:
action: navigate
navigation_path: /g-home-b/alarm
- entity: light.sonoff_4s20
icon: mdi:lightbulb
name: lampen
tap_action:
action: navigate
navigation_path: /g-home-b/lampen
- type: vertical-stack
cards:
- show_state: true
show_name: true
camera_view: auto
type: picture-entity
entity: camera.ip_cam_2
image: https://demo.home-assistant.io/stub_config/bedroom.png
- show_state: true
show_name: true
camera_view: auto
type: picture-entity
entity: camera.ip_cam_3
image: https://demo.home-assistant.io/stub_config/bedroom.png
Is there anyone who could help me with configuring the Video images to the right of the buttons?
Kind regards, Bert
I need help sorting out why my vertical stack card determines the hight of my other cards.
The goal is to have a custom navigation menu to the left as I have now but the rest of the dashboard should not be affected if its hight. I want to be able to fill that area with independent cards.
I can build a big clunky grid card to pass the problem I have but I feel like that not should be the best way to fix this? For now IĀ“m working with columns but I feel that this is holding me backā¦
wallpanel:
enabled: false
hide_toolbar: true
hide_sidebar: true
fullscreen: true
idle_time: 0
views:
- title: Meny
type: custom:grid-layout
layout:
grid-template-columns: 10% 2% 29% 29% 30%
cards:
- type: custom:mod-card
card_mod:
style:
hui-vertical-stack-card $: |
div#root > * {
--ha-card-border-width: 0px;
}
.: |
hui-vertical-stack-card {
--vertical-stack-card-margin: 1px;
}
ha-card {
box-shadow: var(--ha-card-box-shadow);
border: 0px;
}
#img-cell {
height: 100px;
}
card:
square: false
columns: 1
type: grid
cards:
- type: custom:button-card
tap_action:
action: navigate
navigation_path: null
name: Lights
color_type: card
styles:
name:
- font-size: 12px
- color: rgb(174, 174, 174)
- margin-top: 40px
card:
- height: 130px
- background-color: rgb(28, 28, 28)
- background-size: auto 100px
- background-repeat: no-repeat
- background-position: center 0px
- background-image: url("/local/floorplan/svgicons/lights_gray.svg")
- border-radius: 0px
- type: custom:button-card
tap_action:
action: navigate
navigation_path: null
name: Home cinema
color_type: card
show_icon: false
styles:
name:
- font-size: 12px
- color: rgb(28, 28, 28)
- margin-top: 40px
card:
- height: 130px
- background: >-
url("/local/floorplan/svgicons/homecinema_282828.svg")
no-repeat center -20px , linear-gradient(140deg,
rgba(14,106,170,1) 0%, rgba(59,189,235,1) 100%)
- border-radius: 0px
icon:
- color: rgb(28, 28, 28)
- width: 100%
- type: custom:button-card
tap_action:
action: navigate
navigation_path: null
name: Sound
color_type: card
styles:
name:
- font-size: 12px
- color: rgb(174, 174, 174)
- margin-top: 40px
card:
- height: 130px
- background-color: rgb(28, 28, 28)
- background-size: auto 100px
- background-repeat: no-repeat
- background-position: center 0px
- background-image: url("/local/floorplan/svgicons/sound_gray.svg")
- border-radius: 0px
- border-radius: 0px
icon:
- color: rgb(174, 174, 174)
- width: 100%
- type: custom:button-card
tap_action:
action: navigate
navigation_path: null
name: Security
color_type: card
styles:
name:
- font-size: 12px
- color: rgb(174, 174, 174)
- margin-top: 40px
card:
- height: 130px
- background-color: rgb(28, 28, 28)
- background-size: auto 100px
- background-repeat: no-repeat
- background-position: center 0px
- background-image: url("/local/floorplan/svgicons/security_gray.svg")
- border-radius: 0px
- border-radius: 0px
icon:
- color: rgb(174, 174, 174)
- width: 100%
- type: custom:button-card
tap_action:
action: navigate
navigation_path: null
name: Rooms
color_type: card
styles:
name:
- font-size: 12px
- color: rgb(174, 174, 174)
- margin-top: 40px
card:
- height: 130px
- background-color: rgb(28, 28, 28)
- background-size: auto 100px
- background-repeat: no-repeat
- background-position: center 0px
- background-image: url("/local/floorplan/FolderIconsSvg/Icon_rooms.svg")
- border-radius: 0px
- border-radius: 0px
icon:
- color: rgb(174, 174, 174)
- width: 100%
- type: custom:button-card
tap_action:
action: navigate
navigation_path: null
name: More
color_type: card
styles:
name:
- font-size: 12px
- color: rgb(174, 174, 174)
- margin-top: 40px
card:
- height: 130px
- background-color: rgb(28, 28, 28)
- background-size: auto 100px
- background-repeat: no-repeat
- background-position: center 0px
- background-image: url("/local/floorplan/svgicons/more_gray.svg")
- border-radius: 0px
- border-radius: 0px
icon:
- color: rgb(174, 174, 174)
- width: 100%
- type: custom:gap-card
- type: custom:mod-card
card_mod:
style:
hui-vertical-stack-card $: |
div#root > * {
--ha-card-border-width: 0px;
}
.: |
hui-vertical-stack-card {
--vertical-stack-card-margin: 0px;
}
ha-card {
box-shadow: var(--ha-card-box-shadow);
border: 0px;
}
card:
type: vertical-stack
cards:
- type: custom:button-card
color_type: blank-card
styles:
card:
- height: 65px
- display: flex
- border-radius: 0px
- square: false
columns: 3
type: grid
cards:
- type: custom:button-card
color_type: icon
entity: climate.ac
name: Ā°C
label: |
[[[
var bri = states['climate.ac'].attributes.outdoor_temp;
return '' + (bri ? bri : '0');
]]]
show_label: true
show_icon: false
styles:
label:
- font-size: 50px
- justify-self: center
- margin-top: '-25px'
- margin-left: '-10px'
- color: rgb(90, 90, 90)
name:
- font-size: 20px
- justify-self: center
- margin-left: +70px
- color: rgb(90, 90, 90)
card:
- height: 75px
- width: 127px
- border-radius: 0px
- background-color: rgb(28, 28, 28)
icon:
- color: rgb(28, 28, 28)
- width: 100%
- type: custom:button-card
tap_action:
action: navigate
navigation_path: null
color_type: card
show_icon: false
show_name: false
styles:
name:
- font-size: 12px
- color: rgb(28, 28, 28)
- margin-top: 40px
card:
- height: 75px
- width: 127px
- border-radius: 0px
- background-color: rgb(28, 28, 28)
- background-size: auto 70px
- background-repeat: no-repeat
- background-position: center 0px
- background-image: >-
url("/local/floorplan/svgicons/weather/weather_lightning_rain_gray_n.svg")
icon:
- color: rgb(28, 28, 28)
- width: 100%
- type: custom:button-card
color_type: icon
entity: sensor.hallen_temperature
name: Ā°C
label: |
[[[
return Math.round(Number(entity.state));
]]]
show_label: true
show_icon: false
styles:
label:
- font-size: 50px
- justify-self: center
- margin-top: '-25px'
- margin-left: '-10px'
- color: rgb(90, 90, 90)
name:
- font-size: 20px
- justify-self: center
- margin-left: +70px
- color: rgb(90, 90, 90)
card:
- height: 75px
- border-radius: 0px
- background-color: rgb(35, 35, 35)
icon:
- color: rgb(28, 28, 28)
- width: 100%
- type: custom:button-card
tap_action:
action: navigate
navigation_path: null
name: Outside
color_type: card
show_icon: false
styles:
name:
- font-size: 12px
- color: rgb(90, 90, 90)
- margin-top: '-10px'
card:
- height: 25px
- width: 122px
- margin-top: '-14px'
- border-radius: 0px
- background-color: rgb(28, 28, 28)
- background-size: auto 70px
- background-repeat: no-repeat
- background-position: center -10px
- type: custom:button-card
tap_action:
action: navigate
navigation_path: null
entity: weather.hem
show_state: true
color_type: card
show_icon: false
show_name: false
styles:
state:
- font-size: 12px
- color: rgb(179, 179, 179)
- margin-top: '-10px'
card:
- height: 25px
- width: 122px
- margin-top: '-14px'
- border-radius: 0px
- background-color: rgb(28, 28, 28)
- background-size: auto 70px
- background-repeat: no-repeat
- background-position: center -10px
icon:
- color: rgb(28, 28, 28)
- width: 100%
- type: custom:button-card
tap_action:
action: navigate
navigation_path: null
name: Inside
color_type: card
show_icon: false
styles:
name:
- font-size: 12px
- color: rgb(90, 90, 90)
- margin-top: '-10px'
card:
- height: 25px
- margin-top: '-14px'
- border-radius: 0px
- background-color: rgb(35, 35, 35)
- background-size: auto 70px
- background-repeat: no-repeat
- background-position: center -10px
- type: custom:button-card
tap_action:
action: navigate
navigation_path: null
name: Home cinema
color_type: card
show_icon: false
styles:
name:
- font-size: 12px
- color: rgb(28, 28, 28)
- margin-top: 40px
card:
- height: 25px
- width: 122px
- border-radius: 0px
- margin-top: '-14px'
- background-color: rgb(24, 24, 24)
- background-size: auto 20px
- background-repeat: no-repeat
- background-position: 10px 0px
- background-image: >-
url("/local/floorplan/svgicons/weather/weather_windy_gray_n.svg")
icon:
- color: rgb(28, 28, 28)
- width: 100%
- type: custom:button-card
tap_action:
action: navigate
navigation_path: null
name: Home cinema
color_type: card
show_icon: false
styles:
name:
- font-size: 2px
- color: rgb(179, 179, 179)
- margin-top: 40px
card:
- height: 25px
- width: 122px
- margin-top: '-14px'
- border-radius: 0px
- background-color: rgb(24, 24, 24)
- background-size: auto 70px
- background-repeat: no-repeat
- background-position: center -10px
icon:
- color: rgb(28, 28, 28)
- width: 100%
- type: custom:button-card
tap_action:
action: navigate
navigation_path: null
name: Home cinema
color_type: card
show_icon: false
styles:
name:
- font-size: 12px
- color: rgb(28, 28, 28)
- margin-top: 40px
card:
- height: 25px
- margin-top: '-14px'
- border-radius: 0px
- background-color: rgb(24, 24, 24)
- background-size: auto 70px
- background-repeat: no-repeat
- background-position: '-20 0px'
icon:
- color: rgb(28, 28, 28)
- width: 100%
Is there a reason I canāt download the Layout-card as a HACS repository??? I put
āGitHub - thomasloven/lovelace-layout-card: š¹ Get more control over the placement of lovelace cards.ā
but HA canāt find it, download it, etc.
I read the README on github, but Iām hesitant to go through manually installing and messing with directories on my serverā¦
Should work, look for layout-card in the frontend section of HACS.
Awesome. Had to install from the frontend page. I now have layout-card available. Thanks
1 Like
Is there a way to have a color or image as a background when using the layout-card as a card on a view?
So far whatever i try the layout card has no background
You can wrap your layout-card into a mod-card and assign a background to the mod-card.
1 Like
Iām going nutsā¦ Does anyone have any idea how to span a single card over 2 columns?
The vacuum card is supposed to span over 2 columns:
#################################################
# #
# TOOLS #
# #
#################################################
- type: custom:layout-card
layout_type: custom:horizontal-layout
layout:
width: 75
max_cols: 8
view_layout:
grid-area: tools
title: "Tools"
cards:
- type: custom:button-card
view_layout:
column: 1
entity: switch.entertainment_area
name: "TV Socket"
template:
- base
- icon_power
- loader
- type: custom:button-card
view_layout:
column: 2
entity: media_player.lg_webos_tv_oled65cx6la
name: Tv
double_tap_action: !include popup/vardagsrum_tv.yaml
template:
- base
- icon_tv
- loader
- type: custom:button-card
view_layout:
column: 3
entity: cover.curtains_lr
name: "Curtains"
template:
- curtains
- icon_curtains
- loader
- type: custom:button-card
view_layout:
grid-column: 4 / span 2
entity: vacuum.roomba
name: "Vacuum"
show_state: true
template:
- base
- icon_roomba
tap_action:
action: call-service
service: script.run_stop_roomba
grid-column: 1 / span 2
- type: custom:button-card
view_layout:
column: 6
entity: switch.laundry_machine_socket_1
name: "Washing Machine"
template:
- base
- icon_power
- loader
- type: custom:button-card
view_layout:
column: 7
entity: switch.office_m
name: "Office M"
template:
- base
- icon_power
- loader
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: "Office M"
content: !include "repeaters/multi-switch.yaml"
- type: custom:button-card
view_layout:
column: 8
entity: binary_sensor.octoprint_printing_2
name: "3D Printer"
show_state: true
template:
- base
- 3d_printer
- icon_3dprinter
Use grid layout, not column
They are already within a grid layout and each card has itās own grid layout.
Do you mean I should be placing another grid layout within the dashboard grid layout?
But this is not relevant for your question.
With horizontal, you cannot span over two columns. So either adopt your master grid to get it solved or put anohter grid instead of horizontal layout. As in my answer above.
What I had previously was:
#################################################
# #
# TOOLS #
# #
#################################################
- type: grid
view_layout:
grid-area: tools
columns: 8
title: "Tools"
cards:
- type: custom:button-card
entity: switch.entertainment_area
name: "TV Socket"
template:
- base
- icon_power
- loader
- type: custom:button-card
entity: media_player.lg_webos_tv_oled65cx6la
name: Tv
double_tap_action: !include popup/vardagsrum_tv.yaml
template:
- base
- icon_tv
- loader
- type: custom:button-card
entity: cover.curtains_lr
name: "Curtains"
template:
- curtains
- icon_curtains
- loader
- type: custom:button-card
entity: vacuum.roomba
name: "Vacuum"
show_state: true
template:
- base
- icon_roomba
tap_action:
action: call-service
service: script.run_stop_roomba
grid-column: 1 / span 2
- type: custom:button-card
entity: switch.laundry_machine_socket_1
name: "Washing Machine"
template:
- base
- icon_power
- loader
- type: custom:button-card
entity: switch.office_m
name: "Office M"
template:
- base
- icon_power
- loader
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: "Office M"
content: !include "repeaters/multi-switch.yaml"
- type: custom:button-card
entity: binary_sensor.octoprint_printing_2
name: "3D Printer"
show_state: true
template:
- base
- 3d_printer
- icon_3dprinter
But Iām not sure if I can span them here.
Do I need to change this into another grid-layout?
e.g.:
type: custom:grid-layout
layout:
grid-gap: var(--custom-layout-card-padding)
grid-template-columns: repeat(8, 1fr)
grid-template-rows: 1fr
Or do I also need to add the areas to this?
If so, it would mean having each card into itās own area, correct?
This question was appear before, but I cannot find the proper solution.
Iād like to use layout-card and Iād like to give some background to it, so I can use elements on layout-card with transparent background.
I couldnāt do it, and the layout card has transparent background, and the elements with transparent background could be hardly seen.
Okay, I could put background color to the elements, so it could be seen properly, but Iād like to show this part as one.
How can I put background color to the layout card?
That canāt be done only with layout-card. Youāll have to wrap your layout-card in a mod-card to give it a background.
Hello all,
Currently Iām experiencing some weird problems with HA on my Ipad Mini 2. I tried to make a responsive dashboard that changes based on the width of the device used.
Currently I follow the youtube tutorial called āTake control of where your cards end upā and āhow to create a responsive dashboard in haā. Both from Smart Home Junkie.
At first I thought I was making a mistake somewhere in my yaml code but it turns out that the problem lies with āLayout-cardā and my Ipad 2 mini. As soon as a chose a different layout then the standard āMasonaryā layout the cards dissapear randomly after a few seconds. Even the Masonary option from LC isnāt working.
Does anyone know what the problem could be or maybe have a solution for this? I really want to use the grid option thats provided by Layour-Card mod.
Edit:
I also tried the following: I made a new dashboard with the standard Masonary layout. I added 2 cards, just a regular switch card and a custom:layout-card. I added the grid code with 2 cards inside. Everything shows up fine but after a few seconds the custom card dissapears and the standard switch cards stays visibleā¦
Hi i play arround a while now, but dont find a answer for me, maybe iām just to stupid to find it.
In my layout are 3 columns and the first of them is also a grid, now i would like to have the second row (red box) to be one row with just one entity shown. Iām sure its possible, but i cant find way to do it. Can anybody please help me out with this? Thanks a lot in advance.
Can you post your code?
I have been going through each of these posts for the past 3 days. But could not find a solution on how to remove the gap (highlighted in red). I saw many people had the same issue, but didnāt find anyone accept a code as solution.
I am trying to update my view from the default HA dashboard to mushroom, and also make it responsive with card control as per my requirement using grid-areas
Here everything is fine except for this gap in the desktop grid layout. Mobile view is fine without any gaps since there is only one column and all grid columns come one below other
i am not sure if I missed some posts with the solution. I have been going through the css topic also.
Below is my code for my view
- theme: Mushroom
title: trial
path: trial
type: custom:grid-layout
layout:
grid-auto-columns: 1fr
grid-auto-rows: 1fr
grid-template-columns: 1fr 1fr 1fr
grid-template-rows: min-content
grid-gap: default
grid-template-areas: |
"l1 c1 r1"
"l2 c2 r2"
"l3 c3 r3"
mediaquery:
'(max-width: 540px)':
grid-template-columns: 100%
grid-template-rows: auto
grid-template-areas: |
"l1"
"c1"
"c2"
'(max-width: 1400px)':
grid-template-columns: 50% 50%
grid-template-rows: auto
grid-template-areas: |
"l1 c1"
subview: false
badges: []
cards:
- type: custom:mod-card
style: |
ha-card {
background-color: lightblue;
}
card:
type: vertical-stack
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 1fr
grid-template-rows: auto
cards:
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-template-card
primary: GF Bedroom
icon: mdi:sofa-outline
icon_color: blue
multiline_secondary: true
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-template-card
primary: Studio
icon: mdi:desktop-tower-monitor
icon_color: deep-orange
multiline_secondary: true
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-template-card
primary: Kitchen
icon: mdi:kettle
icon_color: light-blue
multiline_secondary: true
view_layout:
grid-area: l1
- type: custom:mod-card
style: |
ha-card {
background-color: lightblue;
}
card:
type: vertical-stack
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 1fr
grid-template-rows: auto
cards:
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-template-card
primary: GF Bedroom
icon: mdi:sofa-outline
icon_color: blue
multiline_secondary: true
view_layout:
grid-area: c1
- type: custom:mod-card
style: |
ha-card {
background-color: lightblue;
}
card:
type: vertical-stack
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 1fr
grid-template-rows: auto
cards:
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-template-card
primary: GF Bedroom
icon: mdi:sofa-outline
icon_color: blue
multiline_secondary: true
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-template-card
primary: Studio
icon: mdi:desktop-tower-monitor
icon_color: deep-orange
multiline_secondary: true
view_layout:
grid-area: c2
while doing google search, i found this.
https://stackoverflow.com/questions/70747504/how-can-i-set-the-height-of-a-row-dynamically-with-grid
when i copied the code and tried it out in codepen, this was the result.
Even though it is a grid layout, there is no gap between the blocks on the right.
each <div> has class mentioned, and each class refers to the css which has grid area, color and height
I believe height 300 is given because there is no content inside. else height: auto may work.
I am not much of a pro in css or using the inspector mode in the browser.
How can this be implemented in my HA layout?