Hello,
yes, this is the default card with the gradient
here is the card with my gif
i want that the gif is under the gradient, or the gradient over the gif.
here is the full code, under extra styles i actually replaced the gradient, but i want the gradient + gif.
weather:
variables:
rain: ''
entity_picture: |
[[[
return entity && entity.state
? `/local/animated-weather-icons/${entity.state}.svg`
: '?';
]]]
name: |
[[[
return entity && entity.attributes && entity.attributes?.temperature
? `${entity.attributes.temperature.toFixed(0)}<sup>°</sup>`
: '?';
]]]
custom_fields:
rain: |
[[[
return entity && entity.attributes && entity.attributes?.temperature
? `${states[variables.rain].state} % Regen`
: '?';
]]]
home: |
[[[
return entity
? `Heggen`
: '?';
]]]
show_icon: true
show_state: false
show_label: false
show_entity_picture: true
aspect_ratio: 1/1
styles:
############################################################################
# GRID (#container)
############################################################################
grid:
- grid-template-areas: |
'i'
'home'
'n'
'rain'
- grid-template-columns: 1fr
- grid-template-rows: min-content repeat(2, 1fr) repeat(2, min-content)
- gap: 0%
entity_picture:
- position: relative
- margin-top: 0px
- margin-left: -45%
icon:
- align-self: left
- justify-self: flex-end
name:
- justify-self: flex-end
- font-size: 1.4rem
- margin-top: 10%
- margin-bottom: 15%
- font-weight: bold
- text-transform: lowercase
label:
- width: 100%
state:
- justify-self: start
card:
- border-radius: var(--custom-button-card-border-radius)
- padding: 1rem
- height: 100%
- background-position: center
- background-repeat: no-repeat
# - background-image: >
# [[[
#
# return variables.entity_picture === undefined
# ? 'linear-gradient(0deg, rgba(117,121,128,1) 0%, rgba(90,113,157,1) 38%, rgba(94,108,136,1) 100%)'
# : 'linear-gradient(0deg, rgba(0,0,0,.1) 0%, rgba(0,0,0,0) 100%), url(' + entity_picture + ')';
#
# ]]]
color: |
[[[
const active = 'var(--nolu-color-active, rgb(22, 22, 22))';
const inactive = 'var(--nolu-color-inactive, rgb(245, 245, 245))';
const onState = ['on', 'auto', 'home', 'active', 'enabled', 'heat', 'cool', 'heat_cool', 'fan', 'open'];
const offState = ['off', 'unknown', 'unavailable', 'disabled', 'closed', 'not_home'];
return variables && variables.state && onState.some(state => variables.state.toLowerCase() === state)
? active
: inactive;
]]]
############################################################################
# CUSTOM FIELDS
############################################################################
custom_fields:
home:
- width: 200%
- place-self: start
- margin-left: -73%
- margin-top: 0px
- font-size: 1.2rem
- font-weight: light
rain:
- justify-self: flex-end
- font-size: 0.9rem
- font-weight: light
# https://developers.home-assistant.io/docs/core/entity/weather/#recommended-values-for-state-and-condition
extra_styles: |
[[[
let caase_rainy = '/local/weather_back/rainy1.gif';
let caase_cloudy = '/local/weather_back/cloudy.gif';
let caase_partly_cloudy = '/local/weather_back/partly_cloudy.gif';
let cardBgColor = 'rgba(43, 104, 233, 1)';
let cardBgImage = 'linear-gradient(0deg, rgba(43, 104, 233, 1) 0%, rgba(85, 187, 240, 1) 100%)';
if (entity && entity.state) {
switch(entity.state) {
case 'partlycloudy':
cardBgColor = 'rgb(117,121,128)';
cardBgImage = 'url(' + caase_partly_cloudy + ')';
break;
case 'cloudy':
cardBgColor = 'rgb(117,121,128)';
cardBgImage = 'url(' + caase_cloudy + ')';
break;
case 'pouring':
case 'rainy':
cardBgColor = 'rgb(117,121,128)';
cardBgImage = 'url(' + caase_rainy + ')';
break;
case 'clear-night':
cardBgColor = 'rgb(7,21,45)';
cardBgImage = 'linear-gradient(0deg, rgba(7,21,45,1) 0%, rgba(18,45,97,1) 38%, rgba(1,11,32,1) 100%)';
break;
case 'xxxxx':
cardBgColor = '';
cardBgImage = '';
break;
}
}
return `
#aspect-ratio {
height: 100%;
}
#name > sup {
color: rgba(255, 255, 255, 0.5);
font-size: 2rem;
}
#wind span,
#humidity span,
#visibility span {
display: block;
width: 100%;
text-align: center;
}
#wind ha-icon,
#humidity ha-icon,
#visibility ha-icon {
--mdc-icon-size: 20px;
margin-top: 0.5rem;
}
#wind #title,
#humidity #title,
#visibility #title {
font-size: 0.95rem;
font-weight: 500;
margin-top: 0.5rem;
}
#title b {
font-size: 0.85rem;
color: rgba(255, 255, 255, 0.6);
}
#wind #subtitle,
#humidity #subtitle,
#visibility #subtitle {
color: rgba(255, 255, 255, 0.6);
font-size: 0.90rem;
margin-top: 0.5rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#card {
background-color: ${cardBgColor};
background-image: ${cardBgImage};
}
@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);
}
}
`;
]]]
i hope you understand what i mean 
here is the original code with the gradient
switch(entity.state) {
case 'partlycloudy':
cardBgColor = 'rgb(117,121,128)';
cardBgImage = 'url(' + entity_picture + ')';
cardBgImage = 'linear-gradient(0deg, rgba(117,121,128,1) 0%, rgba(90,113,157,1) 38%, rgba(94,108,136,1) 100%)';
break;
case 'cloudy':
cardBgColor = 'rgb(117,121,128)';
cardBgImage = 'linear-gradient(0deg, rgba(117,121,128,1) 0%, rgba(117,121,128,1) 38%, rgba(94,108,136,1) 100%)';
break;
case 'pouring':
case 'rainy':
cardBgColor = 'rgb(117,121,128)';
cardBgImage = 'linear-gradient(0deg, rgba(117,121,128,1) 0%, rgba(90,113,157,1) 38%, rgba(94,108,136,1) 100%)';
break;
case 'clear-night':
cardBgColor = 'rgb(7,21,45)';
cardBgImage = 'linear-gradient(0deg, rgba(7,21,45,1) 0%, rgba(18,45,97,1) 38%, rgba(1,11,32,1) 100%)';
break;
case 'xxxxx':
cardBgColor = '';
cardBgImage = '';
break;
(using pro version)
In the gif maybe it is possible to see that only the “led strip” animation is working properly while all other are transitioning too fast (light bulb, tv and even the fan goes from 0 to 100 )
