Plugin Author
tuxlog
(@tuxlog)
Hello Rico,
yes of course you can adjust the CSS as you like it.
For a horizontal view use wp-forecast-horizontal.css as an example.
Remember to put all your user specific css in wp-forecast.css in the wp-forecast directory
Thread Starter
Rico
(@nascas)
Hi!
Thank you for your answer!
Are there any specific or more detailed information since I’m new to WP and all this? 😉
Have a nice day,
Rico
Plugin Author
tuxlog
(@tuxlog)
Hi Rico,
just tell me the URL of your site and I will have a look and hopefully will find a solution.
Plugin Author
tuxlog
(@tuxlog)
Okay, I do not think it is wide enough to hold all three of the blocks.
Anyway I jsut tried a bit and got this result:
/* style for forecast data details left side */
$div.wp-forecast {
padding: 0px;
float:left;
width:100%;
}
/* style for current weather data */
div.wp-forecast-curr {
font-size: 11px;
padding: 3px;
text-align:center;
margin-left:auto;
margin-right:auto;
}
/* style for forecast data */
div.wp-forecast-curr-head {
font-size: 11px;
padding: 15px;
text-align:center;
/* margin-left:auto; */
/* margin-right:auto; */
max-width: 100px;
float: left;
}
/* style for forecast data details */
div.wp-forecast-curr-block {
padding: 0px;
float:left;
max-width: 100px;
}
/* style for forecast data details left side */
div.wp-forecast-curr-left {
padding: 3px;
float: left;
}
/* style for forecast data details right side */
div.wp-forecast-curr-right {
font-size: 14px;
font-weight: bolder;
font-variant: small-caps;
text-align:left;
padding: 3px;
float: left;
}
/* style for forecast data details right side */
div.wp-forecast-wind-right {
font-size: 12px;
font-weight: bolder;
font-variant: normal;
text-align:left;
padding: 3px;
float: left;
padding-top: 12px;
}
/* style for current weather data details */
div.wp-forecast-curr-details {
font-size: 11px;
padding: 6px;
text-align:left;
float:left;
/* width:100%; */
}
/* style for current weather icon */
img.wp-forecast-curr-left {
width: 48px;
height: 30px;
padding: 0px;
}
Copy this into wp-forecast.css
What do you think?
Thread Starter
Rico
(@nascas)
It looks nice, thank you very much.
I temporarily removed the 2-day prognosis because the icons were not placed hornizontally. Can we arrange that 3-day prognosis icons would be placed in a horizontal line?
I would also like to enlarge the fonts (City, date, time, temperature). Is there a way that city name and date are left-aligned and that temperature is shown next to the icon? This text could remain the same size.
I made a quick screenshot.
Many thanks!
Plugin Author
tuxlog
(@tuxlog)
I will try it. Can you activate the forecast on your site please. So I can edit directly in to your css and post it here.
Thread Starter
Rico
(@nascas)
Sorry for a late reply.
Here, I activated a 3-day forecast.
Thank you very much for your effort.
Plugin Author
tuxlog
(@tuxlog)
Just change the following:
div.wp-forecast-fc-oneday {
padding: 10px;
float: left;
max-width: 100px;
This did the trick. I tested it directly at your site.
Thread Starter
Rico
(@nascas)
Great, thank you so much. Looks very good now.
What about the font size and alignment, can it be modified too?
Only the city, date, time and temperature – like on the screenshot.
Plugin Author
tuxlog
(@tuxlog)
Yes, use the
font-size:14pt;
attribute on the corresponding classes in the css file.
Replace 14 by whatever point size you want.
I think you will find out this last little thing to do.
Google is your friend.
Thread Starter
Rico
(@nascas)
Hi,
The plugin is working great! Thank you for your help.
I can volunteer translating the croatian terms in slovenian if needed. 😉
Plugin Author
tuxlog
(@tuxlog)
Thanks for the offer. It would be great to have another translation. If you are done just send it to the support address (in the plugin).
Thanks. 🙂
Thread Starter
Rico
(@nascas)
You are welcome!
Do you have a list of all the terms somewhere?
Plugin Author
tuxlog
(@tuxlog)
Yep, it is in the english translation i directory lang or in wp-forecast.pot
