Yes just add width and height to entity _picture under styles
styles:
card:
- padding: 5px
- border: 0px
grid:
- grid-template-areas: '"n i"'
- grid-template-columns: 3fr 1fr
entity_picture:
- height: 10px
- width: 20px
Thank you!!!
Happy to assist!
Here is an odd one. I have a button I want to use to select a preset of some lights in my house. So basically I need to use call service to set multiple select with a bunch of options… but if that preset is enabled when the button is pressed I actually want it to call light.turn_off on the main light…
- type: custom:button-card
entity: select.parker_wled_preset
name: Reading
icon: mdi:book-open-page-variant
tap_action:
action: call-service
service: |
[[[
if (entity.state == "Reading") return 'light.turn_off';
return 'select.select_option';
]]]
target:
entity_id: |
[[[
if (entity.state == "Reading") return 'light.parker_wled_master;
return 'select.parker_wled_preset';
]]]
data:
option: "Reading"
Something like this. But it is complaining that option is present for light.turn_off. So basically I need no data in one case and some data in the other. That’s what I’m struggling with. Any help appreciated.
Having some trouble with this. Is it possible to change the opacity of just the background image from " - background: url(‘/local/background/MasterBW.JPG’)"
Using “- opacity: 0.7” changes the opacity for the entire card and all the icons/text/entities I have layered over the top.
I seem to be able to adjust the opacity if I use an RGBA value for background. Can something be used here for an image?
cards:
- type: custom:button-card
name: Master
icon: mdi:bed-king-outline
entity: none
styles:
card:
- padding: 10px 10px 10px 10px
- height: 132px
- background: url('/local/background/MasterBW.JPG') #change this?
- background-size: cover
- opacity: 0.7 #rather than this?
I’m using the code below to display a timer label in a button card (taken from this post).
The “standard” template used is the one Keith shared at the start of this post.
Everything works well, but I can’t seem to control the size of the timer label - I would like to make it smaller.
Any ideas how to achieve this?
- entity: light.wiz_dimmable_white_b0f95a
name: Loo
icon: mdi:dome-light
template: standard
type: custom:button-card
custom_fields:
timer:
card:
type: custom:button-card
entity: timer.bathroom_lutz_light_timer
tap_action: none
show_state: true
show_name: false
show_icon: false
style: |
ha-card.button-card-main {
font-size: 9px !important;
}
styles:
grid:
- position: relative
custom_fields:
timer:
- filter: |
[[[
if (states['timer.bathroom_lutz_light_timer'].state == 'active')
return "opacity(70%)";
return "opacity(0%)";
]]]
- border-radius: 0%
- position: absolute
- left: 12%
- top: 65%
- height: 10px
- width: 60px
You need another set of card settings on the timer card. This should help you understand how to adjust your card
entity: light.wiz_dimmable_white_b0f95a
icon: mdi:wall-sconce-flat
name: Loo
type: custom:button-card
custom_fields:
timer:
card:
type: custom:button-card
entity: timer.bathroom_lutz_light_timer
tap_action: none
show_state: true
show_name: false
show_icon: false
styles:
card:
- color: red
- font-size: 20px
- right: 220px
- top: 0px
show_state: false
show_name: false
show_icon: true
Thanks a lot Jay! That works fine, but has one side effect which I would like to avoid - the timer card reduces the space available for the icon (see “LED Strip” button in screenshot). Is there any way to have the timer card as “overlay” on top of the button with the light entity?
Can you post the entire card so I can get the spacing correct and code indentions correct?
We can place them anywhere in the card. The overlay won’t be an issue.
Thanks Jay!
Templates used for buttons (standard and container):
button_card_templates:
standard:
color_type: icon
color: orange
state:
- value: 'off'
color: black
- value: 'on'
color: orange
size: 50%
hold_action:
action: more-info
styles:
grid:
- position: relative
card:
- padding: 0.2em
- '--mdc-ripple-color': orange
- '--mdc-ripple-press-opacity': 0.3
- background-color: rgb(245, 245, 245)
icon:
- opacity: 1
name:
- font-size: 0.65em
- white-space: normal
state:
- font-size: 0.65em
- white-space: normal
label:
- font-size: 0.4em
- white-space: normal
container:
color_type: label-card
color: rgb(13, 172, 244)
styles:
card:
- padding: 0
name:
- border-radius: 0.4em 0.4em 0 0
- padding: 0.1em
- width: 100%
- font-weight: bold
- font-size: 0.8em
grid:
- grid-template-areas: '"i" "n" "buttons"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
custom_fields:
buttons:
- background-color: rgb(255,255,255)
- margin: 0
- padding: 0.3em
Entire card:
type: vertical-stack
cards:
- type: custom:button-card
template: container
name: Outside
custom_fields:
buttons:
card:
type: horizontal-stack
cards:
- entity: switch.entrance_light_switch
name: Entrance
variables:
timer_var: timer.outside_light_timer
template:
- standard
icon: mdi:light-flood-down
type: custom:button-card
- entity: switch.shed_light_1_switch
name: Shed 1
variables:
timer_var: timer.shed_lights_timer
template:
- standard
icon: mdi:lightbulb-fluorescent-tube
type: custom:button-card
- entity: switch.shed_light_2_switch
name: Shed 2
variables:
timer_var: timer.shed_lights_timer
template:
- standard
icon: mdi:lightbulb-fluorescent-tube
type: custom:button-card
- entity: switch.bbq_light_switch
name: BBQ
template: standard
icon: mdi:light-flood-down
type: custom:button-card
- entity: switch.deck_lights_switch
name: Deck
template: standard
icon: mdi:wall-sconce-round
type: custom:button-card
- type: custom:button-card
template: container
name: Kitchen
custom_fields:
buttons:
card:
type: horizontal-stack
cards:
- entity: light.kitchen_vidjay
name: Vidjay
template: standard
icon: mdi:table-column
type: custom:button-card
- entity: switch.kitchen_dining_lights_switch
name: Globes
template: standard
icon: mdi:globe-light
type: custom:button-card
- entity: switch.kitchen_cupboard_light_switch
name: Cupboard
template: standard
icon: mdi:lightbulb-fluorescent-tube
type: custom:button-card
- entity: switch.kitchen_ceiling_light_switch
template: standard
name: Ceiling
icon: mdi:led-strip
type: custom:button-card
- entity: light.tradfri_bulb_e27_white_14
template: standard
name: Hallway
icon: mdi:ceiling-light
type: custom:button-card
- type: custom:button-card
template: container
name: Lounge
custom_fields:
buttons:
card:
type: horizontal-stack
cards:
- entity: light.loung_fireplace_light_switch
name: Fireplace
template: standard
icon: mdi:wall-sconce-round
type: custom:button-card
- entity: switch.lounge_led_downlights_switch
name: Spotlights
template: standard
icon: mdi:spotlight-beam
type: custom:button-card
- entity: switch.lounge_fan_switch
name: Fan Light
template: standard
icon: mdi:ceiling-fan-light
type: custom:button-card
- entity: switch.lounge_ceiling_light_switch
template: standard
name: Ceiling
icon: mdi:vanity-light
type: custom:button-card
- type: custom:button-card
color_type: blank-card
- type: custom:button-card
template: container
name: Bedroom
custom_fields:
buttons:
card:
type: horizontal-stack
cards:
- entity: light.tradfri_bulb_e27_white_01
name: Nightlight
template: standard
icon: mdi:desk-lamp
type: custom:button-card
- entity: light.bedroom_fan_light
name: Fan
icon: mdi:ceiling-fan-light
template: standard
type: custom:button-card
- entity: light.lenovo_led_strip_01
name: Bed
template: standard
icon: mdi:bed
type: custom:button-card
- type: custom:button-card
color_type: blank-card
- type: custom:button-card
color_type: blank-card
- type: custom:button-card
template: container
name: Study Lutz
custom_fields:
buttons:
card:
type: horizontal-stack
cards:
- entity: light.tp_link_power_strip_71cf_plug_1
name: Vidjay
template: standard
icon: mdi:table-column
type: custom:button-card
- entity: light.study_lutz_ikea_hektar_floodlight
name: Hektar
template: standard
icon: mdi:floor-lamp-dual
type: custom:button-card
- entity: light.study_lutz_monitor_backlight
name: Monitor
template: standard
icon: mdi:monitor
type: custom:button-card
- entity: light.tradfri_bulb_e27_white_13
template: standard
name: Desk
icon: mdi:desk-lamp
type: custom:button-card
- entity: light.study_lutz_fan_light
template: standard
name: Ceiling
icon: mdi:ceiling-fan-light
type: custom:button-card
- type: custom:button-card
template: container
name: Study & Ensuite Ulrike
custom_fields:
buttons:
card:
type: horizontal-stack
cards:
- entity: switch.study_ulrike_fan_switch
template: standard
name: Ceiling
icon: mdi:ceiling-fan-light
type: custom:button-card
- type: custom:button-card
color_type: blank-card
- type: custom:button-card
color_type: blank-card
- entity: switch.bathroom_ulrike_light_switch
name: Mirror
template: standard
icon: mdi:wall-sconce-flat
type: custom:button-card
- type: custom:button-card
color_type: blank-card
- type: custom:button-card
template: container
name: Bathroom Lutz / Hallway
custom_fields:
buttons:
card:
type: horizontal-stack
cards:
- entity: switch.bathroom_lutz_light_switch
name: Mirror
template:
- standard
icon: mdi:wall-sconce-flat
type: custom:button-card
custom_fields:
timer:
card:
type: custom:button-card
entity: timer.bathroom_lutz_light_timer
tap_action: none
show_state: true
show_name: false
show_icon: false
style: |
ha-card.button-card-main {
font-size: 9px !important;
}
styles:
grid:
- position: relative
custom_fields:
timer:
- filter: |
[[[
if (states['timer.bathroom_lutz_light_timer'].state == 'active')
return "opacity(70%)";
return "opacity(0%)";
]]]
- border-radius: 0%
- position: absolute
- left: 12%
- top: 65%
- height: 10px
- width: 60px
- font-size: 10
- entity: light.wiz_dimmable_white_b0f95a
name: Loo
icon: mdi:dome-light
template: standard
type: custom:button-card
custom_fields:
timer:
card:
type: custom:button-card
entity: timer.bathroom_lutz_light_timer
tap_action: none
show_state: true
show_name: false
show_icon: false
style: |
ha-card.button-card-main {
font-size: 9px !important;
}
styles:
grid:
- position: relative
custom_fields:
timer:
- filter: |
[[[
if (states['timer.bathroom_lutz_light_timer'].state == 'active')
return "opacity(70%)";
return "opacity(0%)";
]]]
- border-radius: 0%
- position: absolute
- left: 12%
- top: 65%
- height: 10px
- width: 60px
- entity: switch.hallway_2_light_switch
name: Ceiling
template: standard
icon: mdi:dome-light
type: custom:button-card
- entity: light.wiz_rgbww_tunable_a60cbb
name: LED Strip
icon: mdi:led-strip
template: standard
type: custom:button-card
custom_fields:
timer:
card:
type: custom:button-card
entity: timer.bathroom_lutz_light_timer
tap_action: none
show_state: true
show_name: false
show_icon: false
styles:
card:
- color: red
- font-size: 10px
- right: 0px
- top: 00px
- type: custom:button-card
color_type: blank-card
You can use the z-index setting on button cards so that will allow the overlay you asked about.
Thanks for pointing in that direction but this seems to be above my (current) CSS skills - I have no idea where to place the the z-index values to display the timer button card on top of the entity button card.
I can work on the card and explain what I changed. Just need a day
That would be awesome, thanks Jay!
I used custom-stack in card to clean it up.
type: custom:stack-in-card
cards:
- type: custom:button-card
name: Bathroom Lutz / Hallway
card_mod:
style: |
ha-card{
border: none;
- type: horizontal-stack
cards:
- entity: switch.bathroom_lutz_light_switch
name: Mirror
icon: mdi:wall-sconce-flat-outline
type: custom:button-card
size: 3.3em
show_name: false
custom_fields:
timer:
card:
type: custom:button-card
entity: timer.test
tap_action: none
show_state: true
show_name: false
show_icon: false
styles:
card:
- color: black
- font-size: 12px
- right: '-10px'
- top: 4px
- border: none
- font-weight: bold
styles:
grid:
- position: relative
card:
- height: 100%
icon:
- top: '-10px'
custom_fields:
timer:
- filter: |
[[[
if (states['timer.test'].state == 'active')
return "opacity(70%)";
return "opacity(0%)";
]]]
- border-radius: 0%
- position: absolute
- left: 12%
- top: 65%
- height: 10px
- width: 60px
- font-size: 10
- entity: light.wiz_dimmable_white_b0f95a
name: Loo
icon: mdi:dome-light
type: custom:button-card
custom_fields:
timer:
card:
type: custom:button-card
entity: timer.bathroom_lutz_light_timer
tap_action: none
show_state: true
show_name: false
show_icon: false
style: |
ha-card.button-card-main {
font-size: 9px !important;
}
styles:
grid:
- position: relative
custom_fields:
timer:
- filter: |
[[[
if (states['timer.test'].state == 'active')
return "opacity(70%)";
return "opacity(0%)";
]]]
- border-radius: 0%
- position: absolute
- left: 12%
- top: 65%
- height: 10px
- width: 60px
- entity: switch.hallway_2_light_switch
name: Ceiling
icon: mdi:dome-light
type: custom:button-card
- entity: light.wiz_rgbww_tunable_a60cbb
name: LED Strip
icon: mdi:led-strip
type: custom:button-card
card_mod:
style: |
ha-card{
padding: 5px;
@amplitur You’ll have to swap out my entities for yours and we can adjust styling from the code I just posted. Let me know…
@LiQuid_cOOled , perfect! That’s exactly how I wanted to place the timer.
When I find sufficient spare time I may be able to figure out why and how this works, until then I am very happy that it does 
Do you need assistance with the Dome Light too?
No, I will be able to follow the example of the Mirror light. Thanks again!
Perfect…card will look great whem you’re done!
