- type: conditional
conditions:
- entity: group.lichten_en_smartplugs
state: "on"
card:
type: horizontal-stack
cards:
- type: custom:button-card
template: my-blank-button-10px
- type: custom:auto-entities
show-empty: false
card:
type: glance
show_state: false
columns: 5
style: |
ha-card {
border-radius: 12px;
font-family: Helvetica;
font-size: 11px;
}
.entities.no-header {
padding: 8px 0px 0px 0px !important;
}
.entity {
margin: 0px !important;
}
.entity:
$: |
state-badge {
margin: 0px !important;
}
filter:
include:
- domain: light
state: "on"
options:
tap_action:
action: toggle
- domain: switch
state: "on"
options:
tap_action:
action: toggle
- type: custom:button-card
template: my-blank-button-10px
Try this:
- type: conditional
conditions:
- entity: group.lichten_en_smartplugs
state: "on"
card:
type: horizontal-stack
cards:
- type: custom:button-card
template: my-blank-button-10px
- type: custom:auto-entities
show-empty: false
card:
type: glance
show_state: false
columns: 5
style:
.: |
ha-card {
border-radius: 12px;
font-family: Helvetica;
font-size: 11px;
}
.entities.no-header {
padding: 8px 0px 0px 0px !important;
}
.entity {
margin: 0px !important;
}
.entity:
$: |
state-badge {
margin: 0px !important;
}
filter:
include:
- domain: light
state: "on"
options:
tap_action:
action: toggle
- domain: switch
state: "on"
options:
tap_action:
action: toggle
- type: custom:button-card
template: my-blank-button-10px
Brilliant ! You are the king !
Many thanks for the help and education, Kendell !
Have you tried to use āsearchā here?
Keywords āglanceā & āmarginā.
Your case was discussed above.
The code was correct, however .: | needed to be added, style: | needed to be changed to style:, and a block needed to be indented.
hi all, i have a problem with styling (Theme) the service: browser_mod.popup
the normale PopupĀ“s works all fine with the new styling: card-mod-more-info-yaml
But the Pop with service: browser_mod.popup dont work.
this works fine:
dont work:
the Button with the browser popup:
action: call-service
service: browser_mod.popup
service_data:
deviceID: this
title: Wohnzimmer Status
card:
type: custom:mod-card
style: |
$: |
.mdc-dialog .mdc-dialog__scrim {
backgrund: none !important;
}
.: |
:host {
backgrund: none !important;
}
card:
type: horizontal-stack
cards:
- type: entities
state_color: true
show_header_toggle: false
entities:
- entity: media_player.samsung_tv_q9075
tap_action:
action: none
- entity: media_player.denon_avr_x4200w
tap_action:
action: none
- entity: media_player.vu_uno4k_se
tap_action:
action: none
how can i style the browser_mod.popup ? 
Thanks All!
Change the first style: | to style:.
1 Like
Tldr: I want it such that I only ever see the 2nd picture, and never the first.
Can someone tell me what āthisā is in the attached screenshot (1st picture) of my wall-mounted tablet? I thought it was the header but instead of it being hidden, itās still there but now itās just all white instead of the normal header look. With this dumb white space, it also crops/cuts off the bottom of the full image. Iāve tried hiding the header with both card-mod and the kiosk-mode card in HACS. No matter what I do, I cannot get rid of the white space. I can hide it by merely scrolling down so that I both no longer see the top white header and can now see the remaining full, uncropped image (2nd picture).
What does it show in inspect element?
@KTibow wuhuu it works now!!
action: call-service
service: browser_mod.popup
service_data:
deviceID: this
title: Wohnzimmer Status
card:
type: custom:mod-card
card:
type: horizontal-stack
cards:
- type: entities
state_color: true
show_header_toggle: false
entities:
- entity: media_player.samsung_tv_q9075
tap_action:
action: none
- entity: media_player.denon_avr_x4200w
tap_action:
action: none
- entity: media_player.vu_uno4k_se
tap_action:
action: none
style:
.: |
ha-card {
background: none !important;
--ha-card-background: none;
}
:host {
--ha-card-background: none;
--card-background-color: transparent;
}
very nice.
what is the difference from style: | to style: ?
i search for a nice manual/agenda from the frontend Styling. But i dont fine it 
style: | styles the current card. When you use it, you donāt need to put .: | inside of it. However it canāt go inside of some certain types of elements.
style: styles shadow roots, and the current card (if you want).
Your code is more complicated than it could be. Change style: to style: |, remove .: |, and remove two spaces from everything in the styling.
1 Like
A okay! Thanks!
can you show me the best way for the code?
Thank you so much!
Iām trying to create a 10ā view on a smaller monitor, and it is going well for most cards thanks to card-mod, but glance is defeating me on size. Iāve tried the obvious, see below, but thereās some sort of boundary on the entities within the glance. Iāve still got fine tuning to do on the font size for mini graph, but Iām not sure on the glance height.
type: vertical-stack
cards:
- entities:
- entity: sensor.current_ozone_level
- entity: sensor.asthma_index_forecasted_average
- entity: sensor.allergy_index_today
- entity: sensor.cold_flu_forecasted_average
title: Air Quality
type: glance
style: |
ha-card {
height: 1000px;
font-size: 3.6rem;
}
- cards:
- entities:
- entity: sensor.awair_co2
index: 0
name: CO2
<snip>
type: 'custom:mini-graph-card'
- entities:
- entity: sensor.awair_pm2_5
<snip>
type: 'custom:mini-graph-card'
type: horizontal-stack
- cards:
- entities:
<snip>
type: 'custom:mini-graph-card'
type: horizontal-stack
I donāt understand. What do you want me to help you with?
You can change the height of .entities instead. You should probably set the columns number to 2.
1 Like
Hi,
Iām struggling with getting a display: flex inserted in my code. Figured out where it needs to go in the inspect tools:
But I havenāt been able to figure out where to put it in my code. Hereās a MWE of my ui-lovelace.yaml:
type: picture-elements
image: /local/ui/floorplan/Rez_nuit.png
elements:
- type: 'custom:decluttering-card'
template: climate
variables:
- temp: sensor.temperature_salon
- humidity: sensor.humidity_salon
- title: Salon
- left: 62%
- top: 50.5%
And the decluttering template (MWE as well):
climate:
element:
type: 'custom:group-element'
elements:
- type: icon
icon: 'mdi:thermometer'
style:
left: 2%
top: 10%
color: lightgrey
transform: scale(1.2)
'--mdc-icon-size': 1.4vw
pointer-events: none
- type: state-label
entity: '[[temp]]'
tap_action:
action: call-service
service: browser_mod.popup
service_data:
#popup data
style:
left: 33.5%
top: 50%
color: lightgrey
font-size: 0.9vw
- type: icon
icon: 'mdi:water-percent'
style:
left: 51%
top: 10%
color: lightgrey
transform: scale(1.2)
'--mdc-icon-size': 1.4vw
pointer-events: none
- type: state-label
entity: '[[humidity]]'
tap_action:
action: call-service
service: browser_mod.popup
service_data:
#popup data
style:
left: 81.5%
top: 50%
font-size: 0.9vw
color: lightgrey
style:
top: '[[top]]'
left: '[[left]]'
width: 11%
height: 3.25%
justify-content: center
display: flex
align-items: center
background-color: 'rgba(255, 255, 255, 0.4)'
border-radius: 20vw
I removed my popup configs for readability since theyāre not relevant to this conundrum.
Read the docs about shadow-roots.
Read them, unless Iām mistaken, the following should work, but it does not:
- type: 'custom:decluttering-card'
template: climate
variables:
- temp: sensor.temperature_salon
- humidity: sensor.humidity_salon
- title: Salon
- left: 62%
- top: 50.5%
style:
decluttering-card.element$: |
group-element#declutter-child {
display: flex !important;
}
Shadow-roots are entered using just $ as selector, and (AFAIK) only as a mapping key, not as part of any actual CSS.
It may work like this:
style:
$: |
group-element#declutter-child { ā¦ }
But it depends on what the root element of custom:decluttering-card is. The example above assumes itās decluttering-card.element, which may not necessarily be correct.
I believe it only works that way if youāre targeting a row.