only applies to first
$hui-horizontal-stack-card$: |
#root {
justify-content: space-evenly;
}
applies to all
$hui-horizontal-stack-card:
$: |
#root {
justify-content: space-evenly;
}
https://github.com/thomasloven/lovelace-card-mod#dom-navigation
custom_fields:
motion: |
<ha-icon icon="mdi:motion-sensor" style="width: 100%; color: grey;"></ha-icon>
styles:
custom_fields:
motion:
- position: absolute
- top: 10%
- right: 10%
- width: 30%
So for example if entity attr is 20.36, you want to round that to 20.5?
stack your entities cards in a vertical stack
I’m sure it’s possible but why not just manually add custom fields to each “room”, or check how dwain did it
thanks bro
I figured it out. And yes, that’s what I meant
- platform: template
sensors:
livingroom_temperature_rd:
friendly_name: "Temperature Rounded"
unit_of_measurement: °C
value_template: >
{{ (((state_attr('climate.living_room', 'temperature') | float) * 2) | round ) / 2 }}
@Mattias_Persson complimenting your tablet interface, it’s really gorgeous and I’ve been working on it for months now, I come to the point, I created a svg icon that will be linked to the light and icon_stripled template, hoping to have the same effect as your icon_spot and shade. But it’s not like that, and I can’t figure out how to make it do what I want like you did with those two icons, thanks in advance
icon_ledstrip:
styles:
custom_fields:
icon:
- width: 100%
- margin-left: 8%
- margin-top: 3%
custom_fields:
icon: >
<svg viewBox="0 0 117 107">
<svg width="117" height="107" viewBox="0 0 117 107" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="strip led">
<path id="bordo led 1" d="M1.5 1L94 1C106.426 1 116.5 11.0736 116.5 23.5V23.5C116.5 35.9264 106.426 46 94 46L24.5 46C11.7974 46 1.5 56.2975 1.5 69V69C1.5 81.7025 11.7975 92 24.5 92H50" stroke="black"/>
<path id="bordo led 2" d="M1 16L93.7473 16C106.037 16 116 25.9629 116 38.2527V38.2527C116 50.5426 106.037 60.5055 93.7473 60.5055L23.7473 60.5055C11.1843 60.5055 1 70.6898 1 83.2527V83.2527C1 95.8157 11.1843 106 23.7473 106H49.5" stroke="black"/>
<circle id="led 19" cx="8.5" cy="8.5" r="4" fill="#C4C4C4" stroke="black"/>
<circle id="led 18" cx="36.5" cy="98.5" r="4" fill="#C4C4C4" stroke="black"/>
<circle id="led 17" cx="22.5" cy="98.5" r="4" fill="#C4C4C4" stroke="black"/>
<circle id="led 16" cx="9.5" cy="93.5" r="4" fill="#C4C4C4" stroke="black"/>
<circle id="led 15" cx="10.5" cy="58.5" r="4" fill="#C4C4C4" stroke="black"/>
<circle id="led 14" cx="22.5" cy="53.5" r="4" fill="#C4C4C4" stroke="black"/>
<circle id="led 13" cx="36.5" cy="53.5" r="4" fill="#C4C4C4" stroke="black"/>
<circle id="led 12" cx="50.5" cy="53.5" r="4" fill="#C4C4C4" stroke="black"/>
<circle id="led 11" cx="64.5" cy="53.5" r="4" fill="#C4C4C4" stroke="black"/>
<circle id="led 10" cx="78.5" cy="53.5" r="4" fill="#C4C4C4" stroke="black"/>
<circle id="led 9" cx="92.5" cy="53.5" r="4" fill="#C4C4C4" stroke="black"/>
<circle id="led 8" cx="106.5" cy="48.5" r="4" fill="#C4C4C4" stroke="black"/>
<circle id="led 7" cx="106.5" cy="13.5" r="4" fill="#C4C4C4" stroke="black"/>
<circle id="led 6" cx="92.5" cy="8.5" r="4" fill="#C4C4C4" stroke="black"/>
<circle id="led 5" cx="78.5" cy="8.5" r="4" fill="#C4C4C4" stroke="black"/>
<circle id="led 4" cx="64.5" cy="8.5" r="4" fill="#C4C4C4" stroke="black"/>
<circle id="led 3" cx="50.5" cy="8.5" r="4" fill="#C4C4C4" stroke="black"/>
<circle id="led 2" cx="36.5" cy="8.5" r="4" fill="#C4C4C4" stroke="black"/>
<circle id="led 1" cx="22.5" cy="8.5" r="4" fill="#C4C4C4" stroke="black"/>
<path id="fine led" d="M1.5 0.5L1.5 16" stroke="black"/>
<path id="presa" d="M67.5 92V107M68 92H64.5C60.634 92 57.5 95.134 57.5 99V99V99C57.5 103.142 60.8579 106.5 65 106.5H68M49.5 91.5V106.5" stroke="black"/>
<line id="filo 1" x1="49" y1="96.5" x2="58" y2="96.5" stroke="black"/>
<line id="Line 6" x1="49" y1="102.5" x2="58" y2="102.5" stroke="black"/>
</g>
</svg>
this is the button
- type: custom:button-card
entity: light.lucina_cameretta
name: Lucina Cameretta
template:
- icon_ledstrip
- light
I would like every single circle of the led to light up of the rgb reproduced but I can’t, do you by chance have a tip for me?
Thanks a lot… I’ll try 
thats greate, but how do I use it with button-card? if I do it like this, there is no icon
Hello,
i have copied all the repository’s and files to my HA, but my Lovelace shows me after rebooting the Server:
This is what I achieved:
however, what highlighted is not made of one grid area but of two grids, each one 2x2 in size. The second has an empty title (’ ') to make it appear as being part of the first grid. I don’t see how to produce a 2x3 grid…
I don’t have a solution, but here’s why it’s happening. You have to edit grid-template-*. If you add a 3-column grid, the buttons will be smaller to be able to fit into that area
This is a response for entity_picture but the same applies here.
<ha-icon icon="hue:wall-spot"></ha-icon>
You’ve “hard-coded” fill to #C4C4C4, use var(--light-color) instead
Did somebody put an picture-entity on a popup?
I tried to replicate the sidebar-information popup where I want to include some cameras.
But it gives me an error:
the code I user is this:
- type: entities
view_layout:
grid-area: unu
title: Camere supraveghere
show_header_toggle: false
card_mod:
class: header
style: |
ha-card {
margin: 0px !important;
}
entities:
- type: picture-entity
entity: camera.camera_alee_bucatarie_mainstream
camera_view: live
I moved my question to another thread. Deleted
Hi
Someone know how to REDACTED secrets ? Is it automatic, or must it be done manually?
Thanks