Thank you so much for bubble card.
Really appreciate your hardwork
Thank you so much for bubble card.
Really appreciate your hardwork
Dear all,
In my case “Climate” buttons do work.
Can you please advise how can I manually override “Climate” buttons colour/transparency similar to other buttons:
Hi! @Vandana you can add this in your custom styles:
ha-card {
--bubble-select-list-width: 400px;
}
Or directly in your theme file:
bubble-select-list-width: "400px"
@DBunevich you can add this in your custom styles:
.bubble-climate-minus-button,
.bubble-climate-plus-button {
background: rgba(0, 0, 0, 0.5) !important;
}
@Cloos, merci beaucoup votre l’aide!
Below you can see Mushroom and Bubble card for Climate.
Fundamental benefit of Bubble card is the ability to combine Fan and HVAC control into one card. This can’t be done in Mushroom still.
However, on the small screens due to many buttons there may not be enough space to fit all of them.
Due to that, please kindly consider in the future possibility for the cards to have not only 1x4, but also 2x2 section card sizes:
Is there a solution for the alignment?
I haven’t found a way to align them correctly and haven’t got any more response.
Maybe @Cloos can still help here?
Plz guide how to bring the media controls to the next row, so that only the song info is displayed in the first row.
Also, plz add shuffle and repeat controls in the next update if possible.
Please see the original select options that I have created in homeassistant.
Bubble Card select card is converting the strings/options to propercase. I hope I am making sense.
Please look into this and if possible kindly fix this in next update.
Thank you
Nope, nothing showing in the browser console. When on mobile my iOS device vibrates when I click either button, and on desktop I can see an effect when I click, but nothing happens. I’ve cleared my cache, logged in and out of HA, tried a few other things. Can’t seem to get it to work…
@nickpiccoli This is weird, can you send me your entity infos from the developer tools?
@DBunevich @Vandana I will soon add a new card layout for that, indeed with the success of the sub-buttons this is needed a lot!
@Vandana Indeed this is a mistake for these select menus! I will change that in the next beta
@idominiki You need to set fixed width for these styles, play with the values to meet your needs.
.bubble-sub-button {
width: 60px !important; /* Change 60px */
}
.rows-2 .bubble-sub-button-container {
grid-template-columns: repeat(2, 60px) !important; /* Change 60px */
}
And sorry for the previous unanswered questions, it’s hard to keep up
For your bugs, the best way is to send them on GitHub. Even if I don’t answer quickly, I will do my best to fix everything!
Thank you so much.
Kindly also consider to add “Shuffle” and “Repeat” buttons in media control.
Yes! Thanks for the help… Seems pretty fast and stable!
Amazing work as always!
For this request i think is ok but tell me if exist a better solution please
.bubble-button-card-container {
border-radius: 15px;
}
.bubble-button-background {
border-radius: 15px;
}
Sorry to insist but to move forward on my Lovelace mobile can you answer me please
How do you change the background-colour of the climate card, the styling seems to be done in a different way to the other bubble cards. Looked in the documentation and I assume it is something to with the following code:
Have tried the following but it doesn’t do what I was expecting
type: custom:bubble-card
card_type: climate
button_type: state
name: Heating
icon: mdi:radiator
entity: climate.wiser_office
button_action:
tap_action:
action: more-info
styles: |-
.bubble-climate-container {
background-color: rgba(74,91,107,1) !important;
height: 100px;
} .bubble-icon {
opacity: 1;
color: rgba(229,221,207,1)!important;
} .bubble-icon-container {
background-color: black !important
} .bubble-sub-button {
color: rgba(229,221,207,1)!Important;
} .bubble-name {
color: rgba(229,221,207,1) !important;
}.bubble-state {
color: rgba(229,221,207,1) !important;
} ${state === 'on' ? icon.setAttribute("icon", "mdi:radiator") :
icon.setAttribute("icon", "mdi:radiator-off")};
sub_button:
- name: HVAC modes menu
select_attribute: hvac_modes
show_arrow: false
- name: Climate temperature
show_attribute: true
attribute: temperature
icon: mdi:thermometer
state_background: false`
Probably not exactly what you’re looking for, but I changed the HA theme variables for the colors
state-climate-cool-color: rgba(var(--color-blue), 0.75)
state-climate-heat-color: rgba(var(--color-red), 0.75)
Hi, your answer is here, the new beta allows that globally now, I’ve also added an example.
Hi! That card is using .bubble-color-background
this is indeed a bit different, but you can also check the styles.ts file for that card on GitHub.
Agreed, a smaller option like standard cards would be nice