Thanks a lot
The bubble card i use at the top:
type: custom:bubble-card
card_type: separator
styles: |-
.bubble-line {
background: var(--primary-text-color);
opacity: 0;
}
* {
font-size: 25px !important;
}
.bubble-name {
height: 24px
}
.bubble-icon {
--mdc-icon-size: 24px !important;
}
name: Belysning
sub_button: []
icon: mdi:lightbulb-group-outline
The card under it is just a regular HA picture glance card that’s used as a button and forwards me to a view with all the scenes once it’s clicked.
Under the HA picture glance card i used a bubble card. Just configure it as a separator, remove the icon and add the following as custom style:
.bubble-line {
background: var(--primary-text-color);
opacity: 0.4 ;
}
For the light buttons i used bubble card sliders.
1 Like
What controls do you want to hide? I’m not sure understand.
Basically, all the media_player entity control to automatically hide when the state is off. i.e: playback controls, mute, volume, next, previous etc.
I’m trying to resize the picture icon for a Button State card with a person entity, but nothing happens. Any ideas? thanks
.bubble-icon {
--mdc-icon-size: 25px !important;
}
I love the look of this theme(?)!
Where did you get that? What theme is that and would you mind sharing the YAML-code with me?
This is already the case, are you sure that your media player state is off and not idle?
Building a new mobile dashboard, and wondering if there’s anyway to ‘double’ the row size so that sub buttons show below the icon/title? I want to create ‘square-ish’ bubble cards. If I create bubble cards in two columns, it just condenses all the information up, even if I change row height
Maybe a way of combining two directly above and below each other (with sub-buttons in the lower one, as per the FAQ on GitHub?
Hi,
I’ve installed it with HACS, currently running 2.04
Argh, disregard, I replied without seeing amstermk’s note first. Although interestingly, even after installing the latest Bubble from HACS, I don’t have the ‘show background when entity is on’ toggle. Looking at that now 
In any case, sorry about the unnecessary workaround.
This toggle is only in the sub-buttons, but it only remove/add a background in them.
Well I really have no idea then, keep me informed if you find what is causing this.
Hello there!
I need some help on edit my bubble card. Want to change color of icon and icon to change depence on procentage of my phone battery. Here is part of my code. Hope you can help me. Moving from Mushroom and there it was working.
type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: '#piotrek'
name: Piotrek
icon: mdi:face-man-outline
entity: person.piotrek
back_open: true
trigger_state: ''
trigger_close: false
show_state: true
show_last_changed: true
show_attribute: false
button_type: state
styles: ''
- type: custom:bubble-card
card_type: separator
name: Telefon
icon: mdi:cellphone
sub_button:
- entity: sensor.oneplus_battery_level
show_state: true
show_background: false
icon: mdi:battery
styles: |
icon: >
{% set battery_level = (states(entity) | int / 10) |
round(0) | int * 10 %} {% if
is_state('binary_sensor.oneplus_is_charging', 'on' ) %}
{% if battery_level > 0 %}
mdi:battery-charging-{{ battery_level }}
{% else %}
mdi:battery-charging-outline
{% endif %}
{% else %}
{% if battery_level == 100 %}
mdi:battery
{% elif battery_level > 0 %}
mdi:battery-{{ battery_level }}
{% else %}
mdi:battery-alert-variant-outline
{% endif %}
{% endif %}
icon_color: |-
{% set battery_level = states(entity) | int %}
{% if battery_level > 90 %}
green
{% elif battery_level > 60 %}
light-green
{% elif battery_level > 50 %}
lime
{% elif battery_level > 40 %}
yellow
{% elif battery_level > 30 %}
amber
{% elif battery_level > 20 %}
orange
{% elif battery_level > 10 %}
deep-orange
{% else %}
red
{% endif %}
Got it, thanks! So do you recommend the opacity example in my earlier comment for overriding the background? Or could I submit a PR to do the same for the primary button? Obviously if this isn’t what you envision directionally then feel free to disregard!
Is there a way to disable this for the main button instead of a sub-button? Im not seeing the option, and no matter what I do under styling options I cant get it to stay on the color I want when the entity is “on”. It shows the color I want for a second and then switches to orange.
Thanks in advance!
Hey there. This has come up in a few posts now and I believe I replied earlier with a suggested config, and an outstanding question to @Cloos as to whether this is the way he’d prefer we do it.
Here’s what I’m doing for now:
.bubble-button-card-container {
background-color: ${state === 'on' ? 'var(--tech_active)' : 'var(--tech_inactive)' } !important;
}
.bubble-button-background {
opacity: 0 !important;
}
I did a mistake in the documentation, the best way to do this is:
styles: |
.bubble-button-background {
opacity: 1 !important;
background-color: ${state === 'on' ? 'blue' : 'red'} !important;
}
For anybody curious, I managed to do this with the stack-in-card. Still some work to go to make it look cleaner, but slowly getting there.
Is there anyway to show the temperature of the room under the light switch? Like my current mobile dashboard buttons:
I’m trying to use bubble to create something that is similarly nice, but with far less faffing around with card mod!