It it possible to have an button card that opens a popup on another dashboard?
I have multiple dashboard and on the second one I have a buttoncard with a working popup.
I want to copy only the buttons to my first one, so it stays more clean.
1 Like
Apologies if I missed it somewhere in this thread, but is there a way to disable the hidden menu/header in the Bubble theme when on a mobile device?
I assume it has something to do with this bit in the theme:
card-mod-root-yaml: |
.: |
@media only screen and (max-width: 768px) {
.header {
display: none;
opacity: 0;
}
#view {
padding-top: 0 !important;
margin-top: 0 !important;
height: calc(100vh - env(safe-area-inset-top)) !important;
}
}
I’'m just not sure what to comment out without destroying the theme lol
Ofcourse it’s possible. The 2 most simple options I can think of right now:
You can use the ! include option of YAML (provided you’re in YAML mode). Just use the code in a separate YAML file then use ! include to reference that YAML file on each dashboard. Look up how that YAML function works if you want to use this.
If you don’t use YAML mode, you can also install decluttering-card (it’s on HACS). This way you can create a decluttering template for this card and just use the decluttering-card (2 small lines of code) on each dashboard. Changing the decluttering template (where this card is configured) changes the code for everywhere you use it. Look up decluttering-card to figure out how to use it (or visit the thread on this forum).
There most likely are other ways, but these are the options I use a lot to prevent copy/pasting a lot of code.
1 Like
Did not know the !include could be used in this way. I only use it in configuration.yaml, not paying attention to the possibilities. Will investigate.
I use declutterring card a lot. Would love if it could declutter between different dashboard, and not only in one dashboard. However good idea and will solve most challenges
You can combine decluttering with !include 
I have a YAML file called decluttering-templates.yaml which has all the templates and refer to that on each dashboard by simply using the !include on the top of each dashboard. Like this.
decluttering_templates: !include templates/decluttering-card-templates.yaml
This way I just have one file containing all decluttering-card templates, and all dashboards use it. I do the same for custom:button-card templates and numerous other elements I want to duplicate across dashboards, like media players.
2 Likes
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
1 Like
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;
}
1 Like