Hi!
I searched everywhere, I don’t find this information… Can anyone please help me?
I use browser mod to open a more-info service and I want to know how to change the style of this more-info popup. I want to hide the header and put a blue background color to the popup.
Any idea?
Thanks!
Nobody changed the style of more-info or wanted to achieve this?
Yes, me. I want to change the more-info card the same way you want, hide the top buttons. Started looking for the answer, didn’t find it, yet.
PickOne
February 1, 2024, 10:26am
4
I’ve done it like this
card_mod:
style:
ha-dialog$: |
div.mdc-dialog__scrim {
backdrop-filter: blur(15px) !important;
-webkit-backdrop-filter: blur(15px) !important;
}
ha-dialog: |
.content{
border: 1px solid #013896 !important;
background-color: rgba(15,15,36,1);
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
}
Blur behind popup, border, background, no top header, everything I wanted.
Tried your solution, but it’s not what I want. My solution is based on the custom:more-info-card, the custom:popup-card and four helper toggles ( input_boolean). This way I can switch the four parts like this:
The yaml code:
views:
- title: VIJF
path: vijf
icon: mdi:dice-5-outline
badges: []
cards:
- type: button
entity: light.z03_tiffany_lamp_buiten_achter_light
name: schuur lampje
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: custom more-info card
content:
type: custom:more-info-card
entity: light.z03_tiffany_lamp_buiten_achter_light
card_mod:
style:
.: |
ha-dialog {
--popup-border-radius: 12px 0px !important;
--ha-card-header-font-size: 24px !important;
text-align: center !important;
}
div.content: |
:host([card])
.content .container {
padding: {{'8px' if is_state('input_boolean.hide_more_info_attributes','on')}} !important;
}
ha-dialog-header$header: |
.header-bar {
padding: 0px 36px 0px 0px !important;
display: {{'none' if is_state('input_boolean.hide_more_info_infoheader','on')}} !important;
}
.header-title {
line-height: 38px !important;
padding: 10px 0px 0px !important;
}
ha-dialog>div>div>more-info-card$ha-card:
$: |
h1 {
display: {{'none' if is_state('input_boolean.hide_more_info_cardheader','on')}} !important;
}
.: |
state-card-content {
display: {{'none' if is_state('input_boolean.hide_more_info_state_card','on')}} !important;
}
div {
margin-top: {{'20px' if is_state('input_boolean.hide_more_info_cardheader','on')}} !important;
}
div>more-info-content$: |
more-info-cover {
margin: {{'20px 0px -20px' if is_state('input_boolean.hide_more_info_cardheader','on')}} !important;
}
more-info-light {
margin: {{'20px 0px -20px' if is_state('input_boolean.hide_more_info_cardheader','on')}} !important;
}
div>more-info-content$more-info-cover$div: |
ha-attributes {
display: {{'none' if is_state('input_boolean.hide_more_info_attributes','on')}} !important;
}
div>more-info-content$more-info-light$div: |
ha-attributes {
display: {{'none' if is_state('input_boolean.hide_more_info_attributes','on')}} !important;
}
hold_action:
action: more-info
- type: custom:popup-card
entity: light.z03_tiffany_lamp_buiten_achter_light
card:
type: custom:more-info-card
entity: cover.tz3000_qa8s8vca_ts130f_cover
title: this is a cover entity
size: normal
timeout: 15000
dismissable: true
card_mod:
style:
.: |
ha-dialog {
--popup-border-radius: 12px 0px !important;
--ha-card-header-font-size: 24px !important;
text-align: center !important;
}
div.content: |
:host([card])
.content .container {
padding: {{'8px' if is_state('input_boolean.hide_more_info_attributes','on')}} !important;
}
ha-dialog-header$header: |
.header-bar {
padding: 0px 36px 0px 0px !important;
display: {{'none' if is_state('input_boolean.hide_more_info_infoheader','on')}} !important;
}
.header-title {
line-height: 38px !important;
padding: 10px 0px 0px !important;
}
ha-dialog>div>div>more-info-card$ha-card:
$: |
h1 {
display: {{'none' if is_state('input_boolean.hide_more_info_cardheader','on')}} !important;
}
.: |
state-card-content {
display: {{'none' if is_state('input_boolean.hide_more_info_state_card','on')}} !important;
}
div {
margin-top: {{'20px' if is_state('input_boolean.hide_more_info_cardheader','on')}} !important;
}
div>more-info-content$: |
more-info-cover {
margin: {{'20px 0px -20px' if is_state('input_boolean.hide_more_info_cardheader','on')}} !important;
}
more-info-light {
margin: {{'20px 0px -20px' if is_state('input_boolean.hide_more_info_cardheader','on')}} !important;
}
div>more-info-content$more-info-cover$div: |
ha-attributes {
display: {{'none' if is_state('input_boolean.hide_more_info_attributes','on')}} !important;
}
div>more-info-content$more-info-light$div: |
ha-attributes {
display: {{'none' if is_state('input_boolean.hide_more_info_attributes','on')}} !important;
}
One can only see the second custom:popup-card in Edit mode on the Lovelace UI and it shows a cover entity while it is in fact the ‘hold_action’ of the button (which is a light entity).
Next step is to convert this to a decluttering_template; saves a lot of copy-paste actions and makes the yaml file smaller.
1 Like
Did you ever figure out how to do this? I’ve been struggling with the card mod for this all day with no luck so far.