card-mod-view: |
vertical-layout {
{% set weeralarm = states['sensor.weer_alarm'].attributes.icon_color
if is_state('binary_sensor.meteoalarm_brabant','on') %}
background: {{weeralarm}};
}
hui-sections-view {
{% set weeralarm = states['sensor.weer_alarm'].attributes.icon_color
if is_state('binary_sensor.meteoalarm_brabant','on') %}
background: {{weeralarm}};
}
be ware though that while the vertical-layout colors the complete background, and goes beyond the last card, just as the window stretches, the hui-sections-view ends at the last section, which, if the required vertical space for that section is less than the window, looks really ugly…
Maybe there is another way of doing it, not sure yet, Sections is still experimental after all… We can add some empty grids in that section to make it use more background, but ofc that is plain silly
Hi,
I tried in a “section” type view but it didn’t work.
I currently use the ‘frontend’ mode to edit lovelace and I would like to change the background of only one specific tab (of type ‘section’) based on the entity sun.sun.
Could you please detail how you applied it?
Thanks
you mean the UI editor opposed to Yaml mode? tbh, I dont use that a lot, and it really is a pain to have to copy all of that code in the editor…
I haven tried to set a mod on a single Sections view in Yaml mode yet, so cant say how to do that.
I did notice that the colorization was different than on a regular view, as those regular vies are colored all the way done to the view window, even if that is taller than the actual view. WIth sections, the colored background stops at the bottom of the section, and if the window of the view is taller (like on desktop) the rest gets the regular theme setting color.
Which I found really ugly, so I stopped using it altogether for now
Well I finally got this to work using the code below. I can change the background based on a variable. Thanks to all who gave their advice and opinions. I only have one problem now. I am not able to edit the code using the conventional ‘Edit’ on this page (clicking the pencil in the upper right corner). The only way I can edit is with the Raw Configuration Editor.
Just wanted to post what I had in case someone else stumbles on this while researching the same topic.
button_card_templates:
custom_background:
styles:
card:
- background: |
[[[
if (states['input_select.background_selector'].state === 'Day') {
return 'url("/local/CHC.jpeg")';
} else if (states['input_select.background_selector'].state === 'Night') {
return 'url("/local/Wrigley_Winter.jpg")';
} else {
return 'var(--primary-background-color)';
}
]]]
- background-size: cover
- background-position: center
- background-repeat: no-repeat
- height: 100vh
- width: 100vw
- position: fixed
- top: 0
- left: 0
views:
- title: Home
panel: true
cards:
- type: custom:button-card
template: custom_background
styles:
card:
- overflow: auto
- padding: 16px
custom_fields:
content:
card:
type: vertical-stack
cards:
- type: custom:teamtracker-card
entity: sensor.cubbies
visibility:
- condition: state
entity: sensor.cubbies
state: NOT_FOUND
- type: entity
entity: sensor.spring_training
name: Days until Spring Training
icon: mdi:baseball
- type: entity
entity: sensor.opening_day
name: Days until Opening Day
icon: mdi:baseball-outline
type: panel
icon: ''
I wanted to do this ages ago and gave up doing it fully dynamically.
Instead, I now have about 100 images per season + some special holidays. I manually created (well with a script) themes for each associated with the file.
I also have a naming convention to name the themes.
Then I have a input select helper which gets populated based on that naming convention with all the possible themes. I have a separate automation that looks at the date and based on that picks a random one. It changes them at 5AM and at 2:30PM. I find that changing them more often than that gets jarring to the fam a bit so 2 a day seems to be the sweet spot.
It’s definitely a horrible kludge but it works really well and I only had to set it up once about a year ago and never touch it again. It’s been working flawlessly and without any need to tinker with it.
Oh I also have a dark theme based on an iOS dark theme I found online so in the evening every clients gets set to the dark theme.