Sure! This weekend i will write up a git repo with the code and all details if that’s ok for you. 
2 Likes
That’s just amazing, didn’t know that was possible. Thanks!
2 Likes
Thank you so much
@Mattias_Persson thank you very much, but unfortunately your new css idea makes the icons in the left sidebar bigger 
- like on the bottom picture
I also found the problem on mobile view (with new css). Squares displayed correctly on a large screen, on mobile devices they are cut off.
The CSS code is exactly the same as yours. Do you have any ideas on how to fix this? 
1 Like
Hi Mattias, i´m trying to apply your lovelace and installed as your recommendation but i´m getting this error in my main lovelace page: mapping values are not allowed here in “/config/button_card_templates.yaml”, line 129, column 65
at this line i´ve got the bellow information about the error: (notice that the file button_card_templates.yaml has a red exclamation informing error on code)
do you know what it could be? maybe i´m missing something? appreciate your help
I uploaded the basic files for you, just copy everything inside the config folder to your config folder and install the necessary card integrations.
To be clear, this post is mentioned for @joel_marambaia and it’s not my Lovelace. I will make a git release this weekend and share it here afterwards.
3 Likes
Thanks for the link AndyVRD.
However, it is not the same theme as the photo shared above. I don’t have, for example, the camera at the bottom left
Works almost perfect! Thanks so much.
Only thing: When resizing the screen, the font size and padding and such does not meet the font size of the “non” edited titles:
1 Like
HOLYYY! I’m going to start trying to config my Lovelace after something like this! GREAT work! Sjukt bra jobbat!
2 Likes
Im trying to create the “Sidebar-Update” like u did it ago.
But I got the following error:
ButtonCardJSTemplateError: SyntaxError: Unexpected token ';' in 'if (entity) { // markdown parser variables.markedjs; let links = new RegExp('<a href="...'
marked.js is already in button_card_templates.yaml.
What did I miss?
I have a question regarding the icons/ svg for lighting entities.
I would like when the light is ‘off’ to look like the following with the transparent ring:
A: 
However I do not want the entire icon to light up as the state colour (for this I used the same icon for off and on states):
B: 
however when using the svg circle (adobe illustrator) to display the colour of the light, when ‘off’ it looks as follows:
C: 
Even though when ‘on’ it acts as desired:
D: 
Basically I would like it to look like “A” when ‘off’, and “D” when ‘on’, but do not see how to achieve this. Hope that makes sense, if anyone has any tips/ advice I would be very grateful.
icon_hue:
styles:
custom_fields:
icon:
- width: 77%
- margin-left: -14%
- margin-top: 1%
custom_fields:
icon: >
[[[
const state = (variables.state === 'on' && variables.timeout < 2000) ? 'on' : null;
return `
<svg viewBox="0 0 50 50">
<style>
@keyframes on {
0% {
transform: scale(0.85);
}
20% {
transform: scale(1.1);
}
40% {
transform: scale(0.95);
}
60% {
transform: scale(1.03);
}
80% {
transform: scale(0.97);
}
100% {
transform: scale(1);
}
}
.on {
animation: on 0.8s;
transform-origin: center;
}
</style>
<path fill="#9da0a2" d="M27.4 47.3h-4.9s-.7.1-.7.8.4.9.7.9h4.9c.3 0 .7-.1.7-.9s-.7-.8-.7-.8zm3.3-2.9H19.3s-.8 0-.8.8.6.9.8.9h11.5c.2 0 .8-.1.8-.9-.1-.8-.9-.8-.9-.8zm0-3H19.3s-.8 0-.8.8.6.9.8.9h11.5c.2 0 .8-.1.8-.9-.1-.8-.9-.8-.9-.8zm0-2.9H19.3s-.8 0-.8.8.6.9.8.9h11.5c.2 0 .8-.1.8-.9s-.9-.8-.9-.8zm5.2-23.2c-3.3-5.3-7-5.6-10.9-5.6-3.8 0-8.4.4-10.9 5.6-.1.1-.1.3.1.7.4.8 3.3 7.2 3.2 18.8 0 1.1-.1 1.6 0 1.7 0 .1 0 .7 1.1.7h13c1 0 1-.5 1.1-.7v-1.7c-.1-11.6 2.8-18 3.2-18.8.1-.4.1-.5.1-.7"/>
<path class="${state}" fill="${variables.light_color}" d="M14.1 15.3c3.4-.3 7-.4 10.9-.4 3.8 0 7.5.2 10.9.4.4-.4.7-.8.9-1.1C39 8.5 38.9 6.5 38.9 6c-.2-4.4-8.4-5-12.1-5h0-3.4c-3.7 0-12 .5-12.1 5 0 .5-.1 2.5 2.1 8.2 0 .3.3.8.7 1.1z"/>
</svg>
`;
]]]
Hello, i would like to know if i can put this kind animation icon in to a light.svg file instead put it in the lovelace frontend?
And also this kind of animation icon for example icon_spot when i turn the light on then swap from tab1 to tab2 on the top , then swap back to tab1 , the icon_spot will do one more time on animation on ios 15 iphone with the movement icon (different final position between start position ) , but in android, both movement icon and none movement icon will do one more time animation when switch back to the tab . Is any way, to fix it ? Thans for the amazing design. Mattias_Persson
or can i add some condition like this ??
(as_timestamp(now()) - as_timestamp(states.light.bed_light.last_changed)) < 1
or
(as_timestamp(now()) - as_timestamp(states.entity.last_changed)) < 1
but i dont know what is the format or program grammar to put this condition inside
if (variables.state === 'on' && variables.timeout < 2000) {
state = 'on';
}
i tested once i put animation-fill-mode: forwards; in to the style it will happen things like this
change theme to tablet
what do you mean by “updated themes” do you mean from your source code? Or should I have changed something in the tablet themes file when I made this change? I only changed stuff in the lovelace yaml file when adding the three icons
Hello,
how did you manage to put the icon (weather) on top of the left side and the temperature on the right side also on top?
I have these settings:
- type: custom:button-card
entity: weather.home
name: Alfornelos
template:
- weather_ipma
weather_ipma:
show_entity_picture: true
entity_picture: >
[[[
if (states["weather.home"].state == "partlycloudy" && states["sun.sun"].state == "below_horizon") return '/local/custom_ui/weather/ipma/w_ic_n_02anim.svg';
if (states["weather.home"].state == "partlycloudy" && states["sun.sun"].state == "above_horizon") return '/local/custom_ui/weather/ipma/w_ic_d_02anim.svg';
if (states["weather.home"].state == "cloudy" && states["sun.sun"].state == "below_horizon") return '/local/custom_ui/weather/ipma/w_ic_n_27anim.svg';
if (states["weather.home"].state == "cloudy" && states["sun.sun"].state == "above_horizon") return '/local/custom_ui/weather/ipma/w_ic_d_04anim.svg';
if (states["weather.home"].state == "Clear sky" && states["sun.sun"].state == "below_horizon") return '/local/custom_ui/weather/ipma/w_ic_n_01anim.svg';
if (states["weather.home"].state == "Clear sky" && states["sun.sun"].state == "above_horizon") return '/local/custom_ui/weather/ipma/w_ic_d_01anim.svg';
if (states["weather.home"].state == "Sunny intervals" && states["sun.sun"].state == "below_horizon") return '/local/custom_ui/weather/ipma/w_ic_n_03anim.svg';
if (states["weather.home"].state == "Sunny intervals" && states["sun.sun"].state == "above_horizon") return '/local/custom_ui/weather/ipma/w_ic_d_03anim.svg';
if (states["weather.home"].state == "High cloud" && states["sun.sun"].state == "below_horizon") return '/local/custom_ui/weather/ipma/w_ic_n_05anim.svg';
if (states["weather.home"].state == "High cloud" && states["sun.sun"].state == "above_horizon") return '/local/custom_ui/weather/ipma/w_ic_d_05anim.svg';
if (states["weather.home"].state == "Showers" && states["sun.sun"].state == "below_horizon") return '/local/custom_ui/weather/ipma/w_ic_n_06anim.svg';
if (states["weather.home"].state == "Showers" && states["sun.sun"].state == "above_horizon") return '/local/custom_ui/weather/ipma/w_ic_d_06anim.svg';
if (states["weather.home"].state == "Light showers" && states["sun.sun"].state == "below_horizon") return '/local/custom_ui/weather/ipma/w_ic_n_07anim.svg';
if (states["weather.home"].state == "Light showers" && states["sun.sun"].state == "above_horizon") return '/local/custom_ui/weather/ipma/w_ic_d_07anim.svg';
if (states["weather.home"].state == "Heavy showers" && states["sun.sun"].state == "below_horizon") return '/local/custom_ui/weather/ipma/w_ic_n_08anim.svg';
if (states["weather.home"].state == "Heavy showers" && states["sun.sun"].state == "above_horizon") return '/local/custom_ui/weather/ipma/w_ic_d_08anim.svg';
if (states["weather.home"].state == "Rain" && states["sun.sun"].state == "below_horizon") return '/local/custom_ui/weather/ipma/w_ic_n_09anim.svg';
if (states["weather.home"].state == "Rain" && states["sun.sun"].state == "above_horizon") return '/local/custom_ui/weather/ipma/w_ic_d_09anim.svg';
if (states["weather.home"].state == "Light rain" && states["sun.sun"].state == "below_horizon") return '/local/custom_ui/weather/ipma/w_ic_n_10anim.svg';
if (states["weather.home"].state == "Light rain" && states["sun.sun"].state == "above_horizon") return '/local/custom_ui/weather/ipma/w_ic_d_10anim.svg';
if (states["weather.home"].state == "Heavy rain" && states["sun.sun"].state == "below_horizon") return '/local/custom_ui/weather/ipma/w_ic_n_11anim.svg';
if (states["weather.home"].state == "Heavy rain" && states["sun.sun"].state == "above_horizon") return '/local/custom_ui/weather/ipma/w_ic_d_11anim.svg';
if (states["weather.home"].state == "Intermittent rain" && states["sun.sun"].state == "below_horizon") return '/local/custom_ui/weather/ipma/w_ic_n_12anim.svg';
if (states["weather.home"].state == "Intermittent rain" && states["sun.sun"].state == "above_horizon") return '/local/custom_ui/weather/ipma/w_ic_d_12anim.svg';
if (states["weather.home"].state == "Intermittent ligth rain" && states["sun.sun"].state == "below_horizon") return '/local/custom_ui/weather/ipma/w_ic_n_13anim.svg';
if (states["weather.home"].state == "Intermittent ligth rain" && states["sun.sun"].state == "above_horizon") return '/local/custom_ui/weather/ipma/w_ic_d_13anim.svg';
if (states["weather.home"].state == "Intermittent heavy rain" && states["sun.sun"].state == "below_horizon") return '/local/custom_ui/weather/ipma/w_ic_n_14anim.svg';
if (states["weather.home"].state == "Intermittent heavy rain" && states["sun.sun"].state == "above_horizon") return '/local/custom_ui/weather/ipma/w_ic_d_14anim.svg';
if (states["weather.home"].state == "Drizzle" && states["sun.sun"].state == "below_horizon") return '/local/custom_ui/weather/ipma/w_ic_n_15anim.svg';
if (states["weather.home"].state == "Drizzle" && states["sun.sun"].state == "above_horizon") return '/local/custom_ui/weather/ipma/w_ic_d_15anim.svg';
if (states["weather.home"].state == "Mist intervals" && states["sun.sun"].state == "below_horizon") return '/local/custom_ui/weather/ipma/w_ic_n_16anim.svg';
if (states["weather.home"].state == "Mist intervals" && states["sun.sun"].state == "above_horizon") return '/local/custom_ui/weather/ipma/w_ic_d_16anim.svg';
if (states["weather.home"].state == "Fog" && states["sun.sun"].state == "below_horizon") return '/local/custom_ui/weather/ipma/w_ic_n_17anim.svg';
if (states["weather.home"].state == "Fog" && states["sun.sun"].state == "above_horizon") return '/local/custom_ui/weather/ipma/w_ic_d_17anim.svg';
if (states["weather.home"].state == "Snow" && states["sun.sun"].state == "below_horizon") return '/local/custom_ui/weather/ipma/w_ic_n_18anim.svg';
if (states["weather.home"].state == "Snow" && states["sun.sun"].state == "above_horizon") return '/local/custom_ui/weather/ipma/w_ic_d_18anim.svg';
if (states["weather.home"].state == "Thunderstorms" && states["sun.sun"].state == "below_horizon") return '/local/custom_ui/weather/ipma/w_ic_n_19anim.svg';
if (states["weather.home"].state == "Thunderstorms" && states["sun.sun"].state == "above_horizon") return '/local/custom_ui/weather/ipma/w_ic_d_19anim.svg';
if (states["weather.home"].state == "Showers and thunderstorms" && states["sun.sun"].state == "below_horizon") return '/local/custom_ui/weather/ipma/w_ic_n_20anim.svg';
if (states["weather.home"].state == "Showers and thunderstorms" && states["sun.sun"].state == "above_horizon") return '/local/custom_ui/weather/ipma/w_ic_d_20anim.svg';
if (states["weather.home"].state == "Hail" && states["sun.sun"].state == "below_horizon") return '/local/custom_ui/weather/ipma/w_ic_n_21anim.svg';
if (states["weather.home"].state == "Hail" && states["sun.sun"].state == "above_horizon") return '/local/custom_ui/weather/ipma/w_ic_d_21anim.svg';
if (states["weather.home"].state == "Frost" && states["sun.sun"].state == "below_horizon") return '/local/custom_ui/weather/ipma/w_ic_n_22anim.svg';
if (states["weather.home"].state == "Frost" && states["sun.sun"].state == "above_horizon") return '/local/custom_ui/weather/ipma/w_ic_d_22anim.svg';
if (states["weather.home"].state == "Rain and thunderstorms" && states["sun.sun"].state == "below_horizon") return '/local/custom_ui/weather/ipma/w_ic_n_23anim.svg';
if (states["weather.home"].state == "Rain and thunderstorms" && states["sun.sun"].state == "above_horizon") return '/local/custom_ui/weather/ipma/w_ic_d_23anim.svg';
if (states["weather.home"].state == "Convective clouds" && states["sun.sun"].state == "below_horizon") return '/local/custom_ui/weather/ipma/w_ic_n_24anim.svg';
if (states["weather.home"].state == "Convective clouds" && states["sun.sun"].state == "above_horizon") return '/local/custom_ui/weather/ipma/w_ic_d_24anim.svg';
]]]
aspect_ratio: 1/1
show_label: true
show_state: false
show_icon: true
styles:
icon:
- width: 70%
card:
- font-family: Sf Display
- border-radius: var(--custom-button-card-border-radius)
- -webkit-tap-highlight-color: rgba(0,0,0,0)
- transition: none
- padding: 10%
- background: 'linear-gradient(0deg, rgba(106,195,213,1) 0%, rgba(0,166,200,1) 100%)'
custom_fields:
temperature:
[top: 16.5%, right: 10%, width: 80px, height: 50px, position: absolute, letter-spacing: 0.03vw, font-size: 2.0rem]
custom_fields:
temperature: >
[[[
const temp = entity.attributes.temperature
return `${temp}°`
]]]
Thanks!!
Hello Friend,
How did you create the icons?
Is there any program /site?
thanks!