I want to assign a different color to each sub-icon, I use:
.bubble-sub-button-icon {
color: ${state === 'on' ? 'orange' : 'gray'}
}
how can I set different colors for multiple sub-icons?
You need to reference the individual sub-button you want to change:
.bubble-sub-button-4 {
background-color: ${hass.states['switch.gosund2'].state == 'on' ? 'rgba(70,130,180,0.6)' : 'white'} !important;
}
Color instead of background-color will change the icon-color.
I’m a novice so please don’t skewer me… lol
I’m trying to change my button background color based on a temp sensor I have. Looking around and trying to reuse other code to get it to work but not working out.
This is what I have:
type: custom:bubble-card
card_type: button
button_type: state
entity: sensor.dave_s_weather_station_temp
name: Temp
show_state: false
sub_button:
- entity: sensor.dave_s_weather_station_temp
show_icon: false
show_state: true
state_background: false
show_background: false
styles: |-
.bubble-button-background {
background-color: ${
{ state >= 80 ? '#ff0000aa'
: state >= 70 ? '#00ff00'
: state >= 60 ? '#00b3ffaa'
: '#cae8f5aa'}[state] ?? '#ff0000AA'
}
Any advice to get this to work?
This is what I use for my climate bubble cards
styles: >
.bubble-climate-container{
background: ${ hass.states['sensor.dave_s_weather_station_temp'].state >= 80 ? '#ff0000aa' :
hass.states['sensor.dave_s_weather_station_temp'].state >= 70 ? '#00ff00' :
hass.states['sensor.dave_s_weather_station_temp'].state >= 60 ? '#00b3ffaa' : '#ff0000AA'} !important;
}
I had to delete my browser cache before it showed it correctly.
thanks for testing 
I found the animated icons here in the forum. I’ve tested them a bit. For me, only the spinning works. Has anyone tried using animated icons like this?
.bubble-sub-button-5 > ha-icon {
animation: ${hass.states['media_player.unnamed_room'].state === 'playing' ? 'beat 1.3s ease-out infinite both' : ''};
}
@keyframes flicker {
0%, 31.98%, 32.98%, 34.98%, 36.98%, 39.98%, 67.98%, 68.98%, 95.98%, 96.98%, 97.98%, 98.98%, 100% { --icon-color: rgba(var(--rgb-indigo), 1); }
32%, 33%, 35%, 36%, 37%, 40%, 68%, 69%, 96%, 97%, 98%, 99% { --icon-color: rgba(var(--rgb-indigo), 0.6); }
}
@keyframes beat {
0%, 60% { --icon-symbol-size: 21px; }
5%, 17%, 57% { --icon-symbol-size: 22px; }
10%, 20%, 51% { --icon-symbol-size: 23px; }
25%, 45% { --icon-symbol-size: 24px; }
30%, 39% { --icon-symbol-size: 25px; }
33% { --icon-symbol-size: 26px; }
}
Just found out about this card this week and have been redoing all my dashboards 
Is there any way to make a card (button/switch card for example) take up 2 rows?
I assumed that the “Layout options for sections” (columns/rows) option should do that, but it doesn’t seem to do anything. I tried using both large and large-2-rows for the layout
1 Like
I figured it out, I forgot to convert the state to a number so i can use it in the division with 255 (to get the decimal for the opacity).
So for anyone else (that it may help) it looks like this now:
.bubble-range-fill {
opacity: ${Number(hass.states['light.office'].attributes.brightness) / 255} !important;
}
.bubble-name, .bubble-state {
color: ${hass.states['light.office'].attributes.brightness > 150 ? 'rgb(49, 70, 89)' : ''} !important;
}
So its just inceasing the opacity of the slider as the brightness increases and at just over half way its flipping the text from white to the background color so that the text is still readable when the slider is bright white:
Dim:
Bright:
3 Likes
That did the trick! Thanks so much.
Working on that:
Meanwhile use this code:
1 Like
Great that you found a solution to your problem.
I had a couple of busy days so could not try to help you.
Examples can be shared here:
1 Like
I use a couple in: [Example] Square Room Summery Cards · Clooos/Bubble-Card · Discussion #927 · GitHub
2 Likes
Nice, wish i had seen that area earlier, Progressbar one would have got me started a bit quicker 
…and no worries about not replying sooner, it was a community quesiton. Thanks for all your work on this.
Guys plz help
Please check the video. I don’t know if this is a bug or I am doing something wrong.
Whenever I try to change the volume, the text disappears from the media player card.
type: custom:bubble-card
card_type: media-player
entity: media_player.speaker
card_layout: large-2-rows
cover_background: true
Kindly guide how to fix this.
Thank you.
This is indeed an issue.
You can add your voice and your good explanation on github.
Thank you for confirming
Temporary FIX:
Add this to your yaml of the button:
sub_button: []
So for you:
type: custom:bubble-card
card_type: media-player
entity: media_player.speaker
card_layout: large-2-rows
cover_background: true
sub_button: []
Not the case for me. Maybe only due to the other buttons? I have everything hidden besides volume and play/pause. Switching between volume slider and normal view does not have any issue here:
I have now installed card-mod for this and got it working with that.
Adding the following to the personal theme gives a nice shadow to all bubble cards (only added the standard card and media player, other types would need to be added in a similar way):
Classic:
.....
ha-card-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 3px
#Card-Mod
card-mod-theme: Classic #needs name of the theme
card-mod-card: |
.bubble-button-card-container {
box-shadow: var(--ha-card-box-shadow) !important;
}
.bubble-media-player-container {
box-shadow: var(--ha-card-box-shadow) !important;
}
