Hide top bar in camera view

    # Ultimaker
          - type: conditional
            conditions:
              - entity: input_boolean.3d_drucker_ein_ausschalten
                state: on
            elements:
              - type: icon
                icon: mdi:printer-3d-nozzle
                entity: camera.ultimaker
                style:
                  top: 10%
                  left: 32%
                  color: '#FFA54F'
                  transform: translate(-50%, -50%) scale(2.5, 2.5) rotate(0deg)
                  filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.3))
                  opacity: 0.8
                tap_action:
                  action: fire-dom-event
                  browser_mod:
                    service: browser_mod.popup
                    data:
                      content:
                        type: custom:more-info-card
                        entity: camera.ultimaker
                      card_mod:
                              style:
                                div.content: |
                                  .content .container {
                                    padding: 0px !important;
                                          }
                                more-info-card$ha-card:
                                  $: |
                                    .card-header {
                                      display: none !important;
                                          }
                                    :host ::slotted(.card-content) {
                                      padding: 0 !important; 
                                          }
                                  more-info-content$more-info-camera$ha-camera-stream$ha-hls-player$: |
                                    video {
                                        border-radius: 120px !important;
                                        width: 500px !important;
                                        bottom: 400px;
                                        position: fixed;
                                          }

What is the top portion of the card code?

Test this in a separate card

type: picture-elements
elements:
  - type: icon
    icon: mdi:printer-3d-nozzle
    entity: camera.ultimaker
    style:
      top: 10%
      left: 32%
      color: '#FFA54F'
      transform: translate(-50%, -50%) scale(2.5, 2.5) rotate(0deg)
      filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.3))
      opacity: 0.8
    tap_action:
      action: fire-dom-event
      browser_mod:
        service: browser_mod.popup
        data:
          content:
            type: custom:more-info-card
            entity: camera.ultimaker
          card_mod:
            style:
              div.content: |
                .content .container {
                  padding: 0px !important;
                       }
              more-info-card$ha-card:
                $: |
                  .card-header {
                   display: none !important;
                   
                      }
                  :host ::slotted(.card-content) {
                   padding: 0 !important; }
                   
                   }
                more-info-content$more-info-camera$ha-camera-stream$ha-hls-player$: |
                  video {
                    border-radius: 20px !important;
                    width: 500px !important;
                    bottom: 400px;
                    position: fixed;
                                  }        
image: https://demo.home-assistant.io/stub_config/floorplan.png
      - type: picture-elements
        image: /local/floorplan/ipad_startseite.png
        elements:

If I use your new code on a new subview it’s still the same. Changing the border radius for example does not work.

So odd…

Works for me

What are the versions for :
HA?
Your browser?

Are you using any themes?

I use the companion App on iPad. Still the same on different browser though.

I am not sure about any themes. As far as I know I didn’t use any in the past. How can I check it?

Find your name at the bottom of the menu and click the image next to it.

Scroll down an look for Theme.

I am fairly certain its the browser though.

I checked with Chrome, Safari and Firefox. No difference.

Maybe I am missing any HACS Integration? Which one is necessary?

The more-info-card and browser-mod

Both are installed :confused:

I messaged you so we can do some troubleshooting steps

1 Like

Two solutions here depending on the camera video type

          card_mod:
            style:
              div.content: |
                .content .container {
                  padding: 0px !important;
                       }
              more-info-card$ha-card:
                $: |
                  .card-header {
                   display: none !important;
                   
                      }
                  :host ::slotted(.card-content) {
                   padding: 0 !important; }
                   
                   }
                more-info-content$more-info-camera$ha-camera-stream$: |
                  img {
                    border-radius: 20px !important;
                    width: 500px !important;
                    bottom: 200px;
                    position: fixed;
                                  } 
    card_mod:
        style:
          div.content: |
            .content .container {
              padding: 0px !important;
                     }
          more-info-card$ha-card:
            $: |
              .card-header {
                display: none !important;
                 
                    }
              :host ::slotted(.card-content) {
                 padding: 0 !important; }
                 
               }
            more-info-content$more-info-camera$ha-camera-stream$ha-hls-player$: |
              video {
                  border-radius: 20px !important;
                  width: 500px !important;
                  bottom: 200px;
                  position: fixed;
                                }        
1 Like