AndyWalmsley

Well, you could try getting the classes from icit-weather-widget.php and the ID’s of the widget space and adding them to your themes style.css file with your custom styling, which should be alright for the next update except for the .top .right .left classes will be renamed to .main .break .cond respectively.

Hi jechols,

The css for the weather widget is at the bottom of icit-weather-widget.php and the next update will erase all styling. weather_widget.css is mainly used for resetting margins and sizes set by the theme.

The next version is mainly a styling update adding new icons and adding more options for the layout of the widget. V2.3 will hopefully be out at some point next week.

Just to note, this is not a particularly good way to fix this, but it should work till I the next update which will make it easier to style.

To start with, the weather widget is being pushed to the right by the logo. If you lower the logo container’s max width in the theme, it should bring the forecast into the the layout, it worked for me at 50%.

Change:

.top { position: absolute; left: 20%; width: 80%; }
.weather-forecast { box-sixing: border-box; }

Hi,
The css styling can be found at the bottom of icit-weather-widget.php. To set the forecast to the right, overwrite these styles:

#<?php echo $this->id ?> .weather-wrapper {
			  position: relative;
			  margin: 20px 0;
			  height: 230px;
			}
#<?php echo $this->id ?> .weather-wrapper .top	{
			  background: <?php echo $night ? $background_night : $background_day; ?>;
			  height: 100%;
			}
#<?php echo $this->id ?> .weather-forecast li	{
			background: none;
			display: block;
			text-align: center;
			padding: 5px 10px;
			margin-bottom: 20px;
			color: <?php echo $night ? $background_night : $background_day; ?>;
			width: 100%;
			border: none;
			}
#<?php echo $this->id ?> .weather-wrapper .weather-forecast	{
			  border: solid 2px;
			  border-color: <?php echo $night ? $background_night : $background_day; ?>;
			  margin: 0;
			  position: absolute;
			  left: 100%;
			  top: 0;
			  height: 100%
			  }

Then just change the height of .weather-wrapper as themes can mess with the height sometimes. You then may want to change some of the spacing in the current weather. I would also suggest moving the wind and humidity to the bottom left if you are displaying the weather breakdown.

#<?php echo $this->id ?> .weather-wrapper .weather-wind-condition	{
			color: white;
			font-family: Trebuchet MS, Candara, sans-serif;
			font-size: 1.1em;
			text-align: left;
			padding-left: 3%;
			padding-top: 5px;
			}

#<?php echo $this->id ?> .weather-wrapper .weather-humidity	{
			color: white;
			font-family: Trebuchet MS, Candara, sans-serif;
			font-size: 1.1em;
			text-align: left;
			padding-left: 3%;
			padding-top: 5px;
			}

Shortcode has been added to v2.2.1

Hi jmy97, we will look into adding a shortcode for the next release.

Hi Daniel, thanks for this, the next update will change this to be using the WP functions.

Hi wwvaughajr, is anything displaying at all? What city/country combinations have you tried? Are you using a translation? Do you get any error messages in the console(F12)?

Version 2.1.1 should solve this issue to now display the city name returned by OpenWeatherMap instead of the city name given ??

Hi Daniel, thanks for the feedback, we will get this fixed for the next version.