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	{zweather var=f12_periodname,key=1} {zweather var=f12_weather,key=1} Hi: {zweather var=f12_maxtemp,key=1} Low: {zweather var=f12_mintemp,key=1} {zweather var=f12_periodname,key=2} {zweather var=f12_weather,key=2} Hi: {zweather var=f12_maxtemp,key=2} Low: {zweather var=f12_mintemp,key=2}	<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: {zweather var=f24_weather,key=0} Hi: {zweather var=f24_maxtemp,key=0} Low: {zweather var=f24_mintemp,key=0} Tomorrow: {zweather var=f24_weather,key=1} Hi: {zweather var=f24_maxtemp,key=1} Low: {zweather var=f24_mintemp,key=1}	<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	{zweather var=o_weather} {zweather var=o_tempstr}	<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 {zweather var=o_windstr}	<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>