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 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 01 --> <div class="container"> <div class="row"> <div class="weather-01 col-lg-6 col-md-6 col-xs-12"> <div class="row"> <div class="col-xs-12"> <form class="form-horizontal" action="javascript:"> <div class="input-group"> <input id="location" type="text" class="form-control" value="Denver, Colorado" placeholder="Enter your location"> <span class="input-group-btn"> <button id="search-location" class="btn btn-default" type="submit"> <div class="livicon-evo" data-options=" name: search.svg; style: lines; size: 30px; strokeColor: #fff; strokeWidth: 2; eventOn: parent"> </div> </button> </span> </div> </form> </div> </div> <div class="row main-holder"> <div class="col-sm-4 col-xs-12"> <div id="main-icon" data-options=" size: 100%; style: lines; strokeColor: #fff; eventType: none; autoPlay: true; duration: 7; repeat: loop; repeatDelay:0"> </div> </div> <div class="col-sm-4 col-xs-6"> <p id="temperature" class="text-right"></p> </div> <div class="col-sm-4 col-xs-6 cel-far"> <div id="cel-far-main" class="livicon-evo" data-options=" name: morph-celsius-fahrenheit.svg; morphState: end; style: lines; strokeColor: #fff; strokeWidth: 3; eventType: none"> </div> <div id="cel-far-switch" class="livicon-evo" data-options=" name: morph-celsius-fahrenheit.svg; morphState: start; style: lines; strokeColor: #fff; strokeWidth: original; eventType: click"> </div> </div> </div> <div class="row info-holder"> <div class="col-sm-4 col-xs-12"> <p id="condition" class="text-capitalize text-center"></p> </div> <div class="col-sm-4 col-xs-6"> <p id="wind"> <div id="wind-icon" data-options=" name: wind-south.svg; style: lines; size: 30px; strokeColor: #fff; strokeWidth: 2; eventOn: parent"> </div> <span id="wind-value"></span> </p> </div> <div class="col-sm-4 col-xs-6"> <p id="humidity"> <div id="humidity-icon" class="livicon-evo" data-options=" name: drop.svg; style: lines; size: 30px; strokeColor: #fff; strokeWidth: 2; eventOn: parent"> </div> <span id="humidity-value"></span> </p> </div> </div> <div class="row"> <div class="col-xs-12"> <div id="navigation"> <div> <div data-daytime="morning" class="livicon-evo nav-icon active" data-options=" name: morph-circle-square2.svg; morphState: end; style: solid; size: 14px; solidColor: #fff; strokeWidth: 0; eventType: click"> </div> <div data-daytime="afternoon" class="livicon-evo nav-icon" data-options=" name: morph-circle-square2.svg; morphState: start; style: solid; size: 14px; solidColor: #fff; strokeWidth: 0; eventType: click"> </div> <div data-daytime="evening" class="livicon-evo nav-icon" data-options=" name: morph-circle-square2.svg; morphState: start; style: solid; size: 14px; solidColor: #fff; strokeWidth: 0; eventType: click"> </div> <div data-daytime="night" class="livicon-evo nav-icon" data-options=" name: morph-circle-square2.svg; morphState: start; style: solid; size: 14px; solidColor: #fff; strokeWidth: 0; eventType: click"> </div> </div> </div> </div> </div> <div class="row info-bottom"> <div class="col-xs-7"> <p id="day-time"> Today, <span class="text-capitalize"></span> </p> </div> <div class="col-xs-5 text-right"> <p> <a href="javascript:">Next Day</a> </p> </div> </div> </div> </div> </div>
/********* Weather Widget 01 **********/ .weather-01 { background-color: #fff; padding: 25px 40px 25px; color: #fff; border-radius: 4px; } .weather-01 form { height: 80px; border-bottom: 2px solid rgba(255,255,255,0.3); } .weather-01 p { color: #fff; font-weight: 500; font-size: 16px; } .weather-01 #location { border: none!important; background-color: transparent!important; color: #fff; font-size: 26px; padding: 0; height: 60px; -webkit-box-shadow: none; box-shadow: none; } .weather-01 #location:focus { border: none; outline: 0; -webkit-box-shadow: none; box-shadow: none; } .weather-01 #location::-moz-placeholder { color: rgba(255,255,255,0.3); opacity: 1; } .weather-01 #location:-ms-input-placeholder { color: rgba(255,255,255,0.3); } .weather-01 #location::-webkit-input-placeholder { color: rgba(255,255,255,0.3); } .weather-01 #search-location { padding: 10px 10px 10px 11px; border: none; border-radius: 0; background-color: rgba(0,0,0,0.1); opacity: 0.8; } .weather-01 #search-location:active, .weather-01 #search-location:focus { outline: none; -webkit-box-shadow: none; box-shadow: none; } .weather-01 .main-holder { padding-top: 30px; position: relative; } .weather-01 #main-icon { opacity: 0.3; } .weather-01 .cel-far { position: relative; margin-top: 10px; padding-left: 0; } .weather-01 #temperature { color: rgba(255,255,255,0.9); font-size: 130px; font-weight: 100; line-height: 1; margin-top: 10px; margin-left: -15px; } .weather-01 #cel-far-main { position: absolute; top: -27px; right: 40px; width: 180px!important; opacity: 0.9; } .weather-01 #cel-far-switch { position: absolute; top: 17px; right: 0; width: 60px!important; opacity: 0.3; cursor: pointer; } .weather-01 #cel-far-switch svg { border-left: 2px solid #fff; } .weather-01 .info-holder { margin-top: 25px; color: rgba(255,255,255,0.9); font-size: 16px; font-weight: 500; } .weather-01 .info-holder p { margin: 0; } .weather-01 #wind-icon, .weather-01 #humidity-icon { float: left; margin: -5px 5px 0 10px; opacity: 0.3; } .weather-01 #navigation { margin-top: 30px; margin-bottom: 40px; height: 20px; } .weather-01 #navigation > div { width: 80px; margin: 0 auto; } .weather-01 #navigation .livicon-evo { opacity: 0.3; float: left; margin: 3px; cursor: pointer; -webkit-transition: opacity .2s linear; -ms-transition: opacity .2s linear; transition: opacity .2s linear; } .weather-01 #navigation .livicon-evo.active { opacity: 0.9; } .weather-01 #navigation .livicon-evo:hover { opacity: 0.9; } .weather-01 .info-bottom { font-size: 16px; font-weight: 500; color: rgba(255,255,255,0.9); } .weather-01 .info-bottom a { font-size: 16px; font-weight: 500; color: rgba(255,255,255,0.9); } .weather-01 .info-bottom a:hover { color: rgba(255,255,255,0.9); } @media (min-width: 992px) and (max-width: 1199px) { .weather-01 #temperature { font-size: 90px; } .weather-01 #cel-far-main { width: 120px!important; top: -17px; } .weather-01 #cel-far-switch { top: 0; right: 0; width: 60px!important; } .weather-01 #cel-far-switch svg { border-left: none; } } @media (max-width: 767px) { .weather-01 { padding: 25px 20px 25px; } .weather-01 #main-icon { width: 62%!important; margin: 0 auto 30px; } .weather-01 #temperature { font-size: 90px; } .weather-01 #cel-far-main { width: 120px!important; top: -17px; left: 0; right: none; } .weather-01 #cel-far-switch { top: 0; right: none; left: 100px; width: 60px!important; } .weather-01 #cel-far-switch svg { border-left: none; } }
//Weather Widget Template 01 $(document).ready(function () { var data = { "location": "Denver, Colorado", "morning": { "icon": "weather-rain-thunder", "condition": "thunderstorm", "temp_cel": "17", "temp_far": "63", "wind_direction": "se", "wind_metric": "18 km/h", "wind_british": "11 mph", "humidity": "93%" }, "afternoon": { "icon": "weather-rain", "condition": "rain", "temp_cel": "12", "temp_far": "54", "wind_direction": "n", "wind_metric": "23 km/h", "wind_british": "14 mph", "humidity": "78%" }, "evening": { "icon": "weather-cloud", "condition": "overcast", "temp_cel": "4", "temp_far": "39", "wind_direction": "w", "wind_metric": "17 km/h", "wind_british": "10 mph", "humidity": "69%" }, "night": { "icon": "weather-snow", "condition": "snow", "temp_cel": "-3", "temp_far": "25", "wind_direction": "nw", "wind_metric": "8 km/h", "wind_british": "5 mph", "humidity": "75%" } }; var colors = { morning: '#4C627B', afternoon: '#68829e', evening: '#336b87', night: '#003b46', }, daytime = 'morning', cur_data = data[daytime]; $('.weather-01').css('background-color', '#4C627B'); $('.weather-01 #location').val(data.location); $('.weather-01 #main-icon').addLiviconEvo({name: cur_data.icon}); $('.weather-01 #temperature').text(cur_data.temp_far); $('.weather-01 #condition').text(cur_data.condition); function windDir (val) { var rotate; switch (val) { case "n": rotate = 180; break; case "w": rotate = 90; break; case "e": rotate = 270; break; case "nw": rotate = 135; break; case "ne": rotate = -135; break; case "sw": rotate = 45; break; case "se": rotate = -45; break; default: //south (no icon rotation) break; }; return rotate; } $('.weather-01 #wind-icon').addLiviconEvo({rotate: windDir(cur_data.wind_direction)}); $('.weather-01 #wind-value').text(cur_data.wind_british); $('.weather-01 #humidity-value').text(cur_data.humidity); $('.weather-01 #day-time > span').text(daytime); $('.weather-01 #cel-far-switch').on('click', function () { var that = $(this),//switch icon state = that.liviconEvoState(); $('.weather-01 #cel-far-main').playLiviconEvo(); if (state === 'start') { var tl = new TimelineLite(); tl.to('.weather-01 #temperature, .weather-01 #wind-value', 0.1, {autoAlpha:0}); tl.call(function () { $('.weather-01 #temperature').text(cur_data.temp_cel); $('.weather-01 #wind-value').text(cur_data.wind_metric); }); tl.to('.weather-01 #temperature, .weather-01 #wind-value', 0.1, {autoAlpha:1}); } else { var tl = new TimelineLite(); tl.to('.weather-01 #temperature, .weather-01 #wind-value', 0.1, {autoAlpha:0}); tl.call(function () { $('.weather-01 #temperature').text(cur_data.temp_far); $('.weather-01 #wind-value').text(cur_data.wind_british); }); tl.to('.weather-01 #temperature, .weather-01 #wind-value', 0.1, {autoAlpha:1}); }; }); $('.weather-01 .nav-icon:not(active)').on('click', function () { function change (elem, val) { var tl = new TimelineLite(); tl.to(elem, 0.5, {autoAlpha:0, paddingLeft:'+=5px'}); tl.call(function () { $(elem).text(val); }); tl.to(elem, 0.5, {autoAlpha:1, paddingLeft:'-=5px'}); } var that = $(this);//switch icon daytime = that.data('daytime'); cur_data = data[daytime]; that.siblings('.active').removeClass('active').playLiviconEvo(); if (!that.hasClass('active')) { $('#main-icon').updateLiviconEvo({name: cur_data.icon, afterUpdate: function () { $('#main-icon').drawLiviconEvo(true); } }); }; that.addClass('active'); TweenLite.to('.weather-01', 1, {backgroundColor: colors[daytime]}); change('.weather-01 #condition', cur_data.condition); change('.weather-01 #humidity-value', cur_data.humidity); change('.weather-01 #day-time > span', daytime); var state = $('.weather-01 #cel-far-switch').liviconEvoState(); if (state === 'start') { change('.weather-01 #temperature', cur_data.temp_far); change('.weather-01 #wind-value', cur_data.wind_british); } else { change('.weather-01 #temperature', cur_data.temp_cel); change('.weather-01 #wind-value', cur_data.wind_metric); }; $('.weather-01 #wind-icon').addLiviconEvo({rotate: windDir(cur_data.wind_direction), drawTime:0.8, drawOnViewport: true}); $('.weather-01 #humidity-icon').playLiviconEvo({duration: 1}); }); });