looks like you need to apply the style to the button cards too, not just the stackin card
indeed, that s what I ended up with, should have posted the solution to my question, real sorry for that:
- type: entities
title: Soundbites
show_header_toggle: false
entities:
- input_select.sound_bite
- input_select.sound_bite_player
- input_number.sound_bite_volume
# - input_boolean.loop_sound_bite
# - entity: script.play_sound_bite
# action_name: Play
- type: divider
- type: custom:hui-element
card_type: horizontal-stack
cards:
- type: custom:button-card
entity: input_boolean.loop_sound_bite
show_name: false
aspect_ratio: 3/1
style: |
ha-card {
box-shadow: none;
}
- type: custom:button-card
entity: script.play_sound_bite
show_name: false
aspect_ratio: 3/1
style: |
ha-card {
box-shadow: none;
}
icon: >
[[[ if (entity.state == 'on') return 'mdi:stop';
return 'mdi:play'; ]]]
tap_action:
action: call-service
service: script.toggle
service_data:
entity_id: entity
haptic: light
hold_action:
action: more-info
haptic: light
- type: divider
- entity: automation.stop_tune_and_bite
secondary_info: last-triggered
looks like:
helppp!!
how the heck do i style a vertical/horizontal stack card with 2 light-popup-card s!?
Iāll be the first to admin I am a CSS n00b. But I can usually figure it out. This one, im stuck!
I have something like the below, and I want to make the background transparent on the light popup cards. Styling those works when they are not in a hui stack card. As soon as i put 2 together they just get a black background.
Thanks for any and all help!
action: call-service
service: browser_mod.popup
service_data:
auto_close: false
hide_header: true
title: ' '
deviceID: this
style:
$: |
.mdc-dialog .mdc-dialog__container {
background: none;
border-radius: 1em;
}
.mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
box-shadow: none;
background: none;
}
.: |
:host .content{
width: 45em;
--ha-card-background: rgba(0,0,0,0);
}
card:
type: custom:hui-element
card_type: vertical-stack
cards:
- type: 'custom:button-card'
name: Living Room Lights
entity: sensor.placeholder
show_name: true
show_icon: false
state:
- operator: default
styles:
card: [background-color: none]
name: [color: '#ffffff']
state: [color: '#ffffff']
icon: [color: '#ffffff']
styles:
name:
- justify-self: middle
- font-size: 1.8vw
- font-weight: 550
- font-familly: 'Arial, Helvetica, sans-serif'
- cursor: default
style: |
ha-card {
box-shadow: none;
}
- type: custom:hui-element
card_type: horizontal-stack
cards:
- type: custom:light-popup-card
entity: '[[[ return entity.entity_id ]]]'
icon: mdi:wall-sconce-flat
fullscreen: false
brightnessWidth: 90px
brightnessHeight: 350px
borderRadius: 1.8em
sliderColor: '#c7c7c7'
sliderTrackColor: rgba(25, 25, 25, 0.9)
actionsInARow: 2
actionSize: 5em
actions:
- service: scene.turn_on
service_data:
entity_id: scene.day
color: black
icon: 'mdi:brightness-5'
# name: Day
- service: scene.turn_on
service_data:
entity_id: scene.afternoon
color: black
icon: 'mdi:brightness-6'
# name: Afternoon
- service: scene.turn_on
service_data:
entity_id: scene.evening
color: black
icon: 'mdi:brightness-7'
# name: Evening
- service: scene.turn_on
service_data:
entity_id: scene.late_night
color: black
icon: 'mdi:brightness-3'
# name: Night
- type: custom:light-popup-card
entity: light.living_room_light
icon: mdi:track-light
fullscreen: false
supportedFeaturesTreshold: 1
brightnessWidth: 90px
brightnessHeight: 350px
borderRadius: 1.8em
sliderColor: '#c7c7c7'
sliderTrackColor: rgba(25, 25, 25, 0.9)
actionsInARow: 2
actionSize: 4em
actions:
- service: scene.turn_on
service_data:
entity_id: scene.warm
color: "#FDCA64"
# name: warm
- service: scene.turn_on
service_data:
entity_id: scene.neutral
color: "#FFE7C0"
# name: neutral
- service: scene.turn_on
service_data:
entity_id: scene.white
color: "#BBEEF3"
# name: white
- service: scene.turn_on
service_data:
entity_id: scene.cool
color: "#8BCBDD"
# name: cool
Hey @thomasloven, fellow Swede here!
Iām trying to use your card to be able to load an image element inside a card and it seems to work fine, but for some reason the styling of the element is not being applied and I canāt figure out if I have made a mistake somewhereā¦
Iām using it inside an included file together with the decluttering card and the config template card. My code looks like the following, can you spot any mistakes that makes styling not working?
ikea-light: // decluttering template
card:
type: 'custom:config-template-card' // config template card
entities:
- light.hallbyra
card:
type: custom:hui-element // here we go
element_type: image
image: '[[image-url]]'
entity: '[[entity]]'
style:
top: 10%
left: 10%
width: 100%
height: auto
action: none
tap_action:
action: none
hold_action:
action: none
Edit: I have tried it without the ā[[image-url]]ā and ā[[entity]ā variables from decluttering card as well by hard coding those values.
Thank you for your great work for this community, you really make a difference!
// Jens.
Great! Does this mean that we can use this to open a mediabrowser card //part for a spotify player? Can you guide me in the right direction?
Hi I like the look of your dashboard is that a theme or have you styled it ?
Somethingās wrong with me, maybe someone can help me with the code? The code I made does not work.
title: Camera
icon: 'mdi:cctv'
panel: true
cards:
- type: custom:hui-element
card_type: picture-elements
image: /local/images/floorplan/floorplan/blurredFloorplan.png
style: |
ha-card {
background: rgba(42, 46, 48, 1)
}
elements:
- type: custom:hui-element
card_type: picture-entity
entity: camera.smoking
show_state: false
aspect_ratio: 16x9
show_name: false
card_mod:
style: |
ha-card {
box-shadow: black;
height: 87%
left: 62%
top: 90%
width: 41%
border-radius: 8px;
}
Love this card, would you mind sharing the code ? , for my DCP-9020CDW 
Sure, here you go.
The headings are a Custom Button Card template, which Iāve also included.
Looks like this with the Caule Black Aqua Glass theme from the Caule Themes Pack:
Yaml code
- type: vertical-stack
cards:
##==============================================================================
#=== Printer
##==============================================================================
- type: entities
card_mod:
style:
.: |
ha-card div#states.card-content {
padding-right: 8px;
padding-left: 8px;
padding-top: 8px;
padding-bottom: 8px;
}
ha-card div#states div {
margin-top: 0px;
margin-bottom: 0px;
}
show_header_toggle: false
entities:
- type: custom:hui-element
card_type: horizontal-stack
cards:
- type: custom:button-card
template: button_label
variables:
var_name: 'Brother HL-L3210CW Printer'
- type: custom:hui-element
card_type: horizontal-stack
cards:
- type: vertical-stack
cards:
- type: entities
card_mod:
style:
.: |
ha-card {
background: none;
border: none;
box-shadow: none;
}
ha-card div#states.card-content {
padding-right: 0px;
padding-left: 0px;
padding-top: 0px;
padding-bottom: 0px;
}
ha-card div#states div {
margin-top: 0px;
margin-bottom: 0px;
}
entities:
- type: custom:hui-element
card_type: horizontal-stack
cards:
- type: custom:button-card
template: button_label
variables:
var_name: 'Status'
- type: custom:template-entity-row
card_mod:
style: |
:host div#wrapper {
padding-right: 12px;
}
entity: sensor.hl_l3210cw_status
name: 'Printer is...'
icon: mdi:printer
state: >
{% set sta = states('sensor.hl_l3210cw_status') %}
{{ 'Idle' if sta == 'sleep' else sta }}
active: >
{{ is_state('sensor.hl_l3210cw_status', 'printing') }}
- type: entities
card_mod:
style:
.: |
ha-card {
background: none;
border: none;
box-shadow: none;
}
ha-card div#states.card-content {
padding-right: 0px;
padding-left: 0px;
padding-top: 0px;
padding-bottom: 0px;
}
ha-card div#states div {
margin-top: 0px;
margin-bottom: 0px;
}
entities:
- type: custom:hui-element
card_type: horizontal-stack
cards:
- type: custom:button-card
template: button_label
variables:
var_name: 'Pages Printed'
- type: custom:hui-element
card_type: glance
card_mod:
style:
.: |
ha-card {
background: none;
border: none;
box-shadow: none;
}
ha-card div.entities {
padding-top: 0px !important;
padding-left: 0px;
padding-right: 0px;
padding-bottom: 0px;
}
ha-card div.entities div.entity {
margin-bottom: 0px !important;
}
entities:
- entity: sensor.hl_l3210cw_b_w_counter
name: 'B/W'
- entity: sensor.hl_l3210cw_color_counter
card_mod:
style:
.: |
:host div.name {
font-size: 0.9rem;
}
name: 'Colour'
- entity: sensor.hl_l3210cw_duplex_unit_pages_counter
card_mod:
style:
.: |
:host div.name {
font-size: 0.9rem;
}
name: 'Duplex'
- type: vertical-stack
cards:
- type: entities
card_mod:
style:
.: |
ha-card {
background: none;
border: none;
box-shadow: none;
}
ha-card div#states.card-content {
padding-right: 0px;
padding-left: 0px;
padding-top: 0px;
padding-bottom: 0px;
}
ha-card div#states div {
margin-top: 0px;
margin-bottom: 0px;
}
entities:
- type: custom:hui-element
card_type: horizontal-stack
cards:
- type: custom:button-card
template: button_label
variables:
var_name: 'Toner Levels'
- type: custom:bar-card
card_mod:
style:
.: |
bar-card-card {
margin: 0px;
--bar-card-border-radius: 2px;
}
bar-card-value {
margin-top: auto;
margin-bottom: auto;
color: grey;
text-shadow: 0.5px 0.5px #000000;
font-size: 0.9em;
}
entity_row: true
entities:
- entity: sensor.hl_l3210cw_black_toner_remaining
color: black
- entity: sensor.hl_l3210cw_cyan_toner_remaining
color: cyan
- entity: sensor.hl_l3210cw_magenta_toner_remaining
color: magenta
- entity: sensor.hl_l3210cw_yellow_toner_remaining
color: yellow
direction: up
indicator: auto-vertical
width: 2.5em
height: 15em
positions:
icon: 'off'
indicator: 'off'
name: 'off'
stack: horizontal
Template:
button_label:
variables:
var_name: 'var_name'
name: '[[[ return variables.var_name ]]]'
color_type: label-card
color: var(--ha-card-background)
tap_action:
action: none
styles:
card:
- height: 36px
- padding-top: 0px
- padding-bottom: 0px
- color: var(--primary-text-color)
- margin-bottom: 8px
Cool, thanks alot ā¦ seems like i have the custom-cards needed ā¦ just discovered hui-element, been sitting past days and done some nice borders, on my cards ā¦ so you wont reconice your printer-card, when i get it up and going
I was looking through the examples posted here and was wondering if it is possible to use a normal āpictureā card and then add other cards to/on it?
Why not using a Picture elements?
Is the reason related to buggy scaling in that card?
Yupp. Hoping that this can somehow be pimped. And with hui-elements I can freely place cards/elements. So I might also be able to fix other problems I am encountering.
No stone left unturned until I find a way to make this work 
I am, in parallel, also trying to get a stack working with āimageā, but āimageā cannot be defined a background if the entire card. It is only applied to the stackās specific row or column.
Admittedly, this is my observation from last night also, so maybe I have just not found the solution yet (plus image is not displayed properly yet, which I need to solve also ā see css card mod thread).
Coming back to your question.
The hui-elements card is used to put cards into unusual place - like āinsert graph-card into Entities cardā. Some of these cases may be solved by using stacks alternatively.
Another example is āinsert markdown into Entitiesā - for this case it is the best (imho) option to use the hui-elements card.
Also, the hui-elements card may be used to create a decluttering card based on some entity-row (section, divider, button, chip-buttons, sensor-entity, toggle-entity etc).
The Picture card is not supposed to include any elements (icons, labels, cards, ā¦).
So there is no way to use the hui-elements card here.
But you may put other elements on the Picture card (overlapping) using stack + card-mod (example is here).
The idea is to put several cards into the SAME cell of the table:
- type: custom:mod-card
card_mod:
style:
hui-vertical-stack-card $: |
div#root {
display: grid;
}
div#root > * {
grid-column-start: 1;
grid-row-start: 1;
margin: 0px;
--ha-card-background: rgba(0,0,0,0);
}
card:
type: vertical-stack
cards:
....
One of the cards may be the Picture card, other cards will be OVERLAPPING - but these cards will occupy the whole area (= pictureās height & width). So this is probably not you need.
Yes, basically these issues are to be discussed / solved there.
1 Like
You are right. I will try the next approach and discuss it there.
I feel like I have been trying a whole bunch of approaches and they each fail because of one small detail (but the detail is always different 
)
Post should have been placed in card-mod thread. Thank you @Ildar_Gabdullin for pointing it out.
Information and follow up can be found here: card-mod thread
1 Like
I do not know, need to check.
Also, I recommend to transfer this discussion to another thread, if it is not related to hui-element.
Of course, I will make a copy in the card-mod thread an then edit out the code to make it waste less spaceā¦ I remembered that we discussed it here so I wanted to refer to it here.
Hi, I have a question about the custom:hui-element and couldnāt find an answer anywhere.
I started a Card with it (so custom:hui-element is the first entry) and embedded more cards. It is only possible for me to give a background to the embedded cards. But not the whole custom:hui-element, as a kind of unit with a background. Is there any trick to this? Maybe with card-mod?