Day time
°
condition
Wind:
Humidity:
Pressure:
Day time
°
condition
Wind:
Humidity:
Pressure:
Day time
°
condition
Wind:
Humidity:
Pressure:
Day time
°
condition
Wind:
Humidity:
Pressure:
This example with the weather widget is not a ready to use one, it's just a template as starting point for your further customization. The support doesn't include any help/advice/workflow with that.
Description: The second weather widget template for a customization with fake data. This examples uses additional JavaScript code for work.
Requires: Bootstrap 3.X for basic grid, buttons, text, etc. styles.
WordPress Note: This example may require theme files customization or using a page builder (composer) at your own. See on it as a starting point.
Important: LivIcons data-options
are set to different from these defaults only! If you have another set of the default options please use a full notation of them which you can get from the Configuration tool
<!-- Weather widget template 02 --> <div class="container"> <div class="row"> <div class="weather-02 col-lg-4 col-md-5 col-sm-6 col-xs-12"> <div class="row search-form"> <div class="col-xs-12"> <form class="form-horizontal" action="javascript:"> <div class="input-group"> <span class="input-group-addon"> <div class="livicon-evo" data-options=" name: location.svg; size: 30px; style: lines; strokeColor: #000; strokeWidth: 2; animated: false; drawOnViewport: false; colorsOnHover: none"> </div> </span> <input type="text" class="form-control" placeholder="Type and hit Enter" value="Bern, Switzerland"> </div> <input type="submit" style="position: absolute; left: -9999px; width: 1px; height: 1px;" tabindex="-1"> </form> </div> </div> <div class="row morning active" data-order="1"> <div class="col-xs-6"> <div class="weather-icon" data-options=" style: lines; strokeColor: #fff; strokeWidth: original; eventType: none; drawOnViewport: false; autoPlay: true; duration: 7; repeat: loop; repeatDelay:0; colorsOnHover: none"> weather-icon </div> </div> <div class="col-xs-6"> <p class="day-time text-uppercase">Day time</p> <p class="temperature"><span class="value"></span> °</p> <p class="condition text-capitalize">condition</p> <p class="wind">Wind: <span class="value"></span></p> <p class="humidity">Humidity: <span class="value"></span></p> <p class="pressure">Pressure: <span class="value"></span></p> </div> </div> <div class="row afternoon" data-order="2"> <div class="col-xs-6"> <div class="weather-icon" data-options=" style: lines; strokeColor: #fff; strokeWidth: original; eventType: none; drawOnViewport: false; duration: 7; repeat: loop; repeatDelay:0; colorsOnHover: none"> weather-icon </div> </div> <div class="col-xs-6"> <p class="day-time text-uppercase">Day time</p> <p class="temperature"><span class="value"></span> °</p> <p class="condition text-capitalize">condition</p> <p class="wind">Wind: <span class="value"></span></p> <p class="humidity">Humidity: <span class="value"></span></p> <p class="pressure">Pressure: <span class="value"></span></p> </div> </div> <div class="row evening" data-order="3"> <div class="col-xs-6"> <div class="weather-icon" data-options=" style: lines; strokeColor: #fff; strokeWidth: original; eventType: none; drawOnViewport: false; duration: 7; repeat: loop; repeatDelay:0; colorsOnHover: none"> weather-icon </div> </div> <div class="col-xs-6"> <p class="day-time text-uppercase">Day time</p> <p class="temperature"><span class="value"></span> °</p> <p class="condition text-capitalize">condition</p> <p class="wind">Wind: <span class="value"></span></p> <p class="humidity">Humidity: <span class="value"></span></p> <p class="pressure">Pressure: <span class="value"></span></p> </div> </div> <div class="row night" data-order="4"> <div class="col-xs-6"> <div class="weather-icon" data-options=" style: lines; strokeColor: #fff; strokeWidth: original; eventType: none; drawOnViewport: false; duration: 7; repeat: loop; repeatDelay:0; colorsOnHover: none"> weather-icon </div> </div> <div class="col-xs-6"> <p class="day-time text-uppercase">Day time</p> <p class="temperature"><span class="value"></span> °</p> <p class="condition text-capitalize">condition</p> <p class="wind">Wind: <span class="value"></span></p> <p class="humidity">Humidity: <span class="value"></span></p> <p class="pressure">Pressure: <span class="value"></span></p> </div> </div> </div> </div> </div>
/********* Weather Widget 02 **********/ .weather-02 { background-color: transparent; color: #fff; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .weather-02 .search-form { border-radius: 4px 4px 0 0; padding: 20px 0 15px; background-color: #f8e1e5; } .weather-02 .form-control { border: none!important; background-color: transparent!important; color: rgba(0,0,0,0.4); font-size: 18px; font-weight: 500; height: 40px; letter-spacing: 1px; -webkit-box-shadow: none; box-shadow: none; } .weather-02 .form-horizontal .livicon-evo { opacity: 0.4; } .weather-02 .form-control:focus { border: none; outline: 0; -webkit-box-shadow: none; box-shadow: none; } .weather-02 .form-control::-moz-placeholder { color: rgba(0,0,0,0.2); opacity: 1; } .weather-02 .form-control:-ms-input-placeholder { color: rgba(0,0,0,0.2); } .weather-02 .form-control::-webkit-input-placeholder { color: rgba(0,0,0,0.2); } .weather-02 .input-group-addon { padding: 0 0 0 5px; background-color: transparent!important; border: none; border-radius: 0; } .weather-02 .weather-icon { opacity: 0.4; position: absolute; top: 0; right: 20px; width: 140px!important; } .weather-02 .morning { padding: 20px 0; background-color: #bc6d4f; height:250px; overflow: hidden; cursor: pointer; } .weather-02 .afternoon .weather-icon, .weather-02 .evening .weather-icon, .weather-02 .night .weather-icon { top: -160px; } .weather-02 .afternoon { padding: 20px 0; background-color: #9d331f; height:95px; overflow: hidden; cursor: pointer; } .weather-02 .evening { padding: 20px 0; background-color: #500805; height:95px; overflow: hidden; cursor: pointer; } .weather-02 .night { padding: 20px 0; background-color: #1e0000; border-radius: 0 0 4px 4px; height:95px; overflow: hidden; cursor: pointer; } .weather-02 .day-time { color: rgba(255,255,255,0.5); font-weight: 900; letter-spacing: 2px; margin-bottom: 5px; } .weather-02 .temperature { color: rgba(255,255,255,0.9); font-size: 24px; margin-bottom: 20px; } .weather-02 .condition { color: rgba(255,255,255,0.9); font-size: 20px; font-weight: 300; margin-bottom: 10px; letter-spacing: 2px; } .weather-02 .wind, .weather-02 .humidity, .weather-02 .pressure { color: rgba(255,255,255,0.9); font-size: 14px; font-weight: 500; margin-bottom: 0px; letter-spacing: 1px; }
//Weather Widget Template 02 $(document).ready(function () { var data = { "location": "Bern, Switzerland", "morning": { "condition": "sunny", "icon": "weather-sun", "temperature": "6", "wind": "NE 2 mph", "humidity": "76%", "pressure": "1031 mb" }, "afternoon": { "condition": "clouds", "icon": "weather-cloud", "temperature": "10", "wind": "NW 5 mph", "humidity": "83%", "pressure": "1029 mb" }, "evening": { "condition": "rain", "icon": "weather-rain", "temperature": "3", "wind": "W 7 mph", "humidity": "93%", "pressure": "1028 mb" }, "night": { "condition": "snow", "icon": "weather-snow", "temperature": "-4", "wind": "NW 3 mph", "humidity": "87%", "pressure": "1026 mb" } }; $('.weather-02 .row:not(.search-form)').each(function () { var that = $(this), day_time = that.attr('class').split(' ')[1], cur_data = data[day_time]; that.find('.weather-icon').addLiviconEvo({name: cur_data.icon}); that.find('.day-time').text(day_time); that.find('.temperature .value').text(cur_data.temperature); that.find('.condition').text(cur_data.condition); that.find('.wind .value').text(cur_data.wind); that.find('.humidity .value').text(cur_data.humidity); that.find('.pressure .value').text(cur_data.pressure); }); $('.weather-02 .row:not(.search-form)').on('click', function () { var target = $(this), target_order = target.data('order'), active = $('.weather-02 .row.active'), active_order = active.data('order'), target_icon = target.find('.weather-icon'), active_icon = active.find('.weather-icon'), time = 0.8, ease = Power1.easeInOut; if (!target.hasClass('active')) { TweenLite.to(active, time, {height: '95px', ease: ease, onComplete: function () { active_icon.stopLiviconEvo(); }}); if (target_order > active_order) { var top = target_icon.css('top'); if (top === '160px') { target_icon.css('top', '-160px'); }; TweenLite.to(active_icon, time, {top: '160px', ease: ease}); } else if (target_order < active_order) { var top = target_icon.css('top'); if (top === '-160px') { target_icon.css('top', '160px'); }; TweenLite.to(active_icon, time, {top: '-160px', ease: ease}); }; active.removeClass('active'); TweenLite.to(target, time, {height: '250px', ease: ease}); TweenLite.to(target_icon, time, {top: '0px', ease: ease, onComplete: function () { target_icon.playLiviconEvo(); }}); target.addClass('active'); }; }); });