“Wordpress City Weather Plugin” Documentation by “viaviweb”

---

“Wordpress City Weather Plugin”

---

Compatibility: Wordpress 3.5 to Wordpress 4.2

---

Table of Contents

1. Installing Wordpress City Weather Plugin
2. Wordpress City Weather Plugin Settings Page
3. Wordpress City Weather Plugin Front Page
4. HTML Structure
5. CSS Files and Structure

---

A) Installing Wordpress City Weather Plugin - top

• Install City Weather Plugin Login as admin and goto Plugin -> Add New ->Upload Plugin : Install Now

• Activate the Plugin through the Plugin -> City Weather : Activate

---

B) Wordpress City Weather Plugin Settings Page - top

After enabled Plugin click on Settings

Weather Setting

---

C) Wordpress City Weather Front Page - top

---

D) HTML Structure - top

---

E) CSS Files and Structure - top

I'm using One CSS files in this Plugin

  .awecf:before, .awecf:after { content: " "; display: table; }
.awecf:after { clear: both; }
.awecf { *zoom: 1; }

.city_weather-wrap {
	background: #333; transition: background 0.5s ease-in; 
    font-family: 'Open Sans', sans-serif; font-weight: 400; font-size: 14px; line-height: 14px;
    text-shadow: 0 1px 1px rgba(0,0,0,0.3); color: #fff;
    clear: both;
}

.city_weather-wrap div {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.city_weather-wrap.darken { text-shadow: 0 1px 1px rgba(0,0,0,0.9); }

.city_weather-wrap.temp1 { background: #43adff; }
.city_weather-wrap.temp2 { background: #629BE0; }
.city_weather-wrap.temp3 { background: #8289C1; }
.city_weather-wrap.temp4 { background: #A178A3; }
.city_weather-wrap.temp5 { background: #C06684; }
.city_weather-wrap.temp6 { background: #E05465; }
.city_weather-wrap.temp7 { background: #ff4246; }

.city_weather-cover { width: 100%; height: 100%; background-size: cover; }
.city_weather-darken { width: 100%; height: 100%; background: rgba(0,0,0,0.3); }

.city_weather-header {
	padding: 10px;
	text-align: center;
	background: rgba(0,0,0,0.1);
	text-transform: uppercase;
}
.city_weather-wrap.darken .city_weather-header { background: rgba(0,0,0,0.2); }

.city_weather-current-temp {
	padding: 15px;
	width: 50%;
	float: left;
	font-size: 66px;
	line-height: 1em;
	font-weight: 300;
}

.city_weather-current-temp sup { font-size: 24px; top: -1.3em; padding-left: 3px; }

.city_weather-todays-stats {
	float: right;
	text-align: right;
	padding: 15px;
	line-height: 1.4em;
	width: 50%;
}
.awe_tall .city_weather-todays-stats { padding: 0 10px 15px 10px; }

.city_weather-forecast { 
	border-top: solid 1px rgba(255,255,255,0.5);
	width: 100%; 
	margin-right: auto; margin-left: auto;
	padding: 15px 10px;
	clear: both;
}

.city_weather-forecast-day {
	width: 18%;
	margin: 0 1%;
	float: left;
	text-align: center;
	font-weight: 400;
}

.awe_days_2 .city_weather-forecast-day { width: 48%; }
.awe_days_3 .city_weather-forecast-day { width: 31%; }
.awe_days_4 .city_weather-forecast-day { width: 23%; }

.city_weather-forecast-day-temp { font-size: 1.3em; font-weight: 300; }
.city_weather-forecast-day-temp sup { font-size: 0.6em; padding-left: 2px; }
.city_weather-forecast-day-abbr { text-transform: uppercase; font-size: 0.7em; font-weight: 300; margin-top: 5px; padding-right: 4px;  }

.awe_tall .city_weather-current-temp,
.awe_tall .city_weather-todays-stats,
.awe_without_stats .city_weather-current-temp { text-align: center; width: 100%; float: none; }

#sidebar .awe_wide .city_weather-current-temp,
#secondary .awe_wide .city_weather-current-temp { font-size: 40px; }

#sidebar .awe_wide .city_weather-current-temp sup,
#secondary .awe_wide .city_weather-current-temp sup { font-size: 18px; }

#sidebar .awe_wide .city_weather-todays-stats,
#secondary .awe_wide .city_weather-todays-stats { font-size: 12px; }

.city_weather-more-weather-link { padding: 10px; text-align: center; border-top: solid 1px rgba(255,255,255,0.5); }
.city_weather-more-weather-link a { color: #fff !important; text-decoration: none !important; font-size: 0.8em; }


            

---

Once again, thank you so much for purchasing this Plugin. As I said at the beginning, I'd be glad to help you if you have any questions relating to this Plugin.

viaviweb

Go To Table of Contents

---