This is exactly what im hoping for.
Whats the code for your helper?
Have you see this?
1 Like
I have no idea where to find the code for helpers (created via GUI), it is just a simple input_number helper:
This solution is quick’n dirty, if you would like a clean solution you should consider MrBearPresidens link.
I have not. This is awesome. Thanks.
1 Like
I found the error:
Instead of the curly bracket I had a normal bracket at the end of the “.bubble-sub-button-container”.
Here is the working code:
type: vertical-stack
cards:
- type: custom:bubble-card
card_type: button
button_type: name
card_layout: large
name: Badezimmer
icon: mdi:bathtub
show_state: false
button_action:
action: navigate
navigation_path: Badezimmer
tap_action:
action: navigate
navigation_path: Badezimmer
sub_button:
- entity: sensor.raumklima_bad_co2
show_background: false
show_state: true
icon: mdi:molecule-co2
tap_action: more-info
hold_action:
action: more-info
- entity: sensor.raumklima_bad_luftfeuchtigkeit
show_background: false
show_state: true
tap_action: more-info
hold_action:
action: more-info
- entity: sensor.raumklima_bad_temperatur
show_background: false
show_state: true
tap_action: more-info
hold_action:
action: more-info
styles: |
.bubble-button-card-container,
.bubble-button-card {
height: 80px !important;
background: transparent !important;
font-size: 15px !important;
}
.bubble-icon-container,
.bubble-name-container {
top: -25px;
}
.bubble-sub-button-container {
position: absolute !important;
bottom: 0px !important;
justify-content: left !important;
width: calc(100% - 20px) !important;
right: inherit !important;
margin: 10px !important;
height: 30px !important;
}
.bubble-feedback-element {
height: 200% !important;
}
.bubble-name {
font-size: 15px !important;
}
.bubble-sub-button-1 {
background-color: ${hass.states['sensor.raumklima_bad_co2'].state >= 1250 ? 'tomato' :
hass.states['sensor.raumklima_bad_co2'].state >= 750 ? '#FFB347' :
hass.states['sensor.raumklima_bad_co2'].state >= 100 ? 'transparent' :
'transparent'} !important;
}
.bubble-sub-button-2 {
background-color: ${hass.states['sensor.raumklima_bad_luftfeuchtigkeit'].state >= 80 ? 'tomato' :
hass.states['sensor.raumklima_bad_luftfeuchtigkeit'].state >= 60 ? '#FFB347' :
'transparent'} !important;
color: ${hass.states['sensor.raumklima_bad_luftfeuchtigkeit'].state >= 60 && hass.states['sensor.raumklima_bad_luftfeuchtigkeit'].state <= 80 ? '#383838' : 'inherit'} !important;
}
.bubble-sub-button-3 {
background-color: ${hass.states['sensor.raumklima_bad_temperatur'].state >= 28 ? 'tomato' :
hass.states['sensor.raumklima_bad_temperatur'].state >= 23 ? '#FFB347' :
hass.states['sensor.raumklima_bad_temperatur'].state >= 17 ? 'transparent' :
'LightSkyBlue'} !important;
color: ${hass.states['sensor.raumklima_bad_temperatur'].state < 17 ? '#383838' : 'inherit'} !important;
}
tap_action:
action: navigate
navigation_path: Badezimmer
show_icon: false
force_icon: false
scrolling_effect: false
Hello, serched this thread, but with no luck and decided to ask.
It is possible to add frame around Bubble button and change frame color?
So bubble button have the same frame as other button on screenshot.
If it is possible whats style name/code to add that frame?
What are you looking for? A progress bar button card like this?
2 Likes
Any chance of sharing the code for these? Look great!
That progress bar (timer for switch) is in totaly different card, but i want add the thin light golden border line/frame around that card to Bubble card so both cards look the same.
Not sure if see good, but in your cards there is white border line around cards or its just added shadow effect? (hard to say when its white on white). But if its white border like it could work.
When you look on turned off switch, there is just dark background, and i want to add that bordel line around button.
