šŸ”¹ hui-element - Use built-in elements in the wrong place

must be getting blind, reread this thread and instructions, but have this formatting issue I want fix.

      - entity: script.play_sound_bite
        action_name: Play
#      - script.play_sound_bite_alt
      - entity: automation.stop_tune_and_bite
        secondary_info: last-triggered

      - type: custom:hui-element
        card_type: horizontal-stack
        style: |
          ha-card {
            box-shadow: none;
            margin: 0px -15px 0px -15px;
          }
        cards:
          - type: custom:button-card
            entity: input_boolean.loop_sound_bite
          - type: custom:button-card
            entity: script.play_sound_bite
            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

was supposed to have the horizontal stack lose its border and shadow, but they remain in view elevated from the entities card above:

what am I missing?
please have a look, must be something simple, since this style mod is used in my whole setup and works all the timeā€¦

edit
small progress: must be a div, no ha-card:

      - type: custom:hui-element
        card_type: horizontal-stack
        style: |
          div {
            shadow: none;
            margin: 0px -15px -15px -15px;
          }

still the shadow or box-shadow doesnā€™t workā€¦


how to flatten those buttons?

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 ?

Both.

https://community.home-assistant.io/t/day-and-night/116232/20?u=tom_l

1 Like

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 :slight_smile:

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 :slight_smile: ā€¦ 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 :slight_smile:

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 :man_shrugging:

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 :joy:)

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.