This page contains examples using the Zap Weather content plugin, which can display weather information within a Joomla article or custom HTML module. The sample output below is showing current weather information for Los Angeles using this plugin. To use these examples on your site, just copy the code and paste the code into your Joomla article or custom HTML module. Change the location variable "loc" for your particular site, using the location id in Zap Weather's list of locations.  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.  For a full list of variables that can be used, including variables for forecasts, observations and alerts, read the Zap Weather content plugin article.

Description	Sample Output	Code
12 Hour Forecast - 2 periods in a horizontal layout	{zweather loc=1} {zweather var=f12_periodname,index=1} {zweather var=f12_weather,index=1} Hi: {zweather var=f12_maxtemp,index=1}° Low: {zweather var=f12_mintemp,index=1}° {zweather var=f12_periodname,index=2} {zweather var=f12_weather,index=2} Hi: {zweather var=f12_maxtemp,index=2}° Low: {zweather var=f12_mintemp,index=2}°	{_zweather loc=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: 100px; text-align: center;"><strong>{_zweather var=f12_periodname,index=1}</strong><br /><br /><img border="0" src= "{_zweather var=f12_icon,index=1}" /><br />{_zweather var=f12_weather,index=1}<br /><strong>Hi:</strong> {_zweather var=f12_maxtemp,index=1}&deg;<br /><strong>Low:</strong> {_zweather var=f12_mintemp,index=1}&deg;</td><td style="width: 100px; text-align: center;"><strong>{_zweather var=f12_periodname,index=2}<br /></strong><br /><img border="0" align="center" src= "{_zweather var=f12_icon,index=2}" /><br />{_zweather var=f12_weather,index=2}<br /><strong>Hi:</strong> {_zweather var=f12_maxtemp,index=2}&deg;<br /><strong>Low:</strong> {_zweather var=f12_mintemp,index=2}&deg;</td></tr></tbody></table>
24 Hour Forecast - 2 periods in a vertical layout	{zweather loc=1} Today: {zweather var=f24_weather,index=0} Hi: {zweather var=f24_maxtemp,index=0}° Low: {zweather var=f24_mintemp,index=0}° Tomorrow: {zweather var=f24_weather,index=1} Hi: {zweather var=f24_maxtemp,index=1}° Low: {zweather var=f24_mintemp,index=1}°	{_zweather loc=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 style="border:0px;"><td style="width: 150px; text-align: left;"><table style="padding:2px;" ><tbody><tr style="border:0px;"><td><img border="0" align="left" src= "{_zweather var=f24_icon,index=0}" /></td><td><strong>Today:</strong><br />{_zweather var=f24_weather,index=0}<br /><strong>Hi:</strong> {_zweather var=f24_maxtemp,index=0}&deg;<br /><strong>Low:</strong> {_zweather var=f24_mintemp,index=0}&deg;</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,index=1}" /><strong>Tomorrow:</strong><br />{_zweather var=f24_weather,index=1}<br /><strong>Hi:</strong> {_zweather var=f24_maxtemp,index=1}&deg;<br /><strong>Low:</strong> {_zweather var=f24_mintemp,index=1}&deg;</td></tr></tbody></table></td></tr></tbody></table>
Current Conditions - A basic layout	{zweather loc=1} {zweather loc=1} {zweather var=o_weather} {zweather var=o_tempstr}	{_zweather loc=1}<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>