Using the Web Hosting Hub Under Construction Page
When you begin to create a website, there is often a need for a place holder page that says "Website coming soon" or "Website under construction". Web Hosting Hub provides you a default place holder called the "default.htm" file. This file is a default file that comes with your account and will appear before you publish any of your existing website files. This file will automatically be replaced by the first index file added to your website files. but they will now also provide a generic under construction page that you can modify to meet your needs. The following article explains how to use, modify and download the file as per your needs. In order to modify the files, some basic knowledge of HTML and your website files will be needed.
Note: Existing accounts may not have the under_construction.html file, but it is available for download at the bottom of the article.
What is the DEFAULT.HTM page?
If you do not upload any files and your domain name is pointed to our name servers, then using your website URL will initially give you the default page provided by the DEFAULT.HTM file. The screen shot at right displays what you would see. This page is simply a place holder that can easily be replaced. When you create a website or upload files from an existing website, this file (the default.htm) is automatically ignored by the web server and displays that index file that comes with your website. If you want to display a specific Under Construction page, then you may prefer the one that Web Hosting Hub provides. The provided Under Construction file will no have branding and is displayed below. If you want to modify the DEFAULT.HTM file, then you are welcome to modify the code in the file. There is a copy of the DEFAULT.HTM file in the link below.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="CACHE-CONTROL" content="NO-CACHE" />
<meta http-equiv="PRAGMA" content="NO-CACHE" />
<meta http-equiv="EXPIRES" content="0" />
<title>Website Coming Soon | Web Hosting Hub</title>
<meta name="robots" content="noindex,nofollow" />
<style>
/*** start blueprint css ***/
/* reset.css */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}
body {line-height:1.5;}
table {border-collapse:separate;border-spacing:0;width:100%;}
caption, th, td {text-align:left;font-weight:normal;}
table, td, th {vertical-align:middle;}
blockquote:before, blockquote:after, q:before, q:after {content:"";}
blockquote, q {quotes:"" "";}
a img {border:none;}
/* typography.css */
html {font-size:100.01%;}
body {font-size:75%;color:#222;background:#fff;font-family:Verdana, Arial, sans-serif;}
h1, h2, h3, h4, h5, h6 {font-weight:normal;color:#111;}
h1 {font-size:3em;line-height:1;margin-bottom:0.5em;}
h2 {font-size:2em;margin-bottom:0.75em;}
h3 {font-size:1.5em;line-height:1;margin-bottom:1em;}
h4 {font-size:1.2em;line-height:1.25;margin-bottom:1.25em;}
h5 {font-size:1em;font-weight:bold;margin-bottom:1.5em;}
h6 {font-size:1em;font-weight:bold;}
h1 img, h2 img, h3 img, h4 img, h5 img, h6 img {margin:0;}
p {margin:0 0 1.5em;}
p img.left {float:left;margin:1.5em 1.5em 1.5em 0;padding:0;}
p img.right {float:right;margin:1.5em 0 1.5em 1.5em;}
a:focus, a:hover {color:#000;}
a {color:#009;text-decoration:underline;}
blockquote {margin:1.5em;color:#666;font-style:italic;}
strong {font-weight:bold;}
em, dfn {font-style:italic;}
dfn {font-weight:bold;}
sup, sub {line-height:0;}
abbr, acronym {border-bottom:1px dotted #666;}
address {margin:0 0 1.5em;font-style:italic;}
del {color:#666;}
pre {margin:1.5em 0;white-space:pre;}
pre, code, tt {font:1em 'andale mono', 'lucida console', monospace;line-height:1.5;}
li ul, li ol {margin:0;}
ul, ol {margin:0 1.5em 1.5em 0;padding-left:3.333em;}
ul {list-style-type:disc;}
ol {list-style-type:decimal;}
.small {font-size:.8em;margin-bottom:1.875em;line-height:1.875em;}
.large {font-size:1.2em;line-height:2.5em;margin-bottom:1.25em;}
/* grid.css */
.container {width:950px;margin:0 auto;}
/* custom */
ul li {
margin-bottom: 0.25em;
}
a:focus, a:hover {
color:#0c7399;
text-decoration: none;
}
a {
color:#0c7399;
}
/*** end blueprint css ***/
body {
background: #0f90bf url('http://www.webhostinghub.com/_images/bck.png') scroll 0 0 repeat;
}
p {
margin-bottom: 1em;
}
#sheet {
width: 890px;
background: #f2f2f2;
margin-left: 30px;
}
#header {
width: 890px;
height: 90px;
}
#header h1 {
float: left;
margin-bottom: 4px;
}
#logo {
display: block;
height: 80px;
width: 225px;
}
#subcontent {
width: 890px;
}
#content {
width: 700px;
margin: 0 auto;
margin-bottom: 0;
padding-bottom: 46px;
text-align: center;
}
.box_long {
margin-left: 22px;
position: relative;
}
.box_long_header {
width: 848px;
height: 66px;
background: url('http://www.webhostinghub.com/_images/box_long_header.png') scroll 0 0 no-repeat;
}
.box_long_middle_noline {
width: 848px;
background: url('http://www.webhostinghub.com/_images/box_long_middle_noline.png') scroll 0 0 repeat-y;
padding-top: 12px;
}
.box_long_footer {
width: 848px;
height: 20px;
background: url('http://www.webhostinghub.com/_images/box_long_footer.png') scroll 0 0 no-repeat;
position: relative;
}
#sheet_footer {
width: 890px;
height: 10px;
background: url('http://www.webhostinghub.com/_images/sheet_footer.png') scroll 0 0 no-repeat;
margin-left: 30px;
}
</style>
</head>
<body>
<div class="container">
<div id="sheet">
<div id="header">
<a id="logo" href="http://www.webhostinghub.com/">
<img src="http://www.webhostinghub.com/_images/whh_logo.gif" alt="Webhostinghub.com">
</a>
</div>
<div id="subcontent">
<div class="box_long">
<div class="box_long_header">
</div> <!-- end box_long_header -->
<div class="box_long_middle_noline">
<p id="content" style="width: 550px;"><span style="font-size: 32px;">Hello There!</span><br>
<b style="font-size: 18px;">This website is currently under construction.</b>
<br><br>If you are the web hosting account owner, please be sure to delete this page after you have uploaded your website.
If you're visiting this site please check back soon!</p>
<p style="margin-left: 160px"><b>Account Owner Quick Resources</b>
<ul style="margin-left: 150px; margin-bottom: 0px;">
<li><a href="http://www.webhostinghub.com" rel="nofollow">Web Hosting</a>
<li><a href="http://www.webhostinghub.com/support" rel="nofollow">Support Center</a></li>
<li><a href="http://www.webhostinghub.com/contact-us.html" rel="nofollow">Contact Us</a></li>
<li><a href="/help/../cpanel" rel="nofollow">Log Into Your Control Panel</a></li>
<li style="margin-bottom:0px;"><a href="/help/../webmail" rel="nofollow">Log Into Your Webmail</a></li></ul>
</p>
</div> <!-- end box_long_middle -->
<div class="box_long_footer">
</div> <!-- end box_long_footer -->
</div> <!-- end box_long -->
</div> <!-- end subcontent -->
</div> <!-- end sheet -->
<div id="sheet_footer">
</div> <!-- end sheet_footer -->
</div> <!-- end container -->
</body>
</html>
Using the Generic Under Construction Page
The optional construction page is provided on your account or is available through download through the link provided at the bottom of this article. The screenshot at right illustrates how the page appears. This page is not used until you actually save it as the index file. The page is a generic under construction page that simply states "under construction." You are welcome to change the text and its appearance to meet your website building needs. When you look at the HTML file for the under construction page, you will find instructions on how to use the file if you need it. The file can be modified through the File Manager Code Editor, or through any text editor that you wish to use.
<!-- This file is an under construction page brought to you by Web Hosting Hub. You may use it freely whenever your site is undergoing maintanence and you'd like a landing page to use in it's place. In order to activate this page along with your own custom logo, please follow these instructions:
1.) The file name of your logo should be "logo.jpg," all in lowercase letters. Ensure the file extension, "jpg," is in lower case, as well.
2.) Log into your cPanel account. If you need instructions on this step, you can copy the following link into your browser for a step-by-step tutorial: http://www.webhostinghub.com/help/learn/cpanel/101-getting-started/how-to-login-to-cpanel
3.) Under the "Files" Section, click on "File Manager"
4.) You will be prompted with a pop-up menu. Select the public_html directory and click Go.
5.) Click "Upload" at the top of the File Manager.
6.) Browse your computer for the file you want to upload.
7.) Select the file and click the "Open" button.
8.) Close the Upload files page. Refresh your File Manager by clicking the Reload link at the top middle of the File Manager. You should see the file listed in the File Manager now.
9.) If you downloaded this HTML file from the Support Center, follow steps 5 through 8 to upload this file as well.
10.) In the File Manager, select the file named under-construction.html and click the "Code Editor" link on top of the page.
11.) You will be prompted with a dialog box. Click "Edit" to open and edit the under construction page.
12.) Using the line numbers on the left side of the Code Editor, locate line 83. You will see the following line of code: <!--<img src="/help/logo.jpg" id="logo"> -->
<!--
13.) This code on line 83 will be used for displaying your logo. With the way the code is written as is, the logo is hidden on the page and unviewable to the public. To display your logo, delete the first four characters that are <!-- and the last three characters that are -->
<!--
14.) Save your changes by clicking "Save Changes" in the top right.
15.) Close the Code Editor by clicking "Close" in the top right. After closing, you should see the File Manager still open.
16.) Select the file under-construction.html and click the "Rename" link on the top of the File Manager.
18.) You will see a dialog box for renaming the HTML file. Highlight the "under-construction.html" in the input box and rename it "index.html." Calling it index.html means it will load by default when someone visits your site.
19.) Click the "Rename File" button on the bottom right. Congratulations, you have just activated your under construction page with your own logo! If you make a mistake and are unsure of how to fix it, feel free to download an original copy of this file in our Help Center and upload it to your account following steps 2 through 8. You may download the copy here:
Also, if you would like to change the text on this page, you can find comments in the code below on how to do so
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta author="Web Hosting Hub" />
<title>Under Construction</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:800,700|Gentium+Book+Basic:400,400italic' rel='stylesheet' type='text/css'>
<style type="text/css">
body{
background: #2a2c39;
color: #fff;
padding: 100px 0 0;
margin: 0px;
text-align: center;
}
h1, h2, h3{
margin: 0px;
padding: 0px;
}
h1{
font: 800 64px 'Open Sans', Helvetica, sans-serif;
margin-top: -10px;
letter-spacing: 1px;
text-transform: uppercase;
}
#subtitle{
font: italic 52px 'Gentium Basic', Times, serif;
}
h3{
border-top: 1px solid #fff;
margin: 20px auto 0;
width: 740px
}
h3 span{
background: #2a2c39;
font: 700 20px 'Open Sans', Helvetica, sans-serif;
display: block;
margin: -15px auto 0;
text-transform: uppercase;
width: 330px
}
p{
font: 20px 'Gentium Book Basic', times, serif;
}
#logo{
display: block;
margin: 0 auto 10px;
}
</style>
</head>
<body>
<!-- <img src="/help/logo.jpg" id="logo"> -->
<div id="subtitle">
Our site is <!-- Updating this line of text will change the first row of text -->
</div>
<h1>
Under Construction <!-- Updating this text will change the second row of text -->
</h1>
<h3><span>
Sorry to have missed you <!-- Updating this text will change the third row of text -->
</span></h3>
<p>
We'll be back with a newly updated website shortly! <!-- Updating this text will change the fourth row of text -->
</p>
</body>
</html>
<!-- This file is an under construction page brought to you by Web Hosting Hub. You may use it freely whenever your site is undergoing maintanence and you'd like a landing page to use in it's place. In order to activate this page along with your own custom logo, please follow the instructions at the top of the page. -->
How to Change the Under Construction page
If you need instructions on opening the page, the following steps will explain how to open and edit the file. The actual name of the file provided to you will be called under_construction.html. To open the file using the cPanel File Manager:
- Login to the cPanel
- Open your File Manager
- Click on "Web Root(public_html/www)", then select GO to open the file manager
- You will see the list of files in the public_html folder. Find the file labeled under_construction.html. If you don't find the file, then you will need to download the file from the link below and upload it to your folder.
- Right-click on the file and then select CODE EDIT from the menu that appears. Or you can also left-click to select the file and use the menu bar at top to select your editor
When you open the under construction file you will see that there are instructions provided within the HTML code for the under construction page. These instructions describe how to deal with the logo file and also how to replace your existing index file so that you can see the under construction page when you use your website URL in an internet browser. The following list is a summary of those instructions along with some other suggestions that you can use to modify the file.
- Changing the logo graphic - Tells about how to name your logo file. Note by default, the under_construction.html file has NO graphics. This instruction is for the graphic being used for the logo. If you change the file name, you will need to change the file as it is referenced in the code for the under construction page. You can do this by simply searching for "logo.jpg" and replacing it with the file name that you are going to use.
- How to rename your under construction page as the index file - Follow these instructions to replace any index file so that your under construction page is used instead. The instructions give you the steps on how to replace the existing file and how to rename the generic construction page to the index.htm page.
Fonts - If you wish to change the fonts that are being used, you will need to change the code to use a different font name. The file uses Google Fonts. You can find more about using Google fonts by clicking on "New to Google Fonts?" You will need to select a font, then you can click on USE (or use the icon labeled "quick use"). They provide the code you need to use the font. You will need to find the corresponding code in the under construction file and replace it with the font code that you are provided. Here is an example of what you would look for:
link href='http://fonts.googleapis.com/css?family=Open+Sans:800,700|Gentium+Book+Basic:400,400italic' rel='stylesheet' type='text/css'
Replace the URL for the font, then search the file for the name of the font. In this case it is "Gentium". You would replace the font family name that is provided to you from Google.
This is an example of the replacement:
'http://fonts.googleapis.com/css?family=Share+Tech' rel='stylesheet' type='text/css' would replace the text listed above. Make sure not to overwrite any of the punctuation in the documentation outside of the provided code.
You would also look for the Font name in the code and replace it. For example, you would look for something like this: font: 20px 'Gentium Book Basic', times, serif; and replace just the name of the font. In this case it would be replaced like this:
20px 'Share Tech', times, serif;
- Colors - If you are interested in changing the colors that are used in the under construction page, you can also modify the code to do this. You will need to know the HTML color code. You can use the HTML Color picker to select a different color. Then in the code for the under construction page look for the word "color". Each section of the page will have a color defined with the HTML color code. The color of that portion of the web page will change once you change the code with the value that you get from the HTML Color picker.
Note: The file is saved as a text file. In order to use it as an HTML file, you will need to save it using the extension .HTML or .HTM. For example, "under_construction.html".
Once you have the Under Construction page modified to your needs you can then upload it into the root folder of your website as an index.htm file and it will appear when you display your website in a browser.
Did you find this article helpful?
Tweet
Help Center Login
Related Questions
Here are a few questions related to this article that our customers have asked:
Ooops! It looks like there are no questions about this page.
Would you like to ask a question about this page? If so, click the button below!
We value your feedback!
There is a step or detail missing from the instructions.
The information is incorrect or out-of-date.
It does not resolve the question/problem I have.
new! - Enter your name and email address above and we will post your feedback in the comments on this page!