Not neccessarry, styles is a way to add custom styles to bubble cards, so it makes no difference in practice.
Hi folks, I’m trying to change the icon of my buttons to white. However, when I use the code snippet found on GitHub it adds an opacity that I can’t seem to remove. Any ideas?
styles: |
.bubble-icon {
color: white !important;
}
The second isn’t as important, but is it possible add a gradient to the slider?
Right, it’s native to bubble card, sorry.
1 Like
No worries, would have been a good catch otherwise 
1 Like
…just add:
opacity: 1;
I’ve already tried that, but it didn’t work. It still retains some of the color from the switch state.
.bubble-icon {
color: white !important;
opacity: 1.0;
}
This is what i have used in the styles section:
.bubble-icon-container {
background-color: rgb(70, 85, 119) !important;
opacity: 0.8 !important;
}
.bubble-icon {
color: rgb(33, 150, 243) !important;
opacity: 1 !important;
}
This will also change the outside background of the icon
1 Like
if you change the order like this it works as well:
.bubble-icon {
opacity: 1;
color: white !important;
}
As a 53 year old dull male my Home assistant journey started about 8 months ago, with limited code or IT experience. With the assistance of YouTube video’s and this community I have a new hobby that seems to waste an awful lot of my time, much to the annoyance of my wife and Family.
My experience so far is that no matter how well you think you are doing you are always tinkering with your dashboard, making little adjustments here and there when you discover how to do something new.
I am now on my 3rd dashboard set up and I place the blame firmly on Cloos!
Initially I started off with a basic dashboard, which met all of my very simple needs and then I stumbled across his first minimalist dashboard and the bubble theme and spend hours trying to work out how all his code worked and started building my 2nd dashboard and then just as I thought I had cracked it, he went and launched the bubble card and this led me to me then starting on the my latest creation, which is by no means perfect and is still a work in progress but thought I would share it with you all.
The bits I am most pleased about are: -
The colours and rooms change depend on which room I am in and it will also tell me who is in room.
My Car Pop-Up which now shades the car based on the percentage charge in my battery and has a pulse light when the car is charging. There are a few more things I need to do with this one but trying to find some inspiration from other people about what they do with their cars on cards and dashboards.
Cloos thanks for the time you have spent developing this card and fixing the bugs but also for taking the time to help those of us who pretend to know what they are doing by answering all our silly questions, I hope you are taking the time to enjoy fatherhood and I look forward to seeing what you come up with next!
4 Likes
very nice! Congrats! Especially like your car-popup. Would you care to share the yaml code, of the pulsing car and the map-card? That would be great… might consider to implement that myself as well 
Cheers!
1 Like
I am sure there is a more efficient way of doing it but this was what I came up with
type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: '#car'
button_type: state
entity: person.volvo
name: Volvo XC40 Recharge
trigger_entity: binary_sensor.volvo_yv1xzedven2745191_engine_state
trigger_state: 'on'
trigger_close: true
styles: |-
.bubble-name {
color: rgba(229,221,207,1) !important;
}
.bubble-state {
color: rgba(229,221,207,1) !important;
}
bg_color: rgba(57.54,70,1)
show_header: true
background_update: false
close_by_clicking_outside: false
- type: vertical-stack
cards:
- type: custom:button-card
label: Battery Range
show_name: false
show_label: true
show_icon: false
show_state: false
tap_action: none
styles:
grid:
- grid-template-areas: |
"range"
"l"
"img"
"pulse"
"pulse2"
"engine"
"battery"
"controls"
"trip_data"
- grid-template-columns: 1fr
- grid-template-rows: 1fr repeat(8, min-content)
card:
- border-radius: var(--border-radius)
- overflow: visible
- background: none
label:
- text-align: center
- font-size: var(--fs-400)
- font-family: Montserrat
- font-weight: 500
- align-self: start
- color: rgba(229,221,207,1)
custom_fields:
range:
- align-self: end
- font-size: var(--fs-xl)
- font-family: Montserrat
- font-weight: 500
- background: none
- color: rgba(229,221,207,1)
- overflow: visible
engine:
- background: none
- border-radius: 25px
- padding: 2px 5px 2px 5px
- justify-self: center
- font-size: var(--fs-400)
- font-family: Montserrat
- font-weight: 500
- color: rgba(229,221,207,1)
- overflow: visible
img: null
pulse:
- position: absolute
- top: 41%
- left: 50%
- margin-top: 1rem
- margin-left: '-10rem'
pulse2:
- position: absolute
- top: 41%
- left: 55%
- margin-top: 1rem
- margin-left: '-10rem'
custom_fields:
pulse:
card:
type: custom:button-card
entity: sensor.volvo_yv1xzedven2745191_charging_system_status
show_name: false
show_icon: false
show_state: false
state:
- value: Idle
styles:
card:
- height: 2rem
- width: 16rem
- top: '-4rem'
- left: 1.7rem
- background-color: transparent !important
- value: Scheduled
styles:
card:
- height: 2rem
- width: 16rem
- top: '-4rem'
- left: 1.7rem
- background-color: transparent !important
- value: Done
styles:
card:
- height: 2rem
- width: 16rem
- top: '-4rem'
- left: 1.7rem
- border: 2px solid
- background-color: transparent !important
- border-radius: 50%
- border: 2px solid rgba(252, 184, 1, 1);
- opacity: 0
- box-shadow:
- 0 0 10px 3px rgba(252, 184, 1, 1)
- inset 0 0 5px 2px rgba(252, 184, 1, 1);
- animation: pulse 2.5s infinite
- value: Charging
styles:
card:
- height: 2rem
- width: 16rem
- top: '-4rem'
- left: 1.7rem
- border: 2px solid
- background-color: transparent !important
- border-radius: 50%
- border: 2px solid rgba(0, 255, 0, 1);
- opacity: 0
- box-shadow:
- 0 0 10px 3px rgba(0, 255, 0, 1)
- inset 0 0 5px 2px rgba(0, 255, 0, 1);
- animation: pulse 2.5s infinite
extra_styles: |
@keyframes
pulse {
0% {
opacity: 0;
transform: scale(0.5);
}
50% {
opacity: 1;
}
100% {
opacity: 0;
transform: scale(1.7);
}
}
pulse2:
card:
type: custom:button-card
entity: sensor.volvo_yv1xzedven2745191_charging_system_status
show_name: false
show_icon: false
show_state: false
state:
- value: Idle
styles:
card:
- height: 2rem
- width: 16rem
- top: '-4rem'
- left: 1.7rem
- background-color: transparent !important
- value: Done
styles:
card:
- height: 2rem
- width: 16rem
- top: '-4rem'
- left: 1.7rem
- background-color: transparent !important
- value: Scheduled
styles:
card:
- height: 2rem
- width: 16rem
- top: '-4rem'
- left: 1.7rem
- border: 2px solid
- background-color: transparent !important
- border-radius: 50%
- border: 2px solid rgba(252, 184, 1, 1);
- opacity: 0
- box-shadow:
- 0 0 10px 3px rgba(252, 184, 1, 1)
- inset 0 0 5px 2px rgba(252, 184, 1, 1);
- animation: pulse 2.5s infinite
- animation-delay: 1.25s
- value: Charging
styles:
card:
- height: 2rem
- width: 16rem
- top: '-4rem'
- left: 1.7rem
- border: 2px solid
- background-color: transparent !important
- border-radius: 50%
- border: 2px solid rgba(0, 255, 0, 1);
- opacity: 0
- box-shadow:
- 0 0 10px 3px rgba(0, 255, 0, 1)
- inset 0 0 5px 2px rgba(0, 255, 0, 1);
- animation: pulse 2.5s infinite
- animation-delay: 1.25s
extra_styles: |
@keyframes
pulse {
0% {
opacity: 0;
transform: scale(0.5);
}
50% {
opacity: 1;
}
100% {
opacity: 0;
transform: scale(1.7);
}
}
range: |
[[[
return states['sensor.volvo_yv1xzedven2745191_distance_to_empty_battery'].state
+ '<span style="font-size:0.4em">mls</span>'
]]]
engine: |
[[[
if(states['binary_sensor.volvo_yv1xzedven2745191_engine_state'].state == 'on') {
return 'Vehicle is running. '
}
else if(states['binary_sensor.volvo_yv1xzedven2745191_engine_state'].state == 'off' &&
states['sensor.volvo_yv1xzedven2745191_charging_connection_status'].state == 'Disconnected') {
return ' Vehicle parked, unplugged. '
}
else if(states['binary_sensor.volvo_yv1xzedven2745191_engine_state'].state = 'off' &&
states['sensor.volvo_yv1xzedven2745191_charging_connection_status'].state == 'Connected AC' &&
states['sensor.volvo_yv1xzedven2745191_charging_system_status'].state == 'Scheduled') {
return 'Vehicle parked, plugged and scheduled to charge. '
}
else if(states['binary_sensor.volvo_yv1xzedven2745191_engine_state'].state == 'off' &&
states['sensor.volvo_yv1xzedven2745191_charging_connection_status'].state == 'Connected AC' &&
states['sensor.volvo_yv1xzedven2745191_charging_system_status'].state == 'Charging') {
return ' Vehicle parked and charging! '
}
else {
return ' Running away from you! '
}
]]]
img:
card:
type: picture-elements
image: /local/images/transparent.png
card_mod:
style: |
ha-card {
height: 250px !important;
background: none !important;
box-shadow: none !important;
}
elements:
- type: image
image: /local/images/volvo_exterior_dark.png
style:
top: 0%
left: 0%
transform: translate(0,0)
color: transparent
- type: image
image: /local/images/volvo_exterior_light.png
style:
top: 0%
left: 0%
transform: translate(0,0)
color: transparent
card_mod:
style:
hui-image $: >
.container > img#image {
{% set LEVEL
=100-states('sensor.volvo_yv1xzedven2745191_battery_charge_level')|int
-%}
mask-image: linear-gradient(to left, transparent
{{LEVEL}}%, white {{LEVEL|int+1}}%);
}
battery:
card:
type: custom:button-card
show_name: false
show_icon: false
show_label: false
show_state: false
tap_action:
action: none
styles:
grid:
- grid-template-areas: '"ev_battery efficiency"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr
- column-gap: 8px
card:
- background: none
- overflow: Visible
custom_fields:
ev_battery:
- align-self: middle
- justify-self: middle
efficiency:
- align-self: middle
- justify-self: middle
custom_fields:
ev_battery:
card:
type: custom:bubble-card
card_type: button
button_type: state
entity: sensor.volvo_yv1xzedven2745191_battery_charge_level
name: Battery Level
show_attribute: false
attribute: icon
double_tap_action:
action: none
hold_action:
action: none
styles: |-
.bubble-button-card-container {
box-shadow: 2px 2px 5px rgba(255, 255, 255, 0.2), inset 2px 2px 5px rgba(255, 255, 255, 0.1);
font-family: "Montserrat";
font-size: 12px;
}
.bubble-name {
color: rgba(229,221,207,1)
}
.bubble-state {
color: rgba(229,221,207,1)
}
efficiency:
card:
type: custom:bubble-card
card_type: button
button_type: state
entity: sensor.estimated_efficiency
name: Est. Efficiency
show_attribute: false
attribute: icon
double_tap_action:
action: none
hold_action:
action: none
styles: |-
.bubble-button-card-container {
box-shadow: 2px 2px 5px rgba(255, 255, 255, 0.2), inset 2px 2px 5px rgba(255, 255, 255, 0.1);
font-family: "Montserrat";
font-size: 12px;
}
.bubble-name {
color: rgba(229,221,207,1)
}
.bubble-state {
color: rgba(229,221,207,1)
}
controls:
card:
type: custom:bubble-card
card_type: button
button_type: name
name: Controls
icon: mdi:key-chain
sub_button:
- entity: lock.volvo_yv1xzedven2745191_lock_status
name: Doors
show_state: true
show_attribute: false
show_name: true
tap_action:
action: toggle
hold_action:
action: more-info
- show_name: true
name: Air-conditioning
entity: switch.volvo_yv1xzedven2745191_climate_status
show_state: true
show_attribute: false
tap_action:
action: toggle
hold_action:
action: more-info
styles: |-
.bubble-button-card-container {
box-shadow: 2px 2px 5px rgba(255, 255, 255, 0.2), inset 2px 2px 5px rgba(255, 255, 255, 0.1);
font-family: "Montserrat";
font-size: 12px;
}
.bubble-name {
color: rgba(229,221,207,1)
}
.bubble-state {
color: rgba(229,221,207,1)
}
.bubble-sub-button {
color: rgba(229,221,207,1)
}
trip_data:
card:
type: custom:button-card
show_name: false
show_icon: false
show_label: false
show_state: false
tap_action:
action: none
styles:
grid:
- grid-template-areas: >-
"daily_miles daily_economy" "monthly_miles
monthly_economy"
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr 1fr
- column-gap: 8px
- row-gap: 20px
card:
- background: none
- overflow: Visible
custom_fields:
ev_battery:
- align-self: middle
- justify-self: middle
efficiency:
- align-self: middle
- justify-self: middle
custom_fields:
daily_miles:
card:
type: custom:bubble-card
card_type: button
button_type: state
entity: sensor.um_daily_car_mileage
name: Daily Miles
icon: mdi:counter
show_attribute: false
attribute: icon
double_tap_action:
action: none
hold_action:
action: none
styles: |-
.bubble-button-card-container {
box-shadow: 2px 2px 5px rgba(255, 255, 255, 0.2), inset 2px 2px 5px rgba(255, 255, 255, 0.1);
font-family: "Montserrat";
font-size: 12px;
}
.bubble-name {
color: rgba(229,221,207,1)
}
.bubble-state {
color: rgba(229,221,207,1)
}
daily_economy:
card:
type: custom:bubble-card
card_type: button
button_type: state
entity: sensor.ev_efficiency_daily
name: Daily Economy
icon: mdi:car
show_attribute: false
attribute: icon
double_tap_action:
action: none
hold_action:
action: none
styles: |-
.bubble-button-card-container {
box-shadow: 2px 2px 5px rgba(255, 255, 255, 0.2), inset 2px 2px 5px rgba(255, 255, 255, 0.1);
font-family: "Montserrat";
font-size: 12px;
}
.bubble-name {
color: rgba(229,221,207,1)
}
.bubble-state {
color: rgba(229,221,207,1)
}
monthly_miles:
card:
type: custom:bubble-card
card_type: button
button_type: state
entity: sensor.um_monthly_car_mileage
name: Monthly Miles
icon: mdi:counter
show_attribute: false
attribute: icon
double_tap_action:
action: none
hold_action:
action: none
styles: |-
.bubble-button-card-container {
box-shadow: 2px 2px 5px rgba(255, 255, 255, 0.2), inset 2px 2px 5px rgba(255, 255, 255, 0.1);
font-family: "Montserrat";
font-size: 12px;
}
.bubble-name {
color: rgba(229,221,207,1)
}
.bubble-state {
color: rgba(229,221,207,1)
}
monthly_economy:
card:
type: custom:bubble-card
card_type: button
button_type: state
entity: sensor.ev_efficiency_monthly
name: Monthly Economy
icon: mdi:car
show_attribute: false
attribute: icon
double_tap_action:
action: none
hold_action:
action: none
styles: |-
.bubble-button-card-container {
box-shadow: 2px 2px 5px rgba(255, 255, 255, 0.2), inset 2px 2px 5px rgba(255, 255, 255, 0.1);
font-family: "Montserrat";
font-size: 12px;
}
.bubble-name {
color: rgba(229,221,207,1)
}
.bubble-state {
color: rgba(229,221,207,1)
}
- type: horizontal-stack
cards:
- type: custom:stack-in-card
card_mod:
style: |
ha-card {
background: url('https://maps.geoapify.com/v1/staticmap?style=osm-bright&width=600&height=230¢er=lonlat:{{ state_attr('device_tracker.volvo_yv1xzedven2745191_location', 'longitude') }},{{ state_attr('device_tracker.volvo_yv1xzedven2745191_location', 'latitude') }}&zoom=14.0&marker=lonlat:{{ state_attr('device_tracker.volvo_yv1xzedven2745191_location', 'longitude') }},{{ state_attr('device_tracker.volvo_yv1xzedven2745191_location', 'latitude') }};type:material;{{ iif(is_state('person.volvo', 'home'), 'color:green;icon:home;', iif(is_state('person.volvo', 'work'), 'color:blue;icon:building;', 'color:red;')) }}icontype:awesome&scaleFactor=2&apiKey=148e4f35121d41048b45f6d8b0513990');
background-size: cover;
background-blend-mode: overlay;
background-color: rgba(var(--rgb-card-background-color), 1.0;
}
cards:
- type: custom:mushroom-template-card
entity: person.volvo
primary: ''
secondary: >-
{{ state_attr('sensor.volvo_xc40_location', 'Street') }}, {{
state_attr('sensor.volvo_xc40_location', 'City') }}, {{
state_attr('sensor.volvo_xc40_location', 'Postal Code') }}
picture: '{{ state_attr(entity, ''entity_picture'') }}'
badge_icon: >-
{% set zone = iif(states(entity) == 'not_home', 'away',
states(entity)) %} {%- if 'home' in zone.lower() -%}
mdi:home
{%- elif zone == 'work' -%}
mdi:office-building
{%- else -%}
mdi:home-export-outline
{%- endif -%}
badge_color: >-
{% set zone = iif(states(entity) == 'not_home', 'away',
states(entity)) %} {%- if 'home' in zone.lower() -%}
green
{%- elif zone == 'work' -%}
blue
{%- else -%}
red
{%- endif -%}
fill_container: true
multiline_secondary: true
layout: horizontal
tap_action:
action: more-info
card_mod:
style: |
:host {
height: 100px;
--mush-icon-size: 40px;
--secondary-text-color: black !important;
}
ha-card {
--card-primary-color: black;
--card-secondary-color: black !important;
}
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.volvo_travel_time
card_mod:
style: |
ha-card {
--chip-box-shadow: 0px 0px 0px 0px;
--chip-background: none;
--chip-border: none;
--primary-text-color: grey;
--text-color: grey;
}
1 Like
wow, that’s a lot to look into, but I will
Must say when reading your post I recognized a lot… Have started with HA myself only since this January… actually because I bought a new remote for my home cinema for which you can achieve a lot with HA… so the journey started and it seems to be never-ending…
It’s working kind of fine when it’s off, but when it’s on the opacity is still there.
What is the meteo widget on the card layouts screenshot?
Than you should change the color yourself depending on state of your entity —-> see examples on github where color is changed conditionally.
You then use the needed color coded as rgba. For example the following for orange:
rgba(255, 165, 0, 0.8)
Where the 0.8 regulates the opacity.
Sometimes my pop up cards close out of nowhere. Is there a way to leave the pop up cards permanently open until I close them manually? I have not entered autoclose.
Apologies if this is answered already in the thread. Its a damn long thread and I did look first!
Is it possible to change the font color in a sub button. I am changing the background color of the sub button using templating but with certain colors I really need to change the font color at the same time.
When using the following code
.bubble-sub-button-2 {
color: orange !important;
}
State and name are shown in orange…
1 Like
I like how I’m not the only one with a test page haha.
perfect, thanks