Clock weather card - change size

Configuration Frontend
1

Hi,

I’m using the clock weather card and i think it looks awesome! But since i upgraded my walltablet to a Samsung galaxy tab A9+ the clock weather card just looks to small.
Is there any way to change the size of the card? Or can i change just the size of the clock?

clock
clock829×584 36.3 KB

2

This card was hanging with me to set it up.
Not sure if you already found a solution but in a dashboard using sections…

image
image1070×931 56.8 KB

3

Yes i found that to.

4

One method is to shrink the icon and weather data. The bars can be reduced as well.

type: custom:clock-weather-card
entity: weather.forecast_home
card_mod:
  style: |
    clock-weather-card-today-right-wrap-center {
     font-size: 20px !important;
     margin: -10px !important;
       }
    clock-weather-card-today-right-wrap-top {
     font-size: 15px !important;
       }
    clock-weather-card-today-left img {
     height:70px !important;
       }

image
image821×426 32.6 KB

3 Likes
5

Is there any way to increase the size of the clock?

6 
card_mod:
  style: |
    clock-weather-card-today-right-wrap-center {
     font-size:30px !important;
     margin: -10px !important;
      }
    clock-weather-card-today-right-wrap-bottom {
     margin-left: 20px;
      }
    clock-weather-card-today-right-wrap-top {
     font-size: 15px !important;
      }
    clock-weather-card-today-left img {
     height:70px !important;
     }
7

Yay! Thank you for that!

8

I’m a newbie - how do I use this with the card?

9

Install HACs then add the following plugins:

clock-weather-card
card_mod

10

Thanks - I’ve done that, just couldn’t get the code you posted to work

11

Share your current card code please.

Just responded in another thread less than two weeks ago here :arrow_down:

I posted quite a few working examples…

12

Hi, newbie here… how to set backgroung trasparency or dark theme? thanks

13

Like this

type: custom:clock-weather-card
entity: weather.forecast_home
card_mod:
  style: |
    ha-card {
     background: transparent;
1 Like
14

for the days now I;m struggling with hiding the labels Humidity and Feels Like:

image
image290×118 5.13 KB

I’ve tried various CSS selectors targeting elements like:


clock-weather-card-today-right-wrap-top > :nth-child(4)
clock-weather-card-today-right-wrap-top > :nth-child(8)

and also attempted targeting span:first-child inside div:nth-of-type() within clock-weather-card-today-right, but none of these approaches seem to work—likely due to shadow DOM encapsulation.

any chance @LiQuid_cOOled you know the solution :)? and in general how to find out which and how to apply the correct styles ?
i’m familiar with Inspecting and Developer Tools in the Browser, i can;t find working solution at all

15

after numerous tries I’ve done it

obraz
obraz253×115 4.03 KB

type: custom:clock-weather-card
entity: weather.home
temperature_sensor: sensor.openweathermap_temperature
humidity_sensor: sensor.openweathermap_humidity
weather_icon_type: fill
animated_icon: true
forecast_rows: 5
locale: pl-PL
time_pattern: HH:mm
time_format: 24
date_pattern: ccc, d.MM.yy
hide_today_section: false
hide_forecast_section: true
show_humidity: true
hide_clock: true
hide_date: true
hourly_forecast: false
use_browser_time: false
time_zone: null
tap_action:
  action: null
show_decimal: true
apparent_sensor: sensor.openweathermap_feels_like_temperature
grid_options:
  rows: 2
  columns: 8
card_mod:
  style: |
    clock-weather-card-today-right-wrap-top {
      visibility: hidden !important;
      position: relative;
    }

    clock-weather-card-today-right-wrap-top::after {
      content: "{{ states('sensor.custom_weather_text') }}" !important;
      white-space: pre-line;
      visibility: visible;
      position: absolute;
      top: 0;
      left: 0;
      font-size: 11px;
      color: var(--primary-text-color);
    }
    clock-weather-card-today-right-wrap-center {
      font-size: 3em !important;
      margin-top: -30px !important;
    }