Time on Screensaver

Configuration Frontend
1

I’m trying to use the wallpaper screensaver j-a-n/lovelace-wallpanel: :framed_picture: Wall panel mode and photo screensaver for your Home Assistant Dashboards (github.com)

But wanted to put a clock + weather info in there…
The weather part seems to be going fine, but the clock font is very small - So I did the card_mod on it… but now its being capped to a maximum height… any ideas on how to get a full clock (how do I change the fixed height of the card?)

  cards:
    - show_current: true
      show_forecast: true
      type: weather-forecast
      entity: weather.home
      forecast_type: daily
      name: Saheel
      card_mod:
        style: |
          ha-card
            {background: transparent;
             border-style: none;
            }
    - type: custom:mushroom-entity-card
      entity: sensor.time
      name: ' '
      icon_type: none
      height: 200px
      card_mod:
        style: |
          :host {
            --mush-card-primary-font-size: 22px;
            --mush-card-secondary-font-size: 100px;
            --mush-card-primary-font-weight: lighter;
            --mush-card-secondary-font-weight: bolder;
            height 200px
            --mush-icon-size: 2px
          }

image

2

First of all, I think this card fits your use case really well, however…:

Clock Weather Card

Something like this should work:

type: custom:mushroom-entity-card
entity: sensor.current_time
icon_type: none
primary_info: none
card_mod:
  style: 
    mushroom-state-info$: >
        .container { 
          align-items: center;          
        }
        .secondary {  
          --card-secondary-font-size: 22px;  /* Sets secondary text size */
          padding: 15px 0;  /* Required so the text isn't cut off above and below */
        }
    .: >
      :host {    
        --mush-card-primary-font-size: 22px;
        --mush-card-secondary-font-size: 100px;
        --mush-card-primary-font-weight: lighter;
        --mush-card-secondary-font-weight: bolder;
        height: 200px
        --mush-icon-size: 2px          
      }

Go here for extensive tutorial on mushroom card styling, most of the :host stuff here is unnecessary:

Mushroom Entity Card Styling

1 Like