I would like to have a card like this. Can you explain how you made it? I have bubble cards. It appears your horizontal color is a brightness slider for the lights in the room?
You can try the following (insert it in the styles-section):
${(() => {
const timestamp = hass.states["sensor.tv_padel_endtime"].state;
if (timestamp) {
const date = new Date(timestamp);
const hours = date.getHours().toString().padStart(2, '0');
const minutes = date.getMinutes().toString().padStart(2, '0');
card.querySelector('.bubble-state').innerText = `${hours}:${minutes}`;
}
})()}
1 Like
I want to change slider color via theme for entity type ‘fan’ only. Here is my card:
- type: custom:bubble-card
card_type: button
button_type: slider
entity: fan.media_room_ceiling_fan
sub_button:
- entity: light.media_room_light_1_2
show_name: false
show_state: true
show_icon: true
tap_action:
action: toggle
slider_live_update: false
show_state: false
show_attribute: true
attribute: percentage
icon: mdi:fan
In my theme file called ‘light’, I have tried this but not working:
card-mod-theme: light
card-mod-card: |
.bubble-button-card-container.button-container .bubble-button-card.switch-button .bubble-icon-container[data-entity^="fan."] ~ .bubble-range-slider .bubble-range-fill {
background-color: rgba(0, 255, 0, 1) !important; # Custom color for fan slider
opacity: 1 !important; # Ensure it's visible
}
and we know the following would work but it effects all sliders, where I want to target specific entity types such as fans.
.is-on .bubble-range-fill {
opacity: 1;
background-color: rgba(255 , 0, 255, 1) !important; #FOR SLIDER COLOR
}
@Cloos , desperately seeking color manipulation via themes based on domain and entity types 
Is it possible to create a bubble for the menu command? It works with the Mushroom Chips, but I haven’t found it yet with Bubble.
- Obsolete -
Hi, is there a way to display a progress bar using Bubble Card? For example, to show battery percentage?
Search this thread, answered above.
1 Like
Hey, I wanted to rearrange the slider card and lost the transition of the slider when turning on and off the card.
type: custom:bubble-card
card_type: button
button_type: slider
entity: light.test_lights
use_accent_color: false
force_icon: false
tap_action:
action: toggle
hold_action:
action: more-info
button_action:
tap_action:
action: toggle
styles: |
* {
border-radius: 16px !important;
}
.bubble-name-container{
border-radius: 0px !important;
}
.bubble-button-card-container{
height: 120px !important;
border-radius: 20px !important;
}
.card-content {
width: 100%;
margin: 0 !important;
}
.bubble-button-card {
display: grid;
grid-template-areas:
'. i'
'n .';
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
justify-items: center;
}
.bubble-icon-container {
grid-area: i;
border-radius: 50% !important;
max-width: none !important;
max-height: none !important;
justify-self: right !important;
margin: 10px 0px 0px 0px !important;
background: none
}
.bubble-icon {
width: 40%;
--mdc-icon-size: 100px !important;
--mdc-icon-color: white !important;
opacity: 1 !important;
}
.bubble-name-container {
grid-area: n;
justify-self: start;
margin-left: 20px;
}
.bubble-name {
font-weight: 500;
font-size: 16px;
}
.bubble-state {
font-size: 14px;
}
grid_options:
rows: 2
columns: 6
card_layout: large
sub_button: []
show_icon: true
show_name: true
show_state: true
show_last_changed: true
show_attribute: true
slider_live_update: true
attribute: brightness
Can I easily restore it?
Think the slider being brightness is automatic for a slider with a light entity.
This is the base part of it, though obviously I’ve added sub buttons.
- type: custom:bubble-card
card_type: button
button_type: slider
scrolling_effect: false
show_last_changed: true
show_attribute: false
show_state: false
show_name: false
columns: 1
card_layout: large-2-rows
entity: light.lounge
tap_action:
action: toggle
hold_action:
action: more-info
As some of you regular visitors know I’ve been helping @Cloos somewhat lately with some features/bugs/questions. As I know, loads of you get exited when new features are announced. But sometimes we have to do some maintenance. This time I need some help.
What I’ve done.
- Significant restructuring of the
bubble-card-editor.jsfile to use separate files for each card type. - Introduction of new card-specific editor files to improve code organization and maintainability.
- Addition of new styles in
styles.cssfor the editor. - Reducing the editor code from +/- 2400 lines to +/-940 lines.
Why have I done this?
Reducing the size, improving the code, makes it easier to contribute in the way that there will be less conflicted pushes.
How do I need your help.
I’ve made an alpha build that contains this new code. I’ve tested most of the things myself but there is a chance I overlooked some things. So I’m looking for people willing to test this new alfa build.
If you are willing to contribute you can go to this link and read the instructions.
4 Likes
Does anyone know how I can reorder the position of the “sub_buttons”?
this:
to this:
The solution I came up with wasn’t the smartest, as I used a fake “sub_button”:
sub_button:
- name: empty
show_background: false
tap_action:
action: none
icon: mdi:circle
1 Like
I think this is the best solution at the moment
Bubble Card 2
v2.4.0
Hi everyone!
I’m excited to share the brand new v2.4.0 with you! This release wouldn’t have happened without the amazing support from our community and contributors! A big thank you to everyone helping to grow and improve Bubble Card! 
This release brings some great enhancements and fixes! Special thanks to @MrBearPresident for the great work on improving the editor! It’s now even sexier and easier to use!
More new features are in the works, including a new way to edit custom styles/templates within a single YAML file. You’ll see, this will be amazing for editing and sharing your customizations! This should be coming very soon in a new beta, and I can’t wait to get your feedback on it!
Here are the main highlights of this release:
New features and enhancements
-
Rewritten editor action panel:
The action panel has been completely rewritten to leverage Home Assistant’s default panel, improving compatibility and configuration in the editor! Finally!
PR #1076 by @MrBearPresident. -
Editor dropdown improvements:
Entity and service names, along with icons, are now displayed in dropdown menus within the editor, making configurations easier. Fixes #1102. PR #1143 by @MrBearPresident -
Live update mode for pop-up slider headers:
Sliders within pop-ups now support the “live update” mode in the editor. Fixes #1149. PR #1150 by @PhilPinsdorf.
Bug fixes and optimizations
-
Dwains Dashboard compatibility:
Added support for the Bubble Card editor within Dwains Dashboard. Fixes #1136. -
Pop-up new trigger system issue:
Fixed an issue where an empty pop-up trigger caused the pop-up to open after every page reload. #1134. -
Slider interaction fix:
Taps and clicks on sliders now properly update entities when live updates are enabled. Fixes #1132. PR #1140 by @controlaltnerd. -
Horizontal button stack gradient issue:
Corrected the gradient color rendering at the bottom of the screen in the horizontal button stack. Fixes #1139. -
CSS fixes for large 2-row layouts:
Resolved visual inconsistencies in the large 2-row layout. Fixes #1109. -
Query Selector issue:
Addressed a regression from v2.3.4 wherecard.querySelectorinbubble-statefailed to turn off icons. Fixes #1141. -
Code quality improvement:
Improved structure for easier maintenance. PR #1158, #1159, and #1160 by @RubenVerborgh.
Thank you for your continued support and contributions. Enjoy the update!
Bubble Card news
I’ve been wanting to start my own YouTube channel for a while, focusing on tutorials around Home Assistant and Bubble Card. There are two videos so far, an introduction explaining the project and a first tutorial on how to create your first pop-up. I really hope you will enjoy them. Don’t hesitate to subscribe to help give my channel more visibility. Thank you in advance!
The next video will cover the new global variables, as well as custom styles and templates, since I’ve noticed more and more questions on these topics.
Over the past year, I’ve been working almost everyday on Bubble Card to make it the best it can be, and I still don’t believe how much it have grown in popularity. Watching the community getting this big and seeing so many people using my work has been incredibly rewarding.
I have another announcement to you all, I decided to create a Patreon as a way to offer something more for those who want to support me. On my Patreon, I share advanced YAML configurations, custom styles, and templates. For example, I’ve added one (my favorite) that allows up to four conditional badges placed around the card’s icons. It’s also a great way to learn about all the possibilities of Bubble Card custom styles and templates!
If you like my project and want to support its development, subscribing to my Patreon is probably the best way to help me keep the project going.
Also, let me know if you have any suggestions or feedback on this. Trying to find a way to monetize my work was not something I ever imagined doing, but I really hope you see it as a way to keep improving the project, and not as a negative step.
Thank you so much for being part of this amazing community, your support will always makes a huge difference! 
I want to highlight that on the GitHub page, in the Discussions section, you can share and discover some amazing YAML examples from the community. Go check it out! Some of the creations are absolutely incredible!
And if you are interested I’ve opened a Subreddit for Bubble Card where I post my progress on the project. Here it is:
7 Likes
Add an empty button as a 5th button
Add If-then to your script. If fan is on → send turn off else → send turn on.
How to set the state of another sensor to content?
content: "1";
type: custom:bubble-card
card_type: button
entity: sensor.day_length
show_state: true
show_last_changed: false
show_attribute: false
use_accent_color: false
show_icon: true
scrolling_effect: false
force_icon: true
tap_action:
action: toggle
1_entity: sensor.sunrise
name: Day_Length
columns: 2
rows: 2
button_type: state
icon: mdi:sun-clock
card_layout: large-2-rows
styles: |-
.bubble-icon-container {
overflow: visible;
} .bubble-icon-container::after {
background-color: red;
color: white;
font-size: 10px;
line-height: 1.5em;
border-radius: 30px;
margin-top: -5px;
margin-left: 30px;
min-width: 15px;
padding: 2px;
position: absolute;
text-align: center;
content: "1";
}
1 Like
type: custom:bubble-card
card_type: button
entity: sensor.day_length
show_state: false
show_last_changed: false
show_attribute: false
use_accent_color: false
show_icon: true
show_name: false
scrolling_effect: false
force_icon: true
tap_action:
action: toggle
name: Day_Length
columns: 2
rows: 2
button_type: state
icon: mdi:sun-clock
card_layout: large-2-rows
styles: |-
.bubble-icon-container {
overflow: visible;
} .bubble-icon-container::after {
margin-top: -5px;
margin-left: 70px;
}
card_mod:
style: |
.bubble-icon-container::after {
background-color: red;
color: white;
font-size: 10px;
line-height: 1.5em;
border-radius: 90px;
min-width: 50px;
padding: 2px;
position: absolute;
text-align: center;
content: "{{ states('sensor.day_length') }}";
}
2 Likes
Not sure if this is possible as I’m looking to refresh my tablet dashboard. Is it possible to adjust the popup to have a margin on the left side? I would like to have content displayed on the left side of my dashboard probably about 30% of the screen and when button pressed the popup would be displayed on the remaining 70% Lea inch the content unblocked by the popup card.
Thank you in advance