My guess would be there is some default padding being applied to the left side. Maybe set padding to 0 for each element and see what happens?
You saved my day =D
I didn’t have padding anywhere, but I had another template with some margin-left.
Thank you!
1 Like
Can someone help mi with this template:
'[[[ if (states["sensor." + variables.var_sensor_name + "_water_temperature"].state > 25) return "red"; ]]]'
Template si working.
Do you guys know if there is a way to color only the border of the name and label texts?
Thanks.
1 Like
type: custom:button-card
name: Test
styles:
name:
- border: 12px dashed green
- padding: 10px
type: custom:button-card
name: Test
styles:
name:
- border: 5px dotted rgba(250, 0, 0, 0.5)
- padding: 10px
type: custom:button-card
name: Test
styles:
name:
- border: 1px solid rgba(250, 0, 0, 0.5)
- padding: 10px
type: custom:button-card
name: Test
styles:
name:
- border: 5px inset rgba(255, 200, 0, 0.9)
- padding: 10px
Do the same for label:
2 Likes
Thank you for your reply!
Unfortunately that isn’t what I was searching for.
What I would to color is the text border and not his “box”.
is that possible?
Thank you again 
Have you tried something like this?
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black
or this?
-webkit-text-stroke: 1px black
Yes! That’s exactly what I’m trying to do.
I also want to explain my “problem”.
I have a Media Card, which changes the background on the bases of the current media.
I decided to use a white text, which is visible with the most of the background color… except with a white background of course.
I’m searcing a solution to make it better visible, see the picture below.
Ok, here’s the full example:
type: custom:button-card
name: Test
styles:
name:
- '-webkit-text-stroke': 1px black
- '-webkit-text-fill-color': transparent
- font-size: 40px
- font-weight: 700
Thank you! That’s exactly what I needed.
Thank you! I also tried the text-shadow option and it’s really usefull
1 Like
Don’t hate me 
Is there a way to:
- Use HTML/RGBA colors instead of color name;
- Do the same thing with the icon.
Thank you again!
Mmh… at least you could try with text-shadow:
type: custom:button-card
icon: mdi:cat
size: 10rem
name: Test
styles:
name:
- '-webkit-text-stroke': 1px rgba(0, 0, 0, 0.9)
- '-webkit-text-fill-color': transparent
- font-size: 40px
- font-weight: 700
icon:
- filter: drop-shadow(0 0 0.5rem rgba(0, 0, 0, 0.4)
- color: rgba(255, 255, 255, 1)
3 Likes
Thanks m8!
A new button-card which show a popup with map card and link which open maps (or waze) app on phone :
Code in this post :
Hello,
is there any way to change grid's grid-template-areas based on state ?
I tried something like this, but it doesn’t work 
my-template:
[... "options" and "scenes" are defined here]
styles:
grid:
- grid-template-areas: |
"i ."
"n ."
"options scenes"
- grid-template-columns: 80% 20%
- grid-template-rows: 1fr min-content min-content
state:
- styles:
grid:
- grid-template-areas: |
"i scenes"
"n ."
value: 'off'
Thanks !
Thomas
I’m using templating on grid-template-rows and it’s working fine.
The following should do the job:
styles:
…
…
grid:
- grid-template-areas: |
[[[ if (entity.state == 'on') return '"item1" "item2"'; return '"item1" "item2" "item3"' ]]]
P.S.: Don’t forget to adjust your grid-template-rows in this case.
1 Like
Is it possible to set opacity to var(--button-card-light-color) ?
What is the source of the variable?