This page contains examples of using the Z Weather plugin. The sample output below is actually showing current weather information for New York City using this plugin. To use these examples on your site, just copy the code and paste it into your Joomla article (all these examples use the default Z Weather location). In most cases, you will need to paste this code into the HTML code window of the editor (for example, the "HTML" icon in the standard Joomla editor or the "<>" icon or "[show/hide]" option in the JCE editor) in order for the HTML tags to be inserted properly.

Description	Sample Output	Code
12 Hour Forecast - 2 periods in a horizontal mode	Tonight Partly Cloudy Hi: 84 Low: 64 Tomorrow Mostly Sunny Hi: 83 Low: 67	<table style="margin: 4px; background-color: #ddddff; border: #bbbbff 2px solid; padding: 4px" style="margin: 4px; background-color: #ddddff; border: #bbbbff 2px solid; padding: 4px"><tbody><tr><td style="width: 100px; text-align: center;"><strong>{zweather var=f12_periodname,key=1}</strong><br /><br /><img border="0" src= "{zweather var=f12_icon,key=1}" /><br />{zweather var=f12_weather,key=1}<br /><strong>Hi:</strong> {zweather var=f12_maxtemp,key=1}<br /><strong>Low:</strong> {zweather var=f12_mintemp,key=1}</td><td style="width: 100px; text-align: center;"><strong>{zweather var=f12_periodname,key=2}<br /></strong><br /><img border="0" align="center" src= "{zweather var=f12_icon,key=2}" /><br />{zweather var=f12_weather,key=2}<br /><strong>Hi:</strong> {zweather var=f12_maxtemp,key=2}<br /><strong>Low:</strong> {zweather var=f12_mintemp,key=2}</td></tr></tbody></table>
24 Hour Forecast - 2 periods in a vertical mode	Today: Chance Thunderstorms Hi: 88 Low: 67 Tomorrow: Mostly Sunny Hi: 84 Low: 64	<table style="margin: 4px; background-color: #ddddff; border: #bbbbff 2px solid; padding: 4px;" style="margin: 4px; background-color: #ddddff; border: #bbbbff 2px solid; padding: 4px"><tbody><tr><td style="width: 150px; text-align: left;"><table style="padding:2px;" ><tbody><tr><td><img border="0" align="left" src= "{zweather var=f24_icon,key=0}" /></td><td><strong>Today:</strong><br />{zweather var=f24_weather,key=0}<br /><strong>Hi:</strong> {zweather var=f24_maxtemp,key=0}<br /><strong>Low:</strong> {zweather var=f24_mintemp,key=0}</td></tr></tbody></table></td></tr><tr><td style="width: 150px; text-align: left;"><table style="padding:2px;" ><tbody><tr><td><img border="0" align="left" src= "{zweather var=f24_icon,key=1}" /><strong>Tomorrow:</strong><br />{zweather var=f24_weather,key=1}<br /><strong>Hi:</strong> {zweather var=f24_maxtemp,key=1}<br /><strong>Low:</strong> {zweather var=f24_mintemp,key=1}</td></tr></tbody></table></td></tr></tbody></table>
Current Conditions - A basic layout	Mostly Cloudy 89.0 F (31.7 C)	<table style="margin: 4px; background-color: #ddddff; border: #bbbbff 2px solid; padding: 4px;"> <tr><td><img border="0" align="left" src= "{zweather var=o_iconbase}{zweather var=o_iconname}" /></td> <td><strong>{zweather var=o_weather}</strong><br/>{zweather var=o_tempstr} </td></tr></table>
Current Conditions - Displaying a wind direction icon A wind direction icon is now available in Z Weather using this plugin code. Create the "/images/com_zweather/wind" folder on your server, then download and unzip the wind direction icons there to use this example.	Wind is West at 9.2 MPH (8 KT)	<table style="margin: 4px; background-color: #ffffff; border: #bbbbff 2px solid; padding: 4px;"> <tr style="text-align: center;"> <td><img border="0" align="center" src="/images/com_zweather/wind/{zweather var=o_windir}.gif"></td><td> Wind is {zweather var=o_windstr} </td></tr></table>