Thank you for sharing this! It’s great to see how you’ve leveraged different cards to build a useful interface. I’ve been adapting it to my needs, but am struggling with the CSS positioning. Aside from the CSS documentation, is there a resource you could share to help me understand how you’re using that?
Would you mind sharing your code for the graph in the sidebar? I can’t seem to get mine to line up properly.
I don’t have any particular resources. What are you struggling with?
Top is the amount to push the element from the top and left is the amount from the left side.
top: 50% left: 50% = dead center on the page.
top: 90% left: 90% = somewhere in the bottom right corner.
I think I’m struggling with that concept and the nesting of cards. I’m trying to replicate the swipe card you have under Media, but where your Lampor buttons are. I figured if I used the position of the Badrum button it would all line up, but it doesn’t. Does that make sense?
Yeah, the “position anchor” is determined by the center of the element. As they differ in size they won’t line up with the same percentage. Just nudge it little by little until they line up.
Thank you that’s helpful. It’s been a long time since I’ve had to mess with CSS so am a little rusty.
If anyone wants to use lovelace-animated-background with picture-elements.
- type: picture-elements
image: /local/uibg.png
style:
.: |
ha-card {
background: none;
backdrop-filter: brightness(20%) contrast(90%) blur(1.5em);
}
"#root > hui-image":
$: |
#image {
opacity: 0;
}
3 Likes
- action: none
entities:
- color: '#385581'
entity: sensor.buienradar_feel_temperature
- color: green
entity: sensor.heizkorper_wohnzimmer
group: false
points_per_hour: 15
line_width: 3
hour24: true
hours_to_show: 1.5
show:
fill: fade
icon: false
name: false
state: false
name_adaptive_color: true
labels: hover
legend: false
style:
top: 93%
left: 10.5%
width: 22%
--ha-card-background: none
--ha-card-box-shadow: none
--primary-text-color: rgba(255, 255, 255, 0.9)
font-family: SF Display
font-size: 1.6vw
font-weight: 300
letter-spacing: 0.06vw
line-height: 2.05vw
opacity: 0.75
type: custom:mini-graph-cardLove your work @Mattias_Persson! Your ui and repo is a great inspiration!
I was wondering about the svg icons you are using for Apple TV for example…:
icon: &icon_apple_tv >
<svg viewBox="0 0 50 50"><path d="M25.2 49.7l-13.7-.1c-2.4 0-4.6-.8-6.5-2.2-2-1.6-3.6-3.6-4.3-6.2-.2-1-.2-1.9-.3-3V11.5C.5 7.9 1.9 5 4.8 2.7 6.2 1.6 7.8.8 9.6.5c.5-.1.9-.1 1.4-.1L27.5.3l10.9.1c2.6 0 4.8.8 6.7 2.4 2.1 1.7 3.7 3.9 4.2 6.6l.2 2.4.1 20.5-.1 6.7c-.1 2.2-.9 4.2-2.2 5.9-1.7 2.2-4 3.8-6.8 4.4-.6.1-1.2.2-1.9.2-.1.1-13.4.2-13.4.2zm-4-27.8c-.9-1.2-2.2-1.6-3.7-1.2-.4.1-.8.2-1.2.4-.3.1-.6.1-.8 0-.4-.1-.8-.3-1.2-.4-.3-.1-.7-.1-1-.1-1.5.2-2.4 1.1-3 2.6-.4 1.1-.3 2.2 0 3.5.4 1.5 1 2.9 2.1 4 .5.6 1.2.9 2 .6 1.1-.5 2.2-.5 3.4 0 .8.3 1.5 0 2.1-.6.7-.8 1.1-1.8 1.6-2.8v-.2c-1-.6-1.7-1.4-1.8-2.7-.2-1.4.5-2.4 1.5-3.1zm9.9-1.4c.1.2.1.3.1.4l3.6 9.5c.1.3.3.4.6.4h.7c.6 0 .6 0 .9-.6l3.7-9.4c.1-.1.1-.3.2-.5H39l-2.9 8.3-3.1-8.3-1.9.2zM27.3 18l-1.3.4c-.5.2-.5.2-.6.7v1.4h-1.6l.1 1.4h1.5v5c0 .7.1 1.4.2 2.1.1.5.3 1 .8 1.4.8.6 2.6.7 3.5.2l-.1-1.2h-1.3c-.5 0-.9-.3-1-.8-.1-.3-.2-.6-.2-1v-5.8H30c0-.5.1-1 0-1.4h-2.7V18zm-8.8-.9c-1.9.3-3 2-2.7 3.2 1.4.2 2.9-1.7 2.7-3.2z"/></svg>
How does that work? How can i find other icons in the same style and use them like this?
Button card custom field that supports html rendering. I created the icons with illustrator and passed them through nano. If you save any svg file from the web you can open it with a text editor to copy the path data.
6 Likes
Just what i needed! Thanks!
Thanks so much! With your trick what seemed impossible suddenly becomes childsplay, just made this svg icon (printscreen from my button):
Do you mind sharing the Sonos logo?
Just to save me some time 
Sonos logo:
viewBox="0 0 50 50"><path d="M25.2,49.6l-13.65-.1a10.81,10.81,0,0,1-6.47-2.19A11.86,11.86,0,0,1,.8,41.13a27.31,27.31,0,0,1-.3-3V11.55A11,11,0,0,1,4.88,2.79,10.63,10.63,0,0,1,9.66.6a6.6,6.6,0,0,1,1.4-.1L27.49.4,38.35.5A10,10,0,0,1,45,2.89,11.11,11.11,0,0,1,49.2,9.46l.2,2.39.1,20.42-.1,6.67a10.42,10.42,0,0,1-2.19,5.88,11.58,11.58,0,0,1-6.77,4.38,11.08,11.08,0,0,1-1.9.2C38.45,49.5,25.2,49.6,25.2,49.6Zm2.23-23.94-5.27-4.94V29h1.57v-4.6L29,29.36V21.05H27.43ZM15.2,20.61A4.31,4.31,0,0,0,10.82,25a4.46,4.46,0,0,0,4.38,4.38,4.38,4.38,0,1,0,0-8.75m0,7.18A2.81,2.81,0,1,1,18,25a2.78,2.78,0,0,1-2.81,2.81M8.13,25a5.45,5.45,0,0,0-1.79-.78c-1.57-.45-1.57-.9-1.57-1.13,0-.44.56-.89,1.34-.89a3,3,0,0,1,1.46.45l.11.11,1.24-.9-.11-.11a3.86,3.86,0,0,0-2.7-1.12A3.45,3.45,0,0,0,4,21.28a2.24,2.24,0,0,0,0,3.59,5.42,5.42,0,0,0,1.8.79c1.57.44,1.57.89,1.57,1.12,0,.45-.56.9-1.35.9a3.24,3.24,0,0,1-1.46-.45l-.11-.12L3.19,28l.12.11A3.84,3.84,0,0,0,6,29.25a3.43,3.43,0,0,0,2.13-.68A2.34,2.34,0,0,0,9,26.78a2.53,2.53,0,0,0-.9-1.8M36,20.61A4.3,4.3,0,0,0,31.59,25,4.38,4.38,0,0,0,36,29.36,4.32,4.32,0,0,0,40.34,25,4.38,4.38,0,0,0,36,20.61m0,7.18A2.81,2.81,0,1,1,38.77,25,2.86,2.86,0,0,1,36,27.79M43,24.87a5.42,5.42,0,0,0,1.8.79c1.57.44,1.57.89,1.57,1.12,0,.45-.56.9-1.35.9a3.24,3.24,0,0,1-1.46-.45h-.11l-1.23.89.11.12a3.85,3.85,0,0,0,2.69,1.12,3.49,3.49,0,0,0,2.13-.67,2.25,2.25,0,0,0,0-3.6,5.36,5.36,0,0,0-1.79-.78c-1.57-.45-1.57-.9-1.57-1.12,0-.45.56-.9,1.34-.9a3.15,3.15,0,0,1,1.46.45l.12.11L48,22l-.11-.11a3.86,3.86,0,0,0-2.7-1.12,3.45,3.45,0,0,0-2.13.67,2.35,2.35,0,0,0-.9,1.8,1.67,1.67,0,0,0,.9,1.68" transform="translate(-0.5 -0.4)"/></svg>```
6 Likes
ha, though copying this might indeed save some time, I’d be very interested in what is actually happening here, and how to do so myself, for other logo’s…
do you have a pointer to some explanation, or could elaborate yourself please?
@Mariusthvdb check this post from @Mattias_Persson he mentiones the process.
So basically you can take any svg file edit it to your preference and size required, export and open in notepad to get this “code”.
Hello @Mattias_Persson,
first of all I would like to thank you very much for your great work and especially for supporting us here with our questions. Really very commendable!
Since a short time I try to be inspired by your design.
I have made some progress now, but I need your advice regarding the choice of font.
In your yaml file you have modified the style for the element Light Popup Card as follows:
#brightnessValue {
color: rgba(255, 255, 255, 0.7); margin: -0.8em 0 0.7em 0; font-size: 1.9em; font-weight: 400;
font-family: SF Display; letter-spacing: 0.04em; text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2); }
This works fine for me, too. But I also use the Switch Popup Card, the Media Player Popup Card and also Cover Popup Card. (https://github.com/DBuit?tab=repositories)
However, I have not found a way to change the font family of these plugins. I know, actually I should ask the author of these plugins. But unfortunately I haven’t got an answer from him for weeks. Do you have a solution?
Many thanks.
I use chrome devtools. So, right click on an element and inspect. When you find your tag you can copy the selector. This time it was easy because the element has an id brightnessValue. If it didn’t have the id or class it would be something like div > div > h4.
Then use card-mod to inject the css.
style: |
#brightnessValue {
font-family: SF Display;
color: red;
}
The hard part is when you drill down too far you might encounter #shadow-root. So here the first selector is #root > hui-element > hui-markdown-card then $ to enter shadow root and then continue with next selector.
# remove padding from markdown-card inside picture elements
"#root > hui-element > hui-markdown-card":
$: |
ha-card > ha-markdown {padding: 0 !important;}
11 Likes