Horizontal display

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;
			}

Thank you so much for your quick response.
By the way, here is the link that I am working on it.
https://placeinside.com/
You will be able to see the weather on top of the site and this is what I want. But the box of weather forecast is out of the layout.
Would you be able to help me to fix this issue as well?
Also I am trying to reduce the width of current weather area.
Please let me know which one I am supposed to change.

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 there
Could you please tell me how to do this with the updated version? I’ve hidden the humidity and wind, just need to move temperature and condition to the left hand side of the logo.
Thanks ??

Hi aliware,

In the widget settings in the back end, you can select where you would like the forecast to be displayed; either on the left, bottom, right or not displayed at all.

Also, to hide the humidity and wind, you can unselect the “Show weather breakdown” setting, so only the temperature and the icon are displayed.

Oh sorry I didn’t mean the forecast section. Is there a way to put the temperature and condition to the left of the logo so it’s all in one line? I tried fiddling with the CSS but can’t quite figure it out.
Thanks

If this is with forecast displayed at the bottom or not at all, then you will need to put this in your themes style.css

.weather-wrapper .main .cond {
    width: 25% !important; /* You may need to change this number depending on the size of the sidebar */
    vertical-align: top !important;
}
.weather-wrapper .weather-temperature,
.weather-wrapper .weather-condition {
    width: auto !important;
    /* You may want to put some padding between these so: */
    padding: 10px 0 10px 0 !important; /* If you are unsure the order is top right bottom left */
}
.weather-wrapper .weather-wind-condition,
.weather-wrapper .weather-humidity {
    display: none !important;
}
.weather-wrapper .weather-icon {
    display: inline-block !important;
}

The !important is needed because theme styling is processed before plugin styling so the browser needs to ignore plugin styling.

If this doesn’t quite work or you need anything else, feel free to ask.