Hello, can i use bubble card to create a card as this?:
With this awesome bubble cards almost nothing is impossible.
For this you would need a Boolean helper and a light-group.
In the gif the percentage is not shown, but this is simply done.
type: grid
cards:
- type: custom:bubble-card
card_type: button
button_type: slider
entity: light.help_house_lightgroup
sub_button:
- entity: input_boolean.help_house_testboolean
icon: mdi:chevron-down
tap_action:
action: toggle
tap_action:
action: toggle
card_layout: large
show_state: true
show_attribute: true
attribute: brightness
styles: >-
${subButtonIcon[0].setAttribute("icon",
hass.states['input_boolean.help_house_testboolean'].state === 'on' ?
'mdi:chevron-up' : 'mdi:chevron-down')}
- type: horizontal-stack
cards:
- type: custom:bubble-card
card_type: button
entity: light.dev_ff_hw_lamp
button_type: slider
tap_action:
action: toggle
- type: custom:bubble-card
card_type: button
entity: light.dev_gf_lr_cornerlamp
button_type: slider
tap_action:
action: toggle
visibility:
- condition: state
entity: input_boolean.help_house_testboolean
state: "on"
11 Likes
Hello,
I added a bubble card button on my dashboard, but i have white text color, is it possible to change this to another color?
Needed to update the first pop up card again, and then it worked. Was on 10 already so just opened the first one and saved it again and then it worked. Thanks again!
1 Like
second most elegant solution is to add follow code to the style part of the bubble card.
:host{
--primary-text-color: #ff5555;
}
Most elegant solution would be to add this to your theme:
Hello, I would like to change the icon of the Button Card and use an image, but unfortunately, it’s not working for me. Could someone please help me, or is it perhaps not possible at all?
type: custom:bubble-card
card_type: button
button_type: state
entity: sensor.bioabfall
show_attribute: false
force_icon: false
show_name: true
show_state: true
show_icon: none
card_mod:
style: |
.bubble-button-card {
background-color:
{% if states('sensor.biotonne_collection') | float(999) < 1 %}
var(--error-color);
{% elif states('sensor.biotonne_collection') | float(999) < 2 %}
var(--warning-color);
{% endif %};
}
.bubble-button-card {
background-image: url("local/muell/Gruene_Tonne_frei.png");
background-size: cover;
}
Use this:
.bubble-entity-picture{
background-image: url("https://community.home-assistant.io/user_avatar/community.home-assistant.io/mrbearpresident/48/585054_2.png") !important;
display: block !important;
}
1 Like
Thank you. How i create a boolean helper? I have a light group.
1 Like
ok, thank you
Thx for the help very appreciated
hi at all!
please, someone could point me to the right direction on how to change the border radius of my input_select option?
Is it possible to have the width of the options list box 100%? (the same width of the select with the dropdown)
Thanks a lot
Hi,
Is it possible to disable buttons changing to the accent color when the state is on/locked?
Thanks
If you’re talking about normal buttons, then you can either switch their type to “State” or in the styling options, change the background to the color you like:
.bubble-button-background {
background-color: #1A1A1A;
}
:host{
--bubble-select-list-border-radius: 100px;
}
The width of the dropdown is more difficult.
Is there a way to align subbuttons in a bubble card? I want to put playlists for my Sonos speakers on the bubble card. I can get around 8 subbuttons in the bubble, but I would have to align them a bit.
Can you clearify? Send your Yaml/and picture and maybe annotate what you want?
type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: "#Mediaplayer"
name: Sonos
background_update: true
margin_top_desktop: 0px
width_desktop: 540px
margin: 7px
margin_top_mobile: 100px
icon: mdi:speaker-wireless
sub_button:
- icon: mdi:skip-previous
- icon: mdi:skip-next
- icon: mdi:volume-high
- icon: mdi:play
- type: custom:mini-media-player
entity: media_player.unnamed_room
artwork: full-cover
hide:
volume: true
source: true
power_state: true
power: true
controls: true
icon: true
progress: false
name: true
info: false
runtime: false
style:
left: 50.1%
top: 40.3%
width: 24%
height: 300px
background-size: cover
speaker_group:
platform: sonos
show_group_count: true
entities:
- entity_id: media_player.sonos_office
name: Sonos Office
- entity_id: media_player.sonos_livingroom
name: Sonos Livingroom
- entity_id: media_player.sonos_kitchen
name: Sonos Kitchen
- type: custom:bubble-card
card_type: media-player
entity: media_player.kinderzimmer_pepe
cover_background: true
hide:
power_button: true
previous_button: false
next_button: false
card_layout: large-2-rows
show_icon: true
scrolling_effect: true
show_state: true
show_name: true
show_last_changed: true
name: sonos
force_icon: true
show_attribute: false
- type: custom:bubble-card
card_type: separator
name: Playlisten
icon: mdi:playlist-music
- type: custom:bubble-card
card_type: button
sub_button:
- {}
- {}
- {}
- {}
- {}
- {}
- {}
- {}
- {}
name: test
scrolling_effect: false
show_icon: false
show_name: false
card_layout: normal
rows: 4
columns: 4
styles: ""
button_type: name
I’m still in the process of creating the perfect media player popup for me.
At the top, perhaps in the header, the controls for the player, ideally with the same function as with the bubble card media player, where the player switches to volume when the volume is up.
And then under the media cover, the playlists are visually appealing in the subbuttons in the bubble card.
I can group the Sonos within the mini media player.
Perhaps you have other visual improvements for such a popup.
1 Like
Hi! You can take a look at this example from the GitHub documentation, that’s the last one in the Styling section, hope this helps 
1 Like
thank you very much for your answer and for the work you put into this dashboard.
1 Like