noticed in the documentation 2 ways of setting opacity are used:
styles:
card:
- opacity: 0.6
and
styles:
card:
- filter: opacity(50%)
is there a preferred way? the first one works fine, didn’t notice the second before…
The second one my iphone didn’t like so much. The first one works fine though.
I’ve noticed filters reorder the layers of the css, so I use opacity when I have to. I noticed opacity made everything including icons and text transparent. So I always try to use background transparencies if I can.
yes, same here too.
please help me with another search: Id always like the signals to stick out. the lock is one of these. can we set the lock to color red for example? that way it would stick out of the buttons without a lock.
I am using the following code to style my buttons:-
dashboard_button_heater: &dashboard_button_heater
type: "custom:button-card"
show_label: true
show_name: true
show_icon: false
show_state: true
hold_action:
action: more-info
styles:
grid:
- grid-template-areas: '"l" "s" "n"'
- grid-template-columns: 1fr
- grid-template-rows: min-content min-content min-content
On Chrome for Windows the button is displaying correctly:-
label
state
name
as expected.
However, using Chrome on my iPad the button is displaying:-
name
state
label
Is this to be expected?
Probably caching issues 
Planned for the next release.
cool!, maybe exclude it from the opacity setting too? so we can have button with set opacity, but the lock still stick out?
As I said, don’t use opacity if you don’t want the card and all the items in the card to be opaque. It’s not something @RomRider does, this is a part of css. If you only want the background opaque, then you need to set the background color with an alpha channel.
was just experimenting with that indeed, following you earlier post, and some of this CSS Image Opacity / Transparency
cut it short in this case: if i’d only want the lock to stick out, id have to set styles on background, name, state and label individually…?
would have hope for the option to have the card set at opacity say 60%, and have a separate setting for the lock (or maybe any other item) to be excluded from that.
If not at all possible, think it will be doable using the new templates, and only having to set it once for all switches…?
Yes that’s exactly what you have to do.
background transparency is this field
styles:
card:
--ha-card-background: "rgba(0, 0, 0, 0.0)"
^
|
I’ve found an interesting layout challenge that I don’t know how to overcome. Leveraging the examples on the github page, I’ve created a button where text is placed on the left and the Icon is placed on the right side. As you can see from the photo below, the placement of the icon consumes the right half of the button and is centered within that space. Depending on the size of the button, this limits how much text can be displayed to the left of the icon and leaves quite a bit of unused space to the right of the icon.
Is there a way to tweak the icon’s placement such that it can be “right justified” within the button? (I’m not sure what is the proper term for this type of alignment.) Also, is it possible to increase the available space for text within a button? Maybe via layering within the button or perhaps as a result of moving the icon over?
I would like to create remote control for my tv, receiver, set top box and one android tv.
What is the best and easy way to create it so that it can be used from a single page.
I am using Lovelace UI
Please guide
I want some thing like this,
Which gives me what I wanted
There is a typo, you got two times left on your remote 
I am not surprised, copy/paste can be annoying! Also, I like to go in circles
Don’t worry, I know the feeling 
hi
what is wrong with my code?
conditional format does not work:-(
cards:
- type: 'custom:button-card'
template: header_marcelo
name: INFORMAÇÃO
- cards:
- entity: sensor.riscoincendio
name: RISCO DE INCÊNDIO
show_label: true
show_state: true
size: 70%
state:
- value: 'REDUZIDO'
color: green
template: cartao
type: 'custom:button-card'
- entity: binary_sensor.meteoalarm
dbltap_action:
action: more-info
name: ALERTA METEO
show_label: true
show_state: true
size: 70%
state:
- value: 'Seguro'
color: green
template: cartao
tap_action:
action: toggle
type: 'custom:button-card'
type: horizontal-stack
type: vertical-stack
binary sensors are on or off, none of them will output a state of ‘Seguro’.