How Do I Overlay a Clock Card on top of Picture Cards for a Dashboard?

Configuration Frontend
1

I’m trying to have the current time in the center of a dashboard I created for some security camera monitors. There’s a default “clock” card that looks like it would do fine for this purpose. I’ve seen mention of being able to have cards stack over the top of other cards and have a transparent background using modifications. How does one go about doing such a thing?

Here’s the code for the dashboard in question:

kiosk_mode:
  mobile_settings:
    hide_header: true
views:
  - title: Home
    type: panel
    cards:
      - square: false
        type: grid
        cards:
          - show_state: false
            show_name: false
            camera_view: live
            type: picture-entity
            entity: camera.front_g4_pro_low_resolution_channel
          - show_state: false
            show_name: false
            camera_view: live
            type: picture-entity
            entity: camera.garage_g4_bullet_low_resolution_channel
          - show_state: false
            show_name: false
            camera_view: live
            type: picture-entity
            entity: camera.back_g4_pro_low_resolution_channel
          - show_state: false
            show_name: false
            camera_view: live
            type: picture-entity
            entity: camera.porch_g4_bullet_low_resolution_channel
        columns: 2

The clock card is just the one that seems to be baked into things:

clock_size: medium
show_seconds: false
type: clock
grid_options:
  columns: 12
  rows: 1

It doesn’t have to be this one. Just seemed the easiest for this.

Here’s an (admittedly crappy) illustration of what I’m going for if you line up the two lines and the clock card had a transparent background:

image
image473×736 87.1 KB

2

I have never seen any mention of this. Got a link?

3

I had to go back to find it but it was mentioned here and the person mentioning it said that it could be done w/CSS but didn’t provide any other info which leads me to believe this is a common thing that most other people probably know about.

4

No not common. Best to ask Ildar for more details.

5

Hello. I am rather far from PC. Will be able to give clarifications in a week I hope.

6

Got to PC.
Here is the code:

type: custom:mod-card
card:
  type: vertical-stack
  cards:
    - type: picture-entity
      show_state: true
      show_name: true
      camera_view: auto
      entity: light.bathroom_ceiling
      camera_image: camera.demo_camera
    - square: true
      type: grid
      columns: 2
      cards:
        - type: humidifier
          entity: humidifier.humidifier
          features:
            - type: humidifier-toggle
        - type: vertical-stack
          cards:
            - type: tile
              entity: switch.test_switch
              features_position: bottom
              features:
                - type: toggle
            - type: tile
              entity: fan.ceiling_fan
              features_position: bottom
              features:
                - type: fan-speed
            - type: tile
              entity: vacuum.0_ground_floor
              features_position: bottom
              features:
                - type: vacuum-commands
                  commands:
                    - start_pause
                    - stop
                    - clean_spot
card_mod:
  style:
    hui-vertical-stack-card $: |
      div#root {
        display: grid;
      }
      div#root > * {
        grid-column-start: 1;
        grid-row-start: 1;
      }
      div#root > :last-child {
        --ha-card-background: rgba(27,27,27,0.7);
        --ha-card-border-width: 0px;
      }

изображение
изображение489×370 44.7 KB

1 Like