Does anyone know how I might go about aligning the clock-weather-card to the top of the available space? The wasted space up top is driving me crazy.
1 Like
I realize I should clarify that I really love this card. I just wish I could find a way to have it take up less vertical space. If I could reclaim that space, I wouldn’t have vertical scroll bars on my tablets.
Not sure if you have already resolved this, however since I faced the same issue I decided to have a play and figured it out. Heres my code incase you or someone else needs it 
type: custom:clock-weather-card
entity: weather.home
sun_entity: sun.sun
weather_icon_type: line
animated_icon: true
forecast_rows: 3
forecast_days: 3
locale: en-AU
time_format: 12
hide_today_section: false
hide_forecast_section: false
hide_clock: false
hide_date: true
card_mod:
style: |
ha-card {
border-radius: 24px;
height: 240px !important; /* Ensure the height is set */
overflow: hidden; /* Hide overflow if content exceeds height */
}
.card-content {
height: 100%; /* Ensure content fills the card height */
transform: translateY(-30px); /* Adjust content positioning */
}
This still works. Thank you for posting.
I implimented the same thing too, what i have been trying to fix is the text being kind of centered but not really and it almost looks like it steps out. really want this all right justified and to change the order as well. I want the sunny and current temp to be larger with everything else being a little smaller
Test this out…
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;
}
how do you change the font size of the clock? this is what i have
Test this out…
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;
}
Hi there,
I am using this card together with the WallPanel integration to mimic Google Nest Hub’s idle photo collage.
The spacing between the weather icon and the information is quite big when viewing on a tablet, is there any way to get them closer together?
any idea on how to get temperature_sensor and humidity_sensor side by side ?
Here is one method
type: custom:clock-weather-card
entity: weather.forecast_home
card_mod:
style: |
clock-weather-card-today-left img {
height:90px !important;
margin-left: 100px !important;
}
This actually one field with a <br>
Test this
type: custom:clock-weather-card
entity: weather.forecast_home
show_humidity: true
card_mod:
style: |
clock-weather-card-today-right-wrap-top {
word-spacing: 7px;
}
clock-weather-card-today-right-wrap-top br {
display: none;
}
1 Like
that worked, thanks
there is a way to increase the dimension of the weather icon?
I am assuming you mean the main icon. Here is one method…
type: custom:clock-weather-card
entity: weather.forecast_home
show_humidity: true
card_mod:
style: |
clock-weather-card-today-left{
width: 70% !important;
margin: -50px 0 !important;
}
1 Like
Yes !! , thank you !!!
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 35%67%
grid-template-rows: auto
margin: 0px
card_margin: 0px
gap: 0px
cards:
- type: custom:clock-weather-card
entity: weather.home
weather_icon_type: line
animated_icon: true
hide_today_section: false
hide_forecast_section: true
hide_date: true
hide_clock: true
sun_entity: sun.sun
temperature_sensor: sensor.outdoor_temp
humidity_sensor: sensor.outdoor_humidity
card_mod:
style: |
ha-card {
background: none !important;
box-shadow: none !important;
border: none !important;
padding-bottom: 0px !important;
}
/* This hides the temperature text and other info */
.weather__info, .weather-info, .weather-text {
display: none !important;
}
/* Force the icon to center/align properly if needed */
.icon-container {
width: 100% !important;
justify-content: center !important;
}
- type: custom:stack-in-card
mode: vertical
keep:
background: false
box_shadow: false
margin: false
outer_padding: false
border_radius: false
cards:
- type: conditional
conditions:
- entity: sensor.flip_clock_color
state: blue
card:
type: custom:pqina-flip-clock-card
showSeconds: false
twentyFourHourFormat: false
hideBackground: true
styles:
width: 100%
height: 40cqw
fontSize: 25cqw
textOffsetVertical: "-0.05em"
font: Righteous
textColor: rgb(255,255,255)
frontFlapColor: rgb(30,60,120)
rearFlapColor: rgb(20,40,90)
- type: conditional
conditions:
- entity: sensor.flip_clock_color
state: orange
card:
type: custom:pqina-flip-clock-card
showSeconds: false
twentyFourHourFormat: false
hideBackground: true
styles:
width: 100%
height: 40cqw
font: Righteous
fontSize: 25cqw
textOffsetVertical: "-0.05em"
textColor: rgb(255,255,255)
frontFlapColor: rgb(160,90,30)
rearFlapColor: rgb(120,70,25)
- type: conditional
conditions:
- entity: sensor.flip_clock_color
state: red
card:
type: custom:pqina-flip-clock-card
showSeconds: false
twentyFourHourFormat: false
hideBackground: true
styles:
width: 100%
height: 40cqw
font: Righteous
fontSize: 25cqw
textOffsetVertical: "-0.05em"
textColor: rgb(255,255,255)
frontFlapColor: rgb(130,30,30)
rearFlapColor: rgb(95,20,20)
card_mod:
style: |
ha-card {
background: none !important;
border: none !important;
/* Vertically center the clock relative to the icon */
margin-top: 0px !important;
}
- type: custom:clock-weather-card
entity: weather.home
sun_entity: sun.sun
temperature_sensor: sensor.outdoor_temp
humidity_sensor: sensor.outdoor_humidity
weather_icon_type: line
animated_icon: true
forecast_rows: 5
locale: en-IN
hide_today_section: true
hide_forecast_section: false
hide_clock: true
hide_date: true
use_browser_time: false
time_zone: asia/kolkata
card_mod:
style: |
ha-card {
background: none !important;
border: none !important;
box-shadow: none !important;
margin-top: -40px !important; # Pull forecast closer to header
}
can anybody help to resize temprature and the animated icon ?
