Maintenance Mode Page Layout for Weebly Site

Maintenance mode page is generally displayed in occasions when your site is under construction or taken down for regular maintenance. This is an easy task for those using content management systems like WordPress. But this will be a difficult task for Weebly users since Weebly does not provide a default maintenance mode page layout. In this article we will explain how to setup a Weebly maintenance mode page layout which can be used for the following purposes:

The widget page can be enabled or disabled whenever you need for any of these purposes. Check out our separate article in case if you are looking for a countdown timer widget.

Files Required for Maintenance Mode Layout

Below are the files required for creating a custom maintenance mode page layout in Weebly. Click on the download button to get the zip file. We use a demo image “bg.jpg” for the background which you can change it with your own image (ensure to use the same “bg.jpg” as file name).

1. countdown.js
2. init.js
3. bootstrap-responsive.css
4. bootstrap.css
5. Maintenance.html
6. bg.jpg

Download Files

Create a folder named “Maintenance” under “Theme > Edit HTML / CSS > Assets”. Unzip the downloaded file and upload all the individual files under the “Maintenance” folder except “Maintenance.html” file.

Custom CSS

Add the below CSS under “main_style.css” file:

*{ 
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}

html{background:url('/files/theme/Maintenance/bg.jpg') no-repeat fixed center center; min-height:100%; background-size:cover;}
body{font: 12px/1.5em Arial, Helvetica, sans-serif, "Arial Narrow";color:#646663;-webkit-font-smoothing: antialiased;-webkit-text-size-adjust: 100%;min-height:100%; background:none;}

.wrapper{
background:#fff;
padding:20px 0;
margin-top:10%;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.3);
}

.title{text-align:center;}

/* ---------- TIMER ---------- */
ul#countdown{text-align:center;}
ul#countdown li {
color:#fff;
display: inline-block;
margin-right:18px;
width: 80px;
height:80px;
text-align: center;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background: rgb(127, 186, 10);
background: -moz-linear-gradient(90deg, #7FBA0A 50%, #7CB30B 50%);
background: -webkit-linear-gradient(90deg, #7FBA0A 50%, #7CB30B 50%);
background: -o-linear-gradient(90deg, #7FBA0A 50%, #7CB30B 50%);
background: -ms-linear-gradient(90deg, #7FBA0A 50%, #7CB30B 50%);
background: linear-gradient(180deg, #7FBA0A 50%, #7CB30B 50%);
-webkit-box-shadow: 1px 1px 4px rgba(50, 50, 50, 0.3);
-moz-box-shadow: 1px 1px 4px rgba(50, 50, 50, 0.3);
box-shadow: 1px 1px 4px rgba(50, 50, 50, 0.3);
}
ul#countdown li span {
font-size: 42px;
font-weight: bold;
color: #fff;
position: relative;
text-shadow: 1px 1px 2px rgba(150, 150, 150, 1);
}

ul#countdown li p.timeRefDays,
ul#countdown li p.timeRefHours,
ul#countdown li p.timeRefMinutes,
ul#countdown li p.timeRefSeconds {
text-shadow: 1px 1px 2px rgba(150, 150, 150, 1);
}

.bottom-row{margin-top:30px;}
.sub-block{
padding:20px;
min-height:180px;
background:#ffffff;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.3);
}

@media (max-width: 767px) {
ul#countdown li {
width: 55px;
height: 70px;
margin-bottom: 10px;
}

ul#countdown li span {
font-size: 26px;
}
}

Creating a Header Type

Upload the “Maintenance.html” file under “Header Type”, this will be the page layout name showing under “Pages” tab.

Setting Up the Timer

Let us assume you want to launch the site on 31 December 2016. Set this date under “init.js” file as shown below:

Target Date for Countdown Timer

Now everything is set…save your changes and go to Weebly site editor.

Creating Maintenance Mode Page

Create a new page, name it as “Maintenance” and choose the header type layout as “Maintenance” from the dropdown. You can see the some text data as shown in the picture below under which you can drag & drop you own content.

Weebly Maintenance Mode Page

Publish your site and see the maintenance mode layout in action.

Handling Already Published Site

The above way of setting up maintenance mode is easy for a new site. If you have an existing Weebly site, at least you should have two sites with premium features to enable this setup.

If you only have few pages on the existing site, it is a good idea to make the “Maintenance” page as your home page and setup 301 redirects for all other pages to point to the maintenance page.