Hello,
Is it possible to blur the background when I pop up a card?
You could use card-mod themes to apply styling to all more-info dialogs, not sure if that would apply to browser-mod dialogsā¦
auto_close: true
card:
cards:
- entity: sensor.time
scale: 150px
type: 'custom:bignumber-card'
- details: true
entity: weather.otthon
type: 'custom:weather-card'
column_num: 3
column_width:
- 1000
- 1000
- 1000
type: 'custom:layout-card'
deviceID:
- browser_ipad
hide_header: true
large: true
This is what my code looks like right now, Iām trying to make a screensaver, a black background or a blurred background would be perfectly fine.
I will checkout card-mod themes.
Hereās a bit of a start.
Youāll need to have card-mod installed and find the right place to apply a backdrop-filter.
Thanks Thomas.
The styling part is working fine now, the backdrop-filter part is what I do not get mainly, I do not know where and how to apply that, could you please show me an example?
auto_close: true
card:
cards:
- entity: sensor.time
scale: 150px
type: 'custom:bignumber-card'
- details: true
entity: weather.otthon
type: 'custom:weather-card'
column_num: 3
column_width:
- 1000
- 1000
- 1000
type: 'custom:layout-card'
deviceID:
- browser_ipad
hide_header: true
large: true
style: |
:host {
--mdc-theme-surface: rgba(0,0,0,0.8);
--secondary-background-color: rgba(0,0,0,0.8);
--ha-card-background: rgba(0,0,0,0.8);
--backdrop-filter: blur(10px);
This is the modified config, but the backdrop part does not seem to do anything
Thatās probably not one of the predefined variables used by that element, youāll have to use the object inspector to find out.
Maybe this helps? š¹ Card-mod - Super-charge your themes!
1 Like
@peterson1190 most likely it is bugged on iOS like I mentioned there. Backdrop works fine on Android and desktop browsers, but iPadOS and iOS doesnāt show it.
Understood, I think Iām missing more pieces from the puzzle.
I mean the whole theming story.
I only use āstandardā hacs themes, with this code:
frontend:
themes: !include_dir_merge_named themes
This is what the output looks like from the above code on PC with Chrome.
I will redo the theme part of my HA I think.
Nah, the style parameter of the popup command is pretty much exactly the same as specifying a popup style in a theme.
You wonāt need the theme to make a blurred background.
1 Like
Thanks to Thomas I now have backdrop filter working with iPadOS/iOS. Below code is for popup cards with a blurred backdrop. You can use that and change it how you see fit. Just paste below code in your active theme yaml file and reload themes. This is if you want to apply it to all popups. If you only want it for a specific popup, then just use it as styling parameters for that one popup.
card-mod-theme: name-of-your-theme
card-mod-more-info-yaml: |
$: |
.mdc-dialog {
backdrop-filter: blur(17px);
-webkit-backdrop-filter: blur(17px);
background: rgba(0,0,0,0.25);
}
.mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
background: none !important;
box-shadow: none;
border-radius: 0px;
}
ha-header-bar:
$: |
.mdc-top-app-bar {
background: none !important;
}
The -webkit-backdrop-filter: blur(17px); is for iPadOS/iOS. I have that one and the one without prefix -webkit- so it works on all devices.
2 Likes
Holy Moly and it is working yesss!!
Thank you guys, you are awesome!
FYI for noobs like me:
You need to copy this code to the end of your actual theme.yaml file.
1 Like
But, again, the same styles can just as well be placed in the service call itself if you donāt want to change the style of all dialogs.
style:
$: |
.mdc-dialog {
backdrop-filter: blur(17px);
-webkit-backdrop-filter: blur(17px);
background: rgba(0,0,0,0.25);
}
.mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
background: none !important;
box-shadow: none;
border-radius: 0px;
}
ha-header-bar:
$: |
.mdc-top-app-bar {
background: none !important;
}
2 Likes
Hi,
I have a problem some popup cards. Itās not show up.
HA112.4, Browser_mod 29:
HA113.2, Browser_mod 1.1.5:
My purifier popup config:
tap_action:
action: call-service
service: browser_mod.popup
service_data:
card:
card_width: 90%
cards:
- card:
cards:
- elements:
- entity: >-
input_number.xiaomi_airpurifier_favorite_level
hide_state: false
style:
left: 50%
top: 96%
type: 'custom:slider-entity-row'
- entity: sensor.purifier_filter_hours_used
prefix: 'Used: '
style:
background-color: 'rgba(0, 0, 0,.0)'
border-color: 'rgb(34, 154, 210,.0)'
border-left-style: solid
color: dodgerblue
font-size: 100%
font-weight: bold
left: 1.5%
opacity: 1
pointer-events: none
top: 5%
transform: 'translate(0%,-50%)'
type: state-label
- icon: 'mdi:water-percent'
style:
'--iron-icon-height': 20px
'--iron-icon-width': 20px
color: dodgerblue
left: 8%
position: absolute
top: 12%
tap_action: none
type: icon
- entity: sensor.purifier_humidity
fill: 'rgba(0,0,0,0.3)'
font_style:
color: white
gradient: true
max: 100
min: 0
show_card: null
stroke_width: 10
style:
height: 17%
left: 15%
top: 20%
width: 13%
type: 'custom:circle-sensor-card'
units: '%'
- icon: 'mdi:thermometer'
style:
'--iron-icon-height': 20px
'--iron-icon-width': 20px
color: dodgerblue
left: 7.5%
position: absolute
top: 27%
tap_action: none
type: icon
- entity: sensor.purifier_temperature
fill: 'rgba(0,0,0,0.3)'
font_style:
color: white
gradient: true
max: 50
min: 0
show_card: false
stroke_width: 10
style:
height: 17%
left: 15%
top: 35%
width: 13%
type: 'custom:circle-sensor-card'
units: Ā°C
- icon: 'mdi:air-filter'
style:
'--iron-icon-height': 17px
'--iron-icon-width': 17px
color: dodgerblue
left: 8%
top: 42%
tap_action: none
type: icon
- entity: sensor.purifier_filter_life_remaining
fill: 'rgba(0,0,0,0.3)'
font_style:
color: white
gradient: true
max: 100
min: 0
show_card: false
stroke_width: 10
style:
height: 17%
left: 15%
top: 50%
width: 13%
type: 'custom:circle-sensor-card'
units: ''
- entity: sensor.purifier_aqi
fill: 'rgba(0,0,0,0.3)'
font_style:
color: white
gradient: true
max: 600
min: 0
show_card: false
stroke_width: 10
style:
height: 13%
left: 50%
top: 18.5%
width: 13%
type: 'custom:circle-sensor-card'
units: p
- icon: 'mdi:speedometer'
style:
'--iron-icon-height': 17px
'--iron-icon-width': 17px
color: dodgerblue
left: 8%
top: 58%
tap_action: none
type: icon
- entity: sensor.purifier_fan_speed
fill: 'rgba(0,0,0,0.3)'
font_style:
color: white
gradient: true
max: 3000
min: 0
show_card: false
stroke_width: 10
style:
height: 17%
left: 15%
top: 65%
width: 13%
type: 'custom:circle-sensor-card'
units: ''
- icon: 'mdi:speedometer-medium'
style:
'--iron-icon-height': 17px
'--iron-icon-width': 17px
color: dodgerblue
left: 8%
top: 73%
tap_action: none
type: icon
- entity: sensor.purifier_fan2_speed
fill: 'rgba(0,0,0,0.3)'
font_style:
color: white
gradient: true
max: 3000
min: 0
show_card: false
stroke_width: 10
style:
height: 17%
left: 15%
top: 80%
width: 13%
type: 'custom:circle-sensor-card'
units: ''
- entity: sensor.purifier_fan_mode
max: 2000
min: 0
prefix: 'Mode: '
style:
background-color: 'rgba(0, 0, 0,.0)'
border-color: 'rgb(34, 154, 210,.0)'
border-left-style: solid
color: dodgerblue
font-size: 100%
font-weight: bold
opacity: 1
pointer-events: none
right: 1%
top: 1%
transform: none
type: state-label
- entity: fan.xiaomi_miio_device
style:
'--iron-icon-height': 22px
'--iron-icon-width': 22px
margin-right: '-10%'
right: 19%
top: 17%
tap_action:
action: call-service
service: fan.toggle
service_data:
entity_id: fan.xiaomi_miio_device
type: state-icon
- icon: 'mdi:brightness-auto'
style:
'--iron-icon-height': 22px
'--iron-icon-width': 22px
right: 4%
top: 17%
tap_action:
action: call-service
service: fan.set_speed
service_data:
entity_id: fan.xiaomi_miio_device
speed: Auto
type: icon
- icon: 'mdi:power-sleep'
style:
'--iron-icon-height': 22px
'--iron-icon-width': 22px
margin-right: '-10%'
right: 22%
top: 34%
tap_action:
action: call-service
service: fan.set_speed
service_data:
entity_id: fan.xiaomi_miio_device
speed: Silent
type: icon
- icon: 'mdi:account-heart'
style:
'--iron-icon-height': 22px
'--iron-icon-width': 22px
right: 4%
top: 34%
tap_action:
action: call-service
service: fan.set_speed
service_data:
entity_id: fan.xiaomi_miio_device
speed: Favorite
type: icon
- icon: 'mdi:monitor'
style:
'--iron-icon-height': 22px
'--iron-icon-width': 22px
margin-right: '-10%'
right: 22%
top: 51%
tap_action:
action: call-service
service: xiaomi_miio.fan_set_led_on
service_data:
entity_id: fan.xiaomi_miio_device
type: icon
- icon: 'mdi:monitor-off'
style:
'--iron-icon-height': 22px
'--iron-icon-width': 22px
right: 3%
top: 51%
tap_action:
action: call-service
service: xiaomi_miio.fan_set_led_off
service_data:
entity_id: fan.xiaomi_miio_device
type: icon
- icon: 'mdi:bell'
style:
'--iron-icon-height': 22px
'--iron-icon-width': 22px
margin-right: '-10%'
right: 22%
top: 68%
tap_action:
action: call-service
service: xiaomi_miio.fan_set_buzzer_on
service_data:
entity_id: fan.xiaomi_miio_device
type: icon
- icon: 'mdi:lock-alert'
style:
'--iron-icon-height': 22px
'--iron-icon-width': 22px
margin-right: '-10%'
right: 22%
top: 87%
tap_action:
action: call-service
service: xiaomi_miio.fan_set_child_lock_on
service_data:
entity_id: fan.xiaomi_miio_device
type: icon
- icon: 'mdi:bell-off-outline'
style:
'--iron-icon-height': 22px
'--iron-icon-width': 22px
right: 3%
top: 68%
tap_action:
action: call-service
service: xiaomi_miio.fan_set_buzzer_off
service_data:
entity_id: fan.kxiaomi_miio_device
type: icon
- icon: 'mdi:lock-open-outline'
style:
'--iron-icon-height': 22px
'--iron-icon-width': 22px
right: 3%
top: 87%
tap_action:
action: call-service
service: xiaomi_miio.fan_set_child_lock_off
service_data:
entity_id: fan.xiaomi_miio_device
type: icon
image: /local/house/purifier7.png
type: picture-elements
type: 'custom:vertical-stack-in-card'
style: |
ha-card {
border: 1px solid rgba(57,128,228);
--ha-card-background: rgba(0,0,20,0.6);
border-radius: 15px
}
type: 'custom:mod-card'
- entities:
- cards:
- entities:
- entity: >-
automation.legtisztito_bekapcsolasa_hazaerkezeskor
- >-
automation.legtisztito_kikapcsolasa_tavozaskor
- type: divider
- >-
automation.legtisztito_bekapcsolasa_ebredeskor
- >-
automation.legtisztito_kikapcsolasa_alvaskor
- type: divider
- >-
automation.legtisztito_bekapcsolasa_aqi_alapjan
- entity: input_number.purifier_aqi_treshold
hide_state: false
type: 'custom:slider-entity-row'
- type: divider
- >-
automation.legtisztito_kikapcsolasa_aqi_alatt_1_oran_at
- entity: input_number.purifier_aqi_treshold_off
hide_state: false
type: 'custom:slider-entity-row'
style: >
ha-card {
border: 1px solid rgba(57,128,228);
--ha-card-background: rgba(0,0,20,0.6);
border-radius: 15px
}
type: entities
popup: timeout
type: 'custom:love-lock-card'
show_header_toggle: false
style: |
ha-card {
border: 1px solid rgba(57,128,228);
--ha-card-background: rgba(0,0,20,0.6);
border-radius: 15px
}
title: LĆ©gtisztĆtĆ³ beĆ”llĆtĆ”sok
type: entities
parameters:
allowTouchMove: false
centeredSlides: false
keyboard:
enabled: true
onlyInViewport: true
navigation: null
pagination:
type: progressbar
slidesPerView: auto
spaceBetween: 40
type: 'custom:swipe-card'
deviceID:
- this
- dashboard
large: false
style:
background-color: 'rgba(0,0,20,0.6)'
background-repeat: no-repeat
background-size: 100% 100%
border-radius: 15px
top: 0
width: 40%
title: LĆ©gtisztĆtĆ³
What is wrong in my code?
Thanks for help!
Should this also work for the replaced more-info dialogs and the (command) popups?
For me the style is only applied to the normal more-info popups.
1 Like
Background: Iām experiencing a problem when using popups on android. The problem is consistent on Android using both a 10 inch tablet and pixel 3. Iāve tested both devices using the official android app, mobile chrome, and mobile firefox. The problem doesnāt occur on desktop chrome (I didnāt test other desktop browsers)
I use popups to display multiple cards at once (combined with vertical/horizontal stacks). Theyāre composed of some button-cards, some mini-graph-cards, and both mini-thermostat and simple-thermostat cards.
The problem: The thermostat cards (both simple-thermostat and mini-thermostat) donāt function on mobile devices when embedded in popups. I can toggle more-info, but canāt control the functions (changing hvac_mode or raising/lowering temperature).
Both thermostat cards work fine when used in regular lovelace (i.e. not popups). The cards also both work fine using desktop chrome in my popup. The problem is only when using either of those two cards (though potentially more), in popups, on a mobile device.
Iām having trouble pinpointing the problem and would greatly appreciate any help in isolating it!
Basic question incoming! Am on 0.113.3, have upgraded Browser mod to 1.1.5 and card-mod to 2.0.0, and now my basic āmore-infoā popups have lost their styling. The rounded edges and transparency are gone. I am sure there is a simple code to fix this, but would appreciate some help to get it working.
Popup Before:
Popup After:
Any help to update my styles code would be appreciated 
Button code to trigger popup:
- type: custom:decluttering-card
template: climate_button_card
variables:
- entity: climate.air_conditioner
- name: Main AC
- icon: circle
- tap_action:
action: more-info
haptic: light
āmore-infoā Popup code (example, not the exact popup shown in picture):
sensor.dark_sky_summary:
title: Weather
style:
border-radius: 12px
background: var(--homekit-transparent)
card:
type: vertical-stack
style: |
ha-card {
border-radius: 12px;
background: var(--homekit-transparent);
}
cards:
- type: horizontal-stack
cards:
- type: 'custom:button-card'
color_type: blank-card
styles:
card:
- width: 10px
- type: weather-forecast
style: |
ha-card {
border-radius: 12px;
overflow: hidden;
box-shadow: none;
background-image: none;
background-color: transparent;
}
entity: weather.dark_sky
- type: 'custom:button-card'
color_type: blank-card
styles:
card:
- width: 10px
- type: iframe
style: |
ha-card {
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
overflow: hidden;
box-shadow: none;
}
aspect_ratio: 60%
url: https://embed.windy.com/?900h,rain,-33.941,150.974,8
Just released Browser_mod 1.1.6 allows you to set your deviceID manually!
1 Like
I have a lovelace view that calls a popup window via the reuseable browser_mod popup card that in turn also calls a browser_mod popup card via a script. This was working correctly in the prior version of browser_mod and HA 0.112 however in the latest version of 0.113 and browser_mod 1.1.6 I canāt get the popup window to show via the script. The initial reusable popup window appears but trying to trigger the popup window via the script is not doing anything. When looking at the cookbook examples it seems the config may have slightly changed but even with making this change to my config the popup window via the script isnāt working. Here is what my config looks like.
Config to trigger reusable popup card <- this is working
tap_action:
action: call-service
service: browser_mod.popup
service_data:
deviceID: this
<<: *monitoredplug_card
Config to trigger popup via script (this is based on the cookbook example) This is called from the reusable popup card. <- this is not working
tap_action:
action: call-service
service: script.sonoffwasher_popup
service_data:
deviceID:
- this
This was my prior config to call a popup via a script that worked in 0.112 but is not working in 0.113 (again this is what I was using in the reusable popup card to call another popup card via a script.
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.sonoffwasher_popup
Is the ability to call a popup via a script from within a reusable popup card no longer doable or is my config incorrect now with the version 1.1.6?
2 Likes
Just wondering - auto-closing (after a delay) of a more-info box isnāt working for me, should it ?
- service: browser_mod.command
data:
command: more-info
entity_id: camera.caller
large: true
deviceID:
- 7d823333-a8333fe5
- delay: '00:01:00'
- service: browser_mod.close_popup