{"id":42715,"date":"2015-01-27T07:41:47","date_gmt":"2015-01-27T12:41:47","guid":{"rendered":"http:\/\/www.templatemonster.com\/help\/?p=42715"},"modified":"2015-01-27T07:41:47","modified_gmt":"2015-01-27T12:41:47","slug":"js-animated-how-to-set-up-under-construction-page","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/js-animated-how-to-set-up-under-construction-page.html","title":{"rendered":"JS Animated. How to set up Under Construction page"},"content":{"rendered":"

This tutorial shows how to set up Under Construction page in JS Animated template. <\/p>\r\nJS Animated. How to set up the Under Construction page<\/a>\r\n

    \r\n

  1. Make sure that you have unzipped the template package. Open site<\/strong> folder. Go to assets<\/strong> folder. Open under-construction.html<\/strong> page in editor:<\/p> \r\n \r\n\"How<\/a>\r\n<\/li>\r\n

  2. \r\n

    Below you can see under construction demo page:<\/p>\r\n \r\n\"How<\/a>\r\n<\/li>\r\n

  3. \r\n

    You should remove unneeded scripts and code that represents header menu for demo pages. Please check the video version of tutorial for more details. In our case code looks like the following:<\/p>\r\n

    <!DOCTYPE html>\r\n  <html lang="en">\r\n<head>\r\n<!-- Meta, title, CSS, favicons, etc. -->\r\n<meta charset="utf-8">\r\n<meta name="viewport" content="width=device-width, initial-scale=1.0">\r\n<meta name="description" content="">\r\n<meta name="author" content="">\r\n\r\n<title>Under Construction<\/title>  <link href="dist\/css\/bootstrap.css" rel="stylesheet">\r\n  <link href="tm\/css\/tm_docs.css" rel="stylesheet">  <\/head>\r\n  <body>\r\n  <a class="sr-only" href="#content">Skip navigation<\/a>  <div class="tm_constuction-main">\r\n  <div id="tm_constuction-box">\r\n  <div class="tm_inside">\r\n  <div class="tm_inner">\r\n  <h4>Our Website is<\/h4>\r\n  <h1>Under Construction<\/h1>\r\n  <h5>We'll be here soon with a new website.<\/h5>\r\n  <div id="tm_counter"><\/div>\r\n  <div class="tm_counter_desc">\r\n  <div class="fleft">Days<\/div>\r\n  <div class="fleft">Hours<\/div>\r\n  <div class="fleft">Minutes<\/div>\r\n  <div class="fleft">Seconds<\/div>\r\n  <\/div>\r\n  <\/div>\r\n  <\/div>\r\n  <\/div>\r\n  <\/div>\r\n\r\n  <script src="tm\/js\/jquery.js"><\/script>\r\n  <script src="tm\/js\/jquery-migrate-1.2.1.min.js"><\/script>\r\n  <script src="dist\/js\/bootstrap.js"><\/script>\r\n  <script src="tm\/js\/jquery.countdown.min.js"><\/script>\r\n\r\n  <\/body>\r\n  <\/html><\/pre>\r\n<\/li>\r\n
  4. \r\n  
    Copy\/move under-construction.html <\/strong>file to the folder with web site files.  Now we should adjust path to css\/js files (as we have moved under construction page to another location).<\/p>\r\n
     We have added assets\/<\/strong> folder to css and script calls <script src="tm\/js\/jquery.js"><\/script>. Now the path looks like <script src="assets\/<\/strong>tm\/js\/jquery.js"><\/script>. Please check the code below.<\/p>\r\n    
    <!DOCTYPE html>\r\n      <html lang="en">\r\n<head>\r\n<!-- Meta, title, CSS, favicons, etc. -->\r\n<meta charset="utf-8">\r\n<meta name="viewport" content="width=device-width, initial-scale=1.0">\r\n<meta name="description" content="">\r\n<meta name="author" content="">\r\n\r\n    <title>Under Construction<\/title> <link href="assets\/dist\/css\/bootstrap.css" rel="stylesheet">\r\n    \r\n  <link href="assets\/tm\/css\/tm_docs.css" rel="stylesheet"> <\/head>\r\n  <body>\r\n  <a class="sr-only" href="#content">Skip navigation<\/a>  <div class="tm_constuction-main">\r\n  <div id="tm_constuction-box">\r\n  <div class="tm_inside">\r\n  <div class="tm_inner">\r\n  <h4>Our Website is<\/h4>\r\n  <h1>Under Construction<\/h1>\r\n  <h5>We'll be here soon with a new website.<\/h5>\r\n  <div id="tm_counter"><\/div>\r\n  <div class="tm_counter_desc">\r\n  <div class="fleft">Days<\/div>\r\n  <div class="fleft">Hours<\/div>\r\n  <div class="fleft">Minutes<\/div>\r\n  <div class="fleft">Seconds<\/div>\r\n  <\/div>\r\n  \r\n  <\/div>\r\n  <\/div>\r\n  <\/div>\r\n  <\/div>\r\n  \r\n    <script src="assets\/tm\/js\/jquery.js"><\/script>\r\n      <script src="assets\/tm\/js\/jquery-migrate-1.2.1.min.js"><\/script>\r\n      <script src="assets\/dist\/js\/bootstrap.js"><\/script>\r\n    <script src="assets\/tm\/js\/jquery.countdown.min.js"><\/script>\r\n    \r\n\t<\/body>\r\n    <\/html>\r\n<\/pre>\r\n<\/li>\r\n
  5. \r\n
    We should adjust path to digits in jquery.countdown.min.js file. Open site\\assets\\tm\\js\\jquery.countdown.min.js file<\/strong>. Add assets\/<\/strong> in the path to tm\/img\/tm\/digits.png<\/strong> file. Remove code for demo counter after that (this code is highlighted on the screenshot below):<\/p>\r\n\r\n\"How<\/a>\r\n<\/li>\r\n
  6. \r\n
    Set year and date, save changes:<\/p>\r\n\r\n\"How<\/a>\r\n<\/li>\r\n
  7. \r\n
    We have set under construction page. You may rename the file to index.html and this file will be initial for your web site. Visitors will see this under construction page:<\/p>\r\n\r\n\"How<\/a>\r\n<\/li>\r\n<\/ol>\r\n
    Feel free to check the detailed video tutorial below:<\/p>\r\n\r\nJS Animated. How to set up the Under Construction page<\/a>","protected":false},"excerpt":{"rendered":"
    This tutorial shows how to set the Under Construction page in JS Animated template.<\/p>\n","protected":false},"author":39,"featured_media":43330,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[1016],"tags":[1272,2411,1409,572],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/42715"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/39"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=42715"}],"version-history":[{"count":0,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/42715\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/43330"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=42715"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=42715"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=42715"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}