This should work.
.bubble-icon-container>ha-icon {
color: ${ hass.states['input_boolean.daylight'].state === 'on'? 'green' : 'red'} !important;
}
Like so? Unfortunately, no luck yet. The icon remains black.
- type: custom:bubble-card
card_type: button
button_type: state
entity: sensor.brightness_front_yard
styles: >
.bubble-button-card-container {
background: linear-gradient(
to right,
Orange 0%,
Yellow ${Math.round(state)}%,
Blue ${Math.round(state)}%,
Purple 100%
) !important; } ${icon.setAttribute("icon",
hass.states['input_boolean.daylight'].state === 'on' ? 'mdi:weather-sunny'
: 'mdi:weather-night')}
.bubble-icon-container>ha-icon {
color: ${ hass.states['input_boolean.daylight'].state === 'on'? 'green' : 'red'} !important;
icon: ""
name: ""
sub_button: []
layout_options:
grid_columns: 2
grid_rows: 1
Screen shot from the docs:
That’s where I got my code from above, but either it’s incorrect or I’m doing something wrong.
I think you messed up the indentation and the code. Copy the following under the styles-attribute in you bubble-card
styles: >
.bubble-button-card-container {
background: linear-gradient(to right, Orange 0%, Yellow ${Math.round(state)}%, Blue ${Math.round(state)}%, Purple 100%) !important;
}
.bubble-icon-container .bubble-icon {
${icon.setAttribute("icon",
hass.states['input_boolean.daylight'].state === 'on' ? 'mdi:weather-sunny'
: 'mdi:weather-night')}
color: ${ hass.states['input_boolean.daylight'].state === 'on'? 'green' : 'red'} !important;
}
This is untested.
Nope, no luck. Still black using this:
- type: custom:bubble-card
card_type: button
button_type: state
entity: sensor.brightness_front_yard
styles: >
.bubble-button-card-container {
background: linear-gradient(to right, Orange 0%, Yellow ${Math.round(state)}%, Blue ${Math.round(state)}%, Purple 100%) !important;
}
.bubble-icon-container .bubble-icon {
${icon.setAttribute("icon",
hass.states['input_boolean.daylight'].state === 'on' ? 'mdi:weather-sunny'
: 'mdi:weather-night')}
color: ${ hass.states['input_boolean.daylight'].state === 'on'? 'green' : 'red'} !important;
}
icon: ""
name: ""
sub_button: []
layout_options:
grid_columns: 2
grid_rows: 1
I do my editing in Notepad++ and try to keep my spacing & indenting in check.
EDIT: Just triple-checked, and the value of input_boolean.daylight is ‘on.’ That would be a stupid reason that I’m not seeing results, but I needed to be sure.
Try this instead, templates that are not modyfing the CSS must be placed at the end, I need to document that.
styles: >
.bubble-button-card-container {
background: linear-gradient(to right, Orange 0%, Yellow ${Math.round(state)}%, Blue ${Math.round(state)}%, Purple 100%) !important;
}
.bubble-icon-container .bubble-icon {
color: ${ hass.states['input_boolean.daylight'].state === 'on'? 'green' : 'red'} !important;
}
${icon.setAttribute("icon",
hass.states['input_boolean.daylight'].state === 'on' ? 'mdi:weather-sunny'
: 'mdi:weather-night')}
3 Likes
BINGO, thank you. That works.
1 Like
Sure, here is the code.
- type: custom:bubble-card
card_type: pop-up
name: Lista de la Compra
icon: mdi:list-box-outline
state: null
hash: "#compra"
is_sidebar_hidden: true
styles: >-
.bubble-pop-up-container {
--vertical-stack-card-gap: 0px!important;
} #header-container > div > div {
background: var(--popupBG)!important;
}
#header-container > button {background: none;}
.icon-container {background-color:var(--gray800)!important;}
.icon-container > ha-icon
{color:var(--gray000)!important;opacity:1!important}
.bubble-icon {
--mdc-icon-size: 22px !important;
}
bg_blur: "20"
shadow_opacity: "20"
bg_opacity: "88"
margin_top_mobile: "-20px"
margin_top_desktop: 50px
card_layout: large
Does someone know how to properly place a picture that I inserted as per the docs?
This is how the code below looks like:
When I decrease the background size, I get this:
Both not usable, this seems to require additional positioning or how is this supposed to be used?
type: custom:bubble-card
card_type: button
button_type: switch
scrolling_effect: false
show_icon: false
show_name: false
sub_button:
- entity: sensor.abfall_restmull
show_name: false
show_state: true
show_background: false
icon: none
styles: |-
.bubble-sub-button-1 {
background-image: url("/local/img/Abfall_Rest.png");
background-size: 45px;
}
entity: input_boolean.dummy
Hello @SPESINO
Thanks a lot, sorry I’m new to this, but this doesn’t seem to work for me
the code for this “style” is what you communicated to me?
I would like my cards in the pop-ups to be with this format
edit: can you give me the code for :
A pop-up
and
A button to open the pop-up
please, sorry i’m very newbie
Dear all,
Does anyone know if it is possible to add “switch on/off” animation when the button is in “state” mode (not in “switch” mode).
The main reason I don’t want to set the button to “Switch” mode as I need to change the colour only of the Icon and its Background instead of the entire button itself.
In “Switch” mode animation works as it should.
Thanks!
CODE OF POP-UP:
type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
name: Lista de la Compra
icon: mdi:list-box-outline
state: null
hash: "#compra"
is_sidebar_hidden: true
styles: >-
.bubble-pop-up-container {
--vertical-stack-card-gap: 0px!important;
} #header-container > div > div {
background: var(--popupBG)!important;
}
#header-container > button {background: none;}
.icon-container {background-color:var(--gray800)!important;}
.icon-container > ha-icon
{color:var(--gray000)!important;opacity:1!important}
.bubble-icon {
--mdc-icon-size: 22px !important;
}
bg_blur: "20"
shadow_opacity: "20"
bg_opacity: "88"
margin_top_mobile: "-20px"
margin_top_desktop: 50px
card_layout: large
- type: custom:gap-card
height: 5
- type: grid
square: false
columns: 3
cards:
- type: custom:mushroom-template-card
primary: Catálogo
secondary: ""
icon: mdi:view-grid
tap_action:
action: navigate
navigation_path: "#catalogo"
layout: vertical
icon_color: black
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: var(--gray000) !important;
--icon-symbol-size: 25px;
--icon-size: 60px;
}
.: |
ha-card {
background-color: #f5f7fa;
--primary-text-color: #ffffff;
}
- type: custom:mushroom-template-card
primary: Recientes
secondary: ""
icon: mdi:history
tap_action:
action: navigate
navigation_path: "#bought_items"
layout: vertical
icon_color: black
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: var(--gray000) !important;
--icon-symbol-size: 25px;
--icon-size: 60px;
}
.: |
ha-card {
background-color: #f5f7fa;
--primary-text-color: #ffffff;
}
- type: custom:mushroom-template-card
primary: Sugerencias
secondary: ""
icon: mdi:creation
tap_action:
action: navigate
navigation_path: "#suggestions"
layout: vertical
icon_color: black
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: var(--gray000) !important;
--icon-symbol-size: 25px;
--icon-size: 60px;
}
.: |
ha-card {
background-color: #f5f7fa;
--primary-text-color: #ffffff;
}
card_mod:
style: |
ha-card {
margin-top: 30px;
}
- type: conditional
conditions:
- entity: sensor.items_in_shopping_list_number
state_not: "0"
card:
type: vertical-stack
cards:
- type: custom:bubble-card
card_type: separator
name: Lista de Productos
icon: mdi:shopping
styles: |
.bubble-line {
background: #000000;
opacity: 0.7;
}
ha-card {
#background: white !important;
height: 50px !important;
padding-top: 14px !important;
}
- type: custom:gap-card
height: 15
- type: custom:auto-entities
show_empty: false
card:
square: true
type: grid
columns: 3
card_param: cards
filter:
template: >-
{% set LISTA = states('sensor.items_in_shopping_list_list') %}
{% set ITEMS = states('sensor.items_in_shopping_list_number') |
int %}
{% for INDEX in range(ITEMS) -%}
{%- set product = LISTA.split(',')[INDEX] -%}
{%- set picture = 'local/Shopping List/'+ product +'.png' -%}
{{
{
'type': 'custom:mushroom-template-card',
'entity': 'sensor.items_in_shopping_list_number',
'secondary': product,
'multiline_secondary': 'true',
'picture': picture,
'layout': 'vertical',
'fill_container': 'true',
'tap_action': {
'action': 'call-service',
'service': 'shopping_list.complete_item',
'data': { 'name': product }
},
'card_mod': {
'style': 'ha-card { background: #f5f7fa;); --icon-size: 50px; --card-secondary-font-size: 11px; --secondary-text-color: #ffffff; };',
},
}
}},
{%- endfor %}
CODE OF BUTTON:
- icon: >-
{{ 'mdi:basket-off' if is_state(config.entity, '0') else
'mdi:basket'}}
entity: sensor.items_in_shopping_list_number
layout: icon
name: Productos
ripple: none
tap_action:
action: navigate
navigation_path: "#compra"
styles:
name:
padding: 0 10px
button:
background: "{{ '#99ccff' if is_state(config.entity, '0') else '#ff6666' }}"
border-radius: 50%
color: white
height: 34px
icon:
"--mdc-icon-size": 22px
color: var(--black)
width: 34px
height: 34px
display: flex
justify-content: center
align-items: center
@Cloos Is this possible? Thanks.
Amazing thx your the best 
1 Like
Hi! The best way would be to use a switch button, and then set the tap, hold and double tap to “More info”.
Thank you very much for the comment.
But in this case I won’t be able to use it as a button, will it?
Below you can see example of “State” and “Switch” buttons in activated mode:
Basically, I would like to change the color of the icon itself instead of the button (if possible).
Below please see my codes:
State:
type: custom:bubble-card
card_type: button
entity: switch.living_room_table_power_distributor_l2
card_layout: large
styles: |-
.bubble-button-card-container {
background: rgba(0,0,0,0.2) !important;
.bubble-icon-container {
background: ${hass.states['switch.living_room_table_power_distributor_l4'].state === 'on' ? 'var(--accent-color)' : 'rgba(0,0,0,0.2)'} !important;
}
button_type: state
show_last_changed: false
show_state: false
show_name: true
force_icon: false
scrolling_effect: true
name: PC
icon: mdi:microsoft-windows
tap_action:
action: toggle
button_action:
tap_action:
action: toggle
layout_options:
grid_columns: 2
grid_rows: 1
Switch:
type: custom:bubble-card
card_type: button
entity: switch.living_room_table_power_distributor_l1
card_layout: large
styles: |-
.bubble-button-card-container {
background: rgba(0,0,0,0.2) !important;
.bubble-icon-container {
background: ${hass.states['switch.living_room_table_power_distributor_l1'].state === 'off' ? 'rgba(0,0,0,0.2)' : 'rgba(0,0,0,0.7)'} !important;
}
button_type: switch
show_last_changed: false
show_state: false
show_name: true
force_icon: false
scrolling_effect: true
name: Printer
icon: mdi:printer
tap_action:
action: toggle
button_action:
tap_action:
action: toggle
layout_options:
grid_columns: 2
grid_rows: 1
By the way, same applies to Sub-buttons:
Here is no transition/animation when switch on/off:
type: custom:bubble-card
card_type: separator
name: Ionization
card_layout: large
sub_button:
- icon: mdi:power
entity: switch.kitchen_ozon_switch_0
tap_action:
action: toggle
styles: |-
.bubble-sub-button-1 {
animation: ${hass.states['sensor.kitchen_ozon_switch_0_power'].state > 0.1 ? 'slow-rotate 2s linear infinite' : ''};
transition: color 0.3s ease-in-out;
color: ${hass.states['sensor.kitchen_ozon_switch_0_power'].state > 0.1 ? 'rgba(255, 255, 255,1)' : 'rgba(255,255,255,0.9)' };
background-color: ${hass.states['sensor.kitchen_ozon_switch_0_power'].state > 0.1 && hass.states['switch.group_ozon'].state === 'on' ?
'var(--accent-color)' : (hass.states['switch.group_ozon'].state === 'on' ?
'var(--accent-color)' : 'rgba(0,0,0,0.2)')};
}
@keyframes slow-rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(720deg); }
}
${subButtonIcon[0].setAttribute("icon", hass.states['sensor.kitchen_ozon_switch_0_power'].state > 0.1 ? 'mdi:fan' : 'mdi:power')
}
icon: ""
Thanks!
I am having a problem with the beta releases. On 2.2.4 my popups work fine. When I upgrade to the latest beta release whatever popup button I press I just get the same broken popup and I’m not sure why.
Here is my dashboard / buttons
Here is a popup on 2.2.4
and here is a popup if I install the new beta version.
I’ve tested this on PC browser, phone browser and tablet kiosk browser and all of them are broken.
Any advice on what I might need to fix to get the beta working?
I tested the card goes back up well but I don’t have the “opacity” or the contours as circled in the photo.
I admit I don’t understand … are you using a particular theme?
Hello,
Is it possible to change the size of the bubble card container that HA itself recognizes?
I want to make the card larger but it’s not large enough for this to be fixed using section layouts and this way it’s overlapping the other one.
I’ve tried changing margins in the css of ha-card element but that did not help.
This is the code i used to make the card larger:
.bubble-button-card-container {
margin-top: -7px !important;
height: 70px !important;
}
Hi! I haven’t changed anything that could do that, you are the first to raise this issue.
Have you checked your browser console as well? Any error in it?