Awesome Weather Widget - Version 1.2

Version Description

Background Image Option

Download this release

Release Info

Developer halgatewood
Plugin Icon 128x128 Awesome Weather Widget
Version 1.2
Comparing to
See all releases

Code changes from version 1.1.1 to 1.2

Files changed (3) hide show
  1. awesome-weather.css +15 -5
  2. awesome-weather.php +20 -2
  3. readme.txt +9 -1
awesome-weather.css CHANGED
@@ -6,7 +6,7 @@
6
 
7
  .awesome-weather-wrap {
8
  background: #333;
9
- text-shadow: 0 1px 1px rgba(0,0,0,0.4);
10
  -webkit-transition: background 0.5s ease-in;
11
  -moz-transition: background 0.5s ease-in;
12
  -o-transition: background 0.5s ease-in;
@@ -20,6 +20,11 @@
20
  max-width: 400px;
21
  margin: 0 auto 20px auto;
22
  }
 
 
 
 
 
23
  .awesome-weather-wrap.temp1 { background: #43adff; }
24
  .awesome-weather-wrap.temp2 { background: #629BE0; }
25
  .awesome-weather-wrap.temp3 { background: #8289C1; }
@@ -28,12 +33,17 @@
28
  .awesome-weather-wrap.temp6 { background: #E05465; }
29
  .awesome-weather-wrap.temp7 { background: #ff4246; }
30
 
 
 
 
31
  .awesome-weather-header {
32
- padding: 5px 10px;
33
  text-align: center;
34
  background: rgba(0,0,0,0.1);
35
  text-transform: uppercase;
36
  }
 
 
37
 
38
  .awesome-weather-current-temp {
39
  padding: 10px 5%;
@@ -55,7 +65,7 @@
55
  }
56
 
57
  .awesome-weather-forecast {
58
- border-top: solid 1px rgba(0,0,0,0.1);
59
  width: 90%;
60
  margin: 20px auto;
61
  padding-top: 20px;
@@ -67,14 +77,14 @@
67
  margin: 0 1%;
68
  float: left;
69
  text-align: center;
70
- font-weight: 300;
71
  }
72
 
73
  .awe_days_2 .awesome-weather-forecast-day { width: 48%; }
74
  .awe_days_3 .awesome-weather-forecast-day { width: 31%; }
75
  .awe_days_4 .awesome-weather-forecast-day { width: 23%; }
76
 
77
- .awesome-weather-forecast-day-temp { font-size: 1.8em; font-weight: 300; }
78
  .awesome-weather-forecast-day-temp sup { font-size: 0.6em; padding-left: 2px; }
79
  .awesome-weather-forecast-day-abbr { text-transform: uppercase; font-size: 0.8em; margin-top: 5px; padding-right: 4px; }
80
 
6
 
7
  .awesome-weather-wrap {
8
  background: #333;
9
+ text-shadow: 0 1px 1px rgba(0,0,0,0.3);
10
  -webkit-transition: background 0.5s ease-in;
11
  -moz-transition: background 0.5s ease-in;
12
  -o-transition: background 0.5s ease-in;
20
  max-width: 400px;
21
  margin: 0 auto 20px auto;
22
  }
23
+
24
+ .awesome-weather-wrap.darken {
25
+ text-shadow: 0 1px 1px rgba(0,0,0,0.9);
26
+ }
27
+
28
  .awesome-weather-wrap.temp1 { background: #43adff; }
29
  .awesome-weather-wrap.temp2 { background: #629BE0; }
30
  .awesome-weather-wrap.temp3 { background: #8289C1; }
33
  .awesome-weather-wrap.temp6 { background: #E05465; }
34
  .awesome-weather-wrap.temp7 { background: #ff4246; }
35
 
36
+ .awesome-weather-cover { width: 100%; height: 100%; background-size: cover; }
37
+ .awesome-weather-darken { width: 100%; height: 100%; background: rgba(0,0,0,0.3); }
38
+
39
  .awesome-weather-header {
40
+ padding: 10px;
41
  text-align: center;
42
  background: rgba(0,0,0,0.1);
43
  text-transform: uppercase;
44
  }
45
+ .awesome-weather-wrap.darken .awesome-weather-header { background: rgba(0,0,0,0.2); }
46
+
47
 
48
  .awesome-weather-current-temp {
49
  padding: 10px 5%;
65
  }
66
 
67
  .awesome-weather-forecast {
68
+ border-top: solid 1px rgba(255,255,255,0.5);
69
  width: 90%;
70
  margin: 20px auto;
71
  padding-top: 20px;
77
  margin: 0 1%;
78
  float: left;
79
  text-align: center;
80
+ font-weight: 400;
81
  }
82
 
83
  .awe_days_2 .awesome-weather-forecast-day { width: 48%; }
84
  .awe_days_3 .awesome-weather-forecast-day { width: 31%; }
85
  .awe_days_4 .awesome-weather-forecast-day { width: 23%; }
86
 
87
+ .awesome-weather-forecast-day-temp { font-size: 1.8em; font-weight: 400; }
88
  .awesome-weather-forecast-day-temp sup { font-size: 0.6em; padding-left: 2px; }
89
  .awesome-weather-forecast-day-abbr { text-transform: uppercase; font-size: 0.8em; margin-top: 5px; padding-right: 4px; }
90
 
awesome-weather.php CHANGED
@@ -5,7 +5,7 @@ Plugin URI: http://halgatewood.com/awesome-weather
5
  Description: A weather widget that actually looks cool
6
  Author: Hal Gatewood
7
  Author URI: http://www.halgatewood.com
8
- Version: 1.1.1
9
 
10
 
11
  FILTERS AVAILABLE:
@@ -57,6 +57,7 @@ function awesome_weather_logic( $atts )
57
  $days_to_show = isset($atts['forecast_days']) ? $atts['forecast_days'] : 5;
58
  $show_stats = (isset($atts['hide_stats']) AND $atts['hide_stats'] == 1) ? 0 : 1;
59
  $show_link = (isset($atts['show_link']) AND $atts['show_link'] == 1) ? 1 : 0;
 
60
 
61
  if( !$location ) { return awesome_weather_error(); }
62
 
@@ -180,12 +181,22 @@ function awesome_weather_logic( $atts )
180
 
181
  $show_stats_class = ($show_stats) ? "awe_with_stats" : "awe_without_stats";
182
 
 
183
 
184
  // DISPLAY WIDGET
185
  $rtn .= "
186
 
187
  <div id=\"awesome-weather-{$city_name_slug}\" class=\"awesome-weather-wrap awecf {$bg_color} {$show_stats_class} awe_{$size}\">
188
-
 
 
 
 
 
 
 
 
 
189
  <div class=\"awesome-weather-header\">{$header_title}</div>
190
 
191
  <div class=\"awesome-weather-current-temp\">
@@ -241,6 +252,13 @@ function awesome_weather_logic( $atts )
241
  $rtn .= "</div> <!-- /.awesome-weather-more-weather-link -->";
242
  }
243
 
 
 
 
 
 
 
 
244
  $rtn .= "</div> <!-- /.awesome-weather-wrap -->";
245
  return $rtn;
246
  }
5
  Description: A weather widget that actually looks cool
6
  Author: Hal Gatewood
7
  Author URI: http://www.halgatewood.com
8
+ Version: 1.2
9
 
10
 
11
  FILTERS AVAILABLE:
57
  $days_to_show = isset($atts['forecast_days']) ? $atts['forecast_days'] : 5;
58
  $show_stats = (isset($atts['hide_stats']) AND $atts['hide_stats'] == 1) ? 0 : 1;
59
  $show_link = (isset($atts['show_link']) AND $atts['show_link'] == 1) ? 1 : 0;
60
+ $background = isset($atts['background']) ? $atts['background'] : false;
61
 
62
  if( !$location ) { return awesome_weather_error(); }
63
 
181
 
182
  $show_stats_class = ($show_stats) ? "awe_with_stats" : "awe_without_stats";
183
 
184
+ if($background) $bg_color = "darken";
185
 
186
  // DISPLAY WIDGET
187
  $rtn .= "
188
 
189
  <div id=\"awesome-weather-{$city_name_slug}\" class=\"awesome-weather-wrap awecf {$bg_color} {$show_stats_class} awe_{$size}\">
190
+ ";
191
+
192
+
193
+ if($background)
194
+ {
195
+ $rtn .= "<div class=\"awesome-weather-cover\" style='background: url($background) no-repeat;'>";
196
+ $rtn .= "<div class=\"awesome-weather-darken\">";
197
+ }
198
+
199
+ $rtn .= "
200
  <div class=\"awesome-weather-header\">{$header_title}</div>
201
 
202
  <div class=\"awesome-weather-current-temp\">
252
  $rtn .= "</div> <!-- /.awesome-weather-more-weather-link -->";
253
  }
254
 
255
+ if($background)
256
+ {
257
+ $rtn .= "</div> <!-- /.awesome-weather-cover -->";
258
+ $rtn .= "</div> <!-- /.awesome-weather-darken -->";
259
+ }
260
+
261
+
262
  $rtn .= "</div> <!-- /.awesome-weather-wrap -->";
263
  return $rtn;
264
  }
readme.txt CHANGED
@@ -16,7 +16,7 @@ This plugin allows you to easily add super clean weather widgets to your site. T
16
 
17
  Use the built in widget or add it somewhere else with this shortcode: (all settings shown)
18
 
19
- `[awesome-weather location="Montreal" units="F" size="tall" override_title="MTL" forecast_days=2 hide_stats=true]`
20
 
21
  Settings:
22
 
@@ -26,6 +26,7 @@ Settings:
26
  * Override Title: Change the title in the header bar to whatever, sometimes it pulls weather from a close city
27
  * Forecast Days: How many days to show in the forecast bar
28
  * Hide stats: Hide the text stats like humidity, wind, high and lows, etc
 
29
 
30
  All weather data is provided by http://openweathermap.org and is cached for one hour.
31
 
@@ -43,9 +44,13 @@ All weather data is provided by http://openweathermap.org and is cached for one
43
  2. Basic tall layout
44
  3. Micro no features
45
  4. Widget Settings
 
46
 
47
  == Upgrade Notice ==
48
 
 
 
 
49
  = 1.1.1 =
50
  Google Font URL changed or I messed it up, probably me.
51
 
@@ -60,6 +65,9 @@ Changed API endpoints. Might not find weather without update.
60
 
61
  == Changelog ==
62
 
 
 
 
63
  = 1.1 =
64
  * Errors are now commented out. Look in the source to see what the problem is.
65
  * Ability to add link to openweathermap for extended forecast
16
 
17
  Use the built in widget or add it somewhere else with this shortcode: (all settings shown)
18
 
19
+ `[awesome-weather location="Montreal" units="F" size="tall" override_title="MTL" forecast_days=2 hide_stats=true background=http://urltoanimage.jpg]`
20
 
21
  Settings:
22
 
26
  * Override Title: Change the title in the header bar to whatever, sometimes it pulls weather from a close city
27
  * Forecast Days: How many days to show in the forecast bar
28
  * Hide stats: Hide the text stats like humidity, wind, high and lows, etc
29
+ * Background: URL to an image that will be used as the background of the entire widget
30
 
31
  All weather data is provided by http://openweathermap.org and is cached for one hour.
32
 
44
  2. Basic tall layout
45
  3. Micro no features
46
  4. Widget Settings
47
+ 5. Background Image Option (1.2)
48
 
49
  == Upgrade Notice ==
50
 
51
+ = 1.2 =
52
+ Background Image Option
53
+
54
  = 1.1.1 =
55
  Google Font URL changed or I messed it up, probably me.
56
 
65
 
66
  == Changelog ==
67
 
68
+ = 1.2 =
69
+ * Background Image Option
70
+
71
  = 1.1 =
72
  * Errors are now commented out. Look in the source to see what the problem is.
73
  * Ability to add link to openweathermap for extended forecast