This is a totally random order, but you’re in luck because my priorities are the new layouts 
1 Like
Great to see the list instead of requesting a feature which is already requested.
Would love to see Larger layout with sub-buttons below the icon/name/state. I notice too many times that I have to choose between sub buttons to show due to a lack of space on the card.
A color picker for icons and card would be also very nice due to coding now. Perhaps something similar to mushroom cards?
Hi all,
Pretty new to bubble cards but liking it so far.
Right now I have 2 buttons which open another card, but I want to add a different style to the buttons. (change color/size), I tried different styles but nothing seems to change… So I’m trying my luck here. Here are the buttons:
type: horizontal-stack
cards:
- type: custom:bubble-card
card_type: button
entity: camera.reolink_video_doorbell_fluent
icon: mdi:doorbell-video
force_icon: true
show_name: false
sub_button: []
tap_action:
action: navigate
navigation_path: "#doorbell"
styles: |
.bubble-button-card-container {
background: rgba(12,120,50,0.5) !important;
}
- type: custom:bubble-card
card_type: button
entity: camera.pet_feeder_3
icon: mdi:cat
force_icon: true
show_name: false
sub_button: []
tap_action:
action: navigate
navigation_path: "#feeder"
styles: |
.bubble-button-card-container {
background: rgba(12,120,50,0.5) !important;
}
Also, is it possble to change the position of the icon?
Hope anyone can help me out. 
hello guys
I’m just setting up my new dashboard. I want to create a popup where I can put together my hue scenes.
Now I want to have switches there that load an entity picture as the background instead of the standard color. I’ve already tried a few things, but the background still stays the standard one.
Thank you very much for your help
type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: "#szenenWZ"
name: Szenen Wohnzimmer
icon: hue:scene-concentrate
- type: custom:bubble-card
card_type: button
entity: scene.kinderzimmer_pepe_bernsteinblute
show_icon: true
scrolling_effect: true
show_state: false
show_name: false
card_layout: large-2-rows
styles: |-
sub_button:
- icon: none
styles: |-
.bubble-button-background {
background-image: url("/local/Bernsteinblüte.jpeg") !important;
background-size: cover !important;
}
Hey you’re on the right track.
You only had to adjust the color under RGB.
For the icon-positioning. Check-out:
I gave an example where the icon is centered.
This can be done with:
.bubble-icon-container {
position: absolute !important;
left: calc(50% - 25px ) !important;
}
For the sizes of the buttons I would advice to use sections.
This makes the sizing much easier.
type: horizontal-stack
cards:
- type: custom:bubble-card
card_type: button
entity: camera.reolink_video_doorbell_fluent
icon: mdi:doorbell-video
force_icon: true
show_name: false
sub_button: []
tap_action:
action: navigate
navigation_path: "#doorbell"
styles: |
.bubble-button-card-container {
background: rgba(12,120,50,0.5) !important;
}
- type: custom:bubble-card
card_type: button
entity: camera.reolink_video_doorbell_fluent
icon: mdi:cat
force_icon: true
show_name: false
sub_button: []
tap_action:
action: navigate
navigation_path: "#feeder"
styles: |
.bubble-button-card-container {
background: rgba(255,120,50,0.5) !important;
}
.bubble-icon-container {
position: absolute !important;
left: calc(50% - 25px ) !important;
}
layout_options:
grid_columns: 2
grid_rows: auto
2 Likes
Look like you have to much in your code.
Remove a:
sub_button:
- icon: none
styles: |-
Resulting in:
type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: "#szenenWZ"
name: Szenen Wohnzimmer
icon: hue:scene-concentrate
- type: custom:bubble-card
card_type: button
entity: scene.kinderzimmer_pepe_bernsteinblute
show_icon: true
scrolling_effect: true
show_state: false
show_name: false
card_layout: large-2-rows
styles: |-
.bubble-button-background {
background-image: url("/local/Bernsteinblüte.jpeg") !important;
background-size: cover !important;
}
1 Like
thank you so much. it works 
Thanks a lot! I tried changing the rgb values but the colors stays the same. I think it’s because of the entity behind it? I tried your code but the colors stay like this:
Any idea on how to force the background colors? Or I’m i missing something?
Edit: It seems like its some sort of default color? I also see that type of yellow/orange on my dishwasher card. Side question, any Idea why the dishwasher programs aren’t correctly listed?
Sorry for all the questions! 
Thanks!
I wish to change the colour of any ‘on’ sub button. I don’t personally like the default orange. I’ve tried this…
.bubble-sub-button {
background-color: ${state === 'on' ? 'tan' : ''} !important;
}
What am I missing please?
This is a simpeler way:
:host{
#for the icon and button 'active' color
--bubble-accent-color : blue;
#Only for the button 'active' color, overwrites previous line
--bubble-button-accent-color : red;
}
Or if you want to add it to a theme(then it is on all your bubble cards) you can use it like so:
theme-name:
modes:
light:
bubble-accent-color: blue
bubble-button-accent-color: red
dark:
bubble-accent-color: blue
bubble-button-accent-color: red
1 Like
You’re correct. I didn’t link my/your entities so I didn’t see the problem.
Replace .bubble-button-card-container with .bubble-button-background that should do the trick.
For the dishwasher dropdown. I don’t know. (Don’t have a dishwasher with that option.
)
How is your card done? What is the yaml? Is this a subbutton?
1 Like
The .bubble-button-background was indeed the correct setting! Thanks
Now I only need to change the icon color itself.
About the dishwasher, it’s a select card:
- type: custom:bubble-card
card_type: select
entity: select.404070519655001492_programs
show_state: true
name: Vaatwasser Programma
It seems to pick the entity names instead of the friendly names…
One more side question, sometimes I want to show an entity state, so it doesn’t need to be clicked or anything. What type of card should I use for that? Currently I just display it like this, but not sure if it’s the correct way:
- type: custom:bubble-card
card_type: button
entity: binary_sensor.404070519655001492_bsh_common_status_doorstate
show_state: true
button_type: state
name: Vaatwasser Deur
Thanks a lot for all the help!
Hi! For your select question, can you go to the dev tools, then send me what you have here for your select entity:
And for displaying just a state, indeed the state button type is the best way
1 Like
Hi Cloos,
Thanks! Here is the state of the select:
Edit:
Here you can see the default entity card displaying the “normal” names:
hey all!
Is it possible to use bubble card as a vertical card ?
Buuble card is designed to be horizontal, but maybe it’s possible to “rotate” them to use-it verticaly ?
Not sure if this is your question, but I use bubble cards in vertical stacks since my mobile screen is a bit small for multiple cards in a horizontal stack (without the use of pop ups)
Here is an example (Excuse the dutch language)
Thans but my question is more: Is it possible to rotate a bubble card 90°?
actually, a bubble card is like that: –
I want something like that: |
Good to know! So there is maybe something I can do about that by looking at how HA handle this in it’s source code.
1 Like
It is not “not possible” but it is not default.
If you’re using “sections” then the width is easily done with layout tab.
You’ll notice that when using the height this does not work very well by default,
Adding this code should help:
.bubble-button-card-container{
height: calc( var(--row-height) * var(--row-size) + var(--row-gap) * ( var(--row-size) - 1 )) !important;
}
This are the underlaying variables used:
--row-height: var(--ha-section-grid-row-height, 56px);
--row-gap: var(--ha-section-grid-row-gap, 8px);
Note to self and @Cloos
Maybe something to implement.
Edit:
Made it better using the default --row-size-variable from home-assistant.
Edit2:
Didn’t feel like I solved this in the best way possible, so I gave it another go.
With the code below it should be doable in sections, just set it to the lowest amount on width and the wanted amount on height. I will also add this to the examples.
.bubble-button-card{
width: calc( var(--row-height) * var(--row-size) + var(--row-gap) * ( var(--row-size) - 1 )) !important;
transform-origin: top left;
transform: translate(0%, calc( var(--row-height) * var(--row-size) + var(--row-gap) * ( var(--row-size) - 1 ))) rotate(-90deg) ;
height: ${card.querySelector('.bubble-button-card-container').getBoundingClientRect().width+'px'}
}
.bubble-button-card-container{
height: calc( var(--row-height) * var(--row-size) + var(--row-gap) * ( var(--row-size) - 1 )) !important;
}
2 Likes
I seem to have lost blurring on my backdrops with either upgrading to v8 or upgrading HA to 2024.11.3. Just rolled back both and they came good again. Anyone else having this issue?
Will upgrade one by one and see which makes a difference