Hi all,
I’ve been trying to optimise my dashboard casted to my nest hub V2 and have some difficulties.
As seen in the image I’m able to move the temp bar to the right in order to compensate the bigger text size of the days/temps but by moving the whole bar to the right, it goes over the temperature on the right side.
I don’t see any possiblity to move the text of the temp/weekdays as the text next to the bars is labeled as ‘forecast-text’. I would like to be able to only move the text on the right side of the bar. Any suggestions?
type: custom:clock-weather-card
entity: weather.forecast_thuis
locale: nl
card_mod:
style: |
}
clock-weather-card-today-right-wrap-center {
font-size:80px !important;
}
clock-weather-card-today-right-wrap-bottom {
font-size: 30px;
}
clock-weather-card-today-right-wrap-top {
font-size: 40px !important;
justify-content: start;
margin-left: -50px;
}
clock-weather-card-today-left img {
# height:70px !important;
}
clock-weather-card-forecast-row {
width: 700px !important;
font-size: 20px;
margin-left: -10px; !important;
}
forecast-temperature-bar {
margin-left: 50px !important;
}
forecast-icon {
margin-left: 720px !important;
size: 10px !important;
height: 80px !important;
width: 80px !important;
}
forecast-text {
font-size: 30px !important;
}
Why the huge margin-left adjustments? It’s not clear with out the combined cards. It is possible to move the right text though…
type: custom:clock-weather-card
entity: weather.forecast_thuis
locale: nl
card_mod:
style: |
:nth-child(1)>forecast-text:nth-child(5){
margin-left: -80px;
font-size: 12px;
color: blue;
z-index: 0;
}
:nth-child(2)>forecast-text:nth-child(5){
margin-left: -80px;
font-size: 12px;
color: red;
z-index: 0;
}
:nth-child(3)>forecast-text:nth-child(5){
margin-left: -100px;
font-size: 12px;
color: cyan;
z-index: 0;
}
:nth-child(4)>forecast-text:nth-child(5){
margin-left: -120px;
font-size: 12px;
color: white;
z-index: 0;
}
:nth-child(5)>forecast-text:nth-child(5){
margin-left: -130px;
font-size: 12px;
color: black;
z-index: 0;
}
forecast-icon {
margin-left: 380px !important;
width: 35px !important;
}
The code can be consolidated, but the example shows a basic example.
Thank you soo much! This is just what I have been looking for!
The margin left is to accommodate for the text size increase in order to prevent the bar from going over the left text.
With your help I’ve finished my display on my nest hub!
If someone would like to reuse this code:
type: custom:clock-weather-card
entity: weather.forecast_thuis
locale: nl
card_mod:
style: |
clock-weather-card-today-right-wrap-center {
font-size: 70px !important;
}
clock-weather-card-today-right-wrap-bottom {
font-size: 30px; !important;
margin-top: 5px; !important;
margin-left: 15px; !important;
}
clock-weather-card-today-right-wrap-top {
font-size: 30px !important;
justify-content: start;
margin-left: 5px; !important;
margin-top: -5px !important;
}
clock-weather-card-today-left img {
# height:70px !important;
}
clock-weather-card-forecast-row {
width: 700px !important;
font-size: 20px; !important;
margin-left: -10px; !important;
}
forecast-temperature-bar {
margin-left: 30px !important;
}
forecast-icon {
margin-left: 770px !important;
size: 10px !important;
height: 50px !important;
width: 50px !important;
}
forecast-text {
font-size: 25px !important;
}
ha-card {
background: none !important;
box-shadow: none !important;
border-width: 0px !important;
}
:nth-child(1)>forecast-text:nth-child(5){
margin-left: 50px;
color: white;
z-index: 0;
}
:nth-child(2)>forecast-text:nth-child(5){
margin-left: 50px;
color: white;
z-index: 0;
}
:nth-child(3)>forecast-text:nth-child(5){
margin-left: 50px;
color: white;
z-index: 0;
}
:nth-child(4)>forecast-text:nth-child(5){
margin-left: 50px;
color: white;
z-index: 0;
}
:nth-child(5)>forecast-text:nth-child(5){
margin-left: 50px;
color: white;
z-index: 0;
}
1 Like
Got it and it looks great!
You can consolidate the code with
forecast-text:nth-child(5){
margin-left: 50px;
color: white;
z-index: 0;
}
type: custom:clock-weather-card
entity: weather.forecast_thuis
locale: nl
card_mod:
style: |
clock-weather-card-today-right-wrap-center {
font-size: 70px !important;
}
clock-weather-card-today-right-wrap-bottom {
font-size: 30px; !important;
margin-top: 5px; !important;
margin-left: 15px; !important;
}
clock-weather-card-today-right-wrap-top {
font-size: 30px !important;
justify-content: start;
margin-left: 5px; !important;
margin-top: -5px !important;
}
clock-weather-card-today-left img {
# height:70px !important;
}
clock-weather-card-forecast-row {
width: 700px !important;
font-size: 20px; !important;
margin-left: -10px; !important;
}
forecast-temperature-bar {
margin-left: 30px !important;
}
forecast-icon {
margin-left: 770px !important;
size: 10px !important;
height: 50px !important;
width: 50px !important;
}
forecast-text {
font-size: 25px !important;
}
ha-card {
background: none !important;
box-shadow: none !important;
border-width: 0px !important;
}
forecast-text:nth-child(5){
margin-left: 50px;
color: white;
z-index: 0;
}
Thanks, that is even better! I really appreciate the help.
I’ve just started using this card and am also having some styling issues.
Is there a comprehensive card_mod style guide for this card? I’m trying to space the day and low temp text to allow room for the icons:
type: custom:clock-weather-card
entity: weather.pirate_weather
title: null
sun_entity: sun.sun
temperature_sensor: sensor.temperature_exterior_calculated
humidity_sensor: sensor.pirate_weather_humidity
weather_icon_type: line
animated_icon: true
forecast_rows: 7
locale: en-US
time_pattern: h:mm
date_pattern: ccc, MM/d/yy
hide_today_section: false
hide_forecast_section: false
show_humidity: false
hide_clock: true
hide_date: true
hourly_forecast: false
use_browser_time: false
time_zone: null
show_decimal: false
apparent_sensor: sensor.pirate_weather_apparent_temperature
aqi_sensor: sensor.air_quality_index
card_mod:
style: |
clock-weather-card-today-right-wrap-center {
font-size: 50px !important;
color: white;
}
clock-weather-card-today-right-wrap-bottom {
font-size: 26px; !important;
margin-top: 5px; !important;
margin-left: 15px; !important;
}
clock-weather-card-today-right-wrap-top {
font-size: 20px !important;
justify-content: start;
margin-left: 5px; !important;
margin-top: -5px !important;
color: white;
}
clock-weather-card-today-left img {
# height: 90px !important;
}
clock-weather-card-forecast-row {
width: 220px !important;
font-size: 20px; !important;
margin-left: -5px; !important;
}
forecast-temperature-bar {
margin-left: 40px !important;
width: 160px !important;
}
forecast-icon {
margin-left: 18px !important;
size: 10px !important;
height: 50px !important;
width: 50px !important;
}
forecast-text {
font-size: 20px !important;
margin-left: 5px !important;
color: white;
}
ha-card {
background: rgba(7, 103, 215, 0.24) !important;
box-shadow: none !important;
border-width: 0px !important;
}
grid_options:
columns: full
type or paste code here
Also, it would be awesome to be able to place the summary text and apparent temperature under the current temperature, rather than above it.
