7156 lines
207 KiB
XML
7156 lines
207 KiB
XML
|
<!--
|
||
|
|
~ Copyright (C) 2023 Xibo Signage Ltd
|
||
|
|
~
|
||
|
|
~ Xibo - Digital Signage - https://xibosignage.com
|
||
|
|
~
|
||
|
|
~ This file is part of Xibo.
|
||
|
|
~
|
||
|
|
~ Xibo is free software: you can redistribute it and/or modify
|
||
|
|
~ it under the terms of the GNU Affero General Public License as published by
|
||
|
|
~ the Free Software Foundation, either version 3 of the License, or
|
||
|
|
~ any later version.
|
||
|
|
~
|
||
|
|
~ Xibo is distributed in the hope that it will be useful,
|
||
|
|
~ but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||
|
|
~ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||
|
|
~ GNU Affero General Public License for more details.
|
||
|
|
~
|
||
|
|
~ You should have received a copy of the GNU Affero General Public License
|
||
|
|
~ along with Xibo. If not, see <http://www.gnu.org/licenses/>.
|
||
|
|
-->
|
||
|
|
<templates>
|
||
|
|
<template>
|
||
|
|
<id>weather_custom_html</id>
|
||
|
|
<type>static</type>
|
||
|
|
<dataType>forecast</dataType>
|
||
|
|
<showIn>none</showIn>
|
||
|
|
<properties>
|
||
|
|
<property id="customTemplate" type="hidden">
|
||
|
|
<default>1</default>
|
||
|
|
</property>
|
||
|
|
<property id="moduleType" type="hidden">
|
||
|
|
<default>forecast</default>
|
||
|
|
</property>
|
||
|
|
<property id="widgetDesignWidth" type="number">
|
||
|
|
<title>Original Width</title>
|
||
|
|
<helpText>This is the intended width of the template and is used to scale the Widget within its region when the template is applied.</helpText>
|
||
|
|
</property>
|
||
|
|
<property id="widgetDesignHeight" type="number">
|
||
|
|
<title>Original Height</title>
|
||
|
|
<helpText>This is the intended height of the template and is used to scale the Widget within its region when the template is applied.</helpText>
|
||
|
|
</property>
|
||
|
|
<property id="currentTemplate" type="code" allowLibraryRefs="true" parseTranslations="true" variant="html">
|
||
|
|
<title>Current Forecast Template</title>
|
||
|
|
</property>
|
||
|
|
<property id="dailyTemplate" type="code" allowLibraryRefs="true" parseTranslations="true" variant="html">
|
||
|
|
<title>Daily Forecast Template</title>
|
||
|
|
</property>
|
||
|
|
<property id="styleSheet" type="code" allowLibraryRefs="true" variant="css">
|
||
|
|
<title>CSS Style Sheet</title>
|
||
|
|
</property>
|
||
|
|
<property id="javaScript" type="code" allowLibraryRefs="true" variant="javascript">
|
||
|
|
<title>Optional JavaScript</title>
|
||
|
|
<helpText>Add 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.</helpText>
|
||
|
|
</property>
|
||
|
|
<property id="background-image" type="dropdown" mode="single">
|
||
|
|
<title>Background Image</title>
|
||
|
|
<helpText>The background image to use</helpText>
|
||
|
|
<default>none</default>
|
||
|
|
<options>
|
||
|
|
<option name="none">None</option>
|
||
|
|
<option name="fit">Fit</option>
|
||
|
|
<option name="stretch">Stretch</option>
|
||
|
|
<option name="center">Center</option>
|
||
|
|
</options>
|
||
|
|
</property>
|
||
|
|
<property type="header" variant="main">
|
||
|
|
<title>Backgrounds</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property type="message">
|
||
|
|
<title>Select images from the media library to replace the default weather backgrounds.</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="cloudy-image" type="mediaSelector">
|
||
|
|
<title>Cloudy</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="day-cloudy-image" type="mediaSelector">
|
||
|
|
<title>Cloudy day</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="day-sunny-image" type="mediaSelector">
|
||
|
|
<title>Clear</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="fog-image" type="mediaSelector">
|
||
|
|
<title>Fog</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="hail-image" type="mediaSelector">
|
||
|
|
<title>Hail</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="night-clear-image" type="mediaSelector">
|
||
|
|
<title>Clear night</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="night-partly-cloudy-image" type="mediaSelector">
|
||
|
|
<title>Cloudy night</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="rain-image" type="mediaSelector">
|
||
|
|
<title>Raining</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="snow-image" type="mediaSelector">
|
||
|
|
<title>Snowing</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="windy-image" type="mediaSelector">
|
||
|
|
<title>Windy</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
</properties>
|
||
|
|
<stencil>
|
||
|
|
<hbs></hbs>
|
||
|
|
<twig><![CDATA[
|
||
|
|
{% if javaScript %}<script type="text/javascript">{{javaScript|raw}}</script>{% endif %}
|
||
|
|
|
||
|
|
{% if attribute(_context, 'background-image') != 'none' %}
|
||
|
|
<div class="bg-div bg-[icon]"></div>
|
||
|
|
{% endif %}
|
||
|
|
|
||
|
|
<div class="current-day-template" style="display: none;">
|
||
|
|
{{currentTemplate|raw}}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="forecast-day-template" style="display: none;">
|
||
|
|
{{dailyTemplate|raw}}
|
||
|
|
</div>
|
||
|
|
]]></twig>
|
||
|
|
<style><![CDATA[
|
||
|
|
{{styleSheet|raw}}
|
||
|
|
|
||
|
|
{% import "forecastio-css-generator.twig" as generateForecastCSS %}
|
||
|
|
|
||
|
|
{{ generateForecastCSS.backgrounds(
|
||
|
|
attribute(_context, 'background-image'),
|
||
|
|
attribute(_context, 'cloudy-image'),
|
||
|
|
attribute(_context, 'day-cloudy-image'),
|
||
|
|
attribute(_context, 'day-clear-image'),
|
||
|
|
attribute(_context, 'fog-image'),
|
||
|
|
attribute(_context, 'hail-image'),
|
||
|
|
attribute(_context, 'night-clear-image'),
|
||
|
|
attribute(_context, 'night-partly-cloudy-image'),
|
||
|
|
attribute(_context, 'rain-image'),
|
||
|
|
attribute(_context, 'snow-image'),
|
||
|
|
attribute(_context, 'windy-image')
|
||
|
|
) }}
|
||
|
|
|
||
|
|
{{ generateForecastCSS.colors(
|
||
|
|
attribute(_context, 'background-color'),
|
||
|
|
attribute(_context, 'text-color'),
|
||
|
|
attribute(_context, 'icons-color'),
|
||
|
|
null,
|
||
|
|
null,
|
||
|
|
null,
|
||
|
|
attribute(_context, 'shadow-color')
|
||
|
|
) }}
|
||
|
|
]]></style>
|
||
|
|
</stencil>
|
||
|
|
</template>
|
||
|
|
<template>
|
||
|
|
<id>weather_1</id>
|
||
|
|
<type>static</type>
|
||
|
|
<dataType>forecast</dataType>
|
||
|
|
<title>Landscape - Current day, 4 day forecast</title>
|
||
|
|
<thumbnail>weather_1</thumbnail>
|
||
|
|
<startWidth>960</startWidth>
|
||
|
|
<startHeight>340</startHeight>
|
||
|
|
<properties>
|
||
|
|
<property id="text-color" type="color">
|
||
|
|
<title>Text</title>
|
||
|
|
<helpText>The colour of the text</helpText>
|
||
|
|
<default>#000</default>
|
||
|
|
</property>
|
||
|
|
<property id="icons-color" type="color">
|
||
|
|
<title>Icons</title>
|
||
|
|
<helpText>The colour of the icons</helpText>
|
||
|
|
<default>#000</default>
|
||
|
|
</property>
|
||
|
|
<property id="background-color" type="color">
|
||
|
|
<title>Background</title>
|
||
|
|
<helpText>The colour of the background</helpText>
|
||
|
|
<default></default>
|
||
|
|
</property>
|
||
|
|
<property id="shadow-color" type="color">
|
||
|
|
<title>Shadow</title>
|
||
|
|
<helpText>The colour of the shadow</helpText>
|
||
|
|
<default>rgba(255, 255, 255, 0.5)</default>
|
||
|
|
</property>
|
||
|
|
<property id="fontFamily" type="fontSelector">
|
||
|
|
<title>Font</title>
|
||
|
|
<helpText>Select a custom font - leave empty to use the default font.</helpText>
|
||
|
|
</property>
|
||
|
|
<property id="background-image" type="dropdown" mode="single">
|
||
|
|
<title>Background Image</title>
|
||
|
|
<helpText>The background image to use</helpText>
|
||
|
|
<default>none</default>
|
||
|
|
<options>
|
||
|
|
<option name="none">None</option>
|
||
|
|
<option name="fit">Fit</option>
|
||
|
|
<option name="stretch">Stretch</option>
|
||
|
|
<option name="center">Center</option>
|
||
|
|
</options>
|
||
|
|
</property>
|
||
|
|
<property type="header" variant="main">
|
||
|
|
<title>Backgrounds</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property type="message">
|
||
|
|
<title>Select images from the media library to replace the default weather backgrounds.</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="cloudy-image" type="mediaSelector">
|
||
|
|
<title>Cloudy</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="day-cloudy-image" type="mediaSelector">
|
||
|
|
<title>Cloudy day</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="day-sunny-image" type="mediaSelector">
|
||
|
|
<title>Clear</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="fog-image" type="mediaSelector">
|
||
|
|
<title>Fog</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="hail-image" type="mediaSelector">
|
||
|
|
<title>Hail</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="night-clear-image" type="mediaSelector">
|
||
|
|
<title>Clear night</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="night-partly-cloudy-image" type="mediaSelector">
|
||
|
|
<title>Cloudy night</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="rain-image" type="mediaSelector">
|
||
|
|
<title>Raining</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="snow-image" type="mediaSelector">
|
||
|
|
<title>Snowing</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="windy-image" type="mediaSelector">
|
||
|
|
<title>Windy</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
</properties>
|
||
|
|
<stencil>
|
||
|
|
<width id="width">960</width>
|
||
|
|
<height id="height">340</height>
|
||
|
|
<hbs></hbs>
|
||
|
|
<twig><![CDATA[
|
||
|
|
{% if attribute(_context, 'background-image') != 'none' %}
|
||
|
|
<div class="bg-div bg-[icon]"></div>
|
||
|
|
{% endif %}
|
||
|
|
|
||
|
|
<div class="current-day-template" style="display: none;">
|
||
|
|
<div class="main-panel">
|
||
|
|
<div class="container-row">
|
||
|
|
<div class="details-box text-center shadowed">
|
||
|
|
<div class="big-icon"><i class="wi [wicon]"></i></div>
|
||
|
|
<div class="big-day">[time|ddd]</div>
|
||
|
|
<div class="big-temp">[temperatureRound]°[temperatureUnit]</div>
|
||
|
|
</div>
|
||
|
|
<div class="forecast-container" data-days-num="4"></div>
|
||
|
|
<div class="container-footer">
|
||
|
|
<div class="powered">[Attribution]</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="forecast-day-template" style="display: none;">
|
||
|
|
<div class="upcoming-days shadowed">
|
||
|
|
<div class="small-icon"><i class="wi [wicon]"></i></div>
|
||
|
|
<div class="small-temp">[temperatureMaxRound] ° [temperatureUnit]</div>
|
||
|
|
<div class="small-day">[time|ddd]</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
]]></twig>
|
||
|
|
<style><![CDATA[
|
||
|
|
* {
|
||
|
|
-webkit-box-sizing: border-box;
|
||
|
|
-moz-box-sizing: border-box;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
:after, :before {
|
||
|
|
-webkit-box-sizing: border-box;
|
||
|
|
-moz-box-sizing: border-box;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
.container {
|
||
|
|
width: 960px !important;
|
||
|
|
height: 340px !important;
|
||
|
|
margin-right: auto;
|
||
|
|
margin-left: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.container-row {
|
||
|
|
padding: 30px;
|
||
|
|
padding-top: 50px;
|
||
|
|
padding-bottom: 55px;
|
||
|
|
display: table;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.text-center {
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
width: 960px !important;
|
||
|
|
height: 340px !important;
|
||
|
|
{% if fontFamily %}
|
||
|
|
font-family: {{fontFamily}};
|
||
|
|
{% else %}
|
||
|
|
font-family: "Helvetica", "Arial", sans-serif;
|
||
|
|
{% endif %}
|
||
|
|
line-height: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.shadowed {
|
||
|
|
text-shadow: 0px 0px 2px rgba(255, 255, 255, 0.5);
|
||
|
|
filter: dropshadow(color=rgba(255, 255, 255, 0.5), offx=2, offy=2);
|
||
|
|
}
|
||
|
|
|
||
|
|
.current-temp {
|
||
|
|
font-family: "Helvetica", sans-serif;
|
||
|
|
font-weight: bold;
|
||
|
|
font-size: 100px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.big-icon {
|
||
|
|
font-size: 90px;
|
||
|
|
padding-bottom: 30px;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.big-temp {
|
||
|
|
padding: 10px 0px;
|
||
|
|
font-size: 45px;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.small-day {
|
||
|
|
font-size: 20px;
|
||
|
|
font-style: italic;
|
||
|
|
font-weight: lighter;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.small-icon {
|
||
|
|
font-size: 30px;
|
||
|
|
padding: 50px 0px 10px 0px;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.small-temp {
|
||
|
|
padding: 10px 0px;
|
||
|
|
font-size: 16px;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.container-footer {
|
||
|
|
float: left;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.powered {
|
||
|
|
font-size: 14px;
|
||
|
|
text-align: center;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.details-box {
|
||
|
|
font-size: 26px;
|
||
|
|
height: 220px;
|
||
|
|
padding-left: 30px;
|
||
|
|
width: 20%;
|
||
|
|
float: left;
|
||
|
|
}
|
||
|
|
|
||
|
|
.upcoming-days {
|
||
|
|
height: 195px;
|
||
|
|
margin-top: 20px !important;
|
||
|
|
text-align: center;
|
||
|
|
width: 20%;
|
||
|
|
float: left;
|
||
|
|
}
|
||
|
|
|
||
|
|
.selector-day {
|
||
|
|
font-size: 15px;
|
||
|
|
font-weight: light;
|
||
|
|
margin-top: 25px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.selector-temp {
|
||
|
|
font-size: 25px;
|
||
|
|
font-weight: bold;
|
||
|
|
font-style: italic;
|
||
|
|
}
|
||
|
|
|
||
|
|
{% import "forecastio-css-generator.twig" as generateForecastCSS %}
|
||
|
|
|
||
|
|
{{ generateForecastCSS.backgrounds(
|
||
|
|
attribute(_context, 'background-image'),
|
||
|
|
attribute(_context, 'cloudy-image'),
|
||
|
|
attribute(_context, 'day-cloudy-image'),
|
||
|
|
attribute(_context, 'day-clear-image'),
|
||
|
|
attribute(_context, 'fog-image'),
|
||
|
|
attribute(_context, 'hail-image'),
|
||
|
|
attribute(_context, 'night-clear-image'),
|
||
|
|
attribute(_context, 'night-partly-cloudy-image'),
|
||
|
|
attribute(_context, 'rain-image'),
|
||
|
|
attribute(_context, 'snow-image'),
|
||
|
|
attribute(_context, 'windy-image')
|
||
|
|
) }}
|
||
|
|
|
||
|
|
{{ generateForecastCSS.colors(
|
||
|
|
attribute(_context, 'background-color'),
|
||
|
|
attribute(_context, 'text-color'),
|
||
|
|
attribute(_context, 'icons-color'),
|
||
|
|
null,
|
||
|
|
null,
|
||
|
|
null,
|
||
|
|
attribute(_context, 'shadow-color')
|
||
|
|
) }}
|
||
|
|
]]></style>
|
||
|
|
</stencil>
|
||
|
|
<assets>
|
||
|
|
<asset id="weather_1" type="path" mimeType="image/png" cmsOnly="true" path="/modules/assets/template-thumbnails/forecast/weather_1.png" />
|
||
|
|
</assets>
|
||
|
|
</template>
|
||
|
|
<template>
|
||
|
|
<id>weather_2</id>
|
||
|
|
<type>static</type>
|
||
|
|
<dataType>forecast</dataType>
|
||
|
|
<title>Landscape - Current day, summary</title>
|
||
|
|
<thumbnail>weather_2</thumbnail>
|
||
|
|
<startWidth>340</startWidth>
|
||
|
|
<startHeight>200</startHeight>
|
||
|
|
<properties>
|
||
|
|
<property id="text-color" type="color">
|
||
|
|
<title>Text</title>
|
||
|
|
<helpText>The colour of the text</helpText>
|
||
|
|
<default>#000</default>
|
||
|
|
</property>
|
||
|
|
<property id="icons-color" type="color">
|
||
|
|
<title>Icons</title>
|
||
|
|
<helpText>The colour of the icons</helpText>
|
||
|
|
<default>#000</default>
|
||
|
|
</property>
|
||
|
|
<property id="background-color" type="color">
|
||
|
|
<title>Background</title>
|
||
|
|
<helpText>The colour of the background</helpText>
|
||
|
|
<default></default>
|
||
|
|
</property>
|
||
|
|
<property id="shadow-color" type="color">
|
||
|
|
<title>Shadow</title>
|
||
|
|
<helpText>The colour of the shadow</helpText>
|
||
|
|
<default>rgba(255, 255, 255, 0.5)</default>
|
||
|
|
</property>
|
||
|
|
<property id="fontFamily" type="fontSelector">
|
||
|
|
<title>Font</title>
|
||
|
|
<helpText>Select a custom font - leave empty to use the default font.</helpText>
|
||
|
|
</property>
|
||
|
|
<property id="background-image" type="dropdown" mode="single">
|
||
|
|
<title>Background Image</title>
|
||
|
|
<helpText>The background image to use</helpText>
|
||
|
|
<default>none</default>
|
||
|
|
<options>
|
||
|
|
<option name="none">None</option>
|
||
|
|
<option name="fit">Fit</option>
|
||
|
|
<option name="stretch">Stretch</option>
|
||
|
|
<option name="center">Center</option>
|
||
|
|
</options>
|
||
|
|
</property>
|
||
|
|
<property type="header" variant="main">
|
||
|
|
<title>Backgrounds</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property type="message">
|
||
|
|
<title>Select images from the media library to replace the default weather backgrounds.</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="cloudy-image" type="mediaSelector">
|
||
|
|
<title>Cloudy</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="day-cloudy-image" type="mediaSelector">
|
||
|
|
<title>Cloudy day</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="day-sunny-image" type="mediaSelector">
|
||
|
|
<title>Clear</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="fog-image" type="mediaSelector">
|
||
|
|
<title>Fog</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="hail-image" type="mediaSelector">
|
||
|
|
<title>Hail</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="night-clear-image" type="mediaSelector">
|
||
|
|
<title>Clear night</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="night-partly-cloudy-image" type="mediaSelector">
|
||
|
|
<title>Cloudy night</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="rain-image" type="mediaSelector">
|
||
|
|
<title>Raining</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="snow-image" type="mediaSelector">
|
||
|
|
<title>Snowing</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="windy-image" type="mediaSelector">
|
||
|
|
<title>Windy</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
</properties>
|
||
|
|
<stencil>
|
||
|
|
<width id="width">340</width>
|
||
|
|
<height id="height">200</height>
|
||
|
|
<hbs></hbs>
|
||
|
|
<twig><![CDATA[
|
||
|
|
{% if attribute(_context, 'background-image') != 'none' %}
|
||
|
|
<div class="bg-div bg-[icon]"></div>
|
||
|
|
{% endif %}
|
||
|
|
|
||
|
|
<div class="current-day-template" style="display: none;">
|
||
|
|
<div class="container">
|
||
|
|
<div class="main-panel">
|
||
|
|
<div class="container-row">
|
||
|
|
<div class="details-box text-center shadowed">
|
||
|
|
<div class="big-container">
|
||
|
|
<div class="big-icon"><i class="wi [wicon]"></i></div>
|
||
|
|
</div>
|
||
|
|
<div class="big-container">
|
||
|
|
<div class="big-temp">[temperatureRound]<sup>°[temperatureUnit]</sup></div>
|
||
|
|
</div>
|
||
|
|
<div class="description-container">
|
||
|
|
<div class="description">
|
||
|
|
<div class="big-day">[summary]</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="powered-container">
|
||
|
|
<div class="powered">[Attribution]</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
]]></twig>
|
||
|
|
<style><![CDATA[
|
||
|
|
* {
|
||
|
|
-webkit-box-sizing: border-box;
|
||
|
|
-moz-box-sizing: border-box;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
:after, :before {
|
||
|
|
-webkit-box-sizing: border-box;
|
||
|
|
-moz-box-sizing: border-box;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
.text-center {
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
width: 340px !important;
|
||
|
|
height: 200px !important;
|
||
|
|
{% if fontFamily %}
|
||
|
|
font-family: {{fontFamily}};
|
||
|
|
{% else %}
|
||
|
|
font-family: "Helvetica", "Arial", sans-serif;
|
||
|
|
{% endif %}
|
||
|
|
line-height: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.description-container {
|
||
|
|
width: 100%;
|
||
|
|
float: left;
|
||
|
|
}
|
||
|
|
|
||
|
|
.shadowed {
|
||
|
|
text-shadow: 0px 0px 2px rgba(255, 255, 255, 0.5);
|
||
|
|
filter: dropshadow(color=rgba(255, 255, 255, 0.5), offx=2, offy=2);
|
||
|
|
}
|
||
|
|
|
||
|
|
.container {
|
||
|
|
margin-right: auto;
|
||
|
|
margin-left: auto;
|
||
|
|
background-position: center;
|
||
|
|
width: 340px !important;
|
||
|
|
height: 200px !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.main-panel {
|
||
|
|
height: 137px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.container-row {
|
||
|
|
height: 200px;
|
||
|
|
position: relative;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.big-container {
|
||
|
|
float: left;
|
||
|
|
width: 50%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.big-day {
|
||
|
|
font-size: 30px;
|
||
|
|
font-style: italic;
|
||
|
|
font-weight: lighter;
|
||
|
|
}
|
||
|
|
|
||
|
|
.big-icon {
|
||
|
|
font-size: 90px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.big-temp {
|
||
|
|
font-size: 55px;
|
||
|
|
margin-top: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.big-temp sup {
|
||
|
|
font-size: 25px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.description {
|
||
|
|
font-size: 45px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.details-box {
|
||
|
|
display: table;
|
||
|
|
padding-top: 40px;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.powered {
|
||
|
|
position: absolute;
|
||
|
|
left: 0;
|
||
|
|
bottom: 8px;
|
||
|
|
text-align: center;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
{% import "forecastio-css-generator.twig" as generateForecastCSS %}
|
||
|
|
|
||
|
|
{{ generateForecastCSS.backgrounds(
|
||
|
|
attribute(_context, 'background-image'),
|
||
|
|
attribute(_context, 'cloudy-image'),
|
||
|
|
attribute(_context, 'day-cloudy-image'),
|
||
|
|
attribute(_context, 'day-clear-image'),
|
||
|
|
attribute(_context, 'fog-image'),
|
||
|
|
attribute(_context, 'hail-image'),
|
||
|
|
attribute(_context, 'night-clear-image'),
|
||
|
|
attribute(_context, 'night-partly-cloudy-image'),
|
||
|
|
attribute(_context, 'rain-image'),
|
||
|
|
attribute(_context, 'snow-image'),
|
||
|
|
attribute(_context, 'windy-image')
|
||
|
|
) }}
|
||
|
|
|
||
|
|
{{ generateForecastCSS.colors(
|
||
|
|
attribute(_context, 'background-color'),
|
||
|
|
attribute(_context, 'text-color'),
|
||
|
|
attribute(_context, 'icons-color'),
|
||
|
|
null,
|
||
|
|
null,
|
||
|
|
null,
|
||
|
|
attribute(_context, 'shadow-color')
|
||
|
|
) }}
|
||
|
|
]]></style>
|
||
|
|
</stencil>
|
||
|
|
<assets>
|
||
|
|
<asset id="weather_2" type="path" mimeType="image/png" cmsOnly="true" path="/modules/assets/template-thumbnails/forecast/weather_2.png" />
|
||
|
|
</assets>
|
||
|
|
</template>
|
||
|
|
<template>
|
||
|
|
<id>weather_3</id>
|
||
|
|
<type>static</type>
|
||
|
|
<dataType>forecast</dataType>
|
||
|
|
<title>Landscape - Current day</title>
|
||
|
|
<thumbnail>weather_3</thumbnail>
|
||
|
|
<startWidth>340</startWidth>
|
||
|
|
<startHeight>200</startHeight>
|
||
|
|
<properties>
|
||
|
|
<property id="text-color" type="color">
|
||
|
|
<title>Text</title>
|
||
|
|
<helpText>The colour of the text</helpText>
|
||
|
|
<default>#000</default>
|
||
|
|
</property>
|
||
|
|
<property id="icons-color" type="color">
|
||
|
|
<title>Icons</title>
|
||
|
|
<helpText>The colour of the icons</helpText>
|
||
|
|
<default>#000</default>
|
||
|
|
</property>
|
||
|
|
<property id="background-color" type="color">
|
||
|
|
<title>Background</title>
|
||
|
|
<helpText>The colour of the background</helpText>
|
||
|
|
<default></default>
|
||
|
|
</property>
|
||
|
|
<property id="shadow-color" type="color">
|
||
|
|
<title>Shadow</title>
|
||
|
|
<helpText>The colour of the shadow</helpText>
|
||
|
|
<default>rgba(255, 255, 255, 0.5)</default>
|
||
|
|
</property>
|
||
|
|
<property id="fontFamily" type="fontSelector">
|
||
|
|
<title>Font</title>
|
||
|
|
<helpText>Select a custom font - leave empty to use the default font.</helpText>
|
||
|
|
</property>
|
||
|
|
<property id="background-image" type="dropdown" mode="single">
|
||
|
|
<title>Background Image</title>
|
||
|
|
<helpText>The background image to use</helpText>
|
||
|
|
<default>none</default>
|
||
|
|
<options>
|
||
|
|
<option name="none">None</option>
|
||
|
|
<option name="fit">Fit</option>
|
||
|
|
<option name="stretch">Stretch</option>
|
||
|
|
<option name="center">Center</option>
|
||
|
|
</options>
|
||
|
|
</property>
|
||
|
|
<property type="header" variant="main">
|
||
|
|
<title>Backgrounds</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property type="message">
|
||
|
|
<title>Select images from the media library to replace the default weather backgrounds.</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="cloudy-image" type="mediaSelector">
|
||
|
|
<title>Cloudy</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="day-cloudy-image" type="mediaSelector">
|
||
|
|
<title>Cloudy day</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="day-sunny-image" type="mediaSelector">
|
||
|
|
<title>Clear</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="fog-image" type="mediaSelector">
|
||
|
|
<title>Fog</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="hail-image" type="mediaSelector">
|
||
|
|
<title>Hail</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="night-clear-image" type="mediaSelector">
|
||
|
|
<title>Clear night</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="night-partly-cloudy-image" type="mediaSelector">
|
||
|
|
<title>Cloudy night</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="rain-image" type="mediaSelector">
|
||
|
|
<title>Raining</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="snow-image" type="mediaSelector">
|
||
|
|
<title>Snowing</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="windy-image" type="mediaSelector">
|
||
|
|
<title>Windy</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
</properties>
|
||
|
|
<stencil>
|
||
|
|
<width id="width">340</width>
|
||
|
|
<height id="height">200</height>
|
||
|
|
<hbs></hbs>
|
||
|
|
<twig><![CDATA[
|
||
|
|
{% if attribute(_context, 'background-image') != 'none' %}
|
||
|
|
<div class="bg-div bg-[icon]"></div>
|
||
|
|
{% endif %}
|
||
|
|
|
||
|
|
<div class="current-day-template" style="display: none;">
|
||
|
|
<div class="container">
|
||
|
|
<div class="main-panel">
|
||
|
|
<div class="container-row">
|
||
|
|
<div class="details-box text-center shadowed">
|
||
|
|
<div class="big-container">
|
||
|
|
<div class="big-icon"><i class="wi [wicon]"></i></div>
|
||
|
|
</div>
|
||
|
|
<div class="big-container">
|
||
|
|
<div class="big-day">[summary]</div>
|
||
|
|
<div class="big-temp">[temperatureRound]<sup>°[temperatureUnit]</sup></div>
|
||
|
|
</div>
|
||
|
|
<div class="powered-container">
|
||
|
|
<div class="powered">[Attribution]</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{% import "forecastio-css-generator.twig" as generateForecastCSS %}
|
||
|
|
]]></twig>
|
||
|
|
<style><![CDATA[
|
||
|
|
* {
|
||
|
|
-webkit-box-sizing: border-box;
|
||
|
|
-moz-box-sizing: border-box;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
:after, :before {
|
||
|
|
-webkit-box-sizing: border-box;
|
||
|
|
-moz-box-sizing: border-box;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
#content {
|
||
|
|
color: #272625;
|
||
|
|
}
|
||
|
|
|
||
|
|
.container {
|
||
|
|
width: 340px !important;
|
||
|
|
height: 200px !important;
|
||
|
|
margin-right: auto;
|
||
|
|
margin-left: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.text-center {
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
{% if fontFamily %}
|
||
|
|
font-family: {{fontFamily}};
|
||
|
|
{% else %}
|
||
|
|
font-family: "Helvetica", "Arial", sans-serif;
|
||
|
|
{% endif %}
|
||
|
|
line-height: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.shadowed {
|
||
|
|
text-shadow: 0px 0px 2px rgba(255, 255, 255, 0.5);
|
||
|
|
filter: dropshadow(color=rgba(255, 255, 255, 0.5), offx=2, offy=2);
|
||
|
|
}
|
||
|
|
|
||
|
|
.main-panel {
|
||
|
|
height: 137px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.current-temp {
|
||
|
|
{% if fontFamily %}
|
||
|
|
font-family: {{fontFamily}};
|
||
|
|
{% else %}
|
||
|
|
font-family: "Helvetica", "Arial", sans-serif;
|
||
|
|
{% endif %}
|
||
|
|
font-weight: bold;
|
||
|
|
font-size: 100px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.powered {
|
||
|
|
position: absolute;
|
||
|
|
left: 0;
|
||
|
|
bottom: 8px;
|
||
|
|
text-align: center;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.container-row {
|
||
|
|
height: 180px;
|
||
|
|
padding-top: 40px;
|
||
|
|
position: relative;
|
||
|
|
margin-bottom: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.big-container {
|
||
|
|
float: left;
|
||
|
|
width: 50%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.big-day {
|
||
|
|
font-size: 30px;
|
||
|
|
font-style: italic;
|
||
|
|
font-weight: lighter;
|
||
|
|
}
|
||
|
|
|
||
|
|
.big-icon {
|
||
|
|
font-size: 90px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.big-temp {
|
||
|
|
padding: 5px 0 0px 0;
|
||
|
|
font-size: 25px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.big-temp sup {
|
||
|
|
font-size: 15px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.description {
|
||
|
|
padding: 20px 0 0px 0;
|
||
|
|
font-size: 45px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.details-box {
|
||
|
|
display: table;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
{{ generateForecastCSS.backgrounds(
|
||
|
|
attribute(_context, 'background-image'),
|
||
|
|
attribute(_context, 'cloudy-image'),
|
||
|
|
attribute(_context, 'day-cloudy-image'),
|
||
|
|
attribute(_context, 'day-clear-image'),
|
||
|
|
attribute(_context, 'fog-image'),
|
||
|
|
attribute(_context, 'hail-image'),
|
||
|
|
attribute(_context, 'night-clear-image'),
|
||
|
|
attribute(_context, 'night-partly-cloudy-image'),
|
||
|
|
attribute(_context, 'rain-image'),
|
||
|
|
attribute(_context, 'snow-image'),
|
||
|
|
attribute(_context, 'windy-image')
|
||
|
|
) }}
|
||
|
|
|
||
|
|
{{ generateForecastCSS.colors(
|
||
|
|
attribute(_context, 'background-color'),
|
||
|
|
attribute(_context, 'text-color'),
|
||
|
|
attribute(_context, 'icons-color'),
|
||
|
|
null,
|
||
|
|
null,
|
||
|
|
null,
|
||
|
|
attribute(_context, 'shadow-color')
|
||
|
|
) }}
|
||
|
|
]]></style>
|
||
|
|
</stencil>
|
||
|
|
<assets>
|
||
|
|
<asset id="weather_3" type="path" mimeType="image/png" cmsOnly="true" path="/modules/assets/template-thumbnails/forecast/weather_3.png" />
|
||
|
|
</assets>
|
||
|
|
</template>
|
||
|
|
<template>
|
||
|
|
<id>weather_4</id>
|
||
|
|
<type>static</type>
|
||
|
|
<dataType>forecast</dataType>
|
||
|
|
<title>Landscape - Current day detailed, 4 day forecast</title>
|
||
|
|
<thumbnail>weather_4</thumbnail>
|
||
|
|
<startWidth>1200</startWidth>
|
||
|
|
<startHeight>750</startHeight>
|
||
|
|
<properties>
|
||
|
|
<property id="text-color" type="color">
|
||
|
|
<title>Text</title>
|
||
|
|
<helpText>The colour of the text</helpText>
|
||
|
|
<default>#fff</default>
|
||
|
|
</property>
|
||
|
|
<property id="icons-color" type="color">
|
||
|
|
<title>Icons</title>
|
||
|
|
<helpText>The colour of the icons</helpText>
|
||
|
|
<default>#fff</default>
|
||
|
|
</property>
|
||
|
|
<property id="background-color" type="color">
|
||
|
|
<title>Background</title>
|
||
|
|
<helpText>The colour of the background</helpText>
|
||
|
|
<default></default>
|
||
|
|
</property>
|
||
|
|
<property id="shadow-color" type="color">
|
||
|
|
<title>Shadow</title>
|
||
|
|
<helpText>The colour of the shadow</helpText>
|
||
|
|
<default>rgba(0, 0, 0, 0.4)</default>
|
||
|
|
</property>
|
||
|
|
<property id="footer-color" type="color">
|
||
|
|
<title>Footer Background</title>
|
||
|
|
<helpText>The colour of the footer background</helpText>
|
||
|
|
<default>#000</default>
|
||
|
|
</property>
|
||
|
|
<property id="footer-text-color" type="color">
|
||
|
|
<title>Footer Text</title>
|
||
|
|
<helpText>The colour of the footer text</helpText>
|
||
|
|
<default>#fff</default>
|
||
|
|
</property>
|
||
|
|
<property id="footer-icons-color" type="color">
|
||
|
|
<title>Footer Icons</title>
|
||
|
|
<helpText>The colour of the footer icons</helpText>
|
||
|
|
<default>#fff</default>
|
||
|
|
</property>
|
||
|
|
<property id="fontFamily" type="fontSelector">
|
||
|
|
<title>Font</title>
|
||
|
|
<helpText>Select a custom font - leave empty to use the default font.</helpText>
|
||
|
|
</property>
|
||
|
|
<property id="background-image" type="dropdown" mode="single">
|
||
|
|
<title>Background Image</title>
|
||
|
|
<helpText>The background image to use</helpText>
|
||
|
|
<default>fit</default>
|
||
|
|
<options>
|
||
|
|
<option name="none">None</option>
|
||
|
|
<option name="fit">Fit</option>
|
||
|
|
<option name="stretch">Stretch</option>
|
||
|
|
<option name="center">Center</option>
|
||
|
|
</options>
|
||
|
|
</property>
|
||
|
|
<property type="header" variant="main">
|
||
|
|
<title>Backgrounds</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property type="message">
|
||
|
|
<title>Select images from the media library to replace the default weather backgrounds.</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="cloudy-image" type="mediaSelector">
|
||
|
|
<title>Cloudy</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="day-cloudy-image" type="mediaSelector">
|
||
|
|
<title>Cloudy day</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="day-sunny-image" type="mediaSelector">
|
||
|
|
<title>Clear</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="fog-image" type="mediaSelector">
|
||
|
|
<title>Fog</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="hail-image" type="mediaSelector">
|
||
|
|
<title>Hail</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="night-clear-image" type="mediaSelector">
|
||
|
|
<title>Clear night</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="night-partly-cloudy-image" type="mediaSelector">
|
||
|
|
<title>Cloudy night</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="rain-image" type="mediaSelector">
|
||
|
|
<title>Raining</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="snow-image" type="mediaSelector">
|
||
|
|
<title>Snowing</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="windy-image" type="mediaSelector">
|
||
|
|
<title>Windy</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
</properties>
|
||
|
|
<stencil>
|
||
|
|
<width id="width">1920</width>
|
||
|
|
<height id="height">1080</height>
|
||
|
|
<hbs></hbs>
|
||
|
|
<twig><![CDATA[
|
||
|
|
{% if attribute(_context, 'background-image') != 'none' %}
|
||
|
|
<div class="bg-div bg-[icon]"></div>
|
||
|
|
{% endif %}
|
||
|
|
|
||
|
|
<div class="current-day-template" style="display: none;">
|
||
|
|
<div class="main-container container">
|
||
|
|
<div class="row">
|
||
|
|
<div class="weather-col col-6">
|
||
|
|
<h1 class="date shadowed"> [time|MMM] <br>[time|D]</h1>
|
||
|
|
</div>
|
||
|
|
<div class="weather-col col-5">
|
||
|
|
<div class="row text-right temp shadowed">[temperatureRound]°[temperatureUnit]</div>
|
||
|
|
<div class="row pull-right animated rotateInUpRight main-icon shadowed"><i class="wi [wicon]"></i></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="bg-footer bottom-bar">
|
||
|
|
<div class="weather-col col-4 text-center">
|
||
|
|
<div class="row forecast-current">[summary]</div>
|
||
|
|
<div class="row forecast-second">||Wind||: [windDirection] [windSpeed] [windSpeedUnit]</div>
|
||
|
|
<div class="row forecast-second">||Humidity||: [humidityPercent]%</div>
|
||
|
|
</div>
|
||
|
|
<div class="forecast-container" data-days-num="4"></div>
|
||
|
|
<div class="weather-col col-12 powered">[Attribution]</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="forecast-day-template" style="display: none;">
|
||
|
|
<div class="day weather-col col-2">
|
||
|
|
<div class="row text-center day-details">[time|ddd]</div>
|
||
|
|
<div class="row animated Bounce second-icon"><i class="wi [wicon]"></i></div>
|
||
|
|
<div class="row text-center temp-details">[temperatureMaxRound] ° [temperatureUnit] </div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
]]></twig>
|
||
|
|
<style><![CDATA[
|
||
|
|
{% import "forecastio-css-generator.twig" as generateForecastCSS %}
|
||
|
|
|
||
|
|
.container {
|
||
|
|
width: 1920px !important;
|
||
|
|
height: 1080px !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
{% if fontFamily %}
|
||
|
|
font-family: {{fontFamily}};
|
||
|
|
{% else %}
|
||
|
|
font-family: "Helvetica", "Arial", sans-serif;
|
||
|
|
{% endif %}
|
||
|
|
line-height: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
h1 {
|
||
|
|
margin: 0.67em 0;
|
||
|
|
font-size: 2em;
|
||
|
|
}
|
||
|
|
|
||
|
|
.container-fluid:after, .container-fluid:before, .row:after, .row:before {
|
||
|
|
display: table;
|
||
|
|
content: " ";
|
||
|
|
}
|
||
|
|
|
||
|
|
.container-fluid:after, .row:after {
|
||
|
|
clear: both;
|
||
|
|
}
|
||
|
|
|
||
|
|
* {
|
||
|
|
-webkit-box-sizing: border-box;
|
||
|
|
-moz-box-sizing: border-box;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
:after, :before {
|
||
|
|
-webkit-box-sizing: border-box;
|
||
|
|
-moz-box-sizing: border-box;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
.text-center {
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
#content {
|
||
|
|
color: white;
|
||
|
|
|
||
|
|
height: inherit;
|
||
|
|
}
|
||
|
|
|
||
|
|
.shadowed {
|
||
|
|
text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.4);
|
||
|
|
filter: dropshadow(color=rgba(0, 0, 0, 0.4), offx=2, offy=2);
|
||
|
|
}
|
||
|
|
|
||
|
|
.bg-div {
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-size: cover;
|
||
|
|
background-position: left;
|
||
|
|
}
|
||
|
|
|
||
|
|
.main-container {
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.bg-footer {
|
||
|
|
position: absolute;
|
||
|
|
right: 0;
|
||
|
|
bottom: 0;
|
||
|
|
width: 100%;
|
||
|
|
left: 0;
|
||
|
|
text-align: center;
|
||
|
|
background-color: #000;
|
||
|
|
opacity: 0.8;
|
||
|
|
}
|
||
|
|
|
||
|
|
.date {
|
||
|
|
font-size: 100px;
|
||
|
|
font-weight: 900;
|
||
|
|
margin-left: 40px;
|
||
|
|
text-transform: uppercase;
|
||
|
|
}
|
||
|
|
|
||
|
|
.temp {
|
||
|
|
font-size: 260px;
|
||
|
|
font-weight: 900;
|
||
|
|
}
|
||
|
|
|
||
|
|
.city {
|
||
|
|
font-size: 40px;
|
||
|
|
margin-left: 40px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.day-details {
|
||
|
|
font-size: 40px;
|
||
|
|
font-weight: 200;
|
||
|
|
font-style: italic;
|
||
|
|
}
|
||
|
|
|
||
|
|
.temp-details {
|
||
|
|
font-size: 35px;
|
||
|
|
padding-bottom: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.forecast-current {
|
||
|
|
font-weight: 900;
|
||
|
|
font-size: 60px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.forecast-second {
|
||
|
|
margin-top: 10px;
|
||
|
|
font-weight: 200;
|
||
|
|
font-size: 40px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.main-icon {
|
||
|
|
font-size: 180px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.second-icon {
|
||
|
|
font-size: 60px;
|
||
|
|
padding: 25px 0px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.powered {
|
||
|
|
padding: 15px 0;
|
||
|
|
color: #000;
|
||
|
|
font-size: 24px;
|
||
|
|
background-color: white;
|
||
|
|
background-color: rgba(255, 255, 255, 0.787);
|
||
|
|
}
|
||
|
|
|
||
|
|
.text-right {
|
||
|
|
text-align: right;
|
||
|
|
}
|
||
|
|
|
||
|
|
.pull-right {
|
||
|
|
float: right !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.col-2 {
|
||
|
|
width: 16.66666667%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.col-4 {
|
||
|
|
width: 33.33333333%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.col-5 {
|
||
|
|
width: 41.66666667%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.col-6 {
|
||
|
|
width: 50%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.col-12 {
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.weather-col {
|
||
|
|
float: left;
|
||
|
|
position: relative;
|
||
|
|
min-height: 1px;
|
||
|
|
padding: 20px 15px;
|
||
|
|
}
|
||
|
|
|
||
|
|
{{ generateForecastCSS.backgrounds(
|
||
|
|
attribute(_context, 'background-image'),
|
||
|
|
attribute(_context, 'cloudy-image'),
|
||
|
|
attribute(_context, 'day-cloudy-image'),
|
||
|
|
attribute(_context, 'day-clear-image'),
|
||
|
|
attribute(_context, 'fog-image'),
|
||
|
|
attribute(_context, 'hail-image'),
|
||
|
|
attribute(_context, 'night-clear-image'),
|
||
|
|
attribute(_context, 'night-partly-cloudy-image'),
|
||
|
|
attribute(_context, 'rain-image'),
|
||
|
|
attribute(_context, 'snow-image'),
|
||
|
|
attribute(_context, 'windy-image')
|
||
|
|
) }}
|
||
|
|
|
||
|
|
{{ generateForecastCSS.colors(
|
||
|
|
attribute(_context, 'background-color'),
|
||
|
|
attribute(_context, 'text-color'),
|
||
|
|
attribute(_context, 'icons-color'),
|
||
|
|
attribute(_context, 'footer-color'),
|
||
|
|
attribute(_context, 'footer-text-color'),
|
||
|
|
attribute(_context, 'footer-icons-color'),
|
||
|
|
attribute(_context, 'shadow-color')
|
||
|
|
) }}
|
||
|
|
]]></style>
|
||
|
|
</stencil>
|
||
|
|
<assets>
|
||
|
|
<asset id="weather_4" type="path" mimeType="image/png" cmsOnly="true" path="/modules/assets/template-thumbnails/forecast/weather_4.png" />
|
||
|
|
</assets>
|
||
|
|
</template>
|
||
|
|
<template>
|
||
|
|
<id>weather_5</id>
|
||
|
|
<type>static</type>
|
||
|
|
<dataType>forecast</dataType>
|
||
|
|
<title>Portrait - Current day, 2 day forecast</title>
|
||
|
|
<thumbnail>weather_5</thumbnail>
|
||
|
|
<startWidth>540</startWidth>
|
||
|
|
<startHeight>960</startHeight>
|
||
|
|
<properties>
|
||
|
|
<property id="text-color" type="color">
|
||
|
|
<title>Text</title>
|
||
|
|
<helpText>The colour of the text</helpText>
|
||
|
|
<default>#fff</default>
|
||
|
|
</property>
|
||
|
|
<property id="icons-color" type="color">
|
||
|
|
<title>Icons</title>
|
||
|
|
<helpText>The colour of the icons</helpText>
|
||
|
|
<default>#fff</default>
|
||
|
|
</property>
|
||
|
|
<property id="background-color" type="color">
|
||
|
|
<title>Background</title>
|
||
|
|
<helpText>The colour of the background</helpText>
|
||
|
|
<default></default>
|
||
|
|
</property>
|
||
|
|
<property id="shadow-color" type="color">
|
||
|
|
<title>Shadow</title>
|
||
|
|
<helpText>The colour of the shadow</helpText>
|
||
|
|
<default>#111</default>
|
||
|
|
</property>
|
||
|
|
<property id="footer-color" type="color">
|
||
|
|
<title>Footer Background</title>
|
||
|
|
<helpText>The colour of the footer background</helpText>
|
||
|
|
<default>#fff</default>
|
||
|
|
</property>
|
||
|
|
<property id="footer-text-color" type="color">
|
||
|
|
<title>Footer Text</title>
|
||
|
|
<helpText>The colour of the footer text</helpText>
|
||
|
|
<default>#333</default>
|
||
|
|
</property>
|
||
|
|
<property id="footer-icons-color" type="color">
|
||
|
|
<title>Footer Icons</title>
|
||
|
|
<helpText>The colour of the footer icons</helpText>
|
||
|
|
<default>#333</default>
|
||
|
|
</property>
|
||
|
|
<property id="fontFamily" type="fontSelector">
|
||
|
|
<title>Font</title>
|
||
|
|
<helpText>Select a custom font - leave empty to use the default font.</helpText>
|
||
|
|
</property>
|
||
|
|
<property id="background-image" type="dropdown" mode="single">
|
||
|
|
<title>Background Image</title>
|
||
|
|
<helpText>The background image to use</helpText>
|
||
|
|
<default>fit</default>
|
||
|
|
<options>
|
||
|
|
<option name="none">None</option>
|
||
|
|
<option name="fit">Fit</option>
|
||
|
|
<option name="stretch">Stretch</option>
|
||
|
|
<option name="center">Center</option>
|
||
|
|
</options>
|
||
|
|
</property>
|
||
|
|
<property type="header" variant="main">
|
||
|
|
<title>Backgrounds</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property type="message">
|
||
|
|
<title>Select images from the media library to replace the default weather backgrounds.</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="cloudy-image" type="mediaSelector">
|
||
|
|
<title>Cloudy</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="day-cloudy-image" type="mediaSelector">
|
||
|
|
<title>Cloudy day</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="day-sunny-image" type="mediaSelector">
|
||
|
|
<title>Clear</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="fog-image" type="mediaSelector">
|
||
|
|
<title>Fog</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="hail-image" type="mediaSelector">
|
||
|
|
<title>Hail</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="night-clear-image" type="mediaSelector">
|
||
|
|
<title>Clear night</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="night-partly-cloudy-image" type="mediaSelector">
|
||
|
|
<title>Cloudy night</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="rain-image" type="mediaSelector">
|
||
|
|
<title>Raining</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="snow-image" type="mediaSelector">
|
||
|
|
<title>Snowing</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="windy-image" type="mediaSelector">
|
||
|
|
<title>Windy</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
</properties>
|
||
|
|
<stencil>
|
||
|
|
<width id="width">540</width>
|
||
|
|
<height id="height">960</height>
|
||
|
|
<hbs></hbs>
|
||
|
|
<twig><![CDATA[
|
||
|
|
{% if attribute(_context, 'background-image') != 'none' %}
|
||
|
|
<div class="bg-div bg-[icon]"></div>
|
||
|
|
{% endif %}
|
||
|
|
|
||
|
|
<div class="current-day-template" style="display: none;">
|
||
|
|
<div class="container">
|
||
|
|
<div class="row main-cont center-block">
|
||
|
|
<div class="weather-col col-12 upcoming-days">
|
||
|
|
<div class="summary shadowed">[summary]</div>
|
||
|
|
<div class="big-temp shadowed">[temperatureRound]<sup>°[temperatureUnit]</sup></div>
|
||
|
|
<div class="powered">[Attribution]</div>
|
||
|
|
<div class="small-icon shadowed"><i class="wi [wicon]"></i></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="row row-details bg-footer text-center">
|
||
|
|
<div class="forecast-container" data-days-num="2"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="forecast-day-template" style="display: none;">
|
||
|
|
<div class="weather-col col-12 row-day">
|
||
|
|
<div class="weather-col col-3 day"><strong>[time|ddd]</strong></div>
|
||
|
|
<div class="weather-col col-6 temp">[temperatureMinRound]° - [temperatureMaxRound]° [temperatureUnit]</div>
|
||
|
|
<div class="weather-col col-3 icon-up"><i class="wi [wicon]"></i></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
]]></twig>
|
||
|
|
<style><![CDATA[
|
||
|
|
{% import "forecastio-css-generator.twig" as generateForecastCSS %}
|
||
|
|
|
||
|
|
body {
|
||
|
|
width: 540px !important;
|
||
|
|
height: 960px !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
h1 {
|
||
|
|
margin: 0.67em 0;
|
||
|
|
font-size: 2em;
|
||
|
|
}
|
||
|
|
|
||
|
|
.container:after, .container:before, .row:after, .row:before {
|
||
|
|
display: table;
|
||
|
|
content: " ";
|
||
|
|
}
|
||
|
|
|
||
|
|
.container:after, .row:after {
|
||
|
|
clear: both;
|
||
|
|
}
|
||
|
|
|
||
|
|
#content {
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
.bg-footer {
|
||
|
|
color: #333;
|
||
|
|
}
|
||
|
|
|
||
|
|
* {
|
||
|
|
-webkit-box-sizing: border-box;
|
||
|
|
-moz-box-sizing: border-box;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
:after, :before {
|
||
|
|
-webkit-box-sizing: border-box;
|
||
|
|
-moz-box-sizing: border-box;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
{% if fontFamily %}
|
||
|
|
font-family: {{fontFamily}};
|
||
|
|
{% else %}
|
||
|
|
font-family: "Helvetica", "Arial", sans-serif;
|
||
|
|
{% endif %}
|
||
|
|
line-height: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.container {
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-size: cover;
|
||
|
|
background-position: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.main-panel {
|
||
|
|
margin-top: 74px;
|
||
|
|
height: 137px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.big-icon {
|
||
|
|
font-size: 200px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.date {
|
||
|
|
font-size: 18px;
|
||
|
|
font-family: "Helvetica", sans-serif;
|
||
|
|
font-weight: light;
|
||
|
|
padding-bottom: 1px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.month {
|
||
|
|
font-size: 15px;
|
||
|
|
font-family: "Helvetica", sans-serif;
|
||
|
|
font-weight: light;
|
||
|
|
}
|
||
|
|
|
||
|
|
.current-temp {
|
||
|
|
font-family: "Helvetica", sans-serif;
|
||
|
|
font-weight: bold;
|
||
|
|
font-size: 100px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.main-cont {
|
||
|
|
height: 780px;
|
||
|
|
padding: 0px 50px;
|
||
|
|
position: relative;
|
||
|
|
margin-right: auto;
|
||
|
|
margin-left: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.main-icon {
|
||
|
|
font-size: 70px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.summary {
|
||
|
|
font-weight: bold;
|
||
|
|
font-size: 80px;
|
||
|
|
padding-top: 30px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.powered {
|
||
|
|
font-weight: light;
|
||
|
|
font-size: 15px;
|
||
|
|
padding-bottom: 40px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.small-day {
|
||
|
|
padding-top: 50px;
|
||
|
|
font-size: 28px;
|
||
|
|
font-style: italic;
|
||
|
|
font-weight: lighter;
|
||
|
|
}
|
||
|
|
|
||
|
|
.small-icon {
|
||
|
|
font-size: 180px;
|
||
|
|
padding: 90px 0px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.big-temp {
|
||
|
|
padding-top: 30px;
|
||
|
|
font-size: 120px;
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
|
||
|
|
.big-temp sup {
|
||
|
|
font-size: 70px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.details-box {
|
||
|
|
height: 290px;
|
||
|
|
padding-left: 30px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.upcoming-days {
|
||
|
|
height: 365px;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.selector-day {
|
||
|
|
font-size: 15px;
|
||
|
|
font-weight: light;
|
||
|
|
margin-top: 25px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.selector-temp {
|
||
|
|
font-size: 25px;
|
||
|
|
font-weight: bold;
|
||
|
|
font-style: italic;
|
||
|
|
}
|
||
|
|
|
||
|
|
.arrow-down {
|
||
|
|
width: 0;
|
||
|
|
height: 0;
|
||
|
|
border-left: 20px solid transparent;
|
||
|
|
border-right: 20px solid transparent;
|
||
|
|
border-top: 20px solid rgba(0, 0, 0, 0.8);
|
||
|
|
margin-left: 120px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.row-details {
|
||
|
|
background-color: #fff;
|
||
|
|
height: 180px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.row-day {
|
||
|
|
padding: 30px 0px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.day {
|
||
|
|
font-size: 30px;
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
|
||
|
|
.temp {
|
||
|
|
font-size: 30px;
|
||
|
|
font-weight: light;
|
||
|
|
}
|
||
|
|
|
||
|
|
.icon-up {
|
||
|
|
font-size: 30px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.shadowed {
|
||
|
|
text-shadow: 0px 0px 2px #111;
|
||
|
|
filter: dropshadow(color=#111, offx=2, offy=2);
|
||
|
|
}
|
||
|
|
|
||
|
|
.container, .container {
|
||
|
|
margin-right: auto;
|
||
|
|
margin-left: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.text-right {
|
||
|
|
text-align: right;
|
||
|
|
}
|
||
|
|
|
||
|
|
.pull-right {
|
||
|
|
float: right !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.col-2 {
|
||
|
|
width: 16.66666667%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.col-3 {
|
||
|
|
width: 25%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.col-4 {
|
||
|
|
width: 33.33333333%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.col-5 {
|
||
|
|
width: 41.66666667%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.col-6 {
|
||
|
|
width: 50%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.col-12 {
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.weather-col {
|
||
|
|
text-align: center;
|
||
|
|
float: left;
|
||
|
|
position: relative;
|
||
|
|
min-height: 1px;
|
||
|
|
}
|
||
|
|
|
||
|
|
{{ generateForecastCSS.backgrounds(
|
||
|
|
attribute(_context, 'background-image'),
|
||
|
|
attribute(_context, 'cloudy-image'),
|
||
|
|
attribute(_context, 'day-cloudy-image'),
|
||
|
|
attribute(_context, 'day-clear-image'),
|
||
|
|
attribute(_context, 'fog-image'),
|
||
|
|
attribute(_context, 'hail-image'),
|
||
|
|
attribute(_context, 'night-clear-image'),
|
||
|
|
attribute(_context, 'night-partly-cloudy-image'),
|
||
|
|
attribute(_context, 'rain-image'),
|
||
|
|
attribute(_context, 'snow-image'),
|
||
|
|
attribute(_context, 'windy-image')
|
||
|
|
) }}
|
||
|
|
|
||
|
|
{{ generateForecastCSS.colors(
|
||
|
|
attribute(_context, 'background-color'),
|
||
|
|
attribute(_context, 'text-color'),
|
||
|
|
attribute(_context, 'icons-color'),
|
||
|
|
attribute(_context, 'footer-color'),
|
||
|
|
attribute(_context, 'footer-text-color'),
|
||
|
|
attribute(_context, 'footer-icons-color'),
|
||
|
|
attribute(_context, 'shadow-color')
|
||
|
|
) }}
|
||
|
|
]]></style>
|
||
|
|
</stencil>
|
||
|
|
<assets>
|
||
|
|
<asset id="weather_5" type="path" mimeType="image/png" cmsOnly="true" path="/modules/assets/template-thumbnails/forecast/weather_5.png" />
|
||
|
|
</assets>
|
||
|
|
</template>
|
||
|
|
<template>
|
||
|
|
<id>weather_6</id>
|
||
|
|
<type>static</type>
|
||
|
|
<dataType>forecast</dataType>
|
||
|
|
<title>Landscape - Current day detailed table, 4 day forecast</title>
|
||
|
|
<thumbnail>weather_6</thumbnail>
|
||
|
|
<startWidth>950</startWidth>
|
||
|
|
<startHeight>520</startHeight>
|
||
|
|
<properties>
|
||
|
|
<property id="text-color" type="color">
|
||
|
|
<title>Text</title>
|
||
|
|
<helpText>The colour of the text</helpText>
|
||
|
|
<default>#fff</default>
|
||
|
|
</property>
|
||
|
|
<property id="icons-color" type="color">
|
||
|
|
<title>Icons</title>
|
||
|
|
<helpText>The colour of the icons</helpText>
|
||
|
|
<default>#fff</default>
|
||
|
|
</property>
|
||
|
|
<property id="cardsColor" type="color">
|
||
|
|
<title>Cards Background</title>
|
||
|
|
<helpText>The colour of the content cards</helpText>
|
||
|
|
<default>rgba(0, 0, 0, 0.56)</default>
|
||
|
|
</property>
|
||
|
|
<property id="dividerColor" type="color">
|
||
|
|
<title>Dividers Colour</title>
|
||
|
|
<helpText>The colour of the divider elements</helpText>
|
||
|
|
<default>#fff</default>
|
||
|
|
</property>
|
||
|
|
<property id="background-color" type="color">
|
||
|
|
<title>Background</title>
|
||
|
|
<helpText>The colour of the background</helpText>
|
||
|
|
<default></default>
|
||
|
|
</property>
|
||
|
|
<property id="fontFamily" type="fontSelector">
|
||
|
|
<title>Font</title>
|
||
|
|
<helpText>Select a custom font - leave empty to use the default font.</helpText>
|
||
|
|
</property>
|
||
|
|
<property id="background-image" type="dropdown" mode="single">
|
||
|
|
<title>Background Image</title>
|
||
|
|
<helpText>The background image to use</helpText>
|
||
|
|
<default>fit</default>
|
||
|
|
<options>
|
||
|
|
<option name="none">None</option>
|
||
|
|
<option name="fit">Fit</option>
|
||
|
|
<option name="stretch">Stretch</option>
|
||
|
|
<option name="center">Center</option>
|
||
|
|
</options>
|
||
|
|
</property>
|
||
|
|
<property type="header" variant="main">
|
||
|
|
<title>Backgrounds</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property type="message">
|
||
|
|
<title>Select images from the media library to replace the default weather backgrounds.</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="cloudy-image" type="mediaSelector">
|
||
|
|
<title>Cloudy</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="day-cloudy-image" type="mediaSelector">
|
||
|
|
<title>Cloudy day</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="day-sunny-image" type="mediaSelector">
|
||
|
|
<title>Clear</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="fog-image" type="mediaSelector">
|
||
|
|
<title>Fog</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="hail-image" type="mediaSelector">
|
||
|
|
<title>Hail</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="night-clear-image" type="mediaSelector">
|
||
|
|
<title>Clear night</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="night-partly-cloudy-image" type="mediaSelector">
|
||
|
|
<title>Cloudy night</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="rain-image" type="mediaSelector">
|
||
|
|
<title>Raining</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="snow-image" type="mediaSelector">
|
||
|
|
<title>Snowing</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="windy-image" type="mediaSelector">
|
||
|
|
<title>Windy</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
</properties>
|
||
|
|
<stencil>
|
||
|
|
<width id="width">950</width>
|
||
|
|
<height id="height">520</height>
|
||
|
|
<hbs></hbs>
|
||
|
|
<twig><![CDATA[
|
||
|
|
{% if attribute(_context, 'background-image') != 'none' %}
|
||
|
|
<div class="bg-div bg-[icon]"></div>
|
||
|
|
{% endif %}
|
||
|
|
|
||
|
|
<div class="current-day-template" style="display: none;">
|
||
|
|
<div class="container">
|
||
|
|
<div class="row">
|
||
|
|
<div class="weather-col col-9 main-col main-section">
|
||
|
|
<div class="contenedor">
|
||
|
|
<div class="weather-col col-6 pull-left">
|
||
|
|
<div class="feels">||Feels Like||</div>
|
||
|
|
<div class="temp">[apparentTemperatureRound]<sup>°[temperatureUnit]</sup></div>
|
||
|
|
<div class="powered">[Attribution]</div>
|
||
|
|
</div>
|
||
|
|
<div class="weather-col col-6 main-icon"><i class="wi [wicon]"></i></div>
|
||
|
|
</div>
|
||
|
|
<div class="upcoming top-small">
|
||
|
|
<div class="weather-col col-12 text-center">
|
||
|
|
<div class="forecast-container" data-days-num="4"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="weather-col col-3">
|
||
|
|
<div class="weather-col col-12 rightnow small-border ">
|
||
|
|
<div class="now">
|
||
|
|
||Right now||
|
||
|
|
</div>
|
||
|
|
<div class="current-wea">
|
||
|
|
<strong>||Wind||</strong>
|
||
|
|
</div>
|
||
|
|
<div class="extra-info">[windDirection] [windSpeed] [windSpeedUnit]</div>
|
||
|
|
</div>
|
||
|
|
<div class="weather-col col-12 rightnow small-border ">
|
||
|
|
<div class="current-wea">
|
||
|
|
<strong>||Humidity||</strong>
|
||
|
|
</div>
|
||
|
|
<div class="extra-info">[humidityPercent]%</div>
|
||
|
|
</div>
|
||
|
|
<div class="weather-col col-12 rightnow small-border ">
|
||
|
|
<div class="current-wea">
|
||
|
|
<strong>||Pressure||</strong>
|
||
|
|
</div>
|
||
|
|
<div class="extra-info">[pressure] mb</div>
|
||
|
|
</div>
|
||
|
|
<div class="weather-col col-12 rightnow">
|
||
|
|
<div class="current-wea">
|
||
|
|
<strong>||Visibility||</strong>
|
||
|
|
</div>
|
||
|
|
<div class="extra-info">[visibility] [visibilityDistanceUnit]</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="forecast-day-template" style="display: none;">
|
||
|
|
<div class="weather-col col-3 border">
|
||
|
|
<div class="day-title">[time|ddd]</div>
|
||
|
|
<i class="wi [wicon] icon-weather"></i>
|
||
|
|
<div class="temp-small">[temperatureMaxRound] ° [temperatureUnit]</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
]]></twig>
|
||
|
|
<style><![CDATA[
|
||
|
|
{% import "forecastio-css-generator.twig" as generateForecastCSS %}
|
||
|
|
|
||
|
|
body {
|
||
|
|
width: 970px !important;
|
||
|
|
height: 493px !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.text-center {
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
h1 {
|
||
|
|
margin: 0.67em 0;
|
||
|
|
font-size: 2em;
|
||
|
|
}
|
||
|
|
|
||
|
|
.container-fluid:after, .container-fluid:before, .row:after, .row:before {
|
||
|
|
display: table;
|
||
|
|
content: " ";
|
||
|
|
}
|
||
|
|
|
||
|
|
.container-fluid:after, .row:after {
|
||
|
|
clear: both;
|
||
|
|
}
|
||
|
|
|
||
|
|
#content > div {
|
||
|
|
width: 100% !important;
|
||
|
|
height: 100% !important;
|
||
|
|
padding-top: 15px;
|
||
|
|
}
|
||
|
|
|
||
|
|
* {
|
||
|
|
-webkit-box-sizing: border-box;
|
||
|
|
-moz-box-sizing: border-box;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
:after, :before {
|
||
|
|
-webkit-box-sizing: border-box;
|
||
|
|
-moz-box-sizing: border-box;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
{% if fontFamily %}
|
||
|
|
font-family: {{fontFamily}};
|
||
|
|
{% else %}
|
||
|
|
font-family: "Helvetica", "Arial", sans-serif;
|
||
|
|
{% endif %}
|
||
|
|
line-height: 1;
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.container {
|
||
|
|
width: 960px !important;
|
||
|
|
height: 493px !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.contenedor {
|
||
|
|
height: 300px;
|
||
|
|
padding: 70px 20px 0 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.upcoming {
|
||
|
|
height: 193px;
|
||
|
|
border-top: 2px solid {{dividerColor}};
|
||
|
|
}
|
||
|
|
|
||
|
|
{% if cardsColor %}
|
||
|
|
.contenedor, .upcoming, .rightnow {
|
||
|
|
background-color: {{cardsColor}};
|
||
|
|
}
|
||
|
|
{% endif %}
|
||
|
|
|
||
|
|
.city {
|
||
|
|
font-size: 50px;
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
|
||
|
|
.country {
|
||
|
|
font-size: 25px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.temp {
|
||
|
|
font-size: 120px;
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
|
||
|
|
.temp sup {
|
||
|
|
font-size: 50px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.feels {
|
||
|
|
font-size: 30px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.main-icon {
|
||
|
|
font-size: 200px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.day-title {
|
||
|
|
font-style: italic;
|
||
|
|
font-size: 30px;
|
||
|
|
font-weight: lighter;
|
||
|
|
}
|
||
|
|
|
||
|
|
.icon-weather {
|
||
|
|
padding: 25px 0px;
|
||
|
|
font-size: 35px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.temp-small {
|
||
|
|
font-size: 18px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.top-small {
|
||
|
|
padding-top: 30px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.border {
|
||
|
|
border-right: 2px solid {{dividerColor}};
|
||
|
|
}
|
||
|
|
|
||
|
|
.rightnow {
|
||
|
|
height: 123.25px;
|
||
|
|
padding-top: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.now {
|
||
|
|
font-size: 25px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.current-wea {
|
||
|
|
font-size: 22px;
|
||
|
|
padding: 10px 0px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.extra-info {
|
||
|
|
font-size: 18px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.small-border {
|
||
|
|
border-bottom: 2px solid {{dividerColor}};
|
||
|
|
}
|
||
|
|
|
||
|
|
.text-right {
|
||
|
|
text-align: right;
|
||
|
|
}
|
||
|
|
|
||
|
|
.pull-right {
|
||
|
|
float: right !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.col-2 {
|
||
|
|
width: 16.66666667%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.col-3 {
|
||
|
|
width: 25%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.col-4 {
|
||
|
|
width: 33.33333333%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.col-5 {
|
||
|
|
width: 41.66666667%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.col-6 {
|
||
|
|
width: 50%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.col-9 {
|
||
|
|
width: 75%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.col-12 {
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.weather-col {
|
||
|
|
float: left;
|
||
|
|
position: relative;
|
||
|
|
min-height: 1px;
|
||
|
|
padding-right: 15px;
|
||
|
|
padding-left: 15px;
|
||
|
|
}
|
||
|
|
|
||
|
|
{{ generateForecastCSS.backgrounds(
|
||
|
|
attribute(_context, 'background-image'),
|
||
|
|
attribute(_context, 'cloudy-image'),
|
||
|
|
attribute(_context, 'day-cloudy-image'),
|
||
|
|
attribute(_context, 'day-clear-image'),
|
||
|
|
attribute(_context, 'fog-image'),
|
||
|
|
attribute(_context, 'hail-image'),
|
||
|
|
attribute(_context, 'night-clear-image'),
|
||
|
|
attribute(_context, 'night-partly-cloudy-image'),
|
||
|
|
attribute(_context, 'rain-image'),
|
||
|
|
attribute(_context, 'snow-image'),
|
||
|
|
attribute(_context, 'windy-image')
|
||
|
|
) }}
|
||
|
|
|
||
|
|
{{ generateForecastCSS.colors(
|
||
|
|
attribute(_context, 'background-color'),
|
||
|
|
attribute(_context, 'text-color'),
|
||
|
|
attribute(_context, 'icons-color'),
|
||
|
|
null,
|
||
|
|
null,
|
||
|
|
null,
|
||
|
|
null,
|
||
|
|
) }}
|
||
|
|
]]></style>
|
||
|
|
</stencil>
|
||
|
|
<assets>
|
||
|
|
<asset id="weather_6" type="path" mimeType="image/png" cmsOnly="true" path="/modules/assets/template-thumbnails/forecast/weather_6.png" />
|
||
|
|
</assets>
|
||
|
|
</template>
|
||
|
|
<template>
|
||
|
|
<id>weather_7</id>
|
||
|
|
<type>static</type>
|
||
|
|
<dataType>forecast</dataType>
|
||
|
|
<title>Square - Current day</title>
|
||
|
|
<thumbnail>weather_7</thumbnail>
|
||
|
|
<startWidth>540</startWidth>
|
||
|
|
<startHeight>540</startHeight>
|
||
|
|
<properties>
|
||
|
|
<property id="text-color" type="color">
|
||
|
|
<title>Text</title>
|
||
|
|
<helpText>The colour of the text</helpText>
|
||
|
|
<default>#fff</default>
|
||
|
|
</property>
|
||
|
|
<property id="icons-color" type="color">
|
||
|
|
<title>Icons</title>
|
||
|
|
<helpText>The colour of the icons</helpText>
|
||
|
|
<default>#fff</default>
|
||
|
|
</property>
|
||
|
|
<property id="shadow-color" type="color">
|
||
|
|
<title>Shadow</title>
|
||
|
|
<helpText>The colour of the shadow</helpText>
|
||
|
|
<default>#111</default>
|
||
|
|
</property>
|
||
|
|
<property id="background-color" type="color">
|
||
|
|
<title>Background</title>
|
||
|
|
<helpText>The colour of the background</helpText>
|
||
|
|
<default></default>
|
||
|
|
</property>
|
||
|
|
<property id="fontFamily" type="fontSelector">
|
||
|
|
<title>Font</title>
|
||
|
|
<helpText>Select a custom font - leave empty to use the default font.</helpText>
|
||
|
|
</property>
|
||
|
|
<property id="background-image" type="dropdown" mode="single">
|
||
|
|
<title>Background Image</title>
|
||
|
|
<helpText>The background image to use</helpText>
|
||
|
|
<default>fit</default>
|
||
|
|
<options>
|
||
|
|
<option name="none">None</option>
|
||
|
|
<option name="fit">Fit</option>
|
||
|
|
<option name="stretch">Stretch</option>
|
||
|
|
<option name="center">Center</option>
|
||
|
|
</options>
|
||
|
|
</property>
|
||
|
|
<property type="header" variant="main">
|
||
|
|
<title>Backgrounds</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property type="message">
|
||
|
|
<title>Select images from the media library to replace the default weather backgrounds.</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="cloudy-image" type="mediaSelector">
|
||
|
|
<title>Cloudy</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="day-cloudy-image" type="mediaSelector">
|
||
|
|
<title>Cloudy day</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="day-sunny-image" type="mediaSelector">
|
||
|
|
<title>Clear</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="fog-image" type="mediaSelector">
|
||
|
|
<title>Fog</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="hail-image" type="mediaSelector">
|
||
|
|
<title>Hail</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="night-clear-image" type="mediaSelector">
|
||
|
|
<title>Clear night</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="night-partly-cloudy-image" type="mediaSelector">
|
||
|
|
<title>Cloudy night</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="rain-image" type="mediaSelector">
|
||
|
|
<title>Raining</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="snow-image" type="mediaSelector">
|
||
|
|
<title>Snowing</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="windy-image" type="mediaSelector">
|
||
|
|
<title>Windy</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
</properties>
|
||
|
|
<stencil>
|
||
|
|
<width id="width">540</width>
|
||
|
|
<height id="height">540</height>
|
||
|
|
<hbs></hbs>
|
||
|
|
<twig><![CDATA[
|
||
|
|
{% if attribute(_context, 'background-image') != 'none' %}
|
||
|
|
<div class="bg-div bg-[icon]"></div>
|
||
|
|
{% endif %}
|
||
|
|
|
||
|
|
<div class="current-day-template" style="display: none;">
|
||
|
|
<div class="container">
|
||
|
|
<div class="row main-cont center-block">
|
||
|
|
<div class="weather-col col-12 upcoming-days">
|
||
|
|
<div class="small-icon shadowed"><i class="wi [wicon]"></i></div>
|
||
|
|
<div class="summary shadowed">[summary]</div>
|
||
|
|
<div class="big-temp shadowed">[temperatureRound]<sup>°[temperatureUnit]</sup></div>
|
||
|
|
<div class="powered">[Attribution]</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
]]></twig>
|
||
|
|
<style><![CDATA[
|
||
|
|
{% import "forecastio-css-generator.twig" as generateForecastCSS %}
|
||
|
|
|
||
|
|
body {
|
||
|
|
width: 540px !important;
|
||
|
|
height: 540px !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
#content {
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.center-block {
|
||
|
|
display: block;
|
||
|
|
margin-right: auto;
|
||
|
|
margin-left: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.container {
|
||
|
|
padding-right: 15px;
|
||
|
|
padding-left: 15px;
|
||
|
|
margin-right: auto;
|
||
|
|
margin-left: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.text-center {
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
h1 {
|
||
|
|
margin: 0.67em 0;
|
||
|
|
font-size: 2em;
|
||
|
|
}
|
||
|
|
|
||
|
|
.container-fluid:after, .container-fluid:before, .row:after, .row:before {
|
||
|
|
display: table;
|
||
|
|
content: " ";
|
||
|
|
}
|
||
|
|
|
||
|
|
.container-fluid:after, .row:after {
|
||
|
|
clear: both;
|
||
|
|
}
|
||
|
|
|
||
|
|
* {
|
||
|
|
-webkit-box-sizing: border-box;
|
||
|
|
-moz-box-sizing: border-box;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
:after, :before {
|
||
|
|
-webkit-box-sizing: border-box;
|
||
|
|
-moz-box-sizing: border-box;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
{% if fontFamily %}
|
||
|
|
font-family: {{fontFamily}};
|
||
|
|
{% else %}
|
||
|
|
font-family: "Helvetica", "Arial", sans-serif;
|
||
|
|
{% endif %}
|
||
|
|
line-height: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.container {
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-size: cover;
|
||
|
|
background-position: center;
|
||
|
|
width: 540px !important;
|
||
|
|
height: 540px !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.main-panel {
|
||
|
|
margin-top: 74px;
|
||
|
|
height: 137px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.big-icon {
|
||
|
|
font-size: 200px;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.date {
|
||
|
|
|
||
|
|
font-size: 18px;
|
||
|
|
{% if fontFamily %}
|
||
|
|
font-family: {{fontFamily}};
|
||
|
|
{% else %}
|
||
|
|
font-family: "Helvetica", "Arial", sans-serif;
|
||
|
|
{% endif %}
|
||
|
|
font-weight: light;
|
||
|
|
padding-bottom: 1px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.month {
|
||
|
|
font-size: 15px;
|
||
|
|
|
||
|
|
{% if fontFamily %}
|
||
|
|
font-family: {{fontFamily}};
|
||
|
|
{% else %}
|
||
|
|
font-family: "Helvetica", "Arial", sans-serif;
|
||
|
|
{% endif %}
|
||
|
|
font-weight: light;
|
||
|
|
}
|
||
|
|
|
||
|
|
.current-temp {
|
||
|
|
{% if fontFamily %}
|
||
|
|
font-family: {{fontFamily}};
|
||
|
|
{% else %}
|
||
|
|
font-family: "Helvetica", "Arial", sans-serif;
|
||
|
|
{% endif %}
|
||
|
|
font-weight: bold;
|
||
|
|
font-size: 100px;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.main-cont {
|
||
|
|
width: 400px;
|
||
|
|
|
||
|
|
padding: 90px 50px;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.main-icon {
|
||
|
|
font-size: 70px;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.summary {
|
||
|
|
font-weight: bold;
|
||
|
|
font-size: 30px;
|
||
|
|
padding-top: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.powered {
|
||
|
|
font-weight: light;
|
||
|
|
font-size: 15px;
|
||
|
|
padding-bottom: 40px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.small-day {
|
||
|
|
padding-top: 50px;
|
||
|
|
font-size: 28px;
|
||
|
|
font-style: italic;
|
||
|
|
font-weight: lighter;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.small-icon {
|
||
|
|
font-size: 130px;
|
||
|
|
padding: 20px 0px 40px 0px;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.big-temp {
|
||
|
|
padding-top: 20px;
|
||
|
|
font-size: 120px;
|
||
|
|
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
|
||
|
|
.big-temp sup {
|
||
|
|
font-size: 50px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.even {
|
||
|
|
background-color: rgba(0, 0, 0, 0.6);
|
||
|
|
background: rgba(0, 0, 0, 0.6);
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.odd {
|
||
|
|
background-color: rgba(0, 0, 0, 0.8);
|
||
|
|
background: rgba(0, 0, 0, 0.8);
|
||
|
|
color: #fff !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.details-box {
|
||
|
|
height: 290px;
|
||
|
|
padding-left: 30px;
|
||
|
|
color: #272625;
|
||
|
|
}
|
||
|
|
|
||
|
|
.upcoming-days {
|
||
|
|
height: 365px;
|
||
|
|
text-align: center;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.selector-day {
|
||
|
|
font-size: 15px;
|
||
|
|
font-weight: light;
|
||
|
|
margin-top: 25px;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.selector-temp {
|
||
|
|
font-size: 25px;
|
||
|
|
font-weight: bold;
|
||
|
|
font-style: italic;
|
||
|
|
}
|
||
|
|
|
||
|
|
.arrow-down {
|
||
|
|
width: 0;
|
||
|
|
height: 0;
|
||
|
|
border-left: 20px solid transparent;
|
||
|
|
border-right: 20px solid transparent;
|
||
|
|
border-top: 20px solid rgba(0, 0, 0, 0.8);
|
||
|
|
margin-left: 120px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.row-details {
|
||
|
|
margin-top: 128px;
|
||
|
|
background-color: #fff;
|
||
|
|
height: 182px;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.row-day {
|
||
|
|
padding: 30px 0px;
|
||
|
|
border-bottom: #eee solid 1px;
|
||
|
|
color: #000;
|
||
|
|
}
|
||
|
|
|
||
|
|
.day {
|
||
|
|
font-size: 30px;
|
||
|
|
font-weight: bold;
|
||
|
|
color: #434343;
|
||
|
|
}
|
||
|
|
|
||
|
|
.temp {
|
||
|
|
font-size: 30px;
|
||
|
|
font-weight: light;
|
||
|
|
color: #434343;
|
||
|
|
}
|
||
|
|
|
||
|
|
.icon-up {
|
||
|
|
font-size: 30px;
|
||
|
|
color: color: #434343;
|
||
|
|
}
|
||
|
|
|
||
|
|
.row-time {
|
||
|
|
padding: 20px 0px 10px 0px;
|
||
|
|
|
||
|
|
font-weight: bold;
|
||
|
|
font-size: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.shadowed {
|
||
|
|
text-shadow: 0px 0px 2px #111;
|
||
|
|
filter: dropshadow(color=#111, offx=2, offy=2);
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
{{ generateForecastCSS.backgrounds(
|
||
|
|
attribute(_context, 'background-image'),
|
||
|
|
attribute(_context, 'cloudy-image'),
|
||
|
|
attribute(_context, 'day-cloudy-image'),
|
||
|
|
attribute(_context, 'day-clear-image'),
|
||
|
|
attribute(_context, 'fog-image'),
|
||
|
|
attribute(_context, 'hail-image'),
|
||
|
|
attribute(_context, 'night-clear-image'),
|
||
|
|
attribute(_context, 'night-partly-cloudy-image'),
|
||
|
|
attribute(_context, 'rain-image'),
|
||
|
|
attribute(_context, 'snow-image'),
|
||
|
|
attribute(_context, 'windy-image')
|
||
|
|
) }}
|
||
|
|
|
||
|
|
{{ generateForecastCSS.colors(
|
||
|
|
attribute(_context, 'background-color'),
|
||
|
|
attribute(_context, 'text-color'),
|
||
|
|
attribute(_context, 'icons-color'),
|
||
|
|
null,
|
||
|
|
null,
|
||
|
|
null,
|
||
|
|
attribute(_context, 'shadow-color'),
|
||
|
|
) }}
|
||
|
|
]]></style>
|
||
|
|
</stencil>
|
||
|
|
<assets>
|
||
|
|
<asset id="weather_7" type="path" mimeType="image/png" cmsOnly="true" path="/modules/assets/template-thumbnails/forecast/weather_7.png" />
|
||
|
|
</assets>
|
||
|
|
</template>
|
||
|
|
<template>
|
||
|
|
<id>weather_8</id>
|
||
|
|
<type>static</type>
|
||
|
|
<dataType>forecast</dataType>
|
||
|
|
<title>Landscape - Current day, 4 day forecast</title>
|
||
|
|
<thumbnail>weather_8</thumbnail>
|
||
|
|
<startWidth>970</startWidth>
|
||
|
|
<startHeight>700</startHeight>
|
||
|
|
<properties>
|
||
|
|
<property id="text-color" type="color">
|
||
|
|
<title>Text</title>
|
||
|
|
<helpText>The colour of the text</helpText>
|
||
|
|
<default>#fff</default>
|
||
|
|
</property>
|
||
|
|
<property id="icons-color" type="color">
|
||
|
|
<title>Icons</title>
|
||
|
|
<helpText>The colour of the icons</helpText>
|
||
|
|
<default>#fff</default>
|
||
|
|
</property>
|
||
|
|
<property id="background-color" type="color">
|
||
|
|
<title>Background</title>
|
||
|
|
<helpText>The colour of the background</helpText>
|
||
|
|
<default></default>
|
||
|
|
</property>
|
||
|
|
<property id="shadow-color" type="color">
|
||
|
|
<title>Shadow</title>
|
||
|
|
<helpText>The colour of the shadow</helpText>
|
||
|
|
<default>rgba(0, 0, 0, 0.4)</default>
|
||
|
|
</property>
|
||
|
|
<property id="fontFamily" type="fontSelector">
|
||
|
|
<title>Font</title>
|
||
|
|
<helpText>Select a custom font - leave empty to use the default font.</helpText>
|
||
|
|
</property>
|
||
|
|
<property id="background-image" type="dropdown" mode="single">
|
||
|
|
<title>Background Image</title>
|
||
|
|
<helpText>The background image to use</helpText>
|
||
|
|
<default>fit</default>
|
||
|
|
<options>
|
||
|
|
<option name="none">None</option>
|
||
|
|
<option name="fit">Fit</option>
|
||
|
|
<option name="stretch">Stretch</option>
|
||
|
|
<option name="center">Center</option>
|
||
|
|
</options>
|
||
|
|
</property>
|
||
|
|
<property type="header" variant="main">
|
||
|
|
<title>Backgrounds</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property type="message">
|
||
|
|
<title>Select images from the media library to replace the default weather backgrounds.</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="cloudy-image" type="mediaSelector">
|
||
|
|
<title>Cloudy</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="day-cloudy-image" type="mediaSelector">
|
||
|
|
<title>Cloudy day</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="day-sunny-image" type="mediaSelector">
|
||
|
|
<title>Clear</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="fog-image" type="mediaSelector">
|
||
|
|
<title>Fog</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="hail-image" type="mediaSelector">
|
||
|
|
<title>Hail</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="night-clear-image" type="mediaSelector">
|
||
|
|
<title>Clear night</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="night-partly-cloudy-image" type="mediaSelector">
|
||
|
|
<title>Cloudy night</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="rain-image" type="mediaSelector">
|
||
|
|
<title>Raining</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="snow-image" type="mediaSelector">
|
||
|
|
<title>Snowing</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="windy-image" type="mediaSelector">
|
||
|
|
<title>Windy</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
</properties>
|
||
|
|
<stencil>
|
||
|
|
<width id="width">970</width>
|
||
|
|
<height id="height">700</height>
|
||
|
|
<hbs></hbs>
|
||
|
|
<twig><![CDATA[
|
||
|
|
{% if attribute(_context, 'background-image') != 'none' %}
|
||
|
|
<div class="bg-div bg-[icon]"></div>
|
||
|
|
{% endif %}
|
||
|
|
|
||
|
|
<div class="current-day-template" style="display: none;">
|
||
|
|
<div class="container">
|
||
|
|
<div class="row main-panel">
|
||
|
|
<div class="offset-xs-1 weather-col col-3">
|
||
|
|
<div class="row">
|
||
|
|
<div class="date shadowed">[time|ddd] [time|DD]</div>
|
||
|
|
<div class="month shadowed">[time|MMM]</div>
|
||
|
|
<div class="current-temp shadowed">[temperatureRound]<sup>°[temperatureUnit]</sup></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="weather-col col-7 text-right">
|
||
|
|
<div class="main-icon"><i class="wi [wicon] shadowed"></i></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row footer">
|
||
|
|
<div class="forecast-container" data-days-num="4"></div>
|
||
|
|
</div>
|
||
|
|
<div class="month powered">[Attribution]</div></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="forecast-day-template" style="display: none;">
|
||
|
|
<div class="weather-col col-3">
|
||
|
|
<div class="small-day shadowed">[time|ddd]</div>
|
||
|
|
<div class="small-icon shadowed"><i class="wi [wicon]"></i></div>
|
||
|
|
<div class="small-temp shadowed">[temperatureMaxRound] ° [temperatureUnit] </div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
]]></twig>
|
||
|
|
<style><![CDATA[
|
||
|
|
{% import "forecastio-css-generator.twig" as generateForecastCSS %}
|
||
|
|
|
||
|
|
body {
|
||
|
|
width: 970px !important;
|
||
|
|
height: 700px !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
#content {
|
||
|
|
color: #f9f9f9;
|
||
|
|
}
|
||
|
|
|
||
|
|
.center-block {
|
||
|
|
display: block;
|
||
|
|
margin-right: auto;
|
||
|
|
margin-left: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.text-center {
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
h1 {
|
||
|
|
margin: 0.67em 0;
|
||
|
|
font-size: 2em;
|
||
|
|
}
|
||
|
|
|
||
|
|
.container:after, .container:before, .row:after, .row:before {
|
||
|
|
display: table;
|
||
|
|
content: " ";
|
||
|
|
}
|
||
|
|
.container:after, .row:after {
|
||
|
|
clear: both;
|
||
|
|
}
|
||
|
|
|
||
|
|
* {
|
||
|
|
-webkit-box-sizing: border-box;
|
||
|
|
-moz-box-sizing: border-box;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
:after,:before {
|
||
|
|
-webkit-box-sizing: border-box;
|
||
|
|
-moz-box-sizing: border-box;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
{% if fontFamily %}
|
||
|
|
font-family: {{fontFamily}};
|
||
|
|
{% else %}
|
||
|
|
font-family: "Helvetica", "Arial", sans-serif;
|
||
|
|
{% endif %}
|
||
|
|
line-height: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.container {
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-size: cover;
|
||
|
|
background-position: center;
|
||
|
|
width: 970px !important;
|
||
|
|
height: 700px !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.shadowed {
|
||
|
|
text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.4);
|
||
|
|
filter: dropshadow(color=rgba(0, 0, 0, 0.4), offx=2, offy=2);
|
||
|
|
}
|
||
|
|
|
||
|
|
.main-panel {
|
||
|
|
margin-top: 100px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.date {
|
||
|
|
text-transform: uppercase;;
|
||
|
|
font-size: 50px;
|
||
|
|
{% if fontFamily %}
|
||
|
|
font-family: {{fontFamily}};
|
||
|
|
{% else %}
|
||
|
|
font-family: "Helvetica", "Arial", sans-serif;
|
||
|
|
{% endif %}
|
||
|
|
font-weight: bold;
|
||
|
|
padding-bottom: 5px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.month {
|
||
|
|
font-size: 40px;;
|
||
|
|
{% if fontFamily %}
|
||
|
|
font-family: {{fontFamily}};
|
||
|
|
{% else %}
|
||
|
|
font-family: "Helvetica", "Arial", sans-serif;
|
||
|
|
{% endif %}
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
|
||
|
|
.current-temp {
|
||
|
|
{% if fontFamily %}
|
||
|
|
font-family: {{fontFamily}};
|
||
|
|
{% else %}
|
||
|
|
font-family: "Helvetica", "Arial", sans-serif;
|
||
|
|
{% endif %}
|
||
|
|
font-weight: bold;
|
||
|
|
font-size: 130px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.current-temp sup {
|
||
|
|
font-size: 50px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.footer {
|
||
|
|
margin-top: 120px;
|
||
|
|
height: 220px;
|
||
|
|
text-align: center;
|
||
|
|
padding: 30px 0px;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.main-icon {
|
||
|
|
font-size: 200px;;
|
||
|
|
}
|
||
|
|
|
||
|
|
.small-day {
|
||
|
|
font-size: 30px;
|
||
|
|
font-style: italic;
|
||
|
|
font-weight: light;
|
||
|
|
}
|
||
|
|
|
||
|
|
.small-icon {
|
||
|
|
font-size: 60px;
|
||
|
|
padding: 30px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.small-temp {
|
||
|
|
font-size: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.powered {
|
||
|
|
background-color: #fff;
|
||
|
|
color: #545454;
|
||
|
|
font-size: 18px;
|
||
|
|
padding: 6px;
|
||
|
|
position: absolute;
|
||
|
|
width: 100%;
|
||
|
|
bottom: 0;
|
||
|
|
text-align: center;
|
||
|
|
left: 0;
|
||
|
|
line-height: 18px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.bg-partly-cloudy-day {
|
||
|
|
background-image: url('[day-cloudy-image]');
|
||
|
|
}
|
||
|
|
|
||
|
|
.bg-clear-day {
|
||
|
|
background-image: url('[day-sunny-image]');
|
||
|
|
}
|
||
|
|
|
||
|
|
.bg-fog {
|
||
|
|
background-image: url('[fog-image]');
|
||
|
|
}
|
||
|
|
|
||
|
|
.bg-sleet {
|
||
|
|
background-image: url('[hail-image]');
|
||
|
|
}
|
||
|
|
|
||
|
|
.bg-clear-night {
|
||
|
|
background-image: url('[night-clear-image]');
|
||
|
|
}
|
||
|
|
|
||
|
|
.bg-partly-cloudy-night {
|
||
|
|
background-image: url('[night-partly-cloudy-image]');
|
||
|
|
}
|
||
|
|
|
||
|
|
.bg-rain {
|
||
|
|
background-image: url('[rain-image]');
|
||
|
|
}
|
||
|
|
|
||
|
|
.bg-snow {
|
||
|
|
background-image: url('[snow-image]');
|
||
|
|
}
|
||
|
|
|
||
|
|
.bg-wind {
|
||
|
|
background-image: url('[windy-image]');
|
||
|
|
}
|
||
|
|
.text-right {
|
||
|
|
text-align: right;
|
||
|
|
}
|
||
|
|
|
||
|
|
.pull-right {
|
||
|
|
float: right!important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.offset-xs-1 {
|
||
|
|
margin-left: 8.33333333%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.col-2 {
|
||
|
|
width: 16.66666667%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.col-3 {
|
||
|
|
width: 25%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.col-4 {
|
||
|
|
width: 33.33333333%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.col-5 {
|
||
|
|
width: 41.66666667%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.col-6 {
|
||
|
|
width: 50%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.col-7 {
|
||
|
|
width: 58.33333333%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.col-9 {
|
||
|
|
width: 75%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.col-12 {
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.weather-col {
|
||
|
|
float: left;
|
||
|
|
position: relative;
|
||
|
|
min-height: 1px;
|
||
|
|
padding-right: 15px;
|
||
|
|
padding-left: 15px;
|
||
|
|
}
|
||
|
|
|
||
|
|
{{ generateForecastCSS.backgrounds(
|
||
|
|
attribute(_context, 'background-image'),
|
||
|
|
attribute(_context, 'cloudy-image'),
|
||
|
|
attribute(_context, 'day-cloudy-image'),
|
||
|
|
attribute(_context, 'day-clear-image'),
|
||
|
|
attribute(_context, 'fog-image'),
|
||
|
|
attribute(_context, 'hail-image'),
|
||
|
|
attribute(_context, 'night-clear-image'),
|
||
|
|
attribute(_context, 'night-partly-cloudy-image'),
|
||
|
|
attribute(_context, 'rain-image'),
|
||
|
|
attribute(_context, 'snow-image'),
|
||
|
|
attribute(_context, 'windy-image')
|
||
|
|
) }}
|
||
|
|
|
||
|
|
{{ generateForecastCSS.colors(
|
||
|
|
attribute(_context, 'background-color'),
|
||
|
|
attribute(_context, 'text-color'),
|
||
|
|
attribute(_context, 'icons-color'),
|
||
|
|
null,
|
||
|
|
null,
|
||
|
|
null,
|
||
|
|
attribute(_context, 'shadow-color')
|
||
|
|
) }}
|
||
|
|
]]></style>
|
||
|
|
</stencil>
|
||
|
|
<assets>
|
||
|
|
<asset id="weather_8" type="path" mimeType="image/png" cmsOnly="true" path="/modules/assets/template-thumbnails/forecast/weather_8.png" />
|
||
|
|
</assets>
|
||
|
|
</template>
|
||
|
|
<template>
|
||
|
|
<id>weather_9</id>
|
||
|
|
<type>static</type>
|
||
|
|
<dataType>forecast</dataType>
|
||
|
|
<title>Portrait - Current day, 4 day forecast</title>
|
||
|
|
<thumbnail>weather_9</thumbnail>
|
||
|
|
<startWidth>540</startWidth>
|
||
|
|
<startHeight>960</startHeight>
|
||
|
|
<properties>
|
||
|
|
<property id="text-color" type="color">
|
||
|
|
<title>Text</title>
|
||
|
|
<helpText>The colour of the text</helpText>
|
||
|
|
<default>#fff</default>
|
||
|
|
</property>
|
||
|
|
<property id="icons-color" type="color">
|
||
|
|
<title>Icons</title>
|
||
|
|
<helpText>The colour of the icons</helpText>
|
||
|
|
<default>#fff</default>
|
||
|
|
</property>
|
||
|
|
<property id="shadow-color" type="color">
|
||
|
|
<title>Shadow</title>
|
||
|
|
<helpText>The colour of the shadow</helpText>
|
||
|
|
<default>#111</default>
|
||
|
|
</property>
|
||
|
|
<property id="background-color" type="color">
|
||
|
|
<title>Background</title>
|
||
|
|
<helpText>The colour of the background</helpText>
|
||
|
|
<default></default>
|
||
|
|
</property>
|
||
|
|
<property id="fontFamily" type="fontSelector">
|
||
|
|
<title>Font</title>
|
||
|
|
<helpText>Select a custom font - leave empty to use the default font.</helpText>
|
||
|
|
</property>
|
||
|
|
<property id="background-image" type="dropdown" mode="single">
|
||
|
|
<title>Background Image</title>
|
||
|
|
<helpText>The background image to use</helpText>
|
||
|
|
<default>fit</default>
|
||
|
|
<options>
|
||
|
|
<option name="none">None</option>
|
||
|
|
<option name="fit">Fit</option>
|
||
|
|
<option name="stretch">Stretch</option>
|
||
|
|
<option name="center">Center</option>
|
||
|
|
</options>
|
||
|
|
</property>
|
||
|
|
<property type="header" variant="main">
|
||
|
|
<title>Backgrounds</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property type="message">
|
||
|
|
<title>Select images from the media library to replace the default weather backgrounds.</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="cloudy-image" type="mediaSelector">
|
||
|
|
<title>Cloudy</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="day-cloudy-image" type="mediaSelector">
|
||
|
|
<title>Cloudy day</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="day-sunny-image" type="mediaSelector">
|
||
|
|
<title>Clear</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="fog-image" type="mediaSelector">
|
||
|
|
<title>Fog</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="hail-image" type="mediaSelector">
|
||
|
|
<title>Hail</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="night-clear-image" type="mediaSelector">
|
||
|
|
<title>Clear night</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="night-partly-cloudy-image" type="mediaSelector">
|
||
|
|
<title>Cloudy night</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="rain-image" type="mediaSelector">
|
||
|
|
<title>Raining</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="snow-image" type="mediaSelector">
|
||
|
|
<title>Snowing</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="windy-image" type="mediaSelector">
|
||
|
|
<title>Windy</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
</properties>
|
||
|
|
<stencil>
|
||
|
|
<width id="width">540</width>
|
||
|
|
<height id="height">960</height>
|
||
|
|
<hbs></hbs>
|
||
|
|
<twig><![CDATA[
|
||
|
|
{% if attribute(_context, 'background-image') != 'none' %}
|
||
|
|
<div class="bg-div bg-[icon]"></div>
|
||
|
|
{% endif %}
|
||
|
|
|
||
|
|
<div class="current-day-template" style="display: none;">
|
||
|
|
<div class="container">
|
||
|
|
<div class="row main-cont center-block">
|
||
|
|
<div class="weather-col col-12 upcoming-days">
|
||
|
|
<div class="weather-col col-6">
|
||
|
|
<div class="small-icon shadowed"><i class="wi [wicon]"></i></div>
|
||
|
|
</div>
|
||
|
|
<div class="weather-col col-6" style="padding-top: 20px;">
|
||
|
|
<div class="big-temp shadowed">[temperatureRound]<sup>°[temperatureUnit]</sup></div>
|
||
|
|
<div class="summary shadowed">[summary]</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row row-details text-center">
|
||
|
|
<div class="forecast-container" data-days-num="4"></div>
|
||
|
|
<div class="powered">[Attribution]</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="forecast-day-template" style="display: none;">
|
||
|
|
<div class="weather-col col-12 row-day">
|
||
|
|
<div class="weather-col col-4 day shadowed">[time|dddd]</div>
|
||
|
|
<div class="weather-col col-4 temp shadowed"><i class="wi [wicon]"></i></div>
|
||
|
|
<div class="weather-col col-4 icon-up shadowed">[temperatureMinRound]° - [temperatureMaxRound]° [temperatureUnit]</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
]]></twig>
|
||
|
|
<style><![CDATA[
|
||
|
|
{% import "forecastio-css-generator.twig" as generateForecastCSS %}
|
||
|
|
|
||
|
|
body {
|
||
|
|
width: 540px !important;
|
||
|
|
height: 960px !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
#content {
|
||
|
|
color: #f9f9f9;
|
||
|
|
}
|
||
|
|
|
||
|
|
.center-block {
|
||
|
|
display: block;
|
||
|
|
margin-right: auto;
|
||
|
|
margin-left: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.text-center {
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
h1 {
|
||
|
|
margin: 0.67em 0;
|
||
|
|
font-size: 2em;
|
||
|
|
}
|
||
|
|
|
||
|
|
.container:after, .container:before, .row:after, .row:before {
|
||
|
|
display: table;
|
||
|
|
content: " ";
|
||
|
|
}
|
||
|
|
.container:after, .row:after {
|
||
|
|
clear: both;
|
||
|
|
}
|
||
|
|
|
||
|
|
* {
|
||
|
|
-webkit-box-sizing: border-box;
|
||
|
|
-moz-box-sizing: border-box;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
:after,:before {
|
||
|
|
-webkit-box-sizing: border-box;
|
||
|
|
-moz-box-sizing: border-box;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
{% if fontFamily %}
|
||
|
|
font-family: {{fontFamily}};
|
||
|
|
{% else %}
|
||
|
|
font-family: "Helvetica", "Arial", sans-serif;
|
||
|
|
{% endif %}
|
||
|
|
line-height: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.container {
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-size: cover;
|
||
|
|
background-position: center;
|
||
|
|
width: 540px !important;
|
||
|
|
height: 960px !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.main-panel {
|
||
|
|
margin-top: 74px;
|
||
|
|
height: 137px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.big-icon {
|
||
|
|
font-size: 200px;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.date {
|
||
|
|
font-size: 18px;
|
||
|
|
{% if fontFamily %}
|
||
|
|
font-family: {{fontFamily}};
|
||
|
|
{% else %}
|
||
|
|
font-family: "Helvetica", "Arial", sans-serif;
|
||
|
|
{% endif %}
|
||
|
|
font-weight: light;
|
||
|
|
padding-bottom: 1px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.month {
|
||
|
|
font-size: 15px;
|
||
|
|
|
||
|
|
{% if fontFamily %}
|
||
|
|
font-family: {{fontFamily}};
|
||
|
|
{% else %}
|
||
|
|
font-family: "Helvetica", "Arial", sans-serif;
|
||
|
|
{% endif %}
|
||
|
|
font-weight: light;
|
||
|
|
}
|
||
|
|
|
||
|
|
.current-temp {
|
||
|
|
{% if fontFamily %}
|
||
|
|
font-family: {{fontFamily}};
|
||
|
|
{% else %}
|
||
|
|
font-family: "Helvetica", "Arial", sans-serif;
|
||
|
|
{% endif %}
|
||
|
|
font-weight: bold;
|
||
|
|
font-size: 100px;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.main-cont {
|
||
|
|
margin-top: 50px;
|
||
|
|
width: 500px;
|
||
|
|
height: 380px;
|
||
|
|
|
||
|
|
padding: 0px 40px;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.main-icon {
|
||
|
|
font-size: 70px;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.city {
|
||
|
|
font-weight: bold;
|
||
|
|
font-size: 40px;
|
||
|
|
padding-top: 30px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.country {
|
||
|
|
font-weight: light;
|
||
|
|
font-size: 15px;
|
||
|
|
padding-bottom: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.small-day {
|
||
|
|
padding-top: 50px;
|
||
|
|
font-size: 28px;
|
||
|
|
font-style: italic;
|
||
|
|
font-weight: lighter;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.small-icon {
|
||
|
|
font-size: 120px;
|
||
|
|
padding: 35px 0px;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.big-temp {
|
||
|
|
font-size: 90px;
|
||
|
|
|
||
|
|
font-weight: bold;
|
||
|
|
float: right;
|
||
|
|
}
|
||
|
|
|
||
|
|
.big-temp sup {
|
||
|
|
font-size: 40px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.even {
|
||
|
|
background-color: rgba(0, 0, 0, 0.6);
|
||
|
|
background: rgba(0, 0, 0, 0.6);
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.odd {
|
||
|
|
background-color: rgba(0, 0, 0, 0.8);
|
||
|
|
background: rgba(0, 0, 0, 0.8);
|
||
|
|
color: #fff !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.details-box {
|
||
|
|
height: 290px;
|
||
|
|
padding-left: 30px;
|
||
|
|
padding-top: 40px;
|
||
|
|
color: #272625;
|
||
|
|
}
|
||
|
|
|
||
|
|
.upcoming-days {
|
||
|
|
height: 365px;
|
||
|
|
text-align: center;
|
||
|
|
|
||
|
|
padding-top: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.selector-day {
|
||
|
|
font-size: 15px;
|
||
|
|
font-weight: light;
|
||
|
|
margin-top: 25px;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.selector-temp {
|
||
|
|
font-size: 25px;
|
||
|
|
font-weight: bold;
|
||
|
|
font-style: italic;
|
||
|
|
}
|
||
|
|
|
||
|
|
.arrow-down {
|
||
|
|
width: 0;
|
||
|
|
height: 0;
|
||
|
|
border-left: 20px solid transparent;
|
||
|
|
border-right: 20px solid transparent;
|
||
|
|
border-top: 20px solid rgba(0, 0, 0, 0.8);
|
||
|
|
margin-left: 120px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.row-details {
|
||
|
|
margin-top: 145px;
|
||
|
|
height: 360px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.row-day {
|
||
|
|
padding: 30px 0px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.day {
|
||
|
|
font-size: 25px;
|
||
|
|
font-weight: lighter;
|
||
|
|
|
||
|
|
font-style: italic;
|
||
|
|
text-align: left;
|
||
|
|
text-transform: uppercase;
|
||
|
|
}
|
||
|
|
|
||
|
|
.temp {
|
||
|
|
font-size: 25px;
|
||
|
|
font-weight: light;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.icon-up {
|
||
|
|
font-size: 30px;
|
||
|
|
color: color: #fff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.summary {
|
||
|
|
font-weight: bold;
|
||
|
|
font-size: 20px;
|
||
|
|
padding-top: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.powered {
|
||
|
|
font-weight: light;
|
||
|
|
font-size: 15px;
|
||
|
|
padding-bottom: 40px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.shadowed {
|
||
|
|
text-shadow: 0px 0px 2px #111;
|
||
|
|
filter: dropshadow(color=#111, offx=2, offy=2);
|
||
|
|
}
|
||
|
|
|
||
|
|
.text-right {
|
||
|
|
text-align: right;
|
||
|
|
}
|
||
|
|
|
||
|
|
.pull-right {
|
||
|
|
float: right!important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.offset-xs-1 {
|
||
|
|
margin-left: 8.33333333%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.col-2 {
|
||
|
|
width: 16.66666667%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.col-3 {
|
||
|
|
width: 25%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.col-4 {
|
||
|
|
width: 33.33333333%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.col-5 {
|
||
|
|
width: 41.66666667%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.col-6 {
|
||
|
|
width: 50%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.col-7 {
|
||
|
|
width: 58.33333333%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.col-9 {
|
||
|
|
width: 75%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.col-12 {
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.weather-col {
|
||
|
|
float: left;
|
||
|
|
position: relative;
|
||
|
|
min-height: 1px;
|
||
|
|
padding-right: 10px;
|
||
|
|
padding-left: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
{{ generateForecastCSS.backgrounds(
|
||
|
|
attribute(_context, 'background-image'),
|
||
|
|
attribute(_context, 'cloudy-image'),
|
||
|
|
attribute(_context, 'day-cloudy-image'),
|
||
|
|
attribute(_context, 'day-clear-image'),
|
||
|
|
attribute(_context, 'fog-image'),
|
||
|
|
attribute(_context, 'hail-image'),
|
||
|
|
attribute(_context, 'night-clear-image'),
|
||
|
|
attribute(_context, 'night-partly-cloudy-image'),
|
||
|
|
attribute(_context, 'rain-image'),
|
||
|
|
attribute(_context, 'snow-image'),
|
||
|
|
attribute(_context, 'windy-image')
|
||
|
|
) }}
|
||
|
|
|
||
|
|
{{ generateForecastCSS.colors(
|
||
|
|
attribute(_context, 'background-color'),
|
||
|
|
attribute(_context, 'text-color'),
|
||
|
|
attribute(_context, 'icons-color'),
|
||
|
|
null,
|
||
|
|
null,
|
||
|
|
null,
|
||
|
|
attribute(_context, 'shadow-color')
|
||
|
|
) }}
|
||
|
|
]]></style>
|
||
|
|
</stencil>
|
||
|
|
<assets>
|
||
|
|
<asset id="weather_9" type="path" mimeType="image/png" cmsOnly="true" path="/modules/assets/template-thumbnails/forecast/weather_9.png" />
|
||
|
|
</assets>
|
||
|
|
</template>
|
||
|
|
<template>
|
||
|
|
<id>weather_10</id>
|
||
|
|
<type>static</type>
|
||
|
|
<dataType>forecast</dataType>
|
||
|
|
<title>Landscape - Current day detailed, 4 day forecast</title>
|
||
|
|
<thumbnail>weather_10</thumbnail>
|
||
|
|
<startWidth>960</startWidth>
|
||
|
|
<startHeight>540</startHeight>
|
||
|
|
<properties>
|
||
|
|
<property id="text-color" type="color">
|
||
|
|
<title>Text</title>
|
||
|
|
<helpText>The colour of the text</helpText>
|
||
|
|
<default>#fff</default>
|
||
|
|
</property>
|
||
|
|
<property id="icons-color" type="color">
|
||
|
|
<title>Icons</title>
|
||
|
|
<helpText>The colour of the icons</helpText>
|
||
|
|
<default>#fff</default>
|
||
|
|
</property>
|
||
|
|
<property id="background-color" type="color">
|
||
|
|
<title>Background</title>
|
||
|
|
<helpText>The colour of the background</helpText>
|
||
|
|
<default></default>
|
||
|
|
</property>
|
||
|
|
<property id="shadow-color" type="color">
|
||
|
|
<title>Shadow</title>
|
||
|
|
<helpText>The colour of the shadow</helpText>
|
||
|
|
<default>rgba(0, 0, 0, 0.4)</default>
|
||
|
|
</property>
|
||
|
|
<property id="footerBackgroundEven" type="color">
|
||
|
|
<title>Footer Background 1</title>
|
||
|
|
<helpText>The colour of the footer background 1</helpText>
|
||
|
|
<default>rgba(255, 255, 255, 0.9)</default>
|
||
|
|
</property>
|
||
|
|
<property id="footerBackgroundOdd" type="color">
|
||
|
|
<title>Footer Background 2</title>
|
||
|
|
<helpText>The colour of the footer background 2</helpText>
|
||
|
|
<default>rgba(255, 255, 255, 0.6)</default>
|
||
|
|
</property>
|
||
|
|
<property id="footer-text-color" type="color">
|
||
|
|
<title>Footer Text</title>
|
||
|
|
<helpText>The colour of the footer text</helpText>
|
||
|
|
<default>#272625</default>
|
||
|
|
</property>
|
||
|
|
<property id="footer-icons-color" type="color">
|
||
|
|
<title>Footer Icons</title>
|
||
|
|
<helpText>The colour of the footer icons</helpText>
|
||
|
|
<default>#272625</default>
|
||
|
|
</property>
|
||
|
|
<property id="fontFamily" type="fontSelector">
|
||
|
|
<title>Font</title>
|
||
|
|
<helpText>Select a custom font - leave empty to use the default font.</helpText>
|
||
|
|
</property>
|
||
|
|
<property id="background-image" type="dropdown" mode="single">
|
||
|
|
<title>Background Image</title>
|
||
|
|
<helpText>The background image to use</helpText>
|
||
|
|
<default>fit</default>
|
||
|
|
<options>
|
||
|
|
<option name="none">None</option>
|
||
|
|
<option name="fit">Fit</option>
|
||
|
|
<option name="stretch">Stretch</option>
|
||
|
|
<option name="center">Center</option>
|
||
|
|
</options>
|
||
|
|
</property>
|
||
|
|
<property type="header" variant="main">
|
||
|
|
<title>Backgrounds</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property type="message">
|
||
|
|
<title>Select images from the media library to replace the default weather backgrounds.</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="cloudy-image" type="mediaSelector">
|
||
|
|
<title>Cloudy</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="day-cloudy-image" type="mediaSelector">
|
||
|
|
<title>Cloudy day</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="day-sunny-image" type="mediaSelector">
|
||
|
|
<title>Clear</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="fog-image" type="mediaSelector">
|
||
|
|
<title>Fog</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="hail-image" type="mediaSelector">
|
||
|
|
<title>Hail</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="night-clear-image" type="mediaSelector">
|
||
|
|
<title>Clear night</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="night-partly-cloudy-image" type="mediaSelector">
|
||
|
|
<title>Cloudy night</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="rain-image" type="mediaSelector">
|
||
|
|
<title>Raining</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="snow-image" type="mediaSelector">
|
||
|
|
<title>Snowing</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="windy-image" type="mediaSelector">
|
||
|
|
<title>Windy</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
</properties>
|
||
|
|
<stencil>
|
||
|
|
<width id="width">960</width>
|
||
|
|
<height id="height">540</height>
|
||
|
|
<hbs></hbs>
|
||
|
|
<twig><![CDATA[
|
||
|
|
{% if attribute(_context, 'background-image') != 'none' %}
|
||
|
|
<div class="bg-div bg-[icon]"></div>
|
||
|
|
{% endif %}
|
||
|
|
|
||
|
|
<div class="current-day-template" style="display: none;">
|
||
|
|
<div class="container">
|
||
|
|
<div class="row main-panel">
|
||
|
|
<div class="weather-col col-2 offset-xs-6 big-icon">
|
||
|
|
<i class="wi [wicon] shadowed"></i>
|
||
|
|
</div>
|
||
|
|
<div class="weather-col col-3 text-right">
|
||
|
|
<div class="current-temp shadowed">[temperatureRound]<sup>°[temperatureUnit]</sup></div>
|
||
|
|
|
||
|
|
<div class="month shadowed">[time|dddd] [time|D] [time|MMMM], [time|YYYY]</div>
|
||
|
|
<div class="month shadowed powered">[Attribution]</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row bg-footer footer">
|
||
|
|
<div class="weather-col col-4 main-detail details-box">
|
||
|
|
<h3><strong>||TODAY||</strong></h3>
|
||
|
|
<p class="selector-day">Max</p>
|
||
|
|
<p class="selector-temp">[temperatureMaxRound] ° [temperatureUnit]</p>
|
||
|
|
<p class="selector-day">Min</p>
|
||
|
|
<p class="selector-temp">[temperatureMinRound] ° [temperatureUnit]</p>
|
||
|
|
<p class="selector-day">Avg</p>
|
||
|
|
<p class="selector-temp">[temperatureMeanRound] ° [temperatureUnit]</p>
|
||
|
|
</div>
|
||
|
|
<div class="upcoming">
|
||
|
|
<div class="forecast-container" data-days-num="4"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="forecast-day-template" style="display: none;">
|
||
|
|
<div class="weather-col col-2 upcoming-days">
|
||
|
|
<div class="small-day">[time|ddd]</div>
|
||
|
|
<div class="small-icon"><i class="wi [wicon]"></i></div>
|
||
|
|
<div class="small-temp">[temperatureMaxRound] ° [temperatureUnit]</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
]]></twig>
|
||
|
|
<style><![CDATA[
|
||
|
|
{% import "forecastio-css-generator.twig" as generateForecastCSS %}
|
||
|
|
|
||
|
|
body {
|
||
|
|
width: 960px !important;
|
||
|
|
height: 540px !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
p {
|
||
|
|
margin: 0 0 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.h1, .h2, .h3, h1, h2, h3 {
|
||
|
|
margin-top: 20px;
|
||
|
|
margin-bottom: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.h3, h3 {
|
||
|
|
font-size: 24px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.center-block {
|
||
|
|
display: block;
|
||
|
|
margin-right: auto;
|
||
|
|
margin-left: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
#content {
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
.text-center {
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
h1 {
|
||
|
|
margin: 0.67em 0;
|
||
|
|
font-size: 2em;
|
||
|
|
}
|
||
|
|
|
||
|
|
.container:after, .container:before, .row:after, .row:before {
|
||
|
|
display: table;
|
||
|
|
content: " ";
|
||
|
|
}
|
||
|
|
|
||
|
|
.container:after, .row:after {
|
||
|
|
clear: both;
|
||
|
|
}
|
||
|
|
|
||
|
|
* {
|
||
|
|
-webkit-box-sizing: border-box;
|
||
|
|
-moz-box-sizing: border-box;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
:after, :before {
|
||
|
|
-webkit-box-sizing: border-box;
|
||
|
|
-moz-box-sizing: border-box;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
{% if fontFamily %}
|
||
|
|
font-family: {{fontFamily}};
|
||
|
|
{% else %}
|
||
|
|
font-family: "Helvetica", "Arial", sans-serif;
|
||
|
|
{% endif %}
|
||
|
|
line-height: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.container {
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-size: cover;
|
||
|
|
background-position: center;
|
||
|
|
width: 960px !important;
|
||
|
|
height: 540px !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.main-panel {
|
||
|
|
margin-top: 74px;
|
||
|
|
height: 137px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.big-icon {
|
||
|
|
font-size: 120px;
|
||
|
|
|
||
|
|
margin-right: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.date {
|
||
|
|
font-size: 18px;
|
||
|
|
{% if fontFamily %}
|
||
|
|
font-family: {{fontFamily}};
|
||
|
|
{% else %}
|
||
|
|
font-family: "Helvetica", "Arial", sans-serif;
|
||
|
|
{% endif %}
|
||
|
|
font-weight: light;
|
||
|
|
padding-bottom: 1px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.month {
|
||
|
|
font-size: 15px;
|
||
|
|
|
||
|
|
{% if fontFamily %}
|
||
|
|
font-family: {{fontFamily}};
|
||
|
|
{% else %}
|
||
|
|
font-family: "Helvetica", "Arial", sans-serif;
|
||
|
|
{% endif %}
|
||
|
|
font-weight: light;
|
||
|
|
}
|
||
|
|
|
||
|
|
.current-temp {
|
||
|
|
{% if fontFamily %}
|
||
|
|
font-family: {{fontFamily}};
|
||
|
|
{% else %}
|
||
|
|
font-family: "Helvetica", "Arial", sans-serif;
|
||
|
|
{% endif %}
|
||
|
|
font-weight: bold;
|
||
|
|
font-size: 100px;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.current-temp sup {
|
||
|
|
font-size: 50px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.footer {
|
||
|
|
height: 290px;
|
||
|
|
|
||
|
|
padding: 30px 30px;
|
||
|
|
position: relative;
|
||
|
|
margin-bottom: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.main-icon {
|
||
|
|
font-size: 70px;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.small-day {
|
||
|
|
padding-top: 54px;
|
||
|
|
font-size: 20px;
|
||
|
|
font-style: italic;
|
||
|
|
font-weight: lighter;
|
||
|
|
text-transform: uppercase;
|
||
|
|
}
|
||
|
|
|
||
|
|
.small-icon {
|
||
|
|
font-size: 30px;
|
||
|
|
padding: 20px;
|
||
|
|
color: #272625;
|
||
|
|
}
|
||
|
|
|
||
|
|
.small-temp {
|
||
|
|
font-size: 16px;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.powered {
|
||
|
|
font-weight: bold;
|
||
|
|
font-size: 1.4em;
|
||
|
|
padding-top: 5px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.upcoming-days:nth-child(odd) {
|
||
|
|
background-color: {{footerBackgroundOdd}};
|
||
|
|
background: {{footerBackgroundOdd}};
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.main-detail, .upcoming-days:nth-child(even) {
|
||
|
|
background-color: {{footerBackgroundEven}};
|
||
|
|
background: {{footerBackgroundEven}};
|
||
|
|
}
|
||
|
|
|
||
|
|
.details-box {
|
||
|
|
height: 290px;
|
||
|
|
padding-left: 30px !important;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.upcoming-days {
|
||
|
|
height: 195px;
|
||
|
|
margin-top: 95px !important;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.selector-day {
|
||
|
|
font-size: 15px;
|
||
|
|
font-weight: light;
|
||
|
|
margin-top: 25px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.selector-temp {
|
||
|
|
font-size: 25px;
|
||
|
|
font-weight: bold;
|
||
|
|
font-style: italic;
|
||
|
|
}
|
||
|
|
|
||
|
|
.shadowed {
|
||
|
|
text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
|
||
|
|
filter: dropshadow(color=rgba(0, 0, 0, 0.4), offx=2, offy=2);
|
||
|
|
}
|
||
|
|
|
||
|
|
.container-fluid, .container {
|
||
|
|
margin-right: auto;
|
||
|
|
margin-left: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.text-right {
|
||
|
|
text-align: right;
|
||
|
|
}
|
||
|
|
|
||
|
|
.pull-right {
|
||
|
|
float: right !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.offset-xs-1 {
|
||
|
|
margin-left: 8.33333333%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.col-2 {
|
||
|
|
width: 16.66666667%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.col-3 {
|
||
|
|
width: 25%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.col-4 {
|
||
|
|
width: 33.33333333%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.col-5 {
|
||
|
|
width: 41.66666667%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.col-6 {
|
||
|
|
width: 50%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.col-7 {
|
||
|
|
width: 58.33333333%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.col-9 {
|
||
|
|
width: 75%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.col-12 {
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.weather-col {
|
||
|
|
float: left;
|
||
|
|
position: relative;
|
||
|
|
min-height: 1px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.offset-xs-6 {
|
||
|
|
margin-left: 50%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.bg-footer {
|
||
|
|
color: #272625;
|
||
|
|
}
|
||
|
|
|
||
|
|
{{ generateForecastCSS.backgrounds(
|
||
|
|
attribute(_context, 'background-image'),
|
||
|
|
attribute(_context, 'cloudy-image'),
|
||
|
|
attribute(_context, 'day-cloudy-image'),
|
||
|
|
attribute(_context, 'day-clear-image'),
|
||
|
|
attribute(_context, 'fog-image'),
|
||
|
|
attribute(_context, 'hail-image'),
|
||
|
|
attribute(_context, 'night-clear-image'),
|
||
|
|
attribute(_context, 'night-partly-cloudy-image'),
|
||
|
|
attribute(_context, 'rain-image'),
|
||
|
|
attribute(_context, 'snow-image'),
|
||
|
|
attribute(_context, 'windy-image')
|
||
|
|
) }}
|
||
|
|
|
||
|
|
{{ generateForecastCSS.colors(
|
||
|
|
attribute(_context, 'background-color'),
|
||
|
|
attribute(_context, 'text-color'),
|
||
|
|
attribute(_context, 'icons-color'),
|
||
|
|
null,
|
||
|
|
attribute(_context, 'footer-text-color'),
|
||
|
|
attribute(_context, 'footer-icons-color'),
|
||
|
|
attribute(_context, 'shadow-color')
|
||
|
|
) }}
|
||
|
|
]]></style>
|
||
|
|
</stencil>
|
||
|
|
<assets>
|
||
|
|
<asset id="weather_10" type="path" mimeType="image/png" cmsOnly="true" path="/modules/assets/template-thumbnails/forecast/weather_10.png" />
|
||
|
|
</assets>
|
||
|
|
</template>
|
||
|
|
<template>
|
||
|
|
<id>weather_11</id>
|
||
|
|
<type>static</type>
|
||
|
|
<dataType>forecast</dataType>
|
||
|
|
<title>Portrait - Current day, 3 day forecast</title>
|
||
|
|
<thumbnail>weather_11</thumbnail>
|
||
|
|
<startWidth>540</startWidth>
|
||
|
|
<startHeight>960</startHeight>
|
||
|
|
<properties>
|
||
|
|
<property id="text-color" type="color">
|
||
|
|
<title>Text</title>
|
||
|
|
<helpText>The colour of the text</helpText>
|
||
|
|
<default>#fff</default>
|
||
|
|
</property>
|
||
|
|
<property id="icons-color" type="color">
|
||
|
|
<title>Icons</title>
|
||
|
|
<helpText>The colour of the icons</helpText>
|
||
|
|
<default>#fff</default>
|
||
|
|
</property>
|
||
|
|
<property id="background-color" type="color">
|
||
|
|
<title>Background</title>
|
||
|
|
<helpText>The colour of the background</helpText>
|
||
|
|
<default></default>
|
||
|
|
</property>
|
||
|
|
<property id="circleBackground" type="color">
|
||
|
|
<title>Circle Background</title>
|
||
|
|
<helpText>The colour of the circle background</helpText>
|
||
|
|
<default>rgba(0, 0, 0, 0.5)</default>
|
||
|
|
</property>
|
||
|
|
<property id="footerBackground" type="color">
|
||
|
|
<title>Footer Background</title>
|
||
|
|
<helpText>The colour of the footer background</helpText>
|
||
|
|
<default>rgba(255, 255, 255, 0.6)</default>
|
||
|
|
</property>
|
||
|
|
<property id="shadow-color" type="color">
|
||
|
|
<title>Shadow</title>
|
||
|
|
<helpText>The colour of the shadow</helpText>
|
||
|
|
<default></default>
|
||
|
|
</property>
|
||
|
|
<property id="footer-text-color" type="color">
|
||
|
|
<title>Footer Text</title>
|
||
|
|
<helpText>The colour of the footer text</helpText>
|
||
|
|
<default>#333</default>
|
||
|
|
</property>
|
||
|
|
<property id="footer-icons-color" type="color">
|
||
|
|
<title>Footer Icons</title>
|
||
|
|
<helpText>The colour of the footer icons</helpText>
|
||
|
|
<default>#333</default>
|
||
|
|
</property>
|
||
|
|
<property id="fontFamily" type="fontSelector">
|
||
|
|
<title>Font</title>
|
||
|
|
<helpText>Select a custom font - leave empty to use the default font.</helpText>
|
||
|
|
</property>
|
||
|
|
<property id="background-image" type="dropdown" mode="single">
|
||
|
|
<title>Background Image</title>
|
||
|
|
<helpText>The background image to use</helpText>
|
||
|
|
<default>fit</default>
|
||
|
|
<options>
|
||
|
|
<option name="none">None</option>
|
||
|
|
<option name="fit">Fit</option>
|
||
|
|
<option name="stretch">Stretch</option>
|
||
|
|
<option name="center">Center</option>
|
||
|
|
</options>
|
||
|
|
</property>
|
||
|
|
<property type="header" variant="main">
|
||
|
|
<title>Backgrounds</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property type="message">
|
||
|
|
<title>Select images from the media library to replace the default weather backgrounds.</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="cloudy-image" type="mediaSelector">
|
||
|
|
<title>Cloudy</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="day-cloudy-image" type="mediaSelector">
|
||
|
|
<title>Cloudy day</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="day-sunny-image" type="mediaSelector">
|
||
|
|
<title>Clear</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="fog-image" type="mediaSelector">
|
||
|
|
<title>Fog</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="hail-image" type="mediaSelector">
|
||
|
|
<title>Hail</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="night-clear-image" type="mediaSelector">
|
||
|
|
<title>Clear night</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="night-partly-cloudy-image" type="mediaSelector">
|
||
|
|
<title>Cloudy night</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="rain-image" type="mediaSelector">
|
||
|
|
<title>Raining</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="snow-image" type="mediaSelector">
|
||
|
|
<title>Snowing</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="windy-image" type="mediaSelector">
|
||
|
|
<title>Windy</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
</properties>
|
||
|
|
<stencil>
|
||
|
|
<width id="width">540</width>
|
||
|
|
<height id="height">960</height>
|
||
|
|
<hbs></hbs>
|
||
|
|
<twig><![CDATA[
|
||
|
|
{% if attribute(_context, 'background-image') != 'none' %}
|
||
|
|
<div class="bg-div bg-[icon]"></div>
|
||
|
|
{% endif %}
|
||
|
|
|
||
|
|
<div class="current-day-template" style="display: none;">
|
||
|
|
<div class="container">
|
||
|
|
<div class="row main-cont center-block">
|
||
|
|
<div class="weather-col col-12 upcoming-days">
|
||
|
|
<div class="circle shadowed">
|
||
|
|
<div class="weather-col col-12">
|
||
|
|
<div class="small-icon">
|
||
|
|
<i class="wi [wicon]"></i></div>
|
||
|
|
</div>
|
||
|
|
<div class="weather-col col-12" style="padding-top: 10px;">
|
||
|
|
<div class="big-temp">[temperatureRound]<sup>°[temperatureUnit]</sup></div>
|
||
|
|
<div class="summary">[summary]</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row bg-footer row-details text-center">
|
||
|
|
<div class="forecast-container" data-days-num="3"></div>
|
||
|
|
<div class="weather-col col-12 powered">[Attribution]</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="forecast-day-template" style="display: none;">
|
||
|
|
<div class="weather-col col-4 row-day odd">
|
||
|
|
<div class="weather-col col-12 day">[time|ddd]</div>
|
||
|
|
<div class="weather-col col-12 icon-up "><i class="wi [wicon]"></i></div>
|
||
|
|
<div class="weather-col col-12 temp ">[temperatureMinRound]° - [temperatureMaxRound]° [temperatureUnit]</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
]]></twig>
|
||
|
|
<style><![CDATA[
|
||
|
|
{% import "forecastio-css-generator.twig" as generateForecastCSS %}
|
||
|
|
|
||
|
|
body {
|
||
|
|
width: 540px !important;
|
||
|
|
height: 960px !important;
|
||
|
|
{% if fontFamily %}
|
||
|
|
font-family: {{fontFamily}};
|
||
|
|
{% else %}
|
||
|
|
font-family: "Helvetica", "Arial", sans-serif;
|
||
|
|
{% endif %}
|
||
|
|
line-height: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.center-block {
|
||
|
|
display: block;
|
||
|
|
margin-right: auto;
|
||
|
|
margin-left: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
#content {
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
.container {
|
||
|
|
margin-right: auto;
|
||
|
|
margin-left: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.text-center {
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
h1 {
|
||
|
|
margin: 0.67em 0;
|
||
|
|
font-size: 2em;
|
||
|
|
}
|
||
|
|
|
||
|
|
.container:after, .container:before, .row:after, .row:before {
|
||
|
|
display: table;
|
||
|
|
content: " ";
|
||
|
|
}
|
||
|
|
|
||
|
|
.container:after, .row:after {
|
||
|
|
clear: both;
|
||
|
|
}
|
||
|
|
|
||
|
|
* {
|
||
|
|
-webkit-box-sizing: border-box;
|
||
|
|
-moz-box-sizing: border-box;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
:after, :before {
|
||
|
|
-webkit-box-sizing: border-box;
|
||
|
|
-moz-box-sizing: border-box;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
.container {
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-size: cover;
|
||
|
|
background-position: center;
|
||
|
|
width: 540px !important;
|
||
|
|
height: 960px !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.main-panel {
|
||
|
|
margin-top: 74px;
|
||
|
|
height: 137px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.big-icon {
|
||
|
|
font-size: 200px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.date {
|
||
|
|
font-size: 18px;
|
||
|
|
{% if fontFamily %}
|
||
|
|
font-family: {{fontFamily}};
|
||
|
|
{% else %}
|
||
|
|
font-family: "Helvetica", "Arial", sans-serif;
|
||
|
|
{% endif %}
|
||
|
|
font-weight: light;
|
||
|
|
padding-bottom: 1px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.month {
|
||
|
|
font-size: 15px;
|
||
|
|
{% if fontFamily %}
|
||
|
|
font-family: {{fontFamily}};
|
||
|
|
{% else %}
|
||
|
|
font-family: "Helvetica", "Arial", sans-serif;
|
||
|
|
{% endif %}
|
||
|
|
font-weight: light;
|
||
|
|
}
|
||
|
|
|
||
|
|
.current-temp {
|
||
|
|
{% if fontFamily %}
|
||
|
|
font-family: {{fontFamily}};
|
||
|
|
{% else %}
|
||
|
|
font-family: "Helvetica", "Arial", sans-serif;
|
||
|
|
{% endif %}
|
||
|
|
font-weight: bold;
|
||
|
|
font-size: 100px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.main-cont {
|
||
|
|
width: 400px;
|
||
|
|
height: 400px;
|
||
|
|
margin: 0 auto !important;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.main-icon {
|
||
|
|
font-size: 70px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.city {
|
||
|
|
font-weight: bold;
|
||
|
|
font-size: 40px;
|
||
|
|
padding-top: 30px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.country {
|
||
|
|
font-weight: light;
|
||
|
|
font-size: 15px;
|
||
|
|
padding-bottom: 30px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.small-day {
|
||
|
|
padding-top: 50px;
|
||
|
|
font-size: 28px;
|
||
|
|
font-style: italic;
|
||
|
|
font-weight: lighter;
|
||
|
|
}
|
||
|
|
|
||
|
|
.small-icon {
|
||
|
|
font-size: 120px;
|
||
|
|
padding: 35px 0px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.big-temp {
|
||
|
|
font-size: 90px;
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
|
||
|
|
.big-temp sup {
|
||
|
|
font-size: 50px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.even {
|
||
|
|
background-color: rgba(255, 255, 255, 0.8);
|
||
|
|
background: rgba(255, 255, 255, 0.8);
|
||
|
|
}
|
||
|
|
|
||
|
|
.bg-footer {
|
||
|
|
color: #333;
|
||
|
|
}
|
||
|
|
|
||
|
|
.odd {
|
||
|
|
background-color: {{footerBackground}};
|
||
|
|
background: {{footerBackground}};
|
||
|
|
}
|
||
|
|
|
||
|
|
.details-box {
|
||
|
|
height: 290px;
|
||
|
|
padding-left: 30px;
|
||
|
|
color: #272625;
|
||
|
|
}
|
||
|
|
|
||
|
|
.upcoming-days {
|
||
|
|
height: 365px;
|
||
|
|
text-align: center;
|
||
|
|
margin-top: 50px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.selector-day {
|
||
|
|
font-size: 15px;
|
||
|
|
font-weight: light;
|
||
|
|
margin-top: 25px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.selector-temp {
|
||
|
|
font-size: 25px;
|
||
|
|
font-weight: bold;
|
||
|
|
font-style: italic;
|
||
|
|
}
|
||
|
|
|
||
|
|
.row-details {
|
||
|
|
margin-top: 280px;
|
||
|
|
height: 230px;
|
||
|
|
padding: 0px 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.row-day {
|
||
|
|
padding: 30px 0px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.day {
|
||
|
|
font-size: 25px;
|
||
|
|
font-weight: lighter;
|
||
|
|
|
||
|
|
font-style: italic;
|
||
|
|
text-transform: uppercase;
|
||
|
|
}
|
||
|
|
|
||
|
|
.temp {
|
||
|
|
font-size: 25px;
|
||
|
|
font-weight: light;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.icon-up {
|
||
|
|
font-size: 50px;
|
||
|
|
|
||
|
|
padding: 40px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.circle {
|
||
|
|
border-radius: 50%;
|
||
|
|
width: 380px;
|
||
|
|
height: 380px;
|
||
|
|
background-color: {{circleBackground}};
|
||
|
|
}
|
||
|
|
|
||
|
|
.summary {
|
||
|
|
font-weight: bold;
|
||
|
|
font-size: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.powered {
|
||
|
|
background-color: #444;
|
||
|
|
background-color: rgba(0, 0, 0, 0.63);
|
||
|
|
color: #fff;
|
||
|
|
font-size: 18px;
|
||
|
|
padding: 8px;
|
||
|
|
line-height: 18px;
|
||
|
|
n
|
||
|
|
}
|
||
|
|
|
||
|
|
.shadowed {
|
||
|
|
text-shadow: 0px 0px 2px #111;
|
||
|
|
filter: dropshadow(color=#111, offx=2, offy=2);
|
||
|
|
}
|
||
|
|
|
||
|
|
.container-fluid, .container {
|
||
|
|
margin-right: auto;
|
||
|
|
margin-left: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.text-right {
|
||
|
|
text-align: right;
|
||
|
|
}
|
||
|
|
|
||
|
|
.pull-right {
|
||
|
|
float: right !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.offset-xs-1 {
|
||
|
|
margin-left: 8.33333333%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.col-2 {
|
||
|
|
width: 16.66666667%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.col-3 {
|
||
|
|
width: 25%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.col-4 {
|
||
|
|
width: 33.33333333%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.col-5 {
|
||
|
|
width: 41.66666667%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.col-6 {
|
||
|
|
width: 50%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.col-7 {
|
||
|
|
width: 58.33333333%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.col-9 {
|
||
|
|
width: 75%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.col-12 {
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.weather-col {
|
||
|
|
float: left;
|
||
|
|
position: relative;
|
||
|
|
min-height: 1px;
|
||
|
|
padding-right: 10px;
|
||
|
|
padding-left: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
{{ generateForecastCSS.backgrounds(
|
||
|
|
attribute(_context, 'background-image'),
|
||
|
|
attribute(_context, 'cloudy-image'),
|
||
|
|
attribute(_context, 'day-cloudy-image'),
|
||
|
|
attribute(_context, 'day-clear-image'),
|
||
|
|
attribute(_context, 'fog-image'),
|
||
|
|
attribute(_context, 'hail-image'),
|
||
|
|
attribute(_context, 'night-clear-image'),
|
||
|
|
attribute(_context, 'night-partly-cloudy-image'),
|
||
|
|
attribute(_context, 'rain-image'),
|
||
|
|
attribute(_context, 'snow-image'),
|
||
|
|
attribute(_context, 'windy-image')
|
||
|
|
) }}
|
||
|
|
|
||
|
|
{{ generateForecastCSS.colors(
|
||
|
|
attribute(_context, 'background-color'),
|
||
|
|
attribute(_context, 'text-color'),
|
||
|
|
attribute(_context, 'icons-color'),
|
||
|
|
null,
|
||
|
|
attribute(_context, 'footer-text-color'),
|
||
|
|
attribute(_context, 'footer-icons-color'),
|
||
|
|
attribute(_context, 'shadow-color')
|
||
|
|
) }}
|
||
|
|
]]></style>
|
||
|
|
</stencil>
|
||
|
|
<assets>
|
||
|
|
<asset id="weather_11" type="path" mimeType="image/png" cmsOnly="true" path="/modules/assets/template-thumbnails/forecast/weather_11.png" />
|
||
|
|
</assets>
|
||
|
|
</template>
|
||
|
|
<template>
|
||
|
|
<id>weather_12</id>
|
||
|
|
<type>static</type>
|
||
|
|
<dataType>forecast</dataType>
|
||
|
|
<title>Landscape - Current day detailed, 3 day forecast</title>
|
||
|
|
<thumbnail>weather_12</thumbnail>
|
||
|
|
<startWidth>960</startWidth>
|
||
|
|
<startHeight>540</startHeight>
|
||
|
|
<properties>
|
||
|
|
<property id="text-color" type="color">
|
||
|
|
<title>Text</title>
|
||
|
|
<helpText>The colour of the text</helpText>
|
||
|
|
<default>#fff</default>
|
||
|
|
</property>
|
||
|
|
<property id="icons-color" type="color">
|
||
|
|
<title>Icons</title>
|
||
|
|
<helpText>The colour of the icons</helpText>
|
||
|
|
<default>#fff</default>
|
||
|
|
</property>
|
||
|
|
<property id="currentContainerBackground" type="color">
|
||
|
|
<title>Current Container Background</title>
|
||
|
|
<helpText>The colour of the current container background</helpText>
|
||
|
|
<default>rgba(0, 0, 0, 0.8)</default>
|
||
|
|
</property>
|
||
|
|
<property id="forecastContainerBackground" type="color">
|
||
|
|
<title>Forecast Container Background</title>
|
||
|
|
<helpText>The colour of the forecast container background</helpText>
|
||
|
|
<default>rgba(0, 0, 0, 0.6)</default>
|
||
|
|
</property>
|
||
|
|
<property id="background-color" type="color">
|
||
|
|
<title>Background</title>
|
||
|
|
<helpText>The colour of the background</helpText>
|
||
|
|
<default></default>
|
||
|
|
</property>
|
||
|
|
<property id="footer-text-color" type="color">
|
||
|
|
<title>Footer Text</title>
|
||
|
|
<helpText>The colour of the footer text</helpText>
|
||
|
|
<default>#fff</default>
|
||
|
|
</property>
|
||
|
|
<property id="footer-icons-color" type="color">
|
||
|
|
<title>Footer Icons</title>
|
||
|
|
<helpText>The colour of the footer icons</helpText>
|
||
|
|
<default>#fff</default>
|
||
|
|
</property>
|
||
|
|
<property id="footerBackground" type="color">
|
||
|
|
<title>Footer Background</title>
|
||
|
|
<helpText>The colour of the footer background</helpText>
|
||
|
|
<default>rgba(0, 0, 0, 0.7)</default>
|
||
|
|
</property>
|
||
|
|
<property id="fontFamily" type="fontSelector">
|
||
|
|
<title>Font</title>
|
||
|
|
<helpText>Select a custom font - leave empty to use the default font.</helpText>
|
||
|
|
</property>
|
||
|
|
<property id="background-image" type="dropdown" mode="single">
|
||
|
|
<title>Background Image</title>
|
||
|
|
<helpText>The background image to use</helpText>
|
||
|
|
<default>fit</default>
|
||
|
|
<options>
|
||
|
|
<option name="none">None</option>
|
||
|
|
<option name="fit">Fit</option>
|
||
|
|
<option name="stretch">Stretch</option>
|
||
|
|
<option name="center">Center</option>
|
||
|
|
</options>
|
||
|
|
</property>
|
||
|
|
<property type="header" variant="main">
|
||
|
|
<title>Backgrounds</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property type="message">
|
||
|
|
<title>Select images from the media library to replace the default weather backgrounds.</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="cloudy-image" type="mediaSelector">
|
||
|
|
<title>Cloudy</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="day-cloudy-image" type="mediaSelector">
|
||
|
|
<title>Cloudy day</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="day-sunny-image" type="mediaSelector">
|
||
|
|
<title>Clear</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="fog-image" type="mediaSelector">
|
||
|
|
<title>Fog</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="hail-image" type="mediaSelector">
|
||
|
|
<title>Hail</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="night-clear-image" type="mediaSelector">
|
||
|
|
<title>Clear night</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="night-partly-cloudy-image" type="mediaSelector">
|
||
|
|
<title>Cloudy night</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="rain-image" type="mediaSelector">
|
||
|
|
<title>Raining</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="snow-image" type="mediaSelector">
|
||
|
|
<title>Snowing</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="windy-image" type="mediaSelector">
|
||
|
|
<title>Windy</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
</properties>
|
||
|
|
<stencil>
|
||
|
|
<width id="width">960</width>
|
||
|
|
<height id="height">540</height>
|
||
|
|
<hbs></hbs>
|
||
|
|
<twig><![CDATA[
|
||
|
|
{% if attribute(_context, 'background-image') != 'none' %}
|
||
|
|
<div class="bg-div bg-[icon]"></div>
|
||
|
|
{% endif %}
|
||
|
|
|
||
|
|
<div class="current-day-template" style="display: none;">
|
||
|
|
<div class="container">
|
||
|
|
<div class="row main-cont ">
|
||
|
|
<div class="weather-col col-3 odd upcoming-days">
|
||
|
|
<div class="small-day">||RIGHT NOW||</div>
|
||
|
|
<div class="small-icon"><i class="wi [wicon]"></i></div>
|
||
|
|
<div class="small-temp">[temperatureRound]°[temperatureUnit]</div>
|
||
|
|
</div>
|
||
|
|
<div class="forecast-container" data-days-num="3"></div>
|
||
|
|
</div>
|
||
|
|
<div class="arrow-down"></div>
|
||
|
|
|
||
|
|
<div class="row bg-footer row-details">
|
||
|
|
<div class="weather-col col-12" style="margin-bottom: 10px; ">[summary]</div>
|
||
|
|
<br/>
|
||
|
|
<div class="weather-col col-3">
|
||
|
|
<strong>||Wind||</strong> [windDirection] [windSpeed] [windSpeedUnit]
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="weather-col col-3">
|
||
|
|
<strong>||Humidity||</strong> [humidityPercent]%
|
||
|
|
</div>
|
||
|
|
<div class="weather-col col-6 text-right">
|
||
|
|
<div class="powered">[Attribution]</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="forecast-day-template" style="display: none;">
|
||
|
|
<div class="weather-col col-3 even upcoming-days">
|
||
|
|
<div class="small-day">[time|ddd]</div>
|
||
|
|
<div class="small-icon"><i class="wi [wicon]"></i></div>
|
||
|
|
<div class="small-temp">[temperatureMaxRound] ° [temperatureUnit]</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
]]></twig>
|
||
|
|
<style><![CDATA[
|
||
|
|
{% import "forecastio-css-generator.twig" as generateForecastCSS %}
|
||
|
|
|
||
|
|
body {
|
||
|
|
width: 960px !important;
|
||
|
|
height: 540px !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.center-block {
|
||
|
|
display: block;
|
||
|
|
margin-right: auto;
|
||
|
|
margin-left: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.text-center {
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
h1 {
|
||
|
|
margin: 0.67em 0;
|
||
|
|
font-size: 2em;
|
||
|
|
}
|
||
|
|
|
||
|
|
.container:after, .container:before, .row:after, .row:before {
|
||
|
|
display: table;
|
||
|
|
content: " ";
|
||
|
|
}
|
||
|
|
|
||
|
|
.container:after, .row:after {
|
||
|
|
clear: both;
|
||
|
|
}
|
||
|
|
|
||
|
|
* {
|
||
|
|
-webkit-box-sizing: border-box;
|
||
|
|
-moz-box-sizing: border-box;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
:after, :before {
|
||
|
|
-webkit-box-sizing: border-box;
|
||
|
|
-moz-box-sizing: border-box;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
{% if fontFamily %}
|
||
|
|
font-family: {{fontFamily}};
|
||
|
|
{% else %}
|
||
|
|
font-family: "Helvetica", "Arial", sans-serif;
|
||
|
|
{% endif %}
|
||
|
|
line-height: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
#content {
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.container {
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-size: cover;
|
||
|
|
background-position: center;
|
||
|
|
width: 960px !important;
|
||
|
|
height: 540px !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.powered {
|
||
|
|
font-weight: bold;
|
||
|
|
font-style: italic;
|
||
|
|
}
|
||
|
|
|
||
|
|
.main-panel {
|
||
|
|
margin-top: 74px;
|
||
|
|
height: 137px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.big-icon {
|
||
|
|
font-size: 120px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.date {
|
||
|
|
font-size: 18px;
|
||
|
|
{% if fontFamily %}
|
||
|
|
font-family: {{fontFamily}};
|
||
|
|
{% else %}
|
||
|
|
font-family: "Helvetica", "Arial", sans-serif;
|
||
|
|
{% endif %}
|
||
|
|
font-weight: light;
|
||
|
|
padding-bottom: 1px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.month {
|
||
|
|
font-size: 15px;
|
||
|
|
{% if fontFamily %}
|
||
|
|
font-family: {{fontFamily}};
|
||
|
|
{% else %}
|
||
|
|
font-family: "Helvetica", "Arial", sans-serif;
|
||
|
|
{% endif %}
|
||
|
|
font-weight: light;
|
||
|
|
}
|
||
|
|
|
||
|
|
.current-temp {
|
||
|
|
{% if fontFamily %}
|
||
|
|
font-family: {{fontFamily}};
|
||
|
|
{% else %}
|
||
|
|
font-family: "Helvetica", "Arial", sans-serif;
|
||
|
|
{% endif %}
|
||
|
|
font-weight: bold;
|
||
|
|
font-size: 100px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.main-cont {
|
||
|
|
margin-top: 72px;
|
||
|
|
height: 870px;
|
||
|
|
height: 365px;
|
||
|
|
padding: 0px 50px;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.main-icon {
|
||
|
|
font-size: 70px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.small-day {
|
||
|
|
padding-top: 50px;
|
||
|
|
font-size: 28px;
|
||
|
|
font-style: italic;
|
||
|
|
font-weight: lighter;
|
||
|
|
}
|
||
|
|
|
||
|
|
.small-icon {
|
||
|
|
font-size: 70px;
|
||
|
|
padding: 70px 0px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.small-temp {
|
||
|
|
font-size: 20px;
|
||
|
|
font-weight: lighter;
|
||
|
|
font-style: italic;
|
||
|
|
}
|
||
|
|
|
||
|
|
.even {
|
||
|
|
background-color: {{forecastContainerBackground}};
|
||
|
|
background: {{forecastContainerBackground}};
|
||
|
|
}
|
||
|
|
|
||
|
|
.odd {
|
||
|
|
background-color: {{currentContainerBackground}};
|
||
|
|
background: {{currentContainerBackground}};
|
||
|
|
}
|
||
|
|
|
||
|
|
.details-box {
|
||
|
|
height: 290px;
|
||
|
|
padding-left: 30px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.upcoming-days {
|
||
|
|
height: 365px;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.selector-day {
|
||
|
|
font-size: 15px;
|
||
|
|
font-weight: light;
|
||
|
|
margin-top: 25px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.selector-temp {
|
||
|
|
font-size: 25px;
|
||
|
|
font-weight: bold;
|
||
|
|
font-style: italic;
|
||
|
|
}
|
||
|
|
|
||
|
|
.arrow-down {
|
||
|
|
width: 0;
|
||
|
|
height: 0;
|
||
|
|
border-left: 20px solid transparent;
|
||
|
|
border-right: 20px solid transparent;
|
||
|
|
border-top: 20px solid rgba(0, 0, 0, 0.8);
|
||
|
|
margin-left: 120px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.row-details {
|
||
|
|
padding: 15px 35px;
|
||
|
|
background-color: {{footerBackground}};
|
||
|
|
background: {{footerBackground}};
|
||
|
|
}
|
||
|
|
|
||
|
|
.container-fluid, .container {
|
||
|
|
margin-right: auto;
|
||
|
|
margin-left: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.text-right {
|
||
|
|
text-align: right;
|
||
|
|
}
|
||
|
|
|
||
|
|
.pull-right {
|
||
|
|
float: right !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.offset-xs-1 {
|
||
|
|
margin-left: 8.33333333%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.col-2 {
|
||
|
|
width: 16.66666667%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.col-3 {
|
||
|
|
width: 25%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.col-4 {
|
||
|
|
width: 33.33333333%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.col-5 {
|
||
|
|
width: 41.66666667%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.col-6 {
|
||
|
|
width: 50%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.col-7 {
|
||
|
|
width: 58.33333333%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.col-9 {
|
||
|
|
width: 75%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.col-12 {
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.weather-col {
|
||
|
|
float: left;
|
||
|
|
position: relative;
|
||
|
|
min-height: 1px;
|
||
|
|
}
|
||
|
|
|
||
|
|
{{ generateForecastCSS.backgrounds(
|
||
|
|
attribute(_context, 'background-image'),
|
||
|
|
attribute(_context, 'cloudy-image'),
|
||
|
|
attribute(_context, 'day-cloudy-image'),
|
||
|
|
attribute(_context, 'day-clear-image'),
|
||
|
|
attribute(_context, 'fog-image'),
|
||
|
|
attribute(_context, 'hail-image'),
|
||
|
|
attribute(_context, 'night-clear-image'),
|
||
|
|
attribute(_context, 'night-partly-cloudy-image'),
|
||
|
|
attribute(_context, 'rain-image'),
|
||
|
|
attribute(_context, 'snow-image'),
|
||
|
|
attribute(_context, 'windy-image')
|
||
|
|
) }}
|
||
|
|
|
||
|
|
{{ generateForecastCSS.colors(
|
||
|
|
attribute(_context, 'background-color'),
|
||
|
|
attribute(_context, 'text-color'),
|
||
|
|
attribute(_context, 'icons-color'),
|
||
|
|
null,
|
||
|
|
attribute(_context, 'footer-text-color'),
|
||
|
|
attribute(_context, 'footer-icons-color'),
|
||
|
|
null
|
||
|
|
) }}
|
||
|
|
]]></style>
|
||
|
|
</stencil>
|
||
|
|
<assets>
|
||
|
|
<asset id="weather_12" type="path" mimeType="image/png" cmsOnly="true" path="/modules/assets/template-thumbnails/forecast/weather_12.png" />
|
||
|
|
</assets>
|
||
|
|
</template>
|
||
|
|
<template>
|
||
|
|
<id>weather_13</id>
|
||
|
|
<type>static</type>
|
||
|
|
<dataType>forecast</dataType>
|
||
|
|
<title>Landscape - Current day details, 4 day forecast</title>
|
||
|
|
<thumbnail>weather_13</thumbnail>
|
||
|
|
<startWidth>960</startWidth>
|
||
|
|
<startHeight>180</startHeight>
|
||
|
|
<properties>
|
||
|
|
<property id="text-color" type="color">
|
||
|
|
<title>Text</title>
|
||
|
|
<helpText>The colour of the text</helpText>
|
||
|
|
<default>#fff</default>
|
||
|
|
</property>
|
||
|
|
<property id="icons-color" type="color">
|
||
|
|
<title>Icons</title>
|
||
|
|
<helpText>The colour of the icons</helpText>
|
||
|
|
<default>#fff</default>
|
||
|
|
</property>
|
||
|
|
<property id="background-color" type="color">
|
||
|
|
<title>Background</title>
|
||
|
|
<helpText>The colour of the background</helpText>
|
||
|
|
<default>#000</default>
|
||
|
|
</property>
|
||
|
|
<property id="fontFamily" type="fontSelector">
|
||
|
|
<title>Font</title>
|
||
|
|
<helpText>Select a custom font - leave empty to use the default font.</helpText>
|
||
|
|
</property>
|
||
|
|
<property id="background-image" type="dropdown" mode="single">
|
||
|
|
<title>Background Image</title>
|
||
|
|
<helpText>The background image to use</helpText>
|
||
|
|
<default>none</default>
|
||
|
|
<options>
|
||
|
|
<option name="none">None</option>
|
||
|
|
<option name="fit">Fit</option>
|
||
|
|
<option name="stretch">Stretch</option>
|
||
|
|
<option name="center">Center</option>
|
||
|
|
</options>
|
||
|
|
</property>
|
||
|
|
<property type="header" variant="main">
|
||
|
|
<title>Backgrounds</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property type="message">
|
||
|
|
<title>Select images from the media library to replace the default weather backgrounds.</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="cloudy-image" type="mediaSelector">
|
||
|
|
<title>Cloudy</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="day-cloudy-image" type="mediaSelector">
|
||
|
|
<title>Cloudy day</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="day-sunny-image" type="mediaSelector">
|
||
|
|
<title>Clear</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="fog-image" type="mediaSelector">
|
||
|
|
<title>Fog</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="hail-image" type="mediaSelector">
|
||
|
|
<title>Hail</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="night-clear-image" type="mediaSelector">
|
||
|
|
<title>Clear night</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="night-partly-cloudy-image" type="mediaSelector">
|
||
|
|
<title>Cloudy night</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="rain-image" type="mediaSelector">
|
||
|
|
<title>Raining</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="snow-image" type="mediaSelector">
|
||
|
|
<title>Snowing</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="windy-image" type="mediaSelector">
|
||
|
|
<title>Windy</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
</properties>
|
||
|
|
<stencil>
|
||
|
|
<width id="width">960</width>
|
||
|
|
<height id="height">180</height>
|
||
|
|
<hbs></hbs>
|
||
|
|
<twig><![CDATA[
|
||
|
|
{% if attribute(_context, 'background-image') != 'none' %}
|
||
|
|
<div class="bg-div bg-[icon]"></div>
|
||
|
|
{% endif %}
|
||
|
|
|
||
|
|
<div class="current-day-template" style="display: none;">
|
||
|
|
<div class="container">
|
||
|
|
<div class="row text-center">
|
||
|
|
<div class="weather-col col-4">
|
||
|
|
<div class="current-condition">[summary]</div>
|
||
|
|
<div class="info1">||Wind|| [windDirection] [windSpeed] [windSpeedUnit]</div>
|
||
|
|
<div class="info2">||Humidity|| [humidityPercent]%</div>
|
||
|
|
<div class="powered">[Attribution]</div>
|
||
|
|
</div>
|
||
|
|
<div class="forecast-container" data-days-num="4"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="forecast-day-template" style="display: none;">
|
||
|
|
<div class="weather-col col-2">
|
||
|
|
<div class="day">[time|ddd]</div>
|
||
|
|
<div class="icon"><i class="wi [wicon]"></i></div>
|
||
|
|
<div class="temp">[temperatureMaxRound] ° [temperatureUnit]</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
]]></twig>
|
||
|
|
<style><![CDATA[
|
||
|
|
{% import "forecastio-css-generator.twig" as generateForecastCSS %}
|
||
|
|
|
||
|
|
body {
|
||
|
|
width: 960px !important;
|
||
|
|
height: 180px !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.center-block {
|
||
|
|
display: block;
|
||
|
|
margin-right: auto;
|
||
|
|
margin-left: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
#content {
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
.text-center {
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
h1 {
|
||
|
|
margin: 0.67em 0;
|
||
|
|
font-size: 2em;
|
||
|
|
}
|
||
|
|
|
||
|
|
.container:after, .container:before, .row:after, .row:before {
|
||
|
|
display: table;
|
||
|
|
content: " ";
|
||
|
|
}
|
||
|
|
|
||
|
|
.container:after, .row:after {
|
||
|
|
clear: both;
|
||
|
|
}
|
||
|
|
|
||
|
|
* {
|
||
|
|
-webkit-box-sizing: border-box;
|
||
|
|
-moz-box-sizing: border-box;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
:after, :before {
|
||
|
|
-webkit-box-sizing: border-box;
|
||
|
|
-moz-box-sizing: border-box;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
{% if fontFamily %}
|
||
|
|
font-family: {{fontFamily}};
|
||
|
|
{% else %}
|
||
|
|
font-family: "Helvetica", "Arial", sans-serif;
|
||
|
|
{% endif %}
|
||
|
|
line-height: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
#content > div {
|
||
|
|
background-color: #000;
|
||
|
|
}
|
||
|
|
|
||
|
|
.container {
|
||
|
|
width: 960px !important;
|
||
|
|
height: 180px !important;
|
||
|
|
padding-top: 24px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.current-condition {
|
||
|
|
font-weight: bold;
|
||
|
|
font-size: 23px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.info1 {
|
||
|
|
font-size: 14px;
|
||
|
|
padding: 20px 0px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.day {
|
||
|
|
font-size: 18px;
|
||
|
|
font-weight: lighter;
|
||
|
|
font-style: italic;
|
||
|
|
}
|
||
|
|
|
||
|
|
.icon {
|
||
|
|
font-size: 50px;
|
||
|
|
padding: 20px 0px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.temp {
|
||
|
|
font-size: 15px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.powered {
|
||
|
|
font-weight: bold;
|
||
|
|
font-style: italic;
|
||
|
|
padding-top: 26px;
|
||
|
|
font-size: 0.8em;
|
||
|
|
}
|
||
|
|
|
||
|
|
.text-right {
|
||
|
|
text-align: right;
|
||
|
|
}
|
||
|
|
|
||
|
|
.pull-right {
|
||
|
|
float: right !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.offset-xs-1 {
|
||
|
|
margin-left: 8.33333333%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.col-2 {
|
||
|
|
width: 16.66666667%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.col-3 {
|
||
|
|
width: 25%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.col-4 {
|
||
|
|
width: 33.33333333%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.col-5 {
|
||
|
|
width: 41.66666667%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.col-6 {
|
||
|
|
width: 50%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.col-7 {
|
||
|
|
width: 58.33333333%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.col-9 {
|
||
|
|
width: 75%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.col-12 {
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.weather-col {
|
||
|
|
float: left;
|
||
|
|
position: relative;
|
||
|
|
min-height: 1px;
|
||
|
|
padding-right: 15px;
|
||
|
|
padding-left: 15px;
|
||
|
|
}
|
||
|
|
|
||
|
|
{{ generateForecastCSS.backgrounds(
|
||
|
|
attribute(_context, 'background-image'),
|
||
|
|
attribute(_context, 'cloudy-image'),
|
||
|
|
attribute(_context, 'day-cloudy-image'),
|
||
|
|
attribute(_context, 'day-clear-image'),
|
||
|
|
attribute(_context, 'fog-image'),
|
||
|
|
attribute(_context, 'hail-image'),
|
||
|
|
attribute(_context, 'night-clear-image'),
|
||
|
|
attribute(_context, 'night-partly-cloudy-image'),
|
||
|
|
attribute(_context, 'rain-image'),
|
||
|
|
attribute(_context, 'snow-image'),
|
||
|
|
attribute(_context, 'windy-image')
|
||
|
|
) }}
|
||
|
|
|
||
|
|
{{ generateForecastCSS.colors(
|
||
|
|
attribute(_context, 'background-color'),
|
||
|
|
attribute(_context, 'text-color'),
|
||
|
|
attribute(_context, 'icons-color'),
|
||
|
|
null,
|
||
|
|
null,
|
||
|
|
null,
|
||
|
|
null
|
||
|
|
) }}
|
||
|
|
]]></style>
|
||
|
|
</stencil>
|
||
|
|
<assets>
|
||
|
|
<asset id="weather_13" type="path" mimeType="image/png" cmsOnly="true" path="/modules/assets/template-thumbnails/forecast/weather_13.png" />
|
||
|
|
</assets>
|
||
|
|
</template>
|
||
|
|
<template>
|
||
|
|
<id>weather_14</id>
|
||
|
|
<type>static</type>
|
||
|
|
<dataType>forecast</dataType>
|
||
|
|
<title>Portrait - Current day details, 4 day forecast</title>
|
||
|
|
<thumbnail>weather_14</thumbnail>
|
||
|
|
<startWidth>189</startWidth>
|
||
|
|
<startHeight>900</startHeight>
|
||
|
|
<properties>
|
||
|
|
<property id="text-color" type="color">
|
||
|
|
<title>Text</title>
|
||
|
|
<helpText>The colour of the text</helpText>
|
||
|
|
<default>#fff</default>
|
||
|
|
</property>
|
||
|
|
<property id="icons-color" type="color">
|
||
|
|
<title>Icons</title>
|
||
|
|
<helpText>The colour of the icons</helpText>
|
||
|
|
<default>#fff</default>
|
||
|
|
</property>
|
||
|
|
<property id="background-color" type="color">
|
||
|
|
<title>Background</title>
|
||
|
|
<helpText>The colour of the background</helpText>
|
||
|
|
<default>#000</default>
|
||
|
|
</property>
|
||
|
|
<property id="dividerColor" type="color">
|
||
|
|
<title>Dividers Colour</title>
|
||
|
|
<helpText>The colour of the divider elements</helpText>
|
||
|
|
<default>#fff</default>
|
||
|
|
</property>
|
||
|
|
<property id="fontFamily" type="fontSelector">
|
||
|
|
<title>Font</title>
|
||
|
|
<helpText>Select a custom font - leave empty to use the default font.</helpText>
|
||
|
|
</property>
|
||
|
|
<property id="background-image" type="dropdown" mode="single">
|
||
|
|
<title>Background Image</title>
|
||
|
|
<helpText>The background image to use</helpText>
|
||
|
|
<default>none</default>
|
||
|
|
<options>
|
||
|
|
<option name="none">None</option>
|
||
|
|
<option name="fit">Fit</option>
|
||
|
|
<option name="stretch">Stretch</option>
|
||
|
|
<option name="center">Center</option>
|
||
|
|
</options>
|
||
|
|
</property>
|
||
|
|
<property type="header" variant="main">
|
||
|
|
<title>Backgrounds</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property type="message">
|
||
|
|
<title>Select images from the media library to replace the default weather backgrounds.</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="cloudy-image" type="mediaSelector">
|
||
|
|
<title>Cloudy</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="day-cloudy-image" type="mediaSelector">
|
||
|
|
<title>Cloudy day</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="day-sunny-image" type="mediaSelector">
|
||
|
|
<title>Clear</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="fog-image" type="mediaSelector">
|
||
|
|
<title>Fog</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="hail-image" type="mediaSelector">
|
||
|
|
<title>Hail</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="night-clear-image" type="mediaSelector">
|
||
|
|
<title>Clear night</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="night-partly-cloudy-image" type="mediaSelector">
|
||
|
|
<title>Cloudy night</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="rain-image" type="mediaSelector">
|
||
|
|
<title>Raining</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="snow-image" type="mediaSelector">
|
||
|
|
<title>Snowing</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="windy-image" type="mediaSelector">
|
||
|
|
<title>Windy</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
</properties>
|
||
|
|
<stencil>
|
||
|
|
<width id="width">189</width>
|
||
|
|
<height id="height">900</height>
|
||
|
|
<hbs></hbs>
|
||
|
|
<twig><![CDATA[
|
||
|
|
{% if attribute(_context, 'background-image') != 'none' %}
|
||
|
|
<div class="bg-div bg-[icon]"></div>
|
||
|
|
{% endif %}
|
||
|
|
|
||
|
|
<div class="current-day-template" style="display: none;">
|
||
|
|
<div class="container">
|
||
|
|
<div class="row text-center">
|
||
|
|
<div class="weather-col cont-main col-12">
|
||
|
|
<div class="current-condition">[summary]</div>
|
||
|
|
<div class="info1">||Wind|| [windDirection] [windSpeed] [windSpeedUnit]</div>
|
||
|
|
<div class="info2">||Humidity|| [humidityPercent]%</div>
|
||
|
|
<div class="powered">[Attribution]</div>
|
||
|
|
</div>
|
||
|
|
<div class="forecast-container" data-days-num="4"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="forecast-day-template" style="display: none;">
|
||
|
|
<div class="weather-col cont-day col-12 border">
|
||
|
|
<div class="day">[time|ddd]</div>
|
||
|
|
<div class="icon"><i class="wi [wicon]"></i></div>
|
||
|
|
<div class="temp">[temperatureMaxRound] ° [temperatureUnit]</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
]]></twig>
|
||
|
|
<style><![CDATA[
|
||
|
|
{% import "forecastio-css-generator.twig" as generateForecastCSS %}
|
||
|
|
|
||
|
|
body {
|
||
|
|
width: 189px !important;
|
||
|
|
height: 900px !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.center-block {
|
||
|
|
display: block;
|
||
|
|
margin-right: auto;
|
||
|
|
margin-left: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
#content {
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
.text-center {
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
h1 {
|
||
|
|
margin: 0.67em 0;
|
||
|
|
font-size: 2em;
|
||
|
|
}
|
||
|
|
|
||
|
|
.container:after, .container:before, .row:after, .row:before {
|
||
|
|
display: table;
|
||
|
|
content: " ";
|
||
|
|
}
|
||
|
|
|
||
|
|
.container:after, .row:after {
|
||
|
|
clear: both;
|
||
|
|
}
|
||
|
|
|
||
|
|
* {
|
||
|
|
-webkit-box-sizing: border-box;
|
||
|
|
-moz-box-sizing: border-box;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
:after, :before {
|
||
|
|
-webkit-box-sizing: border-box;
|
||
|
|
-moz-box-sizing: border-box;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
{% if fontFamily %}
|
||
|
|
font-family: {{fontFamily}};
|
||
|
|
{% else %}
|
||
|
|
font-family: "Helvetica", "Arial", sans-serif;
|
||
|
|
{% endif %}
|
||
|
|
line-height: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
#content > div {
|
||
|
|
background-color: #000;
|
||
|
|
}
|
||
|
|
|
||
|
|
.container {
|
||
|
|
width: 189px !important;
|
||
|
|
height: 900px !important;
|
||
|
|
padding-top: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.current-condition {
|
||
|
|
font-weight: bold;
|
||
|
|
font-size: 23px;
|
||
|
|
height: 25%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.info1 {
|
||
|
|
font-size: 14px;
|
||
|
|
padding: 6px 0px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.info2 {
|
||
|
|
padding-bottom: 6px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.day {
|
||
|
|
font-size: 18px;
|
||
|
|
font-weight: lighter;
|
||
|
|
font-style: italic;
|
||
|
|
}
|
||
|
|
|
||
|
|
.icon {
|
||
|
|
font-size: 50px;
|
||
|
|
padding: 20px 0px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.temp {
|
||
|
|
font-size: 15px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.border {
|
||
|
|
padding-top: 25px;
|
||
|
|
padding-bottom: 25px;
|
||
|
|
border-top: 3px solid {{dividerColor}};
|
||
|
|
}
|
||
|
|
|
||
|
|
.powered {
|
||
|
|
font-weight: bold;
|
||
|
|
font-style: italic;
|
||
|
|
padding: 10px 0 10px 0;
|
||
|
|
font-size: 14px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.text-right {
|
||
|
|
text-align: right;
|
||
|
|
}
|
||
|
|
|
||
|
|
.pull-right {
|
||
|
|
float: right !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.offset-xs-1 {
|
||
|
|
margin-left: 8.33333333%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.col-2 {
|
||
|
|
width: 16.66666667%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.col-3 {
|
||
|
|
width: 25%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.col-4 {
|
||
|
|
width: 33.33333333%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.col-5 {
|
||
|
|
width: 41.66666667%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.col-6 {
|
||
|
|
width: 50%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.col-7 {
|
||
|
|
width: 58.33333333%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.col-9 {
|
||
|
|
width: 75%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.col-12 {
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.weather-col {
|
||
|
|
float: left;
|
||
|
|
position: relative;
|
||
|
|
min-height: 1px;
|
||
|
|
padding-right: 15px;
|
||
|
|
padding-left: 15px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cont-main {
|
||
|
|
height: 160px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cont-day {
|
||
|
|
height: 180px;
|
||
|
|
}
|
||
|
|
|
||
|
|
{{ generateForecastCSS.backgrounds(
|
||
|
|
attribute(_context, 'background-image'),
|
||
|
|
attribute(_context, 'cloudy-image'),
|
||
|
|
attribute(_context, 'day-cloudy-image'),
|
||
|
|
attribute(_context, 'day-clear-image'),
|
||
|
|
attribute(_context, 'fog-image'),
|
||
|
|
attribute(_context, 'hail-image'),
|
||
|
|
attribute(_context, 'night-clear-image'),
|
||
|
|
attribute(_context, 'night-partly-cloudy-image'),
|
||
|
|
attribute(_context, 'rain-image'),
|
||
|
|
attribute(_context, 'snow-image'),
|
||
|
|
attribute(_context, 'windy-image')
|
||
|
|
) }}
|
||
|
|
|
||
|
|
{{ generateForecastCSS.colors(
|
||
|
|
attribute(_context, 'background-color'),
|
||
|
|
attribute(_context, 'text-color'),
|
||
|
|
attribute(_context, 'icons-color'),
|
||
|
|
null,
|
||
|
|
null,
|
||
|
|
null,
|
||
|
|
null
|
||
|
|
) }}
|
||
|
|
]]></style>
|
||
|
|
</stencil>
|
||
|
|
<assets>
|
||
|
|
<asset id="weather_14" type="path" mimeType="image/png" cmsOnly="true" path="/modules/assets/template-thumbnails/forecast/weather_14.png" />
|
||
|
|
</assets>
|
||
|
|
</template>
|
||
|
|
<template>
|
||
|
|
<id>weather_15</id>
|
||
|
|
<type>static</type>
|
||
|
|
<dataType>forecast</dataType>
|
||
|
|
<title>Square - Forecast squared with background</title>
|
||
|
|
<thumbnail>weather_15</thumbnail>
|
||
|
|
<startWidth>500</startWidth>
|
||
|
|
<startHeight>500</startHeight>
|
||
|
|
<properties>
|
||
|
|
<property id="text-color" type="color">
|
||
|
|
<title>Text</title>
|
||
|
|
<helpText>The colour of the text</helpText>
|
||
|
|
<default>#f9f9f9</default>
|
||
|
|
</property>
|
||
|
|
<property id="shadow-color" type="color">
|
||
|
|
<title>Shadow</title>
|
||
|
|
<helpText>The colour of the shadow</helpText>
|
||
|
|
<default>rgba(0, 0, 0, 0.6)</default>
|
||
|
|
</property>
|
||
|
|
<property id="icons-color" type="color">
|
||
|
|
<title>Icons</title>
|
||
|
|
<helpText>The colour of the icons</helpText>
|
||
|
|
<default>#f9f9f9</default>
|
||
|
|
</property>
|
||
|
|
<property id="background-color" type="color">
|
||
|
|
<title>Background</title>
|
||
|
|
<helpText>The colour of the background</helpText>
|
||
|
|
<default></default>
|
||
|
|
</property>
|
||
|
|
<property id="footer-color" type="color">
|
||
|
|
<title>Footer Background</title>
|
||
|
|
<helpText>The colour of the footer background</helpText>
|
||
|
|
<default>rgba(0, 0, 0, 0.67)</default>
|
||
|
|
</property>
|
||
|
|
<property id="footer-text-color" type="color">
|
||
|
|
<title>Footer Text</title>
|
||
|
|
<helpText>The colour of the footer text</helpText>
|
||
|
|
<default>#f9f9f9</default>
|
||
|
|
</property>
|
||
|
|
<property id="footer-icons-color" type="color">
|
||
|
|
<title>Footer Icons</title>
|
||
|
|
<helpText>The colour of the footer icons</helpText>
|
||
|
|
<default>#f9f9f9</default>
|
||
|
|
</property>
|
||
|
|
<property id="fontFamily" type="fontSelector">
|
||
|
|
<title>Font</title>
|
||
|
|
<helpText>Select a custom font - leave empty to use the default font.</helpText>
|
||
|
|
</property>
|
||
|
|
<property id="background-image" type="dropdown" mode="single">
|
||
|
|
<title>Background Image</title>
|
||
|
|
<helpText>The background image to use</helpText>
|
||
|
|
<default>fit</default>
|
||
|
|
<options>
|
||
|
|
<option name="none">None</option>
|
||
|
|
<option name="fit">Fit</option>
|
||
|
|
<option name="stretch">Stretch</option>
|
||
|
|
<option name="center">Center</option>
|
||
|
|
</options>
|
||
|
|
</property>
|
||
|
|
<property type="header" variant="main">
|
||
|
|
<title>Backgrounds</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property type="message">
|
||
|
|
<title>Select images from the media library to replace the default weather backgrounds.</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="cloudy-image" type="mediaSelector">
|
||
|
|
<title>Cloudy</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="day-cloudy-image" type="mediaSelector">
|
||
|
|
<title>Cloudy day</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="day-sunny-image" type="mediaSelector">
|
||
|
|
<title>Clear</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="fog-image" type="mediaSelector">
|
||
|
|
<title>Fog</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="hail-image" type="mediaSelector">
|
||
|
|
<title>Hail</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="night-clear-image" type="mediaSelector">
|
||
|
|
<title>Clear night</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="night-partly-cloudy-image" type="mediaSelector">
|
||
|
|
<title>Cloudy night</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="rain-image" type="mediaSelector">
|
||
|
|
<title>Raining</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="snow-image" type="mediaSelector">
|
||
|
|
<title>Snowing</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="windy-image" type="mediaSelector">
|
||
|
|
<title>Windy</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
</properties>
|
||
|
|
<stencil>
|
||
|
|
<width id="width">250</width>
|
||
|
|
<height id="height">250</height>
|
||
|
|
<hbs></hbs>
|
||
|
|
<twig><![CDATA[
|
||
|
|
{% if attribute(_context, 'background-image') != 'none' %}
|
||
|
|
<div class="bg-div bg-[icon]"></div>
|
||
|
|
{% endif %}
|
||
|
|
|
||
|
|
<div class="current-day-template" style="display: none;">
|
||
|
|
<div class="container">
|
||
|
|
<div class="region-top">
|
||
|
|
<div class="row-element-half">
|
||
|
|
<div class="shadowed temp">[temperatureRound]<sup>°[temperatureUnit]</sup></div>
|
||
|
|
</div><div class="row-element-half">
|
||
|
|
<div class=" main-icon shadowed"><i class="wi [wicon]"></i></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="region-middle">
|
||
|
|
<div class="date shadowed"> [time|MMM] [time|D]</div>
|
||
|
|
</div>
|
||
|
|
<div class="region-bottom bg-footer">
|
||
|
|
<div class="forecast-current">[summary]</div>
|
||
|
|
<div class="forecast-second">||Wind||: [windSpeed] [windSpeedUnit] [windDirection]</div>
|
||
|
|
<div class="forecast-second">||Humidity||: [humidityPercent]%</div>
|
||
|
|
</div>
|
||
|
|
</div><div class="weather-col col-12 powered">[Attribution]</div>
|
||
|
|
</div>
|
||
|
|
]]></twig>
|
||
|
|
<style><![CDATA[
|
||
|
|
{% import "forecastio-css-generator.twig" as generateForecastCSS %}
|
||
|
|
|
||
|
|
body {
|
||
|
|
{% if fontFamily %}
|
||
|
|
font-family: {{fontFamily}};
|
||
|
|
{% else %}
|
||
|
|
font-family: "Helvetica", "Arial", sans-serif;
|
||
|
|
{% endif %}
|
||
|
|
}
|
||
|
|
|
||
|
|
#content {
|
||
|
|
color: #f9f9f9;
|
||
|
|
}
|
||
|
|
|
||
|
|
.shadowed {
|
||
|
|
text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.6);
|
||
|
|
filter: dropshadow(color=rgba(0, 0, 0, 0.6), offx=8, offy=8);
|
||
|
|
}
|
||
|
|
|
||
|
|
.row-element-half {
|
||
|
|
display: inline-block;
|
||
|
|
width: 50%;
|
||
|
|
vertical-align: top;
|
||
|
|
}
|
||
|
|
|
||
|
|
.region-top {
|
||
|
|
height: 120px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.region-bottom {
|
||
|
|
background-color: #111;
|
||
|
|
background-color: #111a;
|
||
|
|
border-radius: 0 12px 0 0;
|
||
|
|
padding: 6px;
|
||
|
|
bottom: 14px;
|
||
|
|
font-size: 14px;
|
||
|
|
width: 90%;
|
||
|
|
height: 70px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.region-middle {
|
||
|
|
font-size: 24px;
|
||
|
|
line-height: 24px;
|
||
|
|
font-weight: bold;
|
||
|
|
padding: 0 4px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.main-icon {
|
||
|
|
text-align: right;
|
||
|
|
font-size: 50px;
|
||
|
|
line-height: 78px;
|
||
|
|
padding: 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.temp {
|
||
|
|
font-size: 60px;
|
||
|
|
padding: 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.temp sup {
|
||
|
|
font-size: 30px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.forecast-current {
|
||
|
|
margin-bottom: 12px;
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
|
||
|
|
.forecast-second {
|
||
|
|
font-size: 12px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#content > div.powered {
|
||
|
|
padding: 4px 0;
|
||
|
|
color: #000 !important;
|
||
|
|
font-size: 13px;
|
||
|
|
text-align: center;
|
||
|
|
background-color: white;
|
||
|
|
background-color: rgba(255, 255, 255, 0.787);
|
||
|
|
}
|
||
|
|
|
||
|
|
{{ generateForecastCSS.backgrounds(
|
||
|
|
attribute(_context, 'background-image'),
|
||
|
|
attribute(_context, 'cloudy-image'),
|
||
|
|
attribute(_context, 'day-cloudy-image'),
|
||
|
|
attribute(_context, 'day-clear-image'),
|
||
|
|
attribute(_context, 'fog-image'),
|
||
|
|
attribute(_context, 'hail-image'),
|
||
|
|
attribute(_context, 'night-clear-image'),
|
||
|
|
attribute(_context, 'night-partly-cloudy-image'),
|
||
|
|
attribute(_context, 'rain-image'),
|
||
|
|
attribute(_context, 'snow-image'),
|
||
|
|
attribute(_context, 'windy-image')
|
||
|
|
) }}
|
||
|
|
|
||
|
|
{{ generateForecastCSS.colors(
|
||
|
|
attribute(_context, 'background-color'),
|
||
|
|
attribute(_context, 'text-color'),
|
||
|
|
attribute(_context, 'icons-color'),
|
||
|
|
attribute(_context, 'footer-color'),
|
||
|
|
attribute(_context, 'footer-text-color'),
|
||
|
|
attribute(_context, 'footer-icons-color'),
|
||
|
|
attribute(_context, 'shadow-color')
|
||
|
|
) }}
|
||
|
|
]]></style>
|
||
|
|
</stencil>
|
||
|
|
<assets>
|
||
|
|
<asset id="weather_15" type="path" mimeType="image/png" cmsOnly="true" path="/modules/assets/template-thumbnails/forecast/weather_15.png" />
|
||
|
|
</assets>
|
||
|
|
</template>
|
||
|
|
<template>
|
||
|
|
<id>weather_16</id>
|
||
|
|
<type>static</type>
|
||
|
|
<dataType>forecast</dataType>
|
||
|
|
<title>Square - Detailed weather</title>
|
||
|
|
<thumbnail>weather_16</thumbnail>
|
||
|
|
<startWidth>500</startWidth>
|
||
|
|
<startHeight>500</startHeight>
|
||
|
|
<properties>
|
||
|
|
<property id="text-color" type="color">
|
||
|
|
<title>Text</title>
|
||
|
|
<helpText>The colour of the text</helpText>
|
||
|
|
<default>#f9f9f9</default>
|
||
|
|
</property>
|
||
|
|
<property id="shadow-color" type="color">
|
||
|
|
<title>Shadow</title>
|
||
|
|
<helpText>The colour of the shadow</helpText>
|
||
|
|
<default>rgba(0, 0, 0, 0.6)</default>
|
||
|
|
</property>
|
||
|
|
<property id="icons-color" type="color">
|
||
|
|
<title>Icons</title>
|
||
|
|
<helpText>The colour of the icons</helpText>
|
||
|
|
<default>#f9f9f9</default>
|
||
|
|
</property>
|
||
|
|
<property id="background-color" type="color">
|
||
|
|
<title>Background</title>
|
||
|
|
<helpText>The colour of the background</helpText>
|
||
|
|
<default></default>
|
||
|
|
</property>
|
||
|
|
<property id="footer-color" type="color">
|
||
|
|
<title>Footer Background</title>
|
||
|
|
<helpText>The colour of the footer background</helpText>
|
||
|
|
<default>rgba(0, 0, 0, 0.67)</default>
|
||
|
|
</property>
|
||
|
|
<property id="footer-text-color" type="color">
|
||
|
|
<title>Footer Text</title>
|
||
|
|
<helpText>The colour of the footer text</helpText>
|
||
|
|
<default>#f9f9f9</default>
|
||
|
|
</property>
|
||
|
|
<property id="footer-icons-color" type="color">
|
||
|
|
<title>Footer Icons</title>
|
||
|
|
<helpText>The colour of the footer icons</helpText>
|
||
|
|
<default>#f9f9f9</default>
|
||
|
|
</property>
|
||
|
|
<property id="fontFamily" type="fontSelector">
|
||
|
|
<title>Font</title>
|
||
|
|
<helpText>Select a custom font - leave empty to use the default font.</helpText>
|
||
|
|
</property>
|
||
|
|
<property id="background-image" type="dropdown" mode="single">
|
||
|
|
<title>Background Image</title>
|
||
|
|
<helpText>The background image to use</helpText>
|
||
|
|
<default>fit</default>
|
||
|
|
<options>
|
||
|
|
<option name="none">None</option>
|
||
|
|
<option name="fit">Fit</option>
|
||
|
|
<option name="stretch">Stretch</option>
|
||
|
|
<option name="center">Center</option>
|
||
|
|
</options>
|
||
|
|
</property>
|
||
|
|
<property type="header" variant="main">
|
||
|
|
<title>Backgrounds</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property type="message">
|
||
|
|
<title>Select images from the media library to replace the default weather backgrounds.</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="cloudy-image" type="mediaSelector">
|
||
|
|
<title>Cloudy</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="day-cloudy-image" type="mediaSelector">
|
||
|
|
<title>Cloudy day</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="day-sunny-image" type="mediaSelector">
|
||
|
|
<title>Clear</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="fog-image" type="mediaSelector">
|
||
|
|
<title>Fog</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="hail-image" type="mediaSelector">
|
||
|
|
<title>Hail</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="night-clear-image" type="mediaSelector">
|
||
|
|
<title>Clear night</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="night-partly-cloudy-image" type="mediaSelector">
|
||
|
|
<title>Cloudy night</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="rain-image" type="mediaSelector">
|
||
|
|
<title>Raining</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="snow-image" type="mediaSelector">
|
||
|
|
<title>Snowing</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="windy-image" type="mediaSelector">
|
||
|
|
<title>Windy</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
</properties>
|
||
|
|
<stencil>
|
||
|
|
<width id="width">250</width>
|
||
|
|
<height id="height">250</height>
|
||
|
|
<hbs></hbs>
|
||
|
|
<twig><![CDATA[
|
||
|
|
{% if attribute(_context, 'background-image') != 'none' %}
|
||
|
|
<div class="bg-div bg-[icon]"></div>
|
||
|
|
{% endif %}
|
||
|
|
|
||
|
|
<div class="current-day-template" style="display: none;">
|
||
|
|
<div class="main-container container">
|
||
|
|
<div class="top-content">
|
||
|
|
<div class="row-element-half">
|
||
|
|
<div class="date shadowed"> [time|MMM] [time|D]</div>
|
||
|
|
<div class="shadowed temp">
|
||
|
|
[temperatureRound]<sup>°[temperatureUnit]</sup>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row-element-half">
|
||
|
|
<div class="main-icon shadowed"><i class="wi [wicon]"></i></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="bottom-content bg-footer">
|
||
|
|
<div class="row-element-full forecast-current"><strong>[summary]</strong></div>
|
||
|
|
<div class="row-element-full forecast-second">||Maximum temperature||:
|
||
|
|
[temperatureMaxRound]°[temperatureUnit]</div>
|
||
|
|
<div class="row-element-full forecast-second">||Minimum temperature||:
|
||
|
|
[temperatureMinRound]°[temperatureUnit]</div>
|
||
|
|
<div class="row-element-full forecast-second">||Humidity||: [humidityPercent]%</div>
|
||
|
|
<div class="row-element-full forecast-second">||Wind||: [windSpeed] [windSpeedUnit] [windDirection]</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="weather-col col-12 powered">[Attribution]</div>
|
||
|
|
</div>
|
||
|
|
]]></twig>
|
||
|
|
<style><![CDATA[
|
||
|
|
{% import "forecastio-css-generator.twig" as generateForecastCSS %}
|
||
|
|
|
||
|
|
body {
|
||
|
|
width: 250px !important;
|
||
|
|
height: 250px !important;
|
||
|
|
{% if fontFamily %}
|
||
|
|
font-family: {{fontFamily}};
|
||
|
|
{% else %}
|
||
|
|
font-family: "Helvetica", "Arial", sans-serif;
|
||
|
|
{% endif %}
|
||
|
|
}
|
||
|
|
|
||
|
|
#content {
|
||
|
|
color: #f9f9f9;
|
||
|
|
}
|
||
|
|
|
||
|
|
.shadowed {
|
||
|
|
text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.6);
|
||
|
|
filter: dropshadow(color=rgba(0, 0, 0, 0.6), offx=6, offy=6);
|
||
|
|
}
|
||
|
|
|
||
|
|
.main-container {
|
||
|
|
padding-bottom: 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.top-content {
|
||
|
|
font-size: 0;
|
||
|
|
height: 110px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.bottom-content {
|
||
|
|
height: 90px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.row-element-half {
|
||
|
|
display: inline-block;
|
||
|
|
width: 50%;
|
||
|
|
vertical-align: top;
|
||
|
|
}
|
||
|
|
|
||
|
|
.date {
|
||
|
|
font-weight: 900;
|
||
|
|
font-size: 20px;
|
||
|
|
text-transform: uppercase;
|
||
|
|
padding: 12px 0px 0px 12px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.temp {
|
||
|
|
font-size: 35px;
|
||
|
|
font-weight: 900;
|
||
|
|
padding: 12px 0px 0px 12px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.temp sup {
|
||
|
|
font-size: 15px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.main-icon {
|
||
|
|
line-height: 84px;
|
||
|
|
font-size: 60px;
|
||
|
|
text-align: right;
|
||
|
|
padding: 12px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.bg-footer {
|
||
|
|
background-color: #111;
|
||
|
|
background-color: #111a;
|
||
|
|
padding: 10px 8px;
|
||
|
|
font-size: 13px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.forecast-current {
|
||
|
|
margin-bottom: 4px;
|
||
|
|
font-size: 14px;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.powered {
|
||
|
|
padding: 4px 0;
|
||
|
|
color: white;
|
||
|
|
font-size: 13px;
|
||
|
|
text-align: center;
|
||
|
|
background-color: #222;
|
||
|
|
}
|
||
|
|
|
||
|
|
{{ generateForecastCSS.backgrounds(
|
||
|
|
attribute(_context, 'background-image'),
|
||
|
|
attribute(_context, 'cloudy-image'),
|
||
|
|
attribute(_context, 'day-cloudy-image'),
|
||
|
|
attribute(_context, 'day-clear-image'),
|
||
|
|
attribute(_context, 'fog-image'),
|
||
|
|
attribute(_context, 'hail-image'),
|
||
|
|
attribute(_context, 'night-clear-image'),
|
||
|
|
attribute(_context, 'night-partly-cloudy-image'),
|
||
|
|
attribute(_context, 'rain-image'),
|
||
|
|
attribute(_context, 'snow-image'),
|
||
|
|
attribute(_context, 'windy-image')
|
||
|
|
) }}
|
||
|
|
|
||
|
|
{{ generateForecastCSS.colors(
|
||
|
|
attribute(_context, 'background-color'),
|
||
|
|
attribute(_context, 'text-color'),
|
||
|
|
attribute(_context, 'icons-color'),
|
||
|
|
attribute(_context, 'footer-color'),
|
||
|
|
attribute(_context, 'footer-text-color'),
|
||
|
|
attribute(_context, 'footer-icons-color'),
|
||
|
|
attribute(_context, 'shadow-color')
|
||
|
|
) }}
|
||
|
|
]]></style>
|
||
|
|
</stencil>
|
||
|
|
<assets>
|
||
|
|
<asset id="weather_16" type="path" mimeType="image/png" cmsOnly="true" path="/modules/assets/template-thumbnails/forecast/weather_16.png" />
|
||
|
|
</assets>
|
||
|
|
</template>
|
||
|
|
<template>
|
||
|
|
<id>weather_17</id>
|
||
|
|
<type>static</type>
|
||
|
|
<dataType>forecast</dataType>
|
||
|
|
<title>Scale - Weather background only</title>
|
||
|
|
<thumbnail>weather_17</thumbnail>
|
||
|
|
<startWidth>1200</startWidth>
|
||
|
|
<startHeight>800</startHeight>
|
||
|
|
<properties>
|
||
|
|
<property id="footer-color" type="color">
|
||
|
|
<title>Footer Background</title>
|
||
|
|
<helpText>The colour of the footer background</helpText>
|
||
|
|
<default>rgba(255, 255, 255, 0.787)</default>
|
||
|
|
</property>
|
||
|
|
<property id="footer-text-color" type="color">
|
||
|
|
<title>Footer Text</title>
|
||
|
|
<helpText>The colour of the footer text</helpText>
|
||
|
|
<default>#000</default>
|
||
|
|
</property>
|
||
|
|
<property id="fontSize" type="number">
|
||
|
|
<title>Font Size</title>
|
||
|
|
<default>13</default>
|
||
|
|
</property>
|
||
|
|
<property id="background-image" type="dropdown" mode="single">
|
||
|
|
<title>Background Image</title>
|
||
|
|
<helpText>The background image to use</helpText>
|
||
|
|
<default>fit</default>
|
||
|
|
<options>
|
||
|
|
<option name="none">None</option>
|
||
|
|
<option name="fit">Fit</option>
|
||
|
|
<option name="stretch">Stretch</option>
|
||
|
|
<option name="center">Center</option>
|
||
|
|
</options>
|
||
|
|
</property>
|
||
|
|
<property type="header" variant="main">
|
||
|
|
<title>Backgrounds</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property type="message">
|
||
|
|
<title>Select images from the media library to replace the default weather backgrounds.</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="cloudy-image" type="mediaSelector">
|
||
|
|
<title>Cloudy</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="day-cloudy-image" type="mediaSelector">
|
||
|
|
<title>Cloudy day</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="day-sunny-image" type="mediaSelector">
|
||
|
|
<title>Clear</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="fog-image" type="mediaSelector">
|
||
|
|
<title>Fog</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="hail-image" type="mediaSelector">
|
||
|
|
<title>Hail</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="night-clear-image" type="mediaSelector">
|
||
|
|
<title>Clear night</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="night-partly-cloudy-image" type="mediaSelector">
|
||
|
|
<title>Cloudy night</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="rain-image" type="mediaSelector">
|
||
|
|
<title>Raining</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="snow-image" type="mediaSelector">
|
||
|
|
<title>Snowing</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="windy-image" type="mediaSelector">
|
||
|
|
<title>Windy</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
</properties>
|
||
|
|
<stencil>
|
||
|
|
<twig><![CDATA[
|
||
|
|
{% if attribute(_context, 'background-image') != 'none' %}
|
||
|
|
<div class="bg-div bg-[icon]"></div>
|
||
|
|
{% endif %}
|
||
|
|
|
||
|
|
<div class="current-day-template" style="display: none;">
|
||
|
|
<div class="container main-container"></div>
|
||
|
|
<div class="weather-col col-12 powered bg-footer">[Attribution]</div>
|
||
|
|
</div>
|
||
|
|
]]></twig>
|
||
|
|
<style><![CDATA[
|
||
|
|
{% import "forecastio-css-generator.twig" as generateForecastCSS %}
|
||
|
|
|
||
|
|
#content, .main-container {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.powered {
|
||
|
|
position: absolute;
|
||
|
|
bottom: 0;
|
||
|
|
width: 100%;
|
||
|
|
padding: 4px 0;
|
||
|
|
color: #000;
|
||
|
|
font-size: {{fontSize}}px;
|
||
|
|
text-align: center;
|
||
|
|
background-color: white;
|
||
|
|
background-color: rgba(255, 255, 255, 0.787);
|
||
|
|
}
|
||
|
|
|
||
|
|
{{ generateForecastCSS.backgrounds(
|
||
|
|
attribute(_context, 'background-image'),
|
||
|
|
attribute(_context, 'cloudy-image'),
|
||
|
|
attribute(_context, 'day-cloudy-image'),
|
||
|
|
attribute(_context, 'day-clear-image'),
|
||
|
|
attribute(_context, 'fog-image'),
|
||
|
|
attribute(_context, 'hail-image'),
|
||
|
|
attribute(_context, 'night-clear-image'),
|
||
|
|
attribute(_context, 'night-partly-cloudy-image'),
|
||
|
|
attribute(_context, 'rain-image'),
|
||
|
|
attribute(_context, 'snow-image'),
|
||
|
|
attribute(_context, 'windy-image')
|
||
|
|
) }}
|
||
|
|
|
||
|
|
{{ generateForecastCSS.colors(
|
||
|
|
null,
|
||
|
|
null,
|
||
|
|
null,
|
||
|
|
attribute(_context, 'footer-color'),
|
||
|
|
attribute(_context, 'footer-text-color'),
|
||
|
|
null,
|
||
|
|
null
|
||
|
|
) }}
|
||
|
|
]]></style>
|
||
|
|
</stencil>
|
||
|
|
<assets>
|
||
|
|
<asset id="weather_17" type="path" mimeType="image/png" cmsOnly="true" path="/modules/assets/template-thumbnails/forecast/weather_17.png" />
|
||
|
|
</assets>
|
||
|
|
</template>
|
||
|
|
<template>
|
||
|
|
<id>weather_18</id>
|
||
|
|
<type>static</type>
|
||
|
|
<dataType>forecast</dataType>
|
||
|
|
<title>Landscape - Weather fullscreen</title>
|
||
|
|
<thumbnail>weather_18</thumbnail>
|
||
|
|
<startWidth>960</startWidth>
|
||
|
|
<startHeight>540</startHeight>
|
||
|
|
<properties>
|
||
|
|
<property id="text-color" type="color">
|
||
|
|
<title>Text</title>
|
||
|
|
<helpText>The colour of the text</helpText>
|
||
|
|
<default>#fff</default>
|
||
|
|
</property>
|
||
|
|
<property id="icons-color" type="color">
|
||
|
|
<title>Icons</title>
|
||
|
|
<helpText>The colour of the icons</helpText>
|
||
|
|
<default>#fff</default>
|
||
|
|
</property>
|
||
|
|
<property id="containerBackground" type="color">
|
||
|
|
<title>Container Background</title>
|
||
|
|
<helpText>The colour of the container background</helpText>
|
||
|
|
<default>rgba(0, 0, 0, 0.53)</default>
|
||
|
|
</property>
|
||
|
|
<property id="footer-color" type="color">
|
||
|
|
<title>Footer Background</title>
|
||
|
|
<helpText>The colour of the footer background</helpText>
|
||
|
|
<default>rgba(255, 255, 255, 0.787)</default>
|
||
|
|
</property>
|
||
|
|
<property id="footer-text-color" type="color">
|
||
|
|
<title>Footer Text</title>
|
||
|
|
<helpText>The colour of the footer text</helpText>
|
||
|
|
<default>#000</default>
|
||
|
|
</property>
|
||
|
|
<property id="fontSize" type="number">
|
||
|
|
<title>Font Size</title>
|
||
|
|
<default>13</default>
|
||
|
|
</property>
|
||
|
|
<property id="fontFamily" type="fontSelector">
|
||
|
|
<title>Font</title>
|
||
|
|
<helpText>Select a custom font - leave empty to use the default font.</helpText>
|
||
|
|
</property>
|
||
|
|
<property id="background-image" type="dropdown" mode="single">
|
||
|
|
<title>Background Image</title>
|
||
|
|
<helpText>The background image to use</helpText>
|
||
|
|
<default>fit</default>
|
||
|
|
<options>
|
||
|
|
<option name="none">None</option>
|
||
|
|
<option name="fit">Fit</option>
|
||
|
|
<option name="stretch">Stretch</option>
|
||
|
|
<option name="center">Center</option>
|
||
|
|
</options>
|
||
|
|
</property>
|
||
|
|
<property type="header" variant="main">
|
||
|
|
<title>Backgrounds</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property type="message">
|
||
|
|
<title>Select images from the media library to replace the default weather backgrounds.</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="cloudy-image" type="mediaSelector">
|
||
|
|
<title>Cloudy</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="day-cloudy-image" type="mediaSelector">
|
||
|
|
<title>Cloudy day</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="day-sunny-image" type="mediaSelector">
|
||
|
|
<title>Clear</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="fog-image" type="mediaSelector">
|
||
|
|
<title>Fog</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="hail-image" type="mediaSelector">
|
||
|
|
<title>Hail</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="night-clear-image" type="mediaSelector">
|
||
|
|
<title>Clear night</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="night-partly-cloudy-image" type="mediaSelector">
|
||
|
|
<title>Cloudy night</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="rain-image" type="mediaSelector">
|
||
|
|
<title>Raining</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="snow-image" type="mediaSelector">
|
||
|
|
<title>Snowing</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="windy-image" type="mediaSelector">
|
||
|
|
<title>Windy</title>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="background-image" type="neq">none</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
</properties>
|
||
|
|
<stencil>
|
||
|
|
<width id="width">1920</width>
|
||
|
|
<height id="height">1080</height>
|
||
|
|
<hbs></hbs>
|
||
|
|
<twig><![CDATA[
|
||
|
|
{% if attribute(_context, 'background-image') != 'none' %}
|
||
|
|
<div class="bg-div bg-[icon]"></div>
|
||
|
|
{% endif %}
|
||
|
|
|
||
|
|
<div class="current-day-template" style="display: none;">
|
||
|
|
<div class="container main-container">
|
||
|
|
<div class="corner-info">
|
||
|
|
<div class="top-container">
|
||
|
|
<div class="row row-up">
|
||
|
|
<div class="block-container">
|
||
|
|
<div class="text-right temp shadowed">[temperatureRound]°[temperatureUnit]</div>
|
||
|
|
</div>
|
||
|
|
<div class="block-container">
|
||
|
|
<div class="rotateInUpRight main-icon shadowed"><i class="wi [wicon]"></i></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row">
|
||
|
|
<div class="block-container-full">
|
||
|
|
<div class="date shadowed"> [time|MMM] [time|D]</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="row">
|
||
|
|
<div class="forecast-current">[summary]</div>
|
||
|
|
<div class="forecast-second">||Wind||: [windDirection] [windSpeed] [windSpeedUnit]</div>
|
||
|
|
<div class="forecast-second">||Humidity||: [humidityPercent]%</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="weather-col col-12 bg-footer powered">[Attribution]</div>
|
||
|
|
</div>
|
||
|
|
]]></twig>
|
||
|
|
<style><![CDATA[
|
||
|
|
{% import "forecastio-css-generator.twig" as generateForecastCSS %}
|
||
|
|
|
||
|
|
body {
|
||
|
|
width: 1920px !important;
|
||
|
|
height: 1080px !important;
|
||
|
|
{% if fontFamily %}
|
||
|
|
font-family: {{fontFamily}};
|
||
|
|
{% else %}
|
||
|
|
font-family: "Helvetica", "Arial", sans-serif;
|
||
|
|
{% endif %}
|
||
|
|
}
|
||
|
|
|
||
|
|
#content {
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
|
||
|
|
#content, .main-container {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.shadowed {
|
||
|
|
text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.4);
|
||
|
|
filter: dropshadow(color=rgba(0, 0, 0, 0.4), offx=2, offy=2);
|
||
|
|
}
|
||
|
|
|
||
|
|
.corner-info {
|
||
|
|
width: 200px;
|
||
|
|
background-color: {{containerBackground}};
|
||
|
|
opacity: 0.6;
|
||
|
|
border-radius: 0 0 30px 0;
|
||
|
|
padding: 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.corner-info .top-container .row-up {
|
||
|
|
font-size: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.block-container {
|
||
|
|
display: inline-block;
|
||
|
|
width: 50%;
|
||
|
|
height: 50px;
|
||
|
|
vertical-align: top;
|
||
|
|
}
|
||
|
|
|
||
|
|
.date {
|
||
|
|
font-weight: 900;
|
||
|
|
font-size: 20px;
|
||
|
|
text-transform: uppercase;
|
||
|
|
}
|
||
|
|
|
||
|
|
.temp {
|
||
|
|
font-size: 30px;
|
||
|
|
font-weight: 900;
|
||
|
|
}
|
||
|
|
|
||
|
|
.main-icon {
|
||
|
|
padding: 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.main-icon i {
|
||
|
|
font-size: 50px;
|
||
|
|
padding: 5px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.powered {
|
||
|
|
position: absolute;
|
||
|
|
bottom: 0;
|
||
|
|
width: 100%;
|
||
|
|
padding: 4px 0;
|
||
|
|
color: #000;
|
||
|
|
font-size: {{fontSize}}px;
|
||
|
|
text-align: center;
|
||
|
|
background-color: white;
|
||
|
|
background-color: rgba(255, 255, 255, 0.787);
|
||
|
|
}
|
||
|
|
|
||
|
|
{{ generateForecastCSS.backgrounds(
|
||
|
|
attribute(_context, 'background-image'),
|
||
|
|
attribute(_context, 'cloudy-image'),
|
||
|
|
attribute(_context, 'day-cloudy-image'),
|
||
|
|
attribute(_context, 'day-clear-image'),
|
||
|
|
attribute(_context, 'fog-image'),
|
||
|
|
attribute(_context, 'hail-image'),
|
||
|
|
attribute(_context, 'night-clear-image'),
|
||
|
|
attribute(_context, 'night-partly-cloudy-image'),
|
||
|
|
attribute(_context, 'rain-image'),
|
||
|
|
attribute(_context, 'snow-image'),
|
||
|
|
attribute(_context, 'windy-image')
|
||
|
|
) }}
|
||
|
|
|
||
|
|
{{ generateForecastCSS.colors(
|
||
|
|
null,
|
||
|
|
attribute(_context, 'text-color'),
|
||
|
|
attribute(_context, 'icons-color'),
|
||
|
|
attribute(_context, 'footer-color'),
|
||
|
|
attribute(_context, 'footer-text-color'),
|
||
|
|
null,
|
||
|
|
null
|
||
|
|
) }}
|
||
|
|
]]></style>
|
||
|
|
</stencil>
|
||
|
|
<assets>
|
||
|
|
<asset id="weather_18" type="path" mimeType="image/png" cmsOnly="true" path="/modules/assets/template-thumbnails/forecast/weather_18.png" />
|
||
|
|
</assets>
|
||
|
|
</template>
|
||
|
|
</templates>
|