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.
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.
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.