weather_custom_htmlstaticforecastnone1forecastOriginal WidthThis is the intended width of the template and is used to scale the Widget within its region when the template is applied.Original HeightThis is the intended height of the template and is used to scale the Widget within its region when the template is applied.Current Forecast TemplateDaily Forecast TemplateCSS Style SheetOptional JavaScriptAdd JavaScript to be included immediately before the closing body tag. Do not use [] array notation as this is reserved for library references. Do not include script tags.Background ImageThe background image to usenoneBackgroundsnoneSelect images from the media library to replace the default weather backgrounds.noneCloudynoneCloudy daynoneClearnoneFognoneHailnoneClear nightnoneCloudy nightnoneRainingnoneSnowingnoneWindynone{{javaScript|raw}}{% endif %}
{% if attribute(_context, 'background-image') != 'none' %}
{% endif %}
{{currentTemplate|raw}}
{{dailyTemplate|raw}}
]]>weather_1staticforecastLandscape - Current day, 4 day forecastweather_1960340TextThe colour of the text#000IconsThe colour of the icons#000BackgroundThe colour of the backgroundShadowThe colour of the shadowrgba(255, 255, 255, 0.5)FontSelect a custom font - leave empty to use the default font.Background ImageThe background image to usenoneBackgroundsnoneSelect images from the media library to replace the default weather backgrounds.noneCloudynoneCloudy daynoneClearnoneFognoneHailnoneClear nightnoneCloudy nightnoneRainingnoneSnowingnoneWindynone960340
{% endif %}
[time|ddd]
[temperatureRound]°[temperatureUnit]
[temperatureMaxRound] ° [temperatureUnit]
[time|ddd]
]]>weather_2staticforecastLandscape - Current day, summaryweather_2340200TextThe colour of the text#000IconsThe colour of the icons#000BackgroundThe colour of the backgroundShadowThe colour of the shadowrgba(255, 255, 255, 0.5)FontSelect a custom font - leave empty to use the default font.Background ImageThe background image to usenoneBackgroundsnoneSelect images from the media library to replace the default weather backgrounds.noneCloudynoneCloudy daynoneClearnoneFognoneHailnoneClear nightnoneCloudy nightnoneRainingnoneSnowingnoneWindynone340200
{% endif %}
[temperatureRound]°[temperatureUnit]
[summary]
[Attribution]
]]>weather_3staticforecastLandscape - Current dayweather_3340200TextThe colour of the text#000IconsThe colour of the icons#000BackgroundThe colour of the backgroundShadowThe colour of the shadowrgba(255, 255, 255, 0.5)FontSelect a custom font - leave empty to use the default font.Background ImageThe background image to usenoneBackgroundsnoneSelect images from the media library to replace the default weather backgrounds.noneCloudynoneCloudy daynoneClearnoneFognoneHailnoneClear nightnoneCloudy nightnoneRainingnoneSnowingnoneWindynone340200
{% endif %}
[summary]
[temperatureRound]°[temperatureUnit]
[Attribution]
{% import "forecastio-css-generator.twig" as generateForecastCSS %}
]]>weather_4staticforecastLandscape - Current day detailed, 4 day forecastweather_41200750TextThe colour of the text#fffIconsThe colour of the icons#fffBackgroundThe colour of the backgroundShadowThe colour of the shadowrgba(0, 0, 0, 0.4)Footer BackgroundThe colour of the footer background#000Footer TextThe colour of the footer text#fffFooter IconsThe colour of the footer icons#fffFontSelect a custom font - leave empty to use the default font.Background ImageThe background image to usefitBackgroundsnoneSelect images from the media library to replace the default weather backgrounds.noneCloudynoneCloudy daynoneClearnoneFognoneHailnoneClear nightnoneCloudy nightnoneRainingnoneSnowingnoneWindynone19201080
{% endif %}
[time|MMM] [time|D]
[temperatureRound]°[temperatureUnit]
[time|ddd]
[temperatureMaxRound] ° [temperatureUnit]
]]>weather_5staticforecastPortrait - Current day, 2 day forecastweather_5540960TextThe colour of the text#fffIconsThe colour of the icons#fffBackgroundThe colour of the backgroundShadowThe colour of the shadow#111Footer BackgroundThe colour of the footer background#fffFooter TextThe colour of the footer text#333Footer IconsThe colour of the footer icons#333FontSelect a custom font - leave empty to use the default font.Background ImageThe background image to usefitBackgroundsnoneSelect images from the media library to replace the default weather backgrounds.noneCloudynoneCloudy daynoneClearnoneFognoneHailnoneClear nightnoneCloudy nightnoneRainingnoneSnowingnoneWindynone540960
{% endif %}
]]>weather_6staticforecastLandscape - Current day detailed table, 4 day forecastweather_6950520TextThe colour of the text#fffIconsThe colour of the icons#fffCards BackgroundThe colour of the content cardsrgba(0, 0, 0, 0.56)Dividers ColourThe colour of the divider elements#fffBackgroundThe colour of the backgroundFontSelect a custom font - leave empty to use the default font.Background ImageThe background image to usefitBackgroundsnoneSelect images from the media library to replace the default weather backgrounds.noneCloudynoneCloudy daynoneClearnoneFognoneHailnoneClear nightnoneCloudy nightnoneRainingnoneSnowingnoneWindynone950520
{% endif %}
||Feels Like||
[apparentTemperatureRound]°[temperatureUnit]
[Attribution]
||Right now||
||Wind||
[windDirection] [windSpeed] [windSpeedUnit]
||Humidity||
[humidityPercent]%
||Pressure||
[pressure] mb
||Visibility||
[visibility] [visibilityDistanceUnit]
[time|ddd]
[temperatureMaxRound] ° [temperatureUnit]
]]>weather_7staticforecastSquare - Current dayweather_7540540TextThe colour of the text#fffIconsThe colour of the icons#fffShadowThe colour of the shadow#111BackgroundThe colour of the backgroundFontSelect a custom font - leave empty to use the default font.Background ImageThe background image to usefitBackgroundsnoneSelect images from the media library to replace the default weather backgrounds.noneCloudynoneCloudy daynoneClearnoneFognoneHailnoneClear nightnoneCloudy nightnoneRainingnoneSnowingnoneWindynone540540
{% endif %}
[summary]
[temperatureRound]°[temperatureUnit]
[Attribution]
]]>weather_8staticforecastLandscape - Current day, 4 day forecastweather_8970700TextThe colour of the text#fffIconsThe colour of the icons#fffBackgroundThe colour of the backgroundShadowThe colour of the shadowrgba(0, 0, 0, 0.4)FontSelect a custom font - leave empty to use the default font.Background ImageThe background image to usefitBackgroundsnoneSelect images from the media library to replace the default weather backgrounds.noneCloudynoneCloudy daynoneClearnoneFognoneHailnoneClear nightnoneCloudy nightnoneRainingnoneSnowingnoneWindynone970700
{% endif %}
[time|ddd] [time|DD]
[time|MMM]
[temperatureRound]°[temperatureUnit]
[Attribution]
[time|ddd]
[temperatureMaxRound] ° [temperatureUnit]
]]>weather_9staticforecastPortrait - Current day, 4 day forecastweather_9540960TextThe colour of the text#fffIconsThe colour of the icons#fffShadowThe colour of the shadow#111BackgroundThe colour of the backgroundFontSelect a custom font - leave empty to use the default font.Background ImageThe background image to usefitBackgroundsnoneSelect images from the media library to replace the default weather backgrounds.noneCloudynoneCloudy daynoneClearnoneFognoneHailnoneClear nightnoneCloudy nightnoneRainingnoneSnowingnoneWindynone540960
{% endif %}
]]>weather_10staticforecastLandscape - Current day detailed, 4 day forecastweather_10960540TextThe colour of the text#fffIconsThe colour of the icons#fffBackgroundThe colour of the backgroundShadowThe colour of the shadowrgba(0, 0, 0, 0.4)Footer Background 1The colour of the footer background 1rgba(255, 255, 255, 0.9)Footer Background 2The colour of the footer background 2rgba(255, 255, 255, 0.6)Footer TextThe colour of the footer text#272625Footer IconsThe colour of the footer icons#272625FontSelect a custom font - leave empty to use the default font.Background ImageThe background image to usefitBackgroundsnoneSelect images from the media library to replace the default weather backgrounds.noneCloudynoneCloudy daynoneClearnoneFognoneHailnoneClear nightnoneCloudy nightnoneRainingnoneSnowingnoneWindynone960540
{% endif %}
[temperatureRound]°[temperatureUnit]
[time|dddd] [time|D] [time|MMMM], [time|YYYY]
[Attribution]
[time|ddd]
[temperatureMaxRound] ° [temperatureUnit]
]]>weather_11staticforecastPortrait - Current day, 3 day forecastweather_11540960TextThe colour of the text#fffIconsThe colour of the icons#fffBackgroundThe colour of the backgroundCircle BackgroundThe colour of the circle backgroundrgba(0, 0, 0, 0.5)Footer BackgroundThe colour of the footer backgroundrgba(255, 255, 255, 0.6)ShadowThe colour of the shadowFooter TextThe colour of the footer text#333Footer IconsThe colour of the footer icons#333FontSelect a custom font - leave empty to use the default font.Background ImageThe background image to usefitBackgroundsnoneSelect images from the media library to replace the default weather backgrounds.noneCloudynoneCloudy daynoneClearnoneFognoneHailnoneClear nightnoneCloudy nightnoneRainingnoneSnowingnoneWindynone540960
{% endif %}
]]>weather_12staticforecastLandscape - Current day detailed, 3 day forecastweather_12960540TextThe colour of the text#fffIconsThe colour of the icons#fffCurrent Container BackgroundThe colour of the current container backgroundrgba(0, 0, 0, 0.8)Forecast Container BackgroundThe colour of the forecast container backgroundrgba(0, 0, 0, 0.6)BackgroundThe colour of the backgroundFooter TextThe colour of the footer text#fffFooter IconsThe colour of the footer icons#fffFooter BackgroundThe colour of the footer backgroundrgba(0, 0, 0, 0.7)FontSelect a custom font - leave empty to use the default font.Background ImageThe background image to usefitBackgroundsnoneSelect images from the media library to replace the default weather backgrounds.noneCloudynoneCloudy daynoneClearnoneFognoneHailnoneClear nightnoneCloudy nightnoneRainingnoneSnowingnoneWindynone960540
{% endif %}
||RIGHT NOW||
[temperatureRound]°[temperatureUnit]
[time|ddd]
[temperatureMaxRound] ° [temperatureUnit]
]]>weather_13staticforecastLandscape - Current day details, 4 day forecastweather_13960180TextThe colour of the text#fffIconsThe colour of the icons#fffBackgroundThe colour of the background#000FontSelect a custom font - leave empty to use the default font.Background ImageThe background image to usenoneBackgroundsnoneSelect images from the media library to replace the default weather backgrounds.noneCloudynoneCloudy daynoneClearnoneFognoneHailnoneClear nightnoneCloudy nightnoneRainingnoneSnowingnoneWindynone960180
{% endif %}
]]>weather_14staticforecastPortrait - Current day details, 4 day forecastweather_14189900TextThe colour of the text#fffIconsThe colour of the icons#fffBackgroundThe colour of the background#000Dividers ColourThe colour of the divider elements#fffFontSelect a custom font - leave empty to use the default font.Background ImageThe background image to usenoneBackgroundsnoneSelect images from the media library to replace the default weather backgrounds.noneCloudynoneCloudy daynoneClearnoneFognoneHailnoneClear nightnoneCloudy nightnoneRainingnoneSnowingnoneWindynone189900
{% endif %}
]]>weather_15staticforecastSquare - Forecast squared with backgroundweather_15500500TextThe colour of the text#f9f9f9ShadowThe colour of the shadowrgba(0, 0, 0, 0.6)IconsThe colour of the icons#f9f9f9BackgroundThe colour of the backgroundFooter BackgroundThe colour of the footer backgroundrgba(0, 0, 0, 0.67)Footer TextThe colour of the footer text#f9f9f9Footer IconsThe colour of the footer icons#f9f9f9FontSelect a custom font - leave empty to use the default font.Background ImageThe background image to usefitBackgroundsnoneSelect images from the media library to replace the default weather backgrounds.noneCloudynoneCloudy daynoneClearnoneFognoneHailnoneClear nightnoneCloudy nightnoneRainingnoneSnowingnoneWindynone250250
{% endif %}
[temperatureRound]°[temperatureUnit]
[time|MMM] [time|D]
[Attribution]
]]>weather_16staticforecastSquare - Detailed weatherweather_16500500TextThe colour of the text#f9f9f9ShadowThe colour of the shadowrgba(0, 0, 0, 0.6)IconsThe colour of the icons#f9f9f9BackgroundThe colour of the backgroundFooter BackgroundThe colour of the footer backgroundrgba(0, 0, 0, 0.67)Footer TextThe colour of the footer text#f9f9f9Footer IconsThe colour of the footer icons#f9f9f9FontSelect a custom font - leave empty to use the default font.Background ImageThe background image to usefitBackgroundsnoneSelect images from the media library to replace the default weather backgrounds.noneCloudynoneCloudy daynoneClearnoneFognoneHailnoneClear nightnoneCloudy nightnoneRainingnoneSnowingnoneWindynone250250
{% endif %}
[time|MMM] [time|D]
[temperatureRound]°[temperatureUnit]
[Attribution]
]]>weather_17staticforecastScale - Weather background onlyweather_171200800Footer BackgroundThe colour of the footer backgroundrgba(255, 255, 255, 0.787)Footer TextThe colour of the footer text#000Font Size13Background ImageThe background image to usefitBackgroundsnoneSelect images from the media library to replace the default weather backgrounds.noneCloudynoneCloudy daynoneClearnoneFognoneHailnoneClear nightnoneCloudy nightnoneRainingnoneSnowingnoneWindynone
{% endif %}
]]>weather_18staticforecastLandscape - Weather fullscreenweather_18960540TextThe colour of the text#fffIconsThe colour of the icons#fffContainer BackgroundThe colour of the container backgroundrgba(0, 0, 0, 0.53)Footer BackgroundThe colour of the footer backgroundrgba(255, 255, 255, 0.787)Footer TextThe colour of the footer text#000Font Size13FontSelect a custom font - leave empty to use the default font.Background ImageThe background image to usefitBackgroundsnoneSelect images from the media library to replace the default weather backgrounds.noneCloudynoneCloudy daynoneClearnoneFognoneHailnoneClear nightnoneCloudy nightnoneRainingnoneSnowingnoneWindynone19201080
{% endif %}