I don’t know if you ever found the answer yourself but I was able to do it with the following:
- type: custom:bubble-card
card_type: button
entity: lock.front_door_lock
show_state: true
button_type: switch
card_mod:
style: |
:host {
{% if is_state(config.entity, 'locked') %}
--card-mod-icon: mdi:lock;
{% else %}
--card-mod-icon: mdi:lock-open;
{% endif %}
}
Is there a way to justify the bubbles on the right side of the screen?
Also, I am a user of the Kiosk Mode … I am building my theme without the browser-mod integration. It’d be a shame if I have to load it just to hide the sidebars… Does anyone know of any other workarounds? I am using card-mod…
Thanks for this awesome frontend mod BTW … I’ll be sending you some beers
Hi and thank you a lot for the beers! 
For your question just take a look at this: ⚪ Bubble Card - A minimalist card collection for Home Assistant with a nice pop-up touch - #121 by Cloos
Oh very good, thank you for that!
My tablets are all in landscape already, I think my work around will be to copy my theme and add your code for a tablet only theme. Resolution of the fire 10 is 1920px.
Thank you,
Card mod hack worked fine for the top bar. I uninstalled kiosk-mode from HACS restarted and cleared my cache. When I enable the option in my user profile to “Always hide the sidebar” same result as with kiosk-mode. Horizontal menu shows up under the shadow.
Has anyone figured out how to shrink the size of the horizontal bubble stack? I tried a few CSS styles but nothing seemed to work
I’m trying to create a button with a an image as the icon using the following:
type: custom:bubble-card
card_type: button
entity: sensor.brayden_iphone_status
icon: /www/image/512x512b.jpg
show_state: true
When doing so the icon is blank. What am I missing?
I believe it should be:
local/image/yourpic.jpg
Instead of www/image
How are you adding your locks? I tried this but the icon is not showing
type: custom:bubble-card
card_type: button
button_type: custom
entity: lock.aqara_smart_lock_u100
show_icon: true
show_state: true
tap_action:
action: more-info
name: Lock
card_mod:
style: |
ha-card {
{% if states('lock.aqara_smart_lock_u100') == 'locked' %}
--card-mod-icon: mdi:door-closed-lock
{% else %}
--card-mod-icon: mdi:door-closed
{% endif %}
}
I tried that as well, unfortunately no luck.
What card do you use locks that works well with bubble cards? would you mind sharing a screenshot and code?
great mod
how to make the map background completely opaque?
I have an overlap
- type: custom:bubble-card
card_type: pop-up
name: "\_"
icon: mdi:chart-bubble
width_desktop: 500px
margin_top_mobile: 18px
margin_top_desktop: 20%
styles: |
#root {
opacity: 1.0;
}
I have the same issue with popup. I can see some of my cards through the popup. I’ve set opacity to 100% but doesn’t help.
Would you mind sharing the cards with the graphs? I’ve been trying to accomplish something similar but I can’t get the graphs behind the rest of the elements
Yes. Please
type: custom:stack-in-card
cards:
- type: custom:button-card
entity: sensor.termometr_kukhnia_temperature
show_icon: false
name: []
styles:
card:
- border-style: none
- box-shadow: 0px 0px 10px -9px black
custom_fields:
temp:
- filter: opacity(100%)
- justify-self: start
- margin-left: 10px
- margin-top: 20px
- padding-bottom: 10%
- font-size: 65%
graph:
- padding-top: 0%
- width: 100%
- height: 100%
- margin-bottom: '-3%'
icon:
- width: 25px
- color: auto
name:
- font-size: 90%
- font-weight: var(--mcg-title-font-weight, 500)
- justify-self: start
- margin-top: 6px
- margin-left: 90px
- opacity: 0.65
- text-align: center
grid:
- grid-template-areas: '"n n" "temp temp" "graph graph"'
- grid-template-columns: 1fr min-content
- grid-template-rows: 1fr min-content min-content min-content
custom_fields:
temp: |
[[[
return `<ha-icon
icon="mdi:thermometer"
style="width:18px; height: 18px; color:#ff8c00;">
</ha-icon><span style="font-size:120%; font-weight: 300;">
${states['sensor.termometr_kukhnia_temperature'].state}°C </span>
<ha-icon
icon="mdi:water-percent"
style="width: 18px; height: 18px; color: #3399ff;">
</ha-icon><span style="font-size:120%; font-weight: 300; text-align: center;">
${states['sensor.termometr_kukhnia_humidity'].state}%</span>`
]]]
card_mod:
style: |
ha-card {
z-index: 1;
height: 70px !important;
}
- type: custom:mini-graph-card
entities:
- entity: sensor.termometr_kukhnia_temperature
name: Temperature
color: '#ff8c00'
- entity: sensor.termometr_kukhnia_humidity
name: Humidity
color: '#3399ff'
y_axis: secondary
height: 50
hours_to_show: 24
line_width: 3
font_size: 50
animate: true
show:
name: false
icon: false
state: false
legend: false
fill: fade
card_mod:
style: |
ha-card {
position: absolute !important;
height: 100%;
width: 100%;
top: 0px;
--ha-card-border-width: 0;
}
ha-card:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(to right, var(--card-background-color) 20%, transparent);
}
- type: custom:mushroom-chips-card
chips:
- type: light
entity: light.verkhnii_svet_gostinaia
content_info: none
card_mod:
style: |
ha-card {
border: none;
box-shadow: none !important;
background: none !important;
}
alignment: end
card_mod:
style: |
ha-card {
position: absolute !important;
height: 100%;
width: 100%;
top: 0px;
z-index: 1;
}
- type: custom:mushroom-chips-card
chips:
- type: light
entity: light.svetilnik_kukhnia
content_info: none
card_mod:
style: |
ha-card {
border: none;
box-shadow: none !important;
background: none !important;
}
alignment: end
card_mod:
style: |
ha-card {
position: absolute !important;
height: 100%;
width: 95%;
top: 0px;
z-index: 1;
}
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sun.sun
icon: mdi:key
icon_color: cyan
content_info: none
tap_action:
action: url
url_path: http://google.com
card_mod:
style: |
ha-card {
border: none;
box-shadow: none !important;
background: none !important;
}
card_mod:
style: |
ha-card {
--ha-card-background: none;
--ha-card-border-width: 0;
--chip-icon-size: 1.0em;
--chip-border-width: 0;
--chip-box-shadow: none;
--chip-border: none;
--chip-spacing: none;
--chip-font-weight: normal;
position: absolute !important;
height: 100%;
width: 95%;
top: 0px;
z-index: 1;
}
thank you!
I am trying to get the tap action to toggle a light on a slider, however whatever I do it seems to just adjust the brightness, am I missing something really simple?
type: custom:bubble-card
card_type: button
button_type: slider
tap_action:
action: toggle
entity: light.bedroom_ceiling_lights
name: Ceiling Lights
icon: mdi:ceiling-light
button type should be ‘switch’ instead of ‘slider’
Try only tapping the icon.
First of all: Thanks for your work. I changed my whole layout because of your cards!
but: how can i set the default background color of the pop up cards in the theme?