So, I’ve been trying to work out how to get some different type of cards to work together inside a master card. Normally I’d go with horizontal and/or vertical stacks, but sometimes it’s impossible to use card-modder
on nested cards, and things just disappear, don’t work, or cause a massive mess.
Today I decided I wanted to slim down one of my cards and decided to use the glance card, but this card doesn’t work as an entity for the entities card. Nothing was showing at all. Anyway, long story short, I finally worked it out using the custom card vertical-stack-in-card. It works a treat, and then with card-modder
modifying the nested cards, I was able to come up with something that combines the glance card and the entities card to make them look like one card.
I’m pretty happy with the result. The blue line matches the divider element used with the entities card. I have chosen to hide the card title for the glance card as I don’t need to know that this card is for my printer. It’s pretty self explanatory. If you are using a background that doesn’t have a gradient, then you may get away with not needing the line at all.
Below is the code for this card copy and pasted as is. Thanks to who ever it was that came up with the original styling. I can’t remember where I got it from, but it’s great!!!
The good thing about the vertical-stack-in-card
custom card is that it removes all the margins around the nested cards, so all I needed to do was define the radius of the border on all for corners and change the bottom 2 corners to 0px each (this is the top 2 corners on the second card) and then hide the bottom border. Then on the second card, I just styled the top border as required and presto. Such a simple work around to my problem that has taken me ages to work out.
Thanks to Thomas for his great custom cards!! They are making it so much easier to work with Home Assistant.
- type: custom:card-modder
card:
type: custom:vertical-stack-in-card
cards:
- type: custom:card-modder
card:
type: glance
entities:
- sensor.printer_status
- sensor.ink_black
- sensor.ink_cyan
- sensor.ink_magenta
- sensor.ink_yellow
show_header_toggle: false
style:
background-image: url("/local/lovelace/cardbackK.png")
background-repeat: no-repeat
background-color: rgba(50,50,50,0.3)
background-size: 100% 1000%
border-radius: 10px 10px 0px 0px
border: solid 1px rgba(100,100,100,0.3)
border-bottom: none
color: "#999999"
box-shadow: 3px 3px rgba(0,0,0,0.4)
- type: custom:card-modder
card:
type: entities
entities:
- input_number.ink_alert
- type: custom:fold-entity-row
head: input_boolean.ink_notify_system
items:
- binary_sensor.ink_black_alert
- binary_sensor.ink_cyan_alert
- binary_sensor.ink_magenta_alert
- binary_sensor.ink_yellow_alert
show_header_toggle: false
style:
background-image: url("/local/lovelace/cardbackK.png")
background-repeat: no-repeat
background-color: rgba(50,50,50,0.3)
background-size: 100% 100%
border-radius: 0px 0px 10px 10px
border: solid 1px rgba(100,100,100,0.3)
border-top: solid 1px rgba(82, 148, 226, 0.3)
color: "#999999"
box-shadow: 3px 3px rgba(0,0,0,0.4)
style: # remove background from vertical-stack-in-card
background: none