opening searate topic for Christmas theming
#Christmas theme
fickle silo
styles:
# tooltip:
# - color: var(--secondary-text-color)
# - font-size: 10px
# - background: var(--card-background-color)
# # - opacity: 0.5
# - transition: opacity 0.8s
# - padding: 5px
# - border-width: 0px
icon:
- color: var(--icon-color-off)
card:
- animation: >
[[[ return states['input_select.theme'].state != 'Christmas'
? 'none' : 'wiggle 2s ease infinite'; ]]]
- box-shadow: none
- border-bottom: >
[[[ return variables.dash === variables.board
? '0.2rem solid var(--primary-color)' : 'transparent'; ]]]
- background: >
[[[ return states['input_select.theme'].state != 'Christmas'
? 'transparent' : 'ivory'; ]]]
- padding-top: 12px
- padding-bottom: 12px
``` based on the selection of a themend this one:```
button_header:
template:
- extra_styles
tap_action:
action: none
styles:
card:
- box-shadow: none
- padding: 12px
state:
- operator: template
value: >
[[[ return states['input_select.theme'].state == 'Christmas'; ]]]
styles:
card:
- border: 2px dotted green
- background: '#B71515'
- color: ivory
- font-size: 40px
- font-weight: 600
name:
- animation: colorize 4s linear both infinite, marquee 4s alternate infinite
- justify-self: center
- operator: default
styles:
card:
- border: none
- background: transparent
- color: var(--text-color-off)
- font-size: 20px
- font-weight: 400
name:
- justify-self: left```
and the extra_styles:
extra_styles:
extra_styles: |
@keyframes rock {
0% {transform: rotatez(15deg);}
25% {transform: rotatez(30deg);}
50% {transform: rotatez(15deg);}
75% {transform: rotatez(0deg);}
100% {transform: rotatez(15deg);}
}
@keyframes colorize {
0% {color: ivory;}
25% {color: brown;}
50% {color: ivory;}
75% {color: green;}
100% {color: brown;}
}
@keyframes wiggle {
0% {transform: rotate(0deg);}
33% {transform: rotate(15deg);}
66% {transform: rotate(-15deg);}
100% {transform: rotate(0deg);}
}
@keyframes card_bounce {
0% {transform: scale(1);}
15% {transform: scale(0.9);}
25% {transform: scale(1);}
30% {transform: scale(0.98);}
100% {transform: scale(1);}
}
@keyframes marquee {
from {transform: translateX(0%);}
to {transform: translateX(-50%);}
}
the actual theme:```
Christmas:
card-mod-theme: theme-mods
background-color-off: var(--primary-color)
background-color-on: var(--card-background-color)
background-opacity-on: rgba(var(--primary),0.8)
background-opacity-off: rgba(var(--card-background),0.8)
text-color-off: var(--card-background-color)
text-color-on: saddlebrown #var(--primary-color) ook card header color.....
icon-color-off: var(--accent-color)
icon-color-on: var(--primary-color)
ha-card-border-radius: 25px
ha-card-border-width: 0px
ha-card-box-shadow: 0px 0px 0px 2px green # , 0px 0px 1px 0px var(--primary-color, 1)
restriction-lock-row-margin-left: calc(100% - 25px) #95%
<<: *select_quick
##########################################################################################
lovelace-background: center/cover no-repeat url('/local/wallpapers/christmas.jpg') fixed
ha-card-header-color: saddlebrown
card-background-color: ivory
card-background: 255,255,240
accent-color: green
active-color: var(--accent-color)
dark-primary-color: saddlebrown
disabled-text-color: green
divider-color: green
paper-grey-200: green
paper-item-icon-color: green
paper-item-icon-active-color: black
sidebar-icon-color: saddlebrown
sidebar-background-color: ivory
sidebar-text: green
paper-slider-active-color: gold
paper-slider-knob-color: saddlebrown
paper-toggle-button-checked-bar-color: gold
paper-toggle-button-checked-button-color: saddlebrown
primary-background-color: var(--primary-color) #Necessary for sidebar slideout background
primary-color: '#B71515'
primary: 183,21,21
primary-text-color: green
secondary-background-color: lightgreen
secondary-text-color: saddlebrown
text-primary-color: ivory```
@dim anvil @dim pewter maybe we are able to set a card_mod for the footer using the lightchain you posted.
dim anvil
That would be perfect as it would then follow the size of the card
fickle silo
could ypu please drop that snow .png here too?
fickle silo
btw, didnt you speak of an animated background before?
fickle silo
how did you add that? Ive managed by weather view to use this: weather-background: card-mod-theme: weather-background <<: *card-mod-card <<: *card-mod-card-yaml card-mod-view: | horizontal-layout { {% if is_state('input_boolean.weer_view_background','on') %} background: repeat url({{state_attr('camera.buienradar','entity_picture')}}); {% endif %} } and show a live camera
dim anvil
I add this under hacs for custom repositories: https://github.com/dreimer1986/lovelace-animated-background
And this on the top of your raw dasboard: animated_background:
default_url: /local/backgrounds/snow2.mp4
I am working on changing that now as that also supports using an entity with different values. So I will make a drowdown helper with the 4 seasons and then find good mp4 files for the different seasons. I really liked the moving background...
fickle silo
a yes, Ive explored that once, and at that time it seemed rather buggy. maybe it has improved, so I will certainly check it out again, nice.
guess that's enough for spending the day for now 😉
dim anvil
When I tried it at first it didn't work. But I understood that the developer of this mod died.. :/ But the link I posted is something that seemed actively develpoed and works flawless at my setup. There is a warning there though about mobile data being drained. But I have a custom dashboard for my phone anyways so I am not using this on my phone
Yeah, a have a lot on your plate now 😂
fickle silo
no need for an extra plugin
weather-background:
card-mod-theme: weather-background
<<: *card-mod-card
<<: *card-mod-card-yaml
card-mod-view: |
horizontal-layout {
{% if is_state('input_boolean.weer_view_background','on') %}
background: repeat url('/local/wallpapers/snow.mp4');
{% endif %}
}
``` just works, and makes it very easy to template conditionallyOh nice! One less thing that can break
fickle silo
yeah, this is only a per view setting now though, so if you want that system wide, we need another mod
but, options galore...
dim anvil
Yeah true
fossil hamlet
I think you could use filter: hue-rotate( on those bulbs 🤔
fickle silo
that background is even simpler than I had hoped for:
lovelace-background: center/cover no-repeat url('/local/wallpapers/snow.mp4') fixed``` makes that happen system wide... inside the theme and we're setdidt find a compact way yet to have the theme change add the footer lights and snow header though, not sure if we can do that in a card-mod-theme on a card-mod-card-yaml
copying to keep it together
and your code for the snow atop: card_mod: style: | ha-card::after { content: " "; background: top / contain no-repeat url("/local/images/christmas/snow.png"); height: 26%; position: absolute; left: -1%; width: 102%; top: -20px } as posted in #frontend-archived message
dim anvil
that background is even simpler than I had hoped for:
```
lovelace-background: c...
I like the simplicity of that! I always thought it would be kinda "cheesy" with animated backgrounds, but after I tried it with this snow I love it. So I made this, a helper with the seasons and default. Default is just the ios picture of the theme I am currently using. So I will probably be on that the most, but maybe at times I want to change. Now I have the option to do that easily.
dim anvil
didt find a compact way yet to have the theme change add the footer lights and s...
I have also been trying to do that. To lock that .png to the footer so I can add other cards inbetween. My "fallback" solution if I can't find a way is to just add another "blank" card at the bottom that I add card-mod to, and if I add cards between or if something in that card expands it will push the footer down without it looking strange... -I hope
fickle silo
I think you could use `filter: hue-rotate(` on those bulbs 🤔
What were you saying here Thomas? You mean the light chain at the bottom? And maybe use that in an animation to get a twinkling efffect?…
fossil hamlet
Maybe
fickle silo
That 'maybe' keeps us alive a looking 😉
wanton garden
I’m so gonna try and apply this theme changes on my minimalist dashboard, it looks so awesome 😁
wanton garden
I'm finally getting around to building this now and have created a theme based on the minimalist-desktop theme. If I add the header and footer in that theme under card-mod-card it adds at all cards (as you would expect). Do you guys know if there is a way to only add it to certain cards that have a tag or something or are of a type? For reference, I use custom:button-card cards with templates in my dashboard
fossil hamlet
Card-mod also adds extra classes to all ha-card elements with their lovelace card type. Like ha-card.type-markdown, ha-card.type-entities, ha-card.type-custom-atomic-calendar-revive etc. that you can use.
wanton garden
Thanks! Didn’t knew this is possible. Exactly what I was looking for
fickle silo
you might also be able to template that, so only add the card_mod (other wise set to none) if the theme selector is set to Christmas
pseudo-code: ha-card { header: {{'snow-top' if is_state('input_select.theme','Christmas')}}; footer: {{'light-chain if is_state('input_select.theme','Christmas')}}; } confess I didnt yet realize this, so not sure if possible
this works, so we might also be able to get to the header and footer:```
card-mod-card-yaml: |
<other mods>
.: |
ha-card {
overflow: {{'hidden' if is_state('input_boolean.hide_card_overflow','on')}};
background: {{'repeat url("/local/season/kerst_smurfen.png")' if
states('input_select.theme') == 'Christmas'}};
}```
Maybe I'm doing something wrong, but the classes don't seem to work.
I have this theme (used your example, changed it to card-mod-card-yaml:
Theme:
christmas-mobile:
card-mod-theme: "christmas-mobile"
card-mod-card-yaml: |
:host(.teal) {
background: teal;
}
:host(.purple) {
background: purple;
}
Card:
type: entities
entities:
- entity: light.hallway_bulb_light_2
card_mod:
class: purple
See screenshot for result.
I have also found an open issue, maybe it is an issue for more people? https://github.com/thomasloven/lovelace-card-mod/issues/307
fossil hamlet
try ha-card.teal instead of :host(.teal). Cards don't have a :host
Also, pinging people during the release party. Ruuuude! /s 😜
wanton garden
Ah oops, sorry bout that. Forgot about the release party 😅
Still no dice sadly. (better without ping right? 😛 )
I now got this and still nothing. If I don't use classes the styling works like a charm:
card-mod-card-yaml: |
.: |
ha-card.teal {
background: teal;
}
ha-card.purple {
background: purple;
}
Do you want to color the card or the row?
wanton garden
Your comment triggered me and I now see that I got the wrong card type for the class I created 😅 ... oops. Added the class onto a button card and it works like a charm
fossil hamlet
So you provided an example that you weren't actually running? That's never a good idea, because there's a different error in your example code...
Indentation
wanton garden
No I was running that card and code. But yes, I think the indentation was the issue
wanton garden
Small question again: I now have it working without classes and using the ha-card::before and ha-card::after in the theme. Can I combine that in one class? Like a header section and a footer section if you will?
pseudo-code:
ha-card.my-class {
header {
settings-here
}
footer {
settings-here
}
}
I think that's an experimental css feature. Some browsers may support it if you enable a configuration setting.
fickle silo
Small question again: I now have it working without classes and using the `ha-ca...
please share that working code?
fickle silo
this is working, and never figured we could set that 'setter' and use it repeatedly:```
.: |
{% set kerst = states('input_select.theme') == 'Christmas' %}
ha-card {
overflow: {{'hidden' if is_state('input_boolean.hide_card_overflow','on')}};
background: {{'repeat url("/local/season/kerst_smurfen.png")' if kerst}};
}
ha-card::before
{
content: {{'" "' if kerst}};
background: {{'top / contain no-repeat url("/local/season/snow.png")' if kerst}};
height: {{'16%' if kerst}};
position: {{'absolute' if kerst}};
left: {{'-1%' if kerst}};
width: {{'102%' if kerst}};
top: {{'-30px' if kerst}};
}
it feels somewhat hacky to have to repeat the if kerst in the ::before on each element. we should probably be able to put the complete mod inside an if?
well, we can 😉
ha-card::before
{{
"{
content: ' ';
background: top / contain no-repeat url('/local/season/snow.png');
height: 16%;
position: absolute;
left: -1%;
width: 102%;
top: -30px;
}"
if kerst }}
now how to get that bottom lightstring and we're set
fickle silo
on the above mod, this messes with my regular mods on a markdown (and only on that...)```
-
type: custom:hui-element
card_type: markdown
card_mod:
style: |
ha-card.type-markdown {
margin: -8px -16px;
box-shadow: none;
}which is no longer applied. It turns out that we need to enter an 'else' to do nothing:
ha-card::before
{{
"{
content: ' ';
background: top / contain no-repeat url('/local/season/snow.png');
height: 16%;
position: absolute;
left: -1%;
width: 102%;
top: -30px;
}"
if kerst else
"{}" }}``` and now the markdown mods are rendered correctly if not Christmas. How odd.
wanton garden
this is working, and never figured we could set that 'setter' and use it repeate...
How strange, I was trying multiple ha-card definitions (the before and after) like that in one class but never got it to work. Will try tonight again and share what I have
Are you using a general theme that you use? Because you need that selector to define if it’s Christmas (kerst) or not
Maybe will do that. Make the changes in my minimalist theme and use selector to switch to Christmas settings. Now have copied my theme and adjusted it for Christmas
fickle silo
Are you using a general theme that you use? Because you need that selector to de...
the christmas mod is in my card-mod-theme, the other mod in the markdown is direclty on the card in the dashboard.
the selector is my regular theme selector
btw I didnt set a .class in that, its just in my regular card-mod-card-yaml: section. see attached file
fossil hamlet
Or you could include the ha-card:before in the if too, and not need the else.
fickle silo
that would be nice indeed... let me try that. btw, can you see why his would interfere with the markdown, and only the markdown?
fickle silo
confirmed!:```
ha-card {
overflow: {{'hidden' if is_state('input_boolean.hide_card_overflow','on')}};
background: {{'repeat url("/local/season/kerst_smurfen.png")' if kerst}};
}
{{ "ha-card::before
{
content: '';
background: top / contain no-repeat url('/local/season/snow.png');
height: 16%;
position: absolute;
left: -1%;
width: 102%;
top: -30px;
}"
if kerst}}
only needs some thoughtful quoting " " outside,' 'inside
wanton garden
great idea on using the season selector. I'm stealing that from you 😇
My code so far. I figured it out why it didn't work in a class. A class that is already ha-card.classname, ha-card::before (or ::after) don't work. you have to use ::after/ before
card-mod-card-yaml: |
.: |
{% set winter = states('input_select.seasons') == 'winter' %}
ha-card.christmas {
{{ "::before
{
content: '';
backdrop-filter: blur(20px);
background: top / contain no-repeat url('/local/theme_resources/christmas/snow1.png');
height: 26%;
position: absolute;
left: -1%;
width: 102%;
top: -20px
}"
if winter }}
{{ "::after
{
content: '';
backdrop-filter: blur(20px);
background: top / contain no-repeat url('/local/theme_resources/christmas/lightchain1.png');
height: 26%;
position: absolute;
left: -1%;
width: 102%;
bottom: -60px
}"
if winter }}
}
My card with the class:
type: entities
entities:
- sensor.power_total_energy_used
- sensor.water_total_cost_per_m3
- sensor.power_total_costs_per_kwh
title: Test
card_mod:
class: christmas
I maybe can do a big if on the whole class though. Edit: doesn't work it seems
fickle silo
yes I have that too, and its working somewhat ok-ish. It does pose an issue when an entities card isnt the last card in a stack though:
non christmas layout, clear it adds the lightchain o the Details section, which is a fold-entity-row,
I probably can only fix that by adding the ::after manually on each bottom card in any stack..... which is a bit of a no-go. Unless Thomas would know if we can somehow recognize that 'last-card-in-a-stack programmatically
wanton garden
it does look funny when applying to button cards hehe
fickle silo
also, when its over a fold, it blocks that functionality. So this ::after is in more ways a bad solution I fear... probably be better of trying to add a conditional footer of sorts
but wait, its not atached to any card, its simply positioned absolutely by the 'top' and the bottom: -60px... so tht will never work for all card
wanton garden
yeah I was afraid that was the case.. oh well
fickle silo
maybe we can find a way to do that 'relative.'...
in my main menu items I add a notification on a calculated spot, depending on the number of characters with left: calc(var(--app-drawer-width,248px) - {{pix}}px); Maybe there is such a thing as card-height ....? so we can add it there
wanton garden
I'll check on it later, off to bed now 😄
fickle silo
haha locked myself out of my UI with some theme modding, covering all actionable fields...
fickle silo
this is the only way I can see how to reliably and robustly add the bottom part to each stack./entities card (so explicitly not talking about all the others, like individual buttons etc)
- type: conditional
conditions:
- condition: state
entity: input_select.theme
state: Christmas
row:
type: custom:hui-element
card_type: picture
image: /local/season/lightchain.png
card_mod:
style: |
ha-card {
box-shadow: none;
background: green;
margin: -16px;
}```this can be an include, so we only need to insert```
- !include /config/dashboard/includes/christmas_footer.yaml
since a true footer can only be added to entities cards (?) I didnt explore that any further, given the fact many of the cards Id like to dress-up like this are vertical-stacks I dont wish te rebuild as entities cards....
fickle silo
and header....```
type: conditional
conditions:
- condition: state
entity: input_select.theme
state: Christmas
row:
type: custom:hui-element
card_type: picture
image: /local/season/snow_below.png
card_mod:
style: |
ha-card {
box-shadow: none;
background: transparent;
margin: -32px -16px 0px -16px;
}```
no interference with any control, still readable header 😉 o well, the options are endless
fwiw, I flipped the snow
or, use a true header and play with these card_mods: style: .header-footer.header: $: | img { height: 100%; } .: | .header-footer.header { height: 60px; display: {{'none' if not is_state('input_select.theme','Christmas')}}; }