Creating Different Backgrounds for Different Weather

Starting in version 1.5 of the weather widget you can use different background images based on the current weather displayed. There are two ways to handle this functionality, one is through images in your a folder called awe-backgrounds found in your theme folder and the other is by using the new CSS classes (found lower on this page) attached to each widget. The basic difference between the CSS and Images approach is that with CSS you can target images that don’t live in your theme folder.

Using Images in Your Theme

First in your widget settings you will need to turn on the background by weather functionality using the checkbox under Background Image:

Screen Shot 2015-05-21 at 3.57.17 PM

Note: Turning this on will initiate the series of checks performed to find the images. Turning this on and not using it will result in extra processing every time your widget is loaded.

Create a folder in your theme called awe-backgrounds. In this folder you will create jpg images (this can be changed) with specific names that directly link to the weather code or description.

Screen Shot 2015-05-21 at 3.54.13 PM

For our example we’ll take clear sky #800. The system will first look for a file called 800.jpg in the awe-backgrounds folder. If the file 800.jpg doesn’t exist it will look for sky-is-clear.jpg. The name sky-is-clear.jpg is taken by using sanitize_title() on the weather description returned from OpenWeatherMap. Sky is Clear turns to sky-is-clear. If that file is not found I have determines some presets so you don’t have to create images for all the different codes. Here is a list of what is available:


Because there are for instance 10 different codes for rain, you could simply create a rain.jpg and it will be used for all those codes. This will give you a base for the rain section. Then you can go back and add stuff like 511.jpg which would be freezing rain.

That is pretty much it for the background by weather images. You can set the main Background Image in the widget settings as a fallback image if nothing is found.

Screen Shot 2015-05-21 at 4.09.28 PM

Using CSS

We’ve added three new css classes added to the main widget wrapper. They are:

  1. awe-code-500
  2. awe-desc-light-rain
  3. awe-preset-rain

The awe-code refers to the condition codes found on these two sites:

You would target it globally like this:

.awe-code-500 { background-size: cover; background-image: url(http://light-rain.jpg); }

Or you can grab the widget ID like this:

#awesome-weather-clover-sc .awe-code-900 { background-image: url(http://tornado.jpg); }

The same would apply for the other two new CSS classes just switch it around a bit:

#awesome-weather-clover-sc .awe-preset-rain { background-image: url(http://rain.jpg); }