You can play around with these styles:
* {
font-size: 24px !important;
}
.bubble-icon {
color: white !important;
}
.large .bubble-separator {
--mdc-icon-size: 36px;
color: orange !important;
}
.bubble-line {
background: var(--primary-text-color);
opacity: 0.2;
}
Tested it with various buttons and for me the code
icon: none
just works fine
Hello, I am doing something similar in my weather card :
type: custom:bubble-card
card_type: button
card_layout: large-2-rows
button_type: state
entity: weather.pontoise
name: 'Météo Pontoise '
show_state: true
show_last_changed: false
sub_button:
- entity: sensor.cuisine_th_temperature
icon: mdi:home-thermometer-outline
show_state: true
show_background: false
- entity: sensor.pontoise_temperature
icon: mdi:thermometer
show_state: true
show_background: false
styles: |-
.bubble-button-card-container {
border-radius: 10px !important;
}
.bubble-icon {
opacity: 1;
color: white !important;
}
.bubble-icon ha-icon {
display: none;
}
.bubble-icon {
width: 50px; /* Ajuste la taille selon tes besoins */
height: 50px; /* Ajuste la taille selon tes besoins */
background: ${state === 'rainy' ? "url('/local/community/lovelace-meteofrance-weather-card/icons/rainy-5.svg')" : state === 'cloudy' ? "url('/local/community/lovelace-meteofrance-weather-card/icons/cloudy.svg')" : state === 'clear' ? "url('/local/community/lovelace-meteofrance-weather-card/icons/day.svg')" : state === 'clear-night' ? "url('/local/community/lovelace-meteofrance-weather-card/icons/night.svg')" : state === 'fog' ? "url('/local/community/lovelace-meteofrance-weather-card/icons/fog.svg')" : state === 'hail' ? "url('/local/community/lovelace-meteofrance-weather-card/icons/rainy-7.svg')" : state === 'lightning' ? "url('/local/community/lovelace-meteofrance-weather-card/icons/thunder.svg')" : state === 'lightning-rainy' ? "url('/local/community/lovelace-meteofrance-weather-card/icons/lightning-rainy.svg')" : state === 'partlycloudy' ? "url('/local/community/lovelace-meteofrance-weather-card/icons/cloudy-day-3.svg')" : state === 'pouring' ? "url('/local/community/lovelace-meteofrance-weather-card/icons/rainy-6.svg')" : state === 'snowy' ? "url('/local/community/lovelace-meteofrance-weather-card/icons/snowy-6.svg')" : state === 'snowy-rainy' ? "url('/local/community/lovelace-meteofrance-weather-card/icons/snowy-rainy.svg')" : state === 'sunny' ? "url('/local/community/lovelace-meteofrance-weather-card/icons/day.svg')" : state === 'windy' ? "url('/local/community/lovelace-meteofrance-weather-card/icons/windy.svg')" : state === 'windy-variant' ? "url('/local/community/lovelace-meteofrance-weather-card/icons/windy.svg')" : state === 'exceptionnal' ? "red" : '' } no-repeat center center;
background-size: contain;
}
${icon.setAttribute("icon", "")}
tap_action:
action: navigate
navigation_path: '#meteo'
double_tap_action:
action: more-info
hold_action:
action: more-info
button_action:
tap_action:
action: navigate
navigation_path: '#meteo'
double_tap_action:
action: more-info
Hey, I need some advice. Maybe I’m doing sth. wrong but I have a button (state) like this:
The Yellow part is the state of the entity set for the button itself. I used some templating to get the date (16.08.2024) which is another entity but often it takes quite a while to load the text for the date. My template looks like this:
${card.querySelector(".bubble-state").innerText = state + " • " +
hass.states["sensor.waste_collection_date"].state} !important
Is there any way I can speed this up? The loading time is always different and goes up to several seconds
Thank you!
this worked for the separator text
" * {
font-size: 24px !important;
color: … ; !important;
font-weight: … ; !important;
} "
is there a correct way to center the text in the middle of the card?
I’ve added ‘margin-left: 18px’ to the section above but this only centers visually and if text changes (my text changes based of a state) is left off-center
Is it possible to layer the horizontal buttons? I’d like to have first floor, second floor, then break out the rooms from there.
Is it possible to have conditional entity on the Bubble Card Media Player?
What I am tryin to do is to have one media player card with 3 sub buttons, each sub button is a separate media player. Pressing the button will start playing music on the device. Then I want the media player card to show the controls for that entity. So I need to create conditions under entity. If media_player.1 is playing, entity media.player.1 should be visible.
This is my current code:
type: custom:bubble-card
card_type: media-player
entity: media_player.sovrum
sub_button:
- entity: media_player.hela_huset
name: Hela huset
show_name: false
icon: mdi:home-outline
tap_action:
service: input_boolean.turn_on
action: call-service
target:
entity_id: input_boolean.spela_musik_i_hela_huset
- name: Överallt
show_state: false
show_name: false
icon: mdi:home-export-outline
tap_action:
action: call-service
service: input_boolean.turn_on
target:
entity_id: input_boolean.spela_musik_overallt
- entity: media_player.hela_huset
name: Sovrum
icon: mdi:bed-outline
show_name: false
tap_action:
action: call-service
service: input_boolean.turn_on
target:
entity_id: input_boolean.spela_musik_i_sovrum
show_icon: true
show_name: true
scrolling_effect: true
force_icon: false
show_attribute: false
layout_options:
grid_columns: 4
grid_rows: 1
card_layout: normal
name: Välj källa
icon: mdi:music
styles: |-
.bubble-icon-container {
background: rgb(235, 64, 52);
}
.bubble-media-player-container {
background-color: #2b374e;
}
.bubble-sub-button-1 {
display: ${hass.states['media_player.hela_huset'].state === 'playing' ? 'none' : ''} !important;
display: ${hass.states['media_player.overallt'].state === 'playing' ? 'none' : ''} !important;
display: ${hass.states['media_player.sovrum'].state === 'playing' ? 'none' : ''} !important;
}
.bubble-sub-button-2 {
display: ${hass.states['media_player.hela_huset'].state === 'playing' ? 'none' : ''} !important;
display: ${hass.states['media_player.overallt'].state === 'playing' ? 'none' : ''} !important;
display: ${hass.states['media_player.sovrum'].state === 'playing' ? 'none' : ''} !important;
}
.bubble-sub-button-3 {
display: ${hass.states['media_player.hela_huset'].state === 'playing' ? 'none' : ''} !important;
display: ${hass.states['media_player.overallt'].state === 'playing' ? 'none' : ''} !important;
display: ${hass.states['media_player.sovrum'].state === 'playing' ? 'none' : ''} !important;
}
ha-card {
margin-left: 15px;
margin-right: 15px;
overflow: hidden;
border-radius: 50px !important;
}
.card-content {
background: var(--background-color-2,var(--secondary-background-color));
}
.card-content::before {
content: '';
display: flex;
width: 100%;
height: 100%;
background-image: url(${hass.states[entity]?.attributes.entity_picture_local});
background-size: cover;
background-position: 50%;
filter: blur(20px);
top: 0;
position: absolute;
opacity: 0.5;
}
tap_action:
action: none
double_tap_action:
action: none
hold_action:
action: none
Tried the following without success:
entity: |
{% if states('media_player.hela_huset') == 'playing' %}
media_player.hela_huset
{% elif states('media_player.overallt') == 'playing' %}
media_player.overallt
{% elif states('media_player.sovrum') == 'playing' %}
media_player.sovrum
{% endif %}
did you find a solution for the alignment?
I did the following and at least for me it looks nicer. I used the following code for the sub buttons on the right side:
.bubble-sub-button-3 {
justify-self: right;
}
Hi everyone!
I’ve worked on the pop-ups again! My goal for this release was to make them fully reliable, and to achieve that, I’ve fixed most of the new and old issues related to them. I’ve also refactored a lot of the code and have intensively tested them to ensure rock-solid stability. This one should be the one! I know, I’ve said that too many times… 
I’ve also worked on some other issues. Here is the full changelog:
Bug fixes and optimizationsCustom element doesn't exist error on Google Nest Hub. #345 and maybe #257I can’t wait for your feedback!
And if you are interested I’ve opened a Subreddit for Bubble Card where I post my progress on the project. Here it is:
Bubble card does not support jinja templates, and I think conditionally templating a card entity is not a feature as of right now.
What’s a good way to achieve what I am doing? Universal media player does not seem to work.
You could make 3 different media players and use conditional card to showe the one you want to be shown, and still have those 3 buttons on each media player?
Not a sexy fix, but guess it would work.
I did that for my media side, to just show the one that last started playing
Need help styling the bubble media-player card background color if its playing
Thanks
What’s the issue here? Everything looks to be working fine
I’m trying to create a button bubble card consisting of only sub buttons so i can see what’s on (and toggle) with a quick glance. How can I center these buttons within the card? I can add padding to the right but it doesn’t appear the same on all devices. Thanks!
Hello, does anyone know how to just get the hour and minutes from below timestamp?
${card.querySelector('.bubble-state').innerText =
hass.states["sensor.tv_padel_endtime"].state }
I know some formatting needs to happen after the .state but I have no clue.
After some “research” I’ve found a tip in a closed issue suggesting to disable the Optional - Show entity state option and enabling the Optional - Show attribute option but without setting any attribute.
This makes the generation of the button text instant so the Optional - Show entity state somehow slows things down pretty bad. At least that’s what it seems like
This is indeed the way, this is explained in the text templating example in the documentation.