Protecting Website Template Areas

Password Protect Part or All of Your Website

website template support

Once you have your template setup you may want to password protect all, or parts of your website. We don't provide support for adding this feature, however here is some help and guidelines for setting this up. Protecting an area of your website will take some time and energy to setup properly.

Option #1: Protecting one page: Javascript - not secure
Javascript is the easiest way to password protect a single page on your website but is not considered very secure.

Click here to view our very simple protection script.
Click here to view advanced password protection scripts.

Option #2: Protecting one area: Javascript - not secure
If you would like to protect an area, or the front page of your website, or any other single page or group of pages, you can use javascript to do this. Search engines may still be able to find your protected pages so this is not 100% secure. Download the script below and follow the included directions.

Click here for the Gatekeeper login Javascript

Option #3: Protecting a directory: Server side - secure
In most cases, you can password protect an entire directory on your hosting server. This is very secure. See step #4 for hosting compatibility.

Step #1:
Use FTP software to create a new directory on your hosting server.

Step #2:
You must edit all the website pages that you intend to put in the new directory to make them work. There are two ways to do this. To understand how this works, go through these steps:

Step A:
Make a sub directory of your website directory on your local hard drive.

Step B:
Put the HTML pages you want protected in the new directory.

Setting up the pages to be inside a folder:
Open any page you put in the sub directory in your browser. You can drag it into your browser to open it. You will notice that you will see no images and no header and the entire page is missing areas. This is because all the support files are up one directory. There are three ways to deal with this.

Fix Option #1: (Not Recommended)
Copy all the .js files and .swf files and the flash.txt and your "picts" directory into the new directory. The problem with this is that some links will no longer work and you will need to maintain two sets of everything.

Fix Option #2: (Somewhat Recommended)
You must tell every page you moved where all the support files are. You will need to put this: "../" in front of all of the support file calls. Images, .js files and .css files and links. The problem with this is the menu links will not work unless you maintain two menus. One with "../" in front of every link for the pages in the subdirectory. The two dots and a dash tell the pages to look up one directory.

Here is an example: You will have something like this now for the .css file call in your HTML pages. (near the top)

<link rel=StyleSheet href="coolstyle.css" type="text/css" media="screen">

Add the code indicated in red:

<link rel=StyleSheet href="../coolstyle.css" type="text/css" media="screen">

Fix Option #3: (Highly Recommended)
This is what is known as adding Absolute Paths. First, upload your template support files (.js, image and .css) to your server using FTP software. Be sure to upload the "picts" directory and all the .js files, the .css file and the flash.txt. The page you are reading now is partly done in absolute mode. You can do a "view", "view source" to see how we have done this page.

After you have uploaded, edit one of the html pages on your local drive in the subdirectory you created (see note above). You will put "" in front of all the .js files, the .css files, the links and in front of every image. Here is an example (code in red has been added).

<link rel=StyleSheet href="" type="text/css" media="screen">

Now the page will know to look at your domain for the "coolstyle.css". You must do this with every picture and every file that is up one directory. You must also edit your menu.js and put "" in front of all the links and images and also you may need to edit all the .js files to add your domain. You will need to do a lot of editing to your pages to make this work properly. Also, you may need to copy the "flash.txt" into your subdirectory, or use a graphic logo for the protected pages.

You may want to do your menu.js totally in absolute mode, replacing for example: "index.html" with "" and the spacers "picts/spacer.gif" with "".

In most cases, using your domain (absolute mode) for calling files is more dependable. Be sure to edit the .js files with your domain as well as the .css files. (as seen above in red)

Step #3:
Upload the edited pages you want to protect into the new directory you created on your server.

Step #4:
Protect the directory. If you have AllWebCo hosting, go to your control panel at: "" choose, Site Manager, click the button for the directory you want to protect, hit the protect button and follow the directions. Check the help included in your control panel for more details about Allwebco password protection.

If you have another hosting company you will need to check your control panel or contact their support for help protecting a directory.

Related Topics:
Simple Javascript Password Protection

Related Links:
Gatekeeper login Javascript

Allwebco Template Support

Allwebco Website Template Support

Website Template Support
Website Template Support