Congratulations!! 
1 Like
Great job,
How could we define all the --var for background-color
How can I know what is the accent-color, success-color,…
Thanks
Is it possible to use dynamic names in the horizontal buttons stack?
For example, one of the buttons in the horizontal button stack is named “Attic.” I’d like it to dynamically display as “Attic 30°C,” with the temperature value read from the climate.attic entity (temperature attribute).
I understand how to achieve this for a normal button, but it doesn’t seem to work for the horizontal buttons stack.
${card.querySelector('.bubble-name').innerText = "It's currently " +
hass.states['weather.home'].state}
Hello,
Is it possible to make horizontal stack dynamique with optional cards ?
If I configure “Card1 / card2/ card3” and card2 is not displayed I see “card1 card3” instead of “Card1 card 3”
Thanks
Just wanted to share my dashboard created with this amazing card.
My setup is mainly mobile. I do not use a tablet or screen anywhere else. Everything is done with voice, so my layout is based for mobile specifically.
Home page
each of the horizontal buttons below open up popup cards
I also have the cards on the main page opening other cards with the popup function.
I have made some minor changes. I have added a decluttering card that allows me to place a timer-bar-card on the card above it. Placement is pretty much hard valued right now, as i couldn’t figure a better way to do it. If anybody knows a better way to do what i am trying to acheive im all ears.
Hope you all like.
11 Likes
Hi Cloos! Gratulations (you got father I read) and greetings from Austria. I like the style of bubble cards. Great to use. Unfortunately I often need entity values to visualize. I found no possibility to do that with Bubble Cards.
It would be GREAT to have a Bubble Card that looks like the Slider Button Card , where you can set min and max-value and use it as horizontal Bubble Card style Bar-Graph.
How many beers to buy to get that? 
Hi Cloos-- I love these bubble cards-- I use them exclusively on my dashboard!
I had a question for you-- when I open a popup, there is a large gap above the top (shown below). Does anyone know if I’m doing something wrong or if there is a way to remove this odd space?
Thanks!
@Cloos Don’t mean sound demanding, but could you have a look at this please? thanks
@sfmc Adjust height under Styling options > Popup styling to your liking.
1 Like
Hi, I now had the time to test the new version of Bubble-card. In the header of two pop-ups I do have sub-button-icons which change under certain conditions. this used to work without a problem. Now with the new version, these pop-ups do not work anymore (they don‘t pop up) as long as I leave the following code in the styling section:
${subButtonIcon[0].setAttribute("icon", hass.states['cover.sonnenrollo'].state === 'open' ? 'mdi:window-shutter-open' : 'mdi:window-shutter')}
When I remove the code everything works again…
Is this a bug for the header of the popups… or do I have to change something else in the code?
Thanks for helping!
Looks really nice! Great job!
Would you mind sharing your yaml?
Hi,
Will Need help for my Dashboard project.
I am using a floorplan Dashboard using picture elements and condicional for light efects in every division of the house.
In order to not have so many icons on the dash wanted to add an horizontal stack buttons with pop-up style.
The problem is when trying to add the buble pop up Card inside picture elements i cannot get the pop up to work.
Any idea How to add pop up style inside picture elements?
I have tried to using hui-elements, but the image stays blurred during the pop-up.
Hello, THANK YOU for this card collection!
I have been using it quite extensively to craft a mobile dashboard for me. I do have one issue I would like to ask (to see if someone spots any errors I made, or is there a minor bug somewhere).
I have a popup showing all my blind devices. I am using a combination of bubble and mushroom in order to get the behaviour I need. (my blinds are switchbot blind tilts so I need to use the tilt_position to control the blinds, I could not for the life of me get this working with bubble slider). The end result is otherwise perfect for what I need, but my template for sub-button background color is not working for some reason. If the blinds are closed, it works as expected (other button in different color) but when the blinds are open, the template no longer works and both buttons have the same background color. See picture attached.
EDIT: and to clarify, I tested the bubble-card button without layout card, still the same. And developer tools shows ‘open’ or ‘closed’ for the blinds state.
The YAML:
type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: '#verhot'
button_type: name
name: Verhot
icon: mdi:blinds-horizontal
sub_button:
- name: Avaa
show_name: true
icon: mdi:blinds-horizontal
entity: script.open_all_blinds
tap_action:
action: call-service
service: script.turn_on
target:
entity_id: script.open_all_blinds
- name: Sulje
show_name: true
icon: mdi:blinds-horizontal-closed
entity: script.close_all_blinds_script
tap_action:
action: call-service
service: script.turn_on
target:
entity_id: script.close_all_blinds_script
styles: |-
.bubble-sub-button-1 {
opacity: 1 !important;
background-color: ${hass.states['cover.olohuoneen_verhot'].state === 'closed' ? 'var(--accent-color)' : 'none'} !important;
}
.bubble-sub-button-2 {
opacity: 1 !important;
background-color: ${hass.states['cover.olohuoneen_verhot'].state === 'open' ? 'var(--accent-color)' : 'none'} !important;
}
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 2fr 1fr
grid-template-rows: auto
grid-template-areas: |
"left right"
cards:
- type: custom:bubble-card
card_type: button
button_type: state
entity: cover.blind_tilt_bedroom
name: Makuuhuone
double_tap_action:
action: none
hold_action:
action: none
show_state: true
show_attribute: true
attribute: current_tilt_position
card_layout: large
show_name: true
show_icon: false
sub_button:
- entity: cover.blind_tilt_bedroom
icon: mdi:blinds-horizontal
name: Avaa
show_name: true
tap_action:
action: call-service
service: script.turn_on
target:
entity_id: script.open_bedroom_blinds
- entity: cover.blind_tilt_bedroom
name: Sulje
icon: mdi:blinds-horizontal-closed
show_state: false
show_name: true
tap_action:
action: call-service
service: script.turn_on
target:
entity_id: script.close_bedroom_blinds_script
styles: |-
.bubble-sub-button-1 {
opacity: 1 !important;
background-color: ${hass.states['cover.blind_tilt_bedroom'].state === 'closed' ? 'var(--accent-color)' : 'none'} !important;
}
.bubble-sub-button-2 {
opacity: 1 !important;
background-color: ${hass.states['cover.blind_tilt_bedroom'].state === 'open' ? 'var(--accent-color)' : 'none'} !important;
}
- type: custom:mushroom-cover-card
entity: cover.blind_tilt_bedroom
name: Makuuhuone
icon: phu:blind-tilt-open
show_tilt_position_control: true
show_position_control: false
show_buttons_control: false
layout: horizontal
icon_type: none
primary_info: none
secondary_info: none
card_mod:
style:
mushroom-cover-tilt-position-control$:
mushroom-slider$: |
.slider {
--main-color: var(--accent-color) !important;
--bg-color: var(--accent-color-2) !important;
--gradient: none;
}
.: |
mushroom-cover-tilt-position-control {
--control-height: 48px !important;
--control-border-radius: var(--ha-card-border-radius, 24px);
}
ha-card {
border-radius: 34px!important;
height: 64px!important;
padding: 8px !important;
}
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 2fr 1fr
grid-template-rows: auto
grid-template-areas: |
"left right"
cards:
- type: custom:bubble-card
card_type: button
button_type: state
entity: cover.blind_tilt_kids_room
name: Alvinin huone
double_tap_action:
action: none
hold_action:
action: none
show_state: true
show_attribute: true
attribute: current_tilt_position
card_layout: large
show_name: true
show_icon: false
sub_button:
- entity: cover.blind_tilt_kids_room
icon: mdi:blinds-horizontal
name: Avaa
show_name: true
tap_action:
action: call-service
service: script.turn_on
target:
entity_id: script.open_kidsroom_blinds
- entity: cover.blind_tilt_kids_room
name: Sulje
icon: mdi:blinds-horizontal-closed
show_state: false
show_name: true
tap_action:
action: call-service
service: script.turn_on
target:
entity_id: script.close_kidsroom_blinds_script
styles: |-
.bubble-sub-button-1 {
opacity: 1 !important;
background-color: ${hass.states['cover.blind_tilt_kids_room'].state === 'closed' ? 'var(--accent-color)' : 'none'} !important;
}
.bubble-sub-button-2 {
opacity: 1 !important;
background-color: ${hass.states['cover.blind_tilt_kids_room'].state === 'open' ? 'var(--accent-color)' : 'none'} !important;
}
- type: custom:mushroom-cover-card
entity: cover.blind_tilt_kids_room
name: Makuuhuone
icon: phu:blind-tilt-open
show_tilt_position_control: true
show_position_control: false
show_buttons_control: false
layout: horizontal
icon_type: none
primary_info: none
secondary_info: none
card_mod:
style:
mushroom-cover-tilt-position-control$:
mushroom-slider$: |
.slider {
--main-color: var(--accent-color) !important;
--bg-color: var(--accent-color-2) !important;
--gradient: none;
}
.: |
mushroom-cover-tilt-position-control {
--control-height: 48px !important;
--control-border-radius: var(--ha-card-border-radius, 24px);
}
ha-card {
border-radius: 34px!important;
height: 64px!important;
padding: 8px !important;
}
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 2fr 1fr
grid-template-rows: auto
grid-template-areas: |
"left right"
cards:
- type: custom:bubble-card
card_type: button
button_type: state
entity: cover.olohuoneen_verhot
name: Olohuone
double_tap_action:
action: none
hold_action:
action: none
show_state: true
show_attribute: true
attribute: current_tilt_position
card_layout: large
show_name: true
show_icon: false
sub_button:
- entity: cover.olohuoneen_verhot
icon: mdi:blinds-horizontal
name: Avaa
show_name: true
tap_action:
action: call-service
service: cover.set_cover_tilt_position
target:
entity_id: cover.olohuoneen_verhot
data:
tilt_position: 40
- entity: cover.olohuoneen_verhot
name: Sulje
icon: mdi:blinds-horizontal-closed
show_state: false
show_name: true
tap_action:
action: call-service
service: cover.set_cover_tilt_position
target:
entity_id: cover.olohuoneen_verhot
data:
tilt_position: 100
styles: |-
.bubble-sub-button-1 {
opacity: 1 !important;
background-color: ${hass.states['cover.olohuoneen_verhot'].state === 'closed' ? 'var(--accent-color)' : 'none'} !important;
}
.bubble-sub-button-2 {
opacity: 1 !important;
background-color: ${hass.states['cover.olohuoneen_verhot'].state === 'open' ? 'var(--accent-color)' : 'none'} !important;
}
- type: custom:mushroom-cover-card
entity: cover.olohuoneen_verhot
name: Olohuone
icon: phu:blind-tilt-open
show_tilt_position_control: true
show_position_control: false
show_buttons_control: false
layout: horizontal
icon_type: none
primary_info: none
secondary_info: none
card_mod:
style:
mushroom-cover-tilt-position-control$:
mushroom-slider$: |
.slider {
--main-color: var(--accent-color) !important;
--bg-color: var(--accent-color-2) !important;
--gradient: none;
}
.: |
mushroom-cover-tilt-position-control {
--control-height: 48px !important;
--control-border-radius: var(--ha-card-border-radius, 24px);
}
ha-card {
border-radius: 34px!important;
height: 64px!important;
padding: 8px !important;
}
1 Like
Hello, i hope someone can help me. How can I make the border of a bubble card (Button/state) 1px large with a color. I have a standard theme, but the bubble card does not draw a blue border around it. See picture
Try adding this to the styling options - custom styles part:
.bubble-button-card-container {
border: 1px solid;
border-color: blue;
}
Your dashboard looks great. Especially your vacuum/room select button…could share your code?
I think that would be the Sankey Chart.
1 Like
This is the code for the mushroom button on the main page that opens up to the vacuum popup
type: custom:mushroom-template-card
primary: Blinds
secondary: ''
icon: mdi:blinds
icon_color: teal
layout: vertical
tap_action:
action: navigate
navigation_path: '#blinds'
hold_action:
action: none
double_tap_action:
action: none
fill_container: false
card_mod:
style: |
ha-card {
background: var(--background-color-2);
border-radius: 35px;
}
This is a vertical stack, using the bubble popup. This opens when you press the vacuum button on the main page.
type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: '#vacuum'
show_header: true
button_type: state
entity: vacuum.alice
show_last_changed: true
tap_action:
action: none
double_tap_action:
action: none
hold_action:
action: none
button_action:
tap_action:
action: none
double_tap_action:
action: none
hold_action:
action: none
- type: custom:bubble-card
card_type: select
entity: input_select.room_select
show_state: true
sub_button:
- entity: input_button.go
name: Go
show_name: true
tap_action:
action: call-service
service: script.turn_on
target:
entity_id: script.vacuum_room_select
- type: custom:vacuum-card
entity: vacuum.alice
stats:
default:
- entity_id: sensor.alice_filter_lifespan
unit: '%'
subtitle: Filter
- entity_id: sensor.alice_main_brush_lifespan
unit: '%'
subtitle: Main Brush
- entity_id: sensor.alice_side_brushes_lifespan
unit: '%'
subtitle: Side Brush
cleaning:
- entity_id: sensor.alice_cleaning_duration
unit: minutes
subtitle: Cleaning Time
- entity_id: sensor.alice_total_area_cleaned
unit: m²
subtitle: Area Cleaned
4 Likes
Yaml for the main layout card on the main page
type: custom:layout-card
layout_type: masonry
cards:
- type: custom:decluttering-card
template: header_main
- show_current: false
show_forecast: true
type: weather-forecast
entity: weather.openweathermap
forecast_type: daily
card_mod:
style: |
ha-card {
background: var(--background-color-2);
border-radius: 50px;
}
- type: custom:bubble-card
card_type: button
button_type: state
entity: person.hannah_holden
show_attribute: false
attribute: device_trackers
show_last_changed: false
show_name: true
card_layout: large
sub_button:
- entity: sensor.hannah_holdens_iphone_geocoded_location
show_icon: false
show_state: true
show_background: false
- entity: sensor.hannah_holdens_iphone_battery_level
show_state: true
show_background: false
- entity: sensor.hannah_holdens_iphone_activity
styles: |-
.bubble-button-background {
background-color: ${state === 'home' ? 'var(--accent-color)':''} !important;
}
.bubble-sub-button-1 {
font-size: 10px;
line-height: 1.5;
text-align: center;
}
- type: custom:bubble-card
card_type: button
button_type: state
entity: person.christopher_hemmings
show_attribute: false
attribute: device_trackers
show_last_changed: false
show_name: true
card_layout: large
sub_button:
- entity: sensor.iphone_13_pro_max_geocoded_location
show_icon: false
show_state: true
show_background: false
- entity: sensor.iphone_13_pro_max_battery_level
show_state: true
show_background: false
- entity: sensor.iphone_13_pro_max_activity
styles: |-
.bubble-button-background {
background-color: ${state === 'home' ? 'var(--accent-color)':''} !important;
}
.bubble-sub-button-1 {
font-size: 10px;
}
.bubble-sub-button-1 {
font-size: 10px;
line-height: 1.5;
text-align: center;
}
show_state: true
- type: custom:bubble-card
card_type: button
button_type: state
entity: alarm_control_panel.alarmo
name: Status
show_state: true
card_layout: large-2-rows
sub_button:
- name: Home temperature
icon: mdi:home-thermometer-outline
entity: sensor.indoor_temperature
show_state: true
show_icon: true
show_background: false
- name: Outside temperature
entity: sensor.outdoor_station_temperature
show_state: true
show_background: false
- name: Doors
entity: sensor.doors_open
show_name: true
show_state: true
tap_action:
action: navigate
navigation_path: '#security'
show_attribute: false
attribute: temperature
icon: mdi:door-open
- name: Windows
entity: sensor.windows_open
show_name: true
show_state: true
show_background: true
show_attribute: false
attribute: temperature
icon: mdi:window-open
show_icon: true
tap_action:
action: navigate
navigation_path: '#security'
styles: >
.bubble-icon {
color: ${hass.states['alarm_control_panel.alarmo'].state === 'armed_home' ? 'red' : (hass.states['alarm_control_panel.alarmo'].state === 'arming' ? 'orange' : 'grey')} !important;
animation: ${hass.states['alarm_control_panel.alarmo'].state === 'arming' ? 'fade-in-out 2s linear infinite' : ''};
}
@keyframes fade-in-out {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
${icon.setAttribute("icon",
hass.states['alarm_control_panel.alarmo'].state === 'armed_home' ?
'mdi:shield-home' : 'mdi:shield-off-outline')}
show_last_changed: false
show_attribute: false
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Lights
secondary: ''
icon: mdi:lightbulb-group
icon_color: yellow
layout: vertical
tap_action:
action: navigate
navigation_path: '#lights'
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style: |
ha-card {
background: var(--background-color-2);
border-radius: 35px;
}
- type: custom:mushroom-template-card
primary: Blinds
secondary: ''
icon: mdi:blinds
icon_color: teal
layout: vertical
tap_action:
action: navigate
navigation_path: '#blinds'
hold_action:
action: none
double_tap_action:
action: none
fill_container: false
card_mod:
style: |
ha-card {
background: var(--background-color-2);
border-radius: 35px;
}
- type: custom:mushroom-template-card
primary: Climate
secondary: ''
icon: mdi:air-conditioner
icon_color: blue
layout: vertical
tap_action:
action: navigate
navigation_path: '#climate'
fill_container: false
card_mod:
style: |
ha-card {
background: var(--background-color-2);
border-radius: 35px;
}
- type: custom:mushroom-template-card
primary: Garage
secondary: ''
icon: mdi:garage
icon_color: green
layout: vertical
hold_action:
action: none
double_tap_action:
action: none
tap_action:
action: navigate
navigation_path: '#garage'
fill_container: false
card_mod:
style: |
ha-card {
background: var(--background-color-2);
border-radius: 35px;
}
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Irrigation
secondary: ''
icon: mdi:water
layout: vertical
icon_color: blue
tap_action:
action: navigate
navigation_path: '#irrigation'
fill_container: true
card_mod:
style: |
ha-card {
background: var(--background-color-2);
border-radius: 35px;
}
- type: custom:mushroom-template-card
primary: Vacuum
secondary: ''
icon: mdi:robot-vacuum
icon_color: purple
fill_container: true
layout: vertical
tap_action:
action: navigate
navigation_path: '#vacuum'
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style: |
ha-card {
background: var(--background-color-2);
border-radius: 35px;
}
- type: custom:mushroom-template-card
primary: Energy
secondary: ''
icon: mdi:lightning-bolt
icon_color: orange
fill_container: true
layout: vertical
tap_action:
action: navigate
navigation_path: '#energy'
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style: |
ha-card {
background: var(--background-color-2);
border-radius: 35px;
}
- type: custom:mushroom-template-card
primary: Cameras
secondary: ''
icon: mdi:cctv
icon_color: red
fill_container: true
layout: vertical
tap_action:
action: navigate
navigation_path: '#cameras'
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style: |
ha-card {
background: var(--background-color-2);
border-radius: 35px;
}
Yaml for the footer showing the buttons
type: custom:bubble-card
card_type: horizontal-buttons-stack
button_type: state
entity: weather.openweathermap
auto_order: false
1_name: ''
1_icon: mdi:sofa-outline
1_link: '#family'
2_link: '#kitchen'
2_name: ''
2_icon: mdi:pot-steam-outline
4_name: ''
4_icon: mdi:sofa-single-outline
4_link: '#lounge'
5_link: '#other'
5_name: ''
5_icon: mdi:home-variant-outline
6_link: '#outdoors'
6_name: ''
6_icon: mdi:outdoor-lamp
hide_gradient: false
highlight_current_view: true
margin: 7px
width_desktop: 1000px
3_name: ''
3_icon: mdi:bed-king-outline
3_link: '#bedroom'
Yaml for one of the popup pages
type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: '#family'
button_type: name
show_header: true
name: Family Room
icon: mdi:sofa-outline
scrolling_effect: false
show_icon: false
show_name: false
force_icon: false
show_state: false
show_attribute: false
show_last_changed: false
sub_button:
- entity: sensor.indoor_temperature
show_background: false
show_icon: true
show_state: true
name: ''
show_name: false
- entity: sensor.indoor_humidity
show_last_changed: false
show_state: true
show_background: false
entity: light.family_lights
card_layout: normal
trigger_state: ''
trigger_close: true
bg_color: ''
bg_opacity: '88'
hide_backdrop: false
styles: ''
tap_action:
action: none
double_tap_action:
action: none
hold_action:
action: none
- type: custom:decluttering-card
template: seperator_template
variables:
- name: Lights
- icon: mdi:lightbulb-group
- type: custom:bubble-card
card_type: button
button_type: slider
entity: light.family_lights
name: Ambient Lights
show_state: false
tap_action:
action: toggle
double_tap_action:
action: none
hold_action:
action: more-info
sub_button: []
- type: horizontal-stack
cards:
- type: custom:decluttering-card
template: light_template
variables:
- entity: light.family_room_light
- name: Light
- type: custom:decluttering-card
template: dimmer_template
variables:
- entity: light.family_room_lamp
- name: Lamp
- type: horizontal-stack
cards:
- type: custom:decluttering-card
template: dimmer_template
variables:
- entity: light.family_room_led_strip
- name: Led Strip
- icon: mdi:led-strip
- type: custom:decluttering-card
template: dimmer_template
variables:
- entity: light.display_cabinet_lights
- name: Cabinet lights
- type: custom:decluttering-card
template: light_template
variables:
- entity: light.fish_tank_light
- type: custom:decluttering-card
template: seperator_template
variables:
- name: Switches
- icon: mdi:power
- type: horizontal-stack
cards:
- type: horizontal-stack
cards:
- type: custom:bubble-card
card_type: button
entity: button.heater_off
icon: mdi:radiator-off
- type: custom:bubble-card
card_type: button
entity: button.heater_on
icon: mdi:radiator
- type: custom:layout-card
layout_type: custom:vertical
cards:
- type: custom:bubble-card
card_type: button
entity: switch.wallflower
show_attribute: false
icon: mdi:flower
sub_button: []
styles: ''
- type: conditional
conditions:
- condition: state
entity: timer.family_wallflower_timer
state: active
card:
type: custom:decluttering-card
template: timer_template
variables:
- icon: mdi:timer
- entities:
- timer.family_wallflower_timer
layout:
card_margin: '-3.5px -3.5px 3.5px -3.5px'
- type: custom:decluttering-card
template: seperator_template
variables:
- name: Media
- icon: mdi:play-pause
- type: custom:bubble-card
card_type: media-player
name: Ceiling Speakers
entity: media_player.ceiling_speakers
show_state: true
show_last_updated: true
show_attribute: false
attribute: volume_level
card_layout: large
scrolling_effect: true
show_icon: true
force_icon: false
show_name: true
show_last_changed: false
columns: 2
rows: 1
tap_action:
action: toggle
hide:
play_pause_button: false
volume_button: false
previous_button: false
next_button: false
power_button: true
sub_button: []
- type: custom:bubble-card
card_type: media-player
entity: media_player.family_room_tv
hide:
play_pause_button: true
next_button: true
power_button: true
previous_button: true
volume_button: true
tap_action:
action: more-info
service: Button.press
target:
entity_id: button.power
hold_action:
action: more-info
double_tap_action:
action: more-info
sub_button:
- entity: media_player.family_room_tv
icon: mdi:volume-minus
tap_action:
action: call-service
service: button.press
target:
entity_id: button.volume_down
- entity: media_player.family_room_tv
icon: mdi:volume-plus
tap_action:
action: call-service
service: button.press
target:
entity_id: button.volume_up
- entity: media_player.family_room_tv
icon: mdi:power
tap_action:
action: call-service
service: button.press
target:
entity_id: button.power
- type: custom:decluttering-card
template: seperator_template
variables:
- name: Blinds
- icon: mdi:blinds-vertical
- type: vertical-stack
cards:
- type: custom:decluttering-card
template: cover_horizontal_template
variables:
- name: Left Blind
- entity: cover.family_room_left_blind
- sub1: sensor.family_room_left_blind_battery
- type: custom:decluttering-card
template: cover_horizontal_template
variables:
- name: Right Blind
- entity: cover.family_room_right_blind
- sub1: sensor.family_room_right_blind_battery
Yaml for the decluttering template cards. This goes in your raw config yaml for the dashboard, BEFORE the views. right at the beginning
decluttering_templates:
timer_template:
default:
- icon: ''
- name: ''
card:
type: custom:timer-bar-card
name: '[[name]]'
icon: '[[icon]]'
entities: '[[entities]]'
bar_height: 20px
bar_background: var(--background-color)
bar_foreground: var(--text-color)
invert: true
bar_radius: var(--ha-card-border-radius)
layout: hide_name
card_mod:
style: |
ha-card {
position: relative;
top: -47px;
width: 60%;
margin-left: auto;
margin-right: 5px;
background: none;
height: 0;
}
.card-content {
padding: 0px !important;
}
header_main:
card:
type: custom:paper-buttons-row
styles:
justify-content: space-between
background: none
margin: 24px 20px 16px
text-shadow: 0px 0px 20px var(--card-background-color);
buttons:
- layout: name_state
name: >-
{{ now().strftime('%A') }} {{ now().strftime('%d') }} {{
now().strftime('%B') }}
state: >-
{{ now().strftime('%I') }}:{{ now().strftime('%M')}} {{
now().strftime('%p')}}
styles:
name:
font-weight: 400
font-size: 16px
margin-left: 0
display: block
text-align: left
float: left
width: 140px
button:
pointer-events: none
align-items: left
width: 140px
line-height: 1.6em
state:
font-weight: 700
font-size: 30px
letter-spacing: '-1px'
margin-left: 0
display: block
text-align: left
float: left
width: 140px
- layout: icon|name_state
name: ⌂ {{ states('sensor.indoor_temperature') }}°C
state: '{{ states(''sensor.outdoor_station_temperature'') }}°C'
image: |
{% set mapper =
{ 'cloudy':'cloudy',
'clear-night':'clear-night',
'exceptional':'sunny-day',
'fog':'fog',
'lightning':'isolated-thunderstorms',
'partlycloudy':'cloudy-day-3',
'rainy':'rainy-4',
'sunny':'day',
'windy':'wind',
'windy-variant':'wind'} %}
{% set state = states('weather.openweathermap') %}
{% set weather = mapper[state] if state in mapper else 'weather' %}
{% set path = '/local/icons/weather_icons/animated/' %}
{% set ext = '.svg'%}
{{[path,weather,ext]|join('')}}
styles:
name:
font-weight: 400
font-size: 16px
margin-left: 0
display: block
text-align: right
width: 140px
button:
pointer-events: none
align-items: right
width: 140px
line-height: 1.6em
state:
font-weight: 600
font-size: 30px
letter-spacing: '-1px'
margin-left: 0
display: block
text-align: right
width: 140px
icon:
position: absolute
left: 2px
transform: scale(0.17)
transform-origin: 0 19.5%
top: '-48px;'
padding: 0;
height: 380px !important;
width: 380px !important;
seperator_template:
default:
- icon: ''
- name: ''
card:
type: custom:bubble-card
card_type: separator
name: '[[name]]'
card_layout: large
styles: |
.bubble-name {
height: 25px;
font-weight: 100;
font-size: 25px;
}
.bubble-line {
background-color: var(--background-color-2, var(--secondary-background-color));
opacity: 0.4;
}
dimmer_template:
default:
- icon: ''
- name: ''
card:
type: custom:bubble-card
card_type: button
button_type: slider
entity: '[[entity]]'
name: '[[name]]'
icon: '[[icon]]'
tap_action:
action: toggle
hold_action:
action: more-info
fan_template:
default:
- icon: ''
- name: ''
card:
type: custom:bubble-card
card_type: button
button_type: slider
entity: '[[entity]]'
name: '[[name]]'
icon: '[[icon]]'
show_state: true
tap_action:
action: toggle
hold_action:
action: more-info
light_template:
default:
- icon: ''
- name: ''
card:
type: custom:bubble-card
card_type: button
button_type: switch
entity: '[[entity]]'
name: '[[name]]'
icon: '[[icon]]'
tap_action:
action: more-info
cover_template:
default:
- name: ''
card:
type: custom:bubble-card
card_type: cover
entity: '[[entity]]'
name: '[[name]]'
icon_open: mdi:blinds-vertical
icon_close: mdi:blinds-vertical-closed
show_state: true
columns: 2
card_layout: large
sub_button:
- name: My
icon: mdi:star
show_background: false
tap_action:
action: call-service
service: cover.set_cover_position
data:
position: 50
target:
entity_id:
- '[[entity]]'
card_mod:
style: |
.bubble-cover-card-container {
background-color:
{% if state_attr(config.entity, 'current_position') == 100 %}
var(--state-cover-active-color)
{% elif state_attr(config.entity, 'current_position') > 0 %}
var(--accent-color)
{% else %}
var(--background-color-2, var(--secondary-background-color))
{% endif %}
!important;
}
.large .bubble-buttons {
gap: 8px;
}
.bubble-button {
background: transparent;
width: 40px;
height: 40px;
}
.bubble-icon {
justify-content: center;
align-items: center;
}
.large .bubble-sub-button-container {
margin-right: 8px;
}
.bubble-sub-button {
background: transparent;
width: 40px;
height: 40px;
}
.bubble-state::after {
content: " - {{ state_attr(config.entity, 'current_position') }}%";
margin-left: 4px;
}
.bubble-icon-container {
border-color: transparent;
background-color: transparent;
}
.bubble-icon-container::after {
content: "";
background-color:
{% if state_attr(config.entity, 'current_position') == 100 %}
var(--state-cover-active-color)
{% elif state_attr(config.entity, 'current_position') > 0 %}
var(--accent-color)
{% else %}
var(--background-color-2, var(--secondary-background-color))
{% endif %}
!important;
height: 25px;
width: 25px;
position: absolute;
left: 50px;
top: 25px;
-webkit-mask-image: radial-gradient(circle at top right, transparent 0, transparent 25px, black 25.5px);
}
cover_horizontal_template:
default:
- name: ''
- sub1: ''
card:
type: custom:bubble-card
card_type: cover
entity: '[[entity]]'
name: '[[name]]'
sub_button:
- entity: '[[sub1]]'
show_last_changed: false
show_state: true
icon_open: mdi:blinds-open
icon_close: mdi:blinds
show_state: true
columns: 2
card_layout: large
card_mod:
style: |
.bubble-cover-card-container {
background-color:
{% if state_attr(config.entity, 'current_position') == 100 %}
var(--state-cover-active-color)
{% elif state_attr(config.entity, 'current_position') > 0 %}
var(--accent-color)
{% else %}
var(--background-color-2, var(--secondary-background-color))
{% endif %}
!important;
}
.large .bubble-buttons {
gap: 8px;
}
.bubble-button {
background: transparent;
width: 40px;
height: 40px;
}
.bubble-icon {
justify-content: center;
align-items: center;
}
.large .bubble-sub-button-container {
margin-right: 8px;
}
.bubble-sub-button {
background: transparent;
width: 40px;
height: 40px;
}
.bubble-state::after {
content: " - {{ state_attr(config.entity, 'current_position') }}%";
margin-left: 4px;
}
.bubble-icon-container {
border-color: transparent;
background-color: transparent;
}
.bubble-icon-container::after {
content: "";
background-color:
{% if state_attr(config.entity, 'current_position') == 100 %}
var(--state-cover-active-color)
{% elif state_attr(config.entity, 'current_position') > 0 %}
var(--accent-color)
{% else %}
var(--background-color-2, var(--secondary-background-color))
{% endif %}
!important;
height: 25px;
width: 25px;
position: absolute;
left: 50px;
top: 25px;
-webkit-mask-image: radial-gradient(circle at top right, transparent 0, transparent 25px, black 25.5px);
}
6 Likes
Thanks for sharing, awesome!!