Changing ForecastIO template

Get Help
1

Hello,

I recently installed CMS version 1.7.8 and wanted to use ForecastIO for the first time but I am struggling with formatting it. I tried changing up the CSS code with some success. I managed to move the icons and the days. But i cannot get the temperature numbers of the future days to move a bit down.

forecast.PNG1526×659 685 KB

This is how it looks right now. Can anybody tell me how to move the temperatures? Also, if i don’t override the template, the size field does not seem to work. Whenever i change it, the widget doesn’t get bigger nor smaller.

2

Edit the css

.daily-forecast {
display: table;
width: 100%;
font: bold 36px/46px ‘Lora’, serif;
margin-left:5px;
margin-bottom:10px;
vertical-align:bottom;
position:absolute;
left:5px;
bottom:10px;
}
.day {
display: table-cell;
height: 110px;
width: 8%; /* for some reason keeps the ‘columns’ equal */
padding: 30px 20px;
text-align:center;
vertical-align:bottom;
}
.day:nth-of-type(1) {
width: 10%;
}
.day:nth-of-type(6),
.day:nth-of-type(7) {
display:table-cell;
}
.currentDay {
font-size: 48px;
valign:bottom;
border-radius:25%;
border-bottom: 7px dotted #000;
border-top: 7px dotted #000;
box-shadow: inset 0 -3px 0 0 #000;
background-color:hsl(240, 50%, 95%);
}
.day:nth-of-type(1) .currentDay {

display: table-cell;
padding: 25px;
width: 250px;
height: 450px;

}
.day-icon {
font-size: 55px;
margin-top: -24px;
margin-bottom: 20px;

}
.day:nth-of-type(1) .currentDay .day-icon {
font-size: 170px;
margin: 2% 0 8%;
}
.day-icon-seperator {
display: block;
}
.day:nth-of-type(1) .currentDay .day-icon-seperator {
display: block;
width: 90%;
height: 5px;
background-color: #F2F2F2;
border: none;
}
.weekday {
font-size: 48px;
display: none;
text-transform: uppercase;

}
.day:nth-of-type(1) .currentDay .weekday {
display: block;
margin: 28px auto 20px;
}
.day:nth-of-type(1) .currentDay .maxTemp {
font-size: 100px;
margin-top:72px;
}
.unitTemp {
display:inline;
}
.day:nth-of-type(1) .currentDay .unitTemp {
display: inline;
}
.weekday-short {
margin-top: 10%;
}
.day:nth-of-type(1) .currentDay .weekday-short {
display:none;
}