Icons placement

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

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

Hi Rico,

just tell me the URL of your site and I will have a look and hopefully will find a solution.

Hi!

Here.

Thank you!

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?

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!

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.

Sorry for a late reply.
Here, I activated a 3-day forecast.
Thank you very much for your effort.

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.

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.

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.

Hi,

The plugin is working great! Thank you for your help.
I can volunteer translating the croatian terms in slovenian if needed. ??

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. ??

You are welcome!
Do you have a list of all the terms somewhere?

Yep, it is in the english translation i directory lang or in wp-forecast.pot