Just praise really on new sections, love it
6 Likes
how did you get the Calendar to span the entire width?
1 Like
Edit the section width:
Go to the layout tab and change the card size:
In the case of the OP’s example I’m guessing both are set to be 3 section wide.
Yeah, it’s just that the family calendar card doesn’t have a visual editor with the layout tab.
Ah ok. I believe (haven’t tried it) that there is a way to do via YAML. It’s not in the docs but I seem to remember they touched on it in the release video.
What card is that???
yes with adding these to the card:
layout_options:
grid_columns: 12
grid_rows: auto
and the section must also have the max width.
column_span: 3
2 Likes
I like your layout - would you be able to share your yaml?
Thanks
For the page you have a max of 12 cols. Configured?
For the Page it is column span. So three section in one row.
And then you create a section with full width or
layout_options:
grid_columns: 12
grid_rows: auto
I think 12 is the maximum
new section page,
first image, customise with your own entities, if you want a family picture of you and your partner to work like mine, you need to cut the background out for each family member (keeping image same size) as main family jpg and save one color and one black and white png.
example
this results in the image looking like this when someones away
to create a template sensor to make this reliable for me I used
- platform: template
sensors:
richard_not_home:
value_template: '{% if is_state("device_tracker.life360_richard_bousfield", "home") %}home{% else %}not_home{% endif %}'
friendly_name: 'Richard not home' `
Then the Main code is
type: picture-elements
image: /local/us/family.jpg
elements:
- type: image
entity: sensor.ileea_not_home
state_image:
home: /local/us/mumhome.png
not_home: /local/us/mumaway.png
style:
top: 0%
left: 0%
width: 100%
transform: initial
- type: state-label
entity: sensor.ileeas_iphone_battery
style:
top: 80%
left: 4%
pointer-events: none
transform: initial
font-size: 15px
font-family: var(--font-family)
color: black
line-height: 32px
padding: 0px 0px
- type: icon
icon: mdi:cellphone
style:
top: 82%
left: 1%
pointer-events: none
transform: scale(0.8)
color: black
line-height: 32px
font-size: 11px
font-family: var(--font-family)
- type: state-label
entity: sensor.ileeas_apple_watch_battery
style:
top: 88%
left: 4%
pointer-events: none
transform: initial
font-size: 15px
font-family: var(--font-family)
color: black
line-height: 32px
- type: icon
icon: mdi:watch-variant
style:
top: 90%
left: 1%
pointer-events: none
transform: scale(0.8)
color: black
line-height: 32px
font-size: 11px
font-family: var(--font-family)
- type: image
entity: sensor.richard_not_home
state_image:
home: /local/us/dadhome.png
not_home: /local/us/dadaway.png
style:
top: 0%
left: 0%
width: 100%
transform: initial
- type: state-label
entity: sensor.richards_iphone_battery
style:
top: 80%
left: 86%
pointer-events: none
transform: initial
font-size: 15px
font-family: var(--font-family)
color: black
line-height: 32px
- type: icon
icon: mdi:cellphone
style:
top: 82%
left: 95%
pointer-events: none
transform: scale(0.8)
color: black
line-height: 32px
font-size: 11px
font-family: var(--font-family)
- type: state-label
entity: sensor.richards_apple_watch_battery
style:
top: 88%
left: 86%
pointer-events: none
transform: initial
font-size: 15px
font-family: var(--font-family)
color: black
line-height: 32px
- type: icon
icon: mdi:watch-variant
style:
top: 90%
left: 95%
pointer-events: none
transform: scale(0.8)
color: black
line-height: 32px
font-size: 11px
font-family: var(--font-family)
second row of cards is just grid card with button cards with your own entries
middle section is simple (delete font in this code and use your own)
type: custom:button-card
entity: sensor.time
time_format: 12
show_state: true
show_icon: false
show_name: false
styles:
card:
- aspect-ratio: 1/1
- box-shadow: none
grid:
- grid-template-columns: 2fr
- grid-template-areas: '"s" "text" "date"'
state:
- font-size: 750%
- font-family: poxel
3rd section is again your choice of cards, if you want to make this fit on a tablet neatly the rows for the buttons are.
grid, 3 collums
custom:button-card
aspect_ratio: 2/1
and fill in how you want, you can put two of these under any std card like weather, sun etc.
the the code for the calanender like that requires you to use both
custom:bootstrap-grid-card and custom:week-planner-card
and then this code
type: custom:bootstrap-grid-card
class: container-fluid g-0
cards:
- type: row
class: justify-content-center
cards:
- type: custom:week-planner-card
class: col-xs-12 col-md-14 col-xxl-16
calendars:
- entity: insert calendar entity here
color: '#e6c229' ### you can use color here to change each calenders color for spefic people or work.
- entity: insert calendar entity here
color: '#1a8fe3'
- entity: insert calendar entity here
color: '#e66429'
days: 5
noCardBackground: true
eventBackground: rgba(0, 0, 0, .05)
texts:
noEvents: No Event
fullDay: Full Day
today: Today
sunday: Sunday
monday: Monday
tuesday: Tuesday
wednesday: Wednsday
thursday: Thursday
friday: Friday
saturday: Saturday
tomorrow: Tomorrow
weather: weather.pirateweather
card_mod:
style: |
ha-card {
margin-top: 14px;
font-size: 24px; !important;
text-shadow: 0px 4px 7px rgba(0,0,02,1) !important;
background-color: rgba(0, 0, 0, 0.4) !important;
border: none !important;
margin-right: 15px;
margin-left: 15px;
width: 100%
}
.week-planner-card {
text-shadow: 0px 4px 7px rgba(0,81,255,1) !important;
}
layout_options:
grid_columns: full
grid_rows: 1
For wall mounted tablets the days to show on the calender are 5 for larger displays its 7 (reason is on upto a 10" tablet 6 or 7 days will show the 6 or 7th day bellow the 5 day at this size of the font) as I wanted to be able to glance accross the room at tablet and still be able to see calender entries.
my other buttons security lead to a sub page like this
and weather leads to this
if you want the weather one instructions are here