Have you tried placing this card at the last position on your view?
1 Like
Thanks for taking the time and effort to reply - much appreciated. I’ll try those items out.
Thanks - I’ll try that too.
Hi,
Would like to know how to change color by using conditioning state like :
type: custom:bubble-card
card_type: button
button_type: state
card_layout: large-2-rows
name: XxX
entity: person.XxX
icon: mdi:human-male
show_state: true
styles: |
.bubble-button-card-container {
background-color: ${state === 'home' ? 'green' : 'red'} !important;
}
.bubble-sub-button-1 {
display: ${hass.states['sensor._wifi_connection'].state === 'connected' ? '{hass.states['sensor._wifi_connection'].state' : ${hass.states['sensor._wifi_connection'].state === 'not connected' ? 'none'} !important;
}
.bubble-sub-button-2 {
background-color: ${hass.states['person.XxX'].state === 'home' ? 'green' : 'red'} !important;
}
.bubble-sub-button-3 {
background-color: ${hass.states['person.XxX'].state === 'home' ? 'green' : 'red'} !important;
}
.bubble-sub-button-4 {
background-color: ${hass.states['person.XxX'].state === 'home' ? 'green' : 'red'} !important;
}
sub_button:
- entity: sensor._wifi_connection
icon: mdi:wifi
show_background: false
show_state: true
tap_action:
action: more-info
show_last_changed: true
show_attribute: false
show_name: false
- entity: sensor._battery_level
icon: mdi:battery
show_background: false
show_state: true
tap_action:
action: more-info
- entity: sensor._next_alarm
icon: mdi:alarm
show_background: false
show_state: true
tap_action:
action: more-info
- entity: sensor.home__distance
icon: mdi:map-marker-distance
show_background: false
show_state: true
tap_action:
action: more-info
Hi Cloos,
what theme are you using. Can you share it with us?
looks fantastic 
I tried all the options suggested - putting the card at the very bottom of the dashboard yaml worked apart from the horizontal button stack which still appears on top and not under the overlay. I did try this but no idea if the z-index is supported in the horizontal button stack? - it didn’t work and I tried various z-indicies.
- type: custom:bubble-card
transform: none !important
z-index: 999 !important
card_type: horizontal-buttons-stack
1_link: '#lights'
1_name: ''
1_icon: hue:bulb-classic
1_entity: null
hide_gradient: true
is_sidebar_hidden: false
2_name: ''
2_icon: mdi:cctv
2_link: '#cameras'
3_link: '#weather'
3_name: ''
3_icon: mdi:weather-hail
5_link: '#alarm'
5_icon: mdi:alarm
rise_animation: true
4_name: ''
4_icon: mdi:music
4_link: '#music'
card_mod:
style: |
.bubble-background {
background-color: transparent;
}
many thanks.
Hi, this my own theme, it is available on GitHub here:
2 Likes
Take a look at this section in the documentation, this is absolutely not how you can do this 
Read the “Tip” part to understand what you need to change in the CSS.
I’m not sure to understand, your YAML should works, isn’t it?
Thanks - I’d not seen that section in the docs - really very useful
So I see that the horizontal button card is set with z-index: 6 any idea why my element with a higher z-index won’t appear over the top? I’ve tried the rediculously high numbers and just 7 etc to be over the top of the horizontal button stack. Is there anything else going on that would break the stacking order?
Thanks.
So your card is at the very last position? After your horizontal buttons stack?
If yes it might be because of the CSS positioning of your card but I’m not sure.
Yes, this is the full dashboard code - the ‘overlay’ is at the very bottom. The rest of the elements play nicely, it’s just the horizontal buttons stack that resolutely shows on top.
kiosk_mode:
user_settings:
- users:
- Paul
ignore_entity_settings: true
entity_settings:
- entity:
input_boolean.kiosk_hide_header_and_sidebar: 'on'
hide_sidebar: true
hide_header: true
- entity:
input_boolean.kiosk_hide_header_and_sidebar: 'off'
hide_sidebar: false
hide_header: false
views:
- title: Home
path: bedside-table
background: >-
center / cover no-repeat fixed
url('/local/images/backgrounds/leaf-darker-background.png')
type: custom:vertical-layout
cards:
- type: custom:digital-clock
dateFormat: cccc dd LLLL yyyy
timeFormat: HH:mm
card_mod:
style: |
ha-card {
background-color: transparent;
border-color: transparent;
box-shadow: none;
}
span.first-line
{
font-size: 10em;
margin-top:-5px;
margin-bottom:10px;
}
span.second-line
{
font-size: 2em;
margin-bottom:5px;
}
- show_current: true
show_forecast: false
type: weather-forecast
entity: weather.forecast_home
forecast_type: daily
card_mod:
style: |
ha-card {
background-color: transparent;
border-color: transparent;
box-shadow: none;
}
- type: conditional
conditions:
- condition: state
entity: binary_sensor.kitchen_sink_water_leak_moisture
state: 'on'
card:
type: custom:mushroom-template-card
primary: Kitchen sink leak detected!
secondary: null
icon: mdi:water
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
badge_color: white
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: transparent !important;
}
.: |
ha-state-icon {
color: white;
--icon-symbol-size: 40px;
}
ha-card {
background-color: #732629;
--card-primary-color: white;
--card-secondary-color: white;
}
- type: conditional
conditions:
- condition: state
entity: input_boolean.front_door_letterbox_opened
state: 'on'
card:
type: custom:mushroom-template-card
primary: Something posted through letterbox
secondary: null
icon: mdi:email
tap_action:
action: call-service
service: input_boolean.turn_off
target:
entity_id: input_boolean.front_door_letterbox_opened
hold_action:
action: none
double_tap_action:
action: none
badge_color: white
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: transparent !important;
}
.: |
ha-state-icon {
color: white;
--icon-symbol-size: 40px;
}
ha-card {
background-color: #e3af46;
--card-primary-color: white;
--card-secondary-color: white;
}
- square: false
type: grid
cards:
- type: custom:mushroom-template-card
primary: Paul's Alarm
icon: mdi:alarm
entity: input_boolean.paul_s_alarm_clock_on_off
tap_action:
action: call-service
service: input_boolean.toggle
target:
entity_id: input_boolean.paul_s_alarm_clock_on_off
hold_action:
action: navigate
navigation_path: '#alarm'
double_tap_action:
action: none
icon_color: >-
{{ 'light-green' if
states('input_boolean.paul_s_alarm_clock_on_off') == 'on' else
'dark-grey' }}
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--icon-symbol-size: 35px;
--icon-size: 50px;
}
.: |
ha-card {
box-shadow: none;
background-color: transparent;
border-color: transparent;
--card-primary-font-size: 1.2em;
}
- type: custom:mushroom-template-card
primary: Simon's Alarm
icon: mdi:alarm
entity: input_boolean.simon_s_alarm_clock_on_off
tap_action:
action: call-service
service: input_boolean.toggle
target:
entity_id: input_boolean.simon_s_alarm_clock_on_off
hold_action:
action: navigate
navigation_path: '#alarm'
double_tap_action:
action: none
icon_color: >-
{{ 'light-green' if
states('input_boolean.simon_s_alarm_clock_on_off') == 'on' else
'dark-grey' }}
secondary_info: none
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--icon-symbol-size: 35px;
--icon-size: 50px;
}
.: |
ha-card {
box-shadow: none;
background-color: transparent;
border-color: transparent;
--card-primary-font-size: 1.2em;
}
columns: 2
- square: false
type: grid
cards:
- type: custom:mushroom-template-card
primary: Day
secondary: Scene
icon: hue:bulb-filament
entity: scene.office_office_day
icon_color: >-
{{ 'light-green' if states('switch.office_day_stateful_scene') ==
'on' else 'dark-grey' }}
fill_container: false
card_mod:
style:
mushroom-state-info$: |
.container {
--card-primary-font-size: 18px;
--card-secondary-font-size: 13px;
}
- type: custom:mushroom-template-card
primary: Night
secondary: Scene
icon: hue:bulb-filament
entity: scene.office_office_night
icon_color: >-
{{ 'light-green' if states('switch.office_night_stateful_scene')
== 'on' else 'dark-grey' }}
card_mod:
style:
mushroom-state-info$: |
.container {
--card-primary-font-size: 18px;
--card-secondary-font-size: 13px;
}
- type: custom:mushroom-template-card
primary: Lights
secondary: 'OFF'
icon: mdi:lightbulb-group-off
entity: scene.office_lights_off
icon_color: dark-grey
card_mod:
style:
mushroom-state-info$: |
.container {
--card-primary-font-size: 18px;
--card-secondary-font-size: 13px;
}
columns: 3
- square: false
type: grid
cards:
- type: custom:bubble-card
card_type: button
button_type: slider
entity: light.bedroom_pauls_lamp
name: Paul's lamp
show_state: false
show_attribute: false
tap_action:
action: toggle
double_tap_action:
action: none
hold_action:
action: none
card_layout: large
styles: ''
- type: custom:bubble-card
card_type: button
button_type: slider
entity: light.bedroom_simons_lamp
name: Simon's lamp
show_state: false
show_attribute: false
tap_action:
action: toggle
double_tap_action:
action: none
hold_action:
action: none
card_layout: large
columns: 2
- type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
transform: none !important
hash: '#lights'
hide_backdrop: false
state: null
text: null
margin_top_desktop: 20px
margin_top_mobile: '-56px'
shadow_opacity: 20
bg_opacity: 10
bg_blur: 10
button_type: slider
name: Bedroom lighting
show_icon: true
show_name: true
close_on_click: false
background_update: false
trigger_close: false
tap_action:
action: toggle
double_tap_action:
action: none
hold_action:
action: none
entity: light.bedroom
icon: hue:bulb-group-classic-hung-3-alt
force_icon: false
show_state: true
show_last_updated: true
show_attribute: true
- type: custom:bubble-card
card_type: separator
transform: none !important
- type: custom:bubble-card
card_type: button
transform: none !important
button_type: slider
entity: light.bedroom_pauls_lamp
name: Paul's bedside lamp
show_state: true
show_last_updated: false
show_attribute: true
sub_button: []
icon: hue:bulb-classic
- type: custom:bubble-card
card_type: button
transform: none !important
button_type: slider
entity: light.bedroom_simons_lamp
name: Simon's bedside lamp
show_state: true
show_last_updated: false
show_attribute: true
sub_button: []
icon: hue:bulb-classic
- type: custom:bubble-card
card_type: button
transform: none !important
button_type: slider
name: Table lamp
show_state: true
show_last_updated: false
show_attribute: true
sub_button: []
icon: hue:bulb-classic
entity: light.bedroom_table
- type: custom:bubble-card
card_type: button
transform: none !important
button_type: slider
entity: light.bedroom_ceiling
name: Ceiling lamp
show_state: true
show_last_updated: false
show_attribute: true
sub_button: []
icon: hue:bulb-classic-hung
- type: custom:bubble-card
card_type: separator
transform: none !important
- type: custom:bubble-card
card_type: button
transform: none !important
entity: light.bedroom_fan
icon: mdi:fan
name: Fan
- type: custom:bubble-card
card_type: separator
transform: none !important
- type: custom:bubble-card
card_type: button
transform: none !important
entity: input_boolean.en_suite_auto_fan_bypass
icon: mdi:fan
name: En-Suite extract fan
- type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
transform: none !important
hash: '#cameras'
trigger_entity: input_boolean.camera_thinksmart_full_screen_popup
trigger_state: 'on'
trigger_close: true
hide_backdrop: false
state: null
text: null
margin_top_desktop: 20px
margin_top_mobile: '-56px'
shadow_opacity: 20
bg_opacity: 10
bg_blur: 10
background_update: false
- camera_view: live
type: picture-glance
transform: none !important
entities: []
camera_image: camera.192_168_0_10
tap_action:
action: none
hold_action:
action: none
- type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
transform: none !important
hash: '#weather'
show_name: false
show_icon: false
margin_top_mobile: '-56px'
hide_backdrop: true
- type: iframe
url: >-
https://embed.windy.com/embed.html?type=map&location=coordinates&metricRain=default&metricTemp=default&metricWind=default&zoom=8&overlay=radar&product=radar&level=surface&lat=51.509&lon=-1.994
aspect_ratio: 135%
transform: none !important
- type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
transform: none !important
hash: '#music'
hide_backdrop: false
state: null
text: null
margin_top_desktop: 20px
margin_top_mobile: '-56px'
shadow_opacity: 20
bg_opacity: 10
bg_blur: 10
button_type: name
'false': []
show_icon: false
scrolling_effect: false
- type: iframe
transform: none !important
url: https://music.siliconpixel.com/#/home
aspect_ratio: 140%
- type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
transform: none !important
hash: '#alarm'
margin_top_desktop: 0px
margin_top_mobile: '-57px'
- type: custom:bubble-card
card_type: separator
transform: none !important
name: Turn alarms on/off
- square: false
type: grid
cards:
- type: custom:mushroom-template-card
primary: Paul's Alarm
icon: mdi:alarm
transform: none !important
entity: input_boolean.paul_s_alarm_clock_on_off
tap_action:
action: call-service
service: input_boolean.toggle
target:
entity_id: input_boolean.paul_s_alarm_clock_on_off
hold_action:
action: navigate
navigation_path: '#alarm'
double_tap_action:
action: none
icon_color: >-
{{ 'light-green' if
states('input_boolean.paul_s_alarm_clock_on_off') == 'on' else
'dark-grey' }}
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--icon-symbol-size: 35px;
--icon-size: 50px;
}
.: |
ha-card {
box-shadow: none;
background-color: transparent;
border-color: transparent;
--card-primary-font-size: 1.2em;
}
- type: custom:mushroom-template-card
primary: Simon's Alarm
icon: mdi:alarm
transform: none !important
entity: input_boolean.simon_s_alarm_clock_on_off
tap_action:
action: call-service
service: input_boolean.toggle
target:
entity_id: input_boolean.simon_s_alarm_clock_on_off
hold_action:
action: navigate
navigation_path: '#alarm'
double_tap_action:
action: none
icon_color: >-
{{ 'light-green' if
states('input_boolean.simon_s_alarm_clock_on_off') == 'on'
else 'dark-grey' }}
secondary_info: none
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--icon-symbol-size: 35px;
--icon-size: 50px;
}
.: |
ha-card {
box-shadow: none;
background-color: transparent;
border-color: transparent;
--card-primary-font-size: 1.2em;
}
columns: 2
- type: custom:bubble-card
card_type: separator
transform: none !important
name: Set alarm times
- type: custom:time-picker-card
transform: none !important
entity: input_datetime.paul_s_alarm
hour_mode: 24
hour_step: 1
minute_step: 5
layout:
hour_mode: double
align_controls: right
name: header
embedded: true
thin: false
hide:
seconds: true
link_values: false
name: Paul's Alarm Clock
tap_action:
- service: input_boolean.toggle
metadata: {}
data: {}
target:
entity_id: input_boolean.paul_s_alarm_clock_on_off
- type: custom:time-picker-card
transform: none !important
entity: input_datetime.simon_s_alarm
hour_mode: 24
hour_step: 1
minute_step: 5
layout:
hour_mode: double
align_controls: right
name: header
embedded: true
hide:
seconds: true
- type: custom:bubble-card
card_type: horizontal-buttons-stack
1_link: '#lights'
1_name: ''
1_icon: hue:bulb-classic
1_entity: null
hide_gradient: true
is_sidebar_hidden: false
2_name: ''
2_icon: mdi:cctv
2_link: '#cameras'
3_link: '#weather'
3_name: ''
3_icon: mdi:weather-hail
5_link: '#alarm'
5_icon: mdi:alarm
rise_animation: true
4_name: ''
4_icon: mdi:music
4_link: '#music'
styles: 'z-index: 6'
- type: custom:mod-card
style: |
ha-card {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, {{ states('input_number.bedside_table_device_overlay_brightness') }}); # Use the variable here
z-index: 7 !important;
pointer-events: none; # Make overlay non-interactive
display: flex;
justify-content: center;
align-items: center;
}
ha-card > div {
pointer-events: auto; # Make the inner elements interactive
}
theme: M3-D07-DarkOliveGreen
title: Office Panel
Actually, viewing the layers in Chrome (great 3D layer visualisation), I can see that the mod-card overlay is on top but if I show internal layers, .bubble-backdrop.backdrop.is-hidden and another element shows over the top. In the stack order, the ha-card.horizontal-buttons-stack-card.type-custom-bubble-card shows under but in the visualisation, it shows on top - which is the issue. No idea how to get that to behave 
The popups are all on the top too.
Thank you @cloos and your team for all the hard work on this. Amazing. I am curious if you might consider changing the occupancy sensor and the color sensor on the horizontal button stack to allow any on/off entity, including media players, switches, and input booleans for example. I have found this card to be a perfect solution for remote control popups, where those sensors are a reference to the TV’s that are currently turned on. It does work perfectly fine coding those entities manually in yaml, but it would be nice if those fields weren’t coded as binary_sensor’s only as a selection option in the GUI.
Code
type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: '#living_room'
name: Living Room
icon: mdi:remote
entity: script.living_room_tv_power_toggle
show_state: false
show_last_changed: false
show_attribute: false
attribute: friendly_name
scrolling_effect: false
show_icon: false
force_icon: false
tap_action:
action: none
double_tap_action:
action: none
hold_action:
action: none
sub_button:
- entity: script.living_room_tv_power_toggle
icon: mdi:power
show_background: false
show_icon: true
show_last_changed: false
show_attribute: false
tap_action:
action: toggle
hold_action:
action: more-info
show_name: false
card_layout: normal
margin_top_mobile: '-56px'
bg_opacity: '40'
- type: conditional
conditions:
- condition: state
entity: media_player.living_room_tv
state: 'on'
card:
type: vertical-stack
cards:
- type: custom:gap-card
height: 3
- type: custom:android-tv-card
title: ''
keyboard_id: media_player.fire_tv_living_room
keyboard_mode: FIRE TV
slider_id: media_player.living_room_sonos
rows:
- - tv_source
- channel_up
- info
- channel_down
- - jellyfin
- youtube
- primevideo
- tv
- - volume_slider
- - touchpad
- - back
- home
- keyboard
- - rewind
- play_pause
- fast_forward
custom_actions:
slider:
range:
- 0
- 1
step: 0.01
tv_source:
icon: mdi:video-input-hdmi
tap_action:
action: call-service
service: media_player.select_source
target:
entity_id: media_player.living_room_tv
data:
source: HDMI
up:
tap_action:
action: call-service
service: script.turn_on
target:
entity_id: script.adb_fire_tv_living_room_up
data: {}
down:
tap_action:
action: call-service
service: script.turn_on
target:
entity_id: script.adb_fire_tv_living_room_down
data: {}
left:
tap_action:
action: call-service
service: script.turn_on
target:
entity_id: script.adb_fire_tv_living_room_left
data: {}
right:
tap_action:
action: call-service
service: script.turn_on
target:
entity_id: script.adb_fire_tv_living_room_right
data: {}
center:
tap_action:
action: call-service
service: script.turn_on
target:
entity_id: script.adb_fire_tv_living_room_center
data: {}
back:
tap_action:
action: call-service
service: script.turn_on
target:
entity_id: script.adb_fire_tv_living_room_back
data: {}
home:
tap_action:
action: call-service
service: script.turn_on
target:
entity_id: script.adb_fire_tv_living_room_home
data: {}
tv:
tap_action:
action: call-service
service: script.select_fire_tv_source_tv
data: {}
jellyfin:
icon: mdi:jellyfish
tap_action:
action: call-service
service: script.turn_on
target:
entity_id: script.select_fire_tv_source_jellyfin
data:
variables:
entity_id: media_player.fire_tv_living_room
primevideo:
tap_action:
action: call-service
service: script.turn_on
target:
entity_id: script.select_fire_tv_source_primevideo
data:
variables:
entity_id: media_player.fire_tv_living_room
youtube:
tap_action:
action: call-service
service: script.turn_on
target:
entity_id: script.select_fire_tv_source_youtube
data:
variables:
entity_id: media_player.fire_tv_living_room
play_pause:
tap_action:
action: call-service
service: script.turn_on
target:
entity_id: script.adb_fire_tv_living_room_play_pause
data: {}
rewind:
tap_action:
action: call-service
service: script.turn_on
target:
entity_id: script.adb_fire_tv_living_room_rw
data: {}
fast_forward:
tap_action:
action: call-service
service: script.turn_on
target:
entity_id: script.adb_fire_tv_living_room_ff
data: {}
- type: conditional
conditions:
- condition: state
entity: media_player.living_room_tv
state_not: 'on'
card:
type: vertical-stack
cards:
- type: custom:gap-card
height: 100
- type: tile
entity: script.living_room_tv_power_toggle
color: red
vertical: true
icon: mdi:power
name: Power the TV on.
hide_state: true
tap_action:
action: toggle
icon_tap_action:
action: toggle
card_mod:
style: |
ha-card {
#font-family: 'Courier New';
background-color: transparent;
box-shadow: none;
border: 0px;
--tile-color: green !important;
}
ha-tile-icon {
--mdc-icon-size: 40px;
}
This is still not the way to change the z-index, you need to target the element, here is how you can change it:
styles: |
.horizontal-buttons-stack-card {
z-index: 5 !important;
}
1 Like
Indeed, any entity type that has a last_changed time is supported (so basically every entities), I will change that in the next release 
1 Like
Just add opacity: 1 !important; to change that 
1 Like
Thanks but it doesn’t help unfortunately - the bubble card buttons and popups are still on top of everything else, no matter what z-index I use for the button stack or the mod-card. There must be something in there that’s breaking the order maybe.
How i set this at bottom?
Hi, i have some problems with the pop up card and my theme. I use the rounded theme (🟣 Rounded - Dashboard guide) and cant get the background color for the pop up in dark/light mode right.
i have it set to var(–black1) in the picture.