Placing Template Files in Folders

Setting up template files in subdirectories

Basic Linking Into and Out of Folders
To create a link that links to a page inside a folder, add the folder name in front of the page name like the following:

<a href="foldername/about.htm">

To link up out of a folder add ../ in front of the page you are linking to:

<a href="../index.html">


Quick Solution For HTML Pages
This solution is for an entire webpage or template page placed inside a folder. In cases like this you can use the HTML "base href" tag on your pages. See HTML base tag at w3schools for details and use of the "base href" tag. The following is an example of this tag.

<base href="http://www.your-web-domain.com">


Subfolder Notes
General notes when placing website files inside sub-folders.

1. You must edit all the website pages that you intend to put in the new folder to make them work with the images and .js files that may be "up" a folder in your template.
2. You may need to edit all .js files so they will work with files in the folders and also in the sub folders.
3. Css files may have linked images, however, if you use the css up one folder these links should remain unbroken and work without extra editing.
4. You may need to hard code your text into the Flash header. See "Advanced users and the variables" on this support page.

Example Setup
Follow these steps, then use one of the fix options below:

1. Make a sub folder inside your website folder on your local hard drive.
2. Put the HTML pages (or .js files) you want in the new folder.
3. Open any webpage in the sub folder in your web 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 folder.
4. Select one of the fix options below. Fix #3 is usually the best choice.

Fix Option #1 (Recommended only if you want 2 sets of webpages)
Copy all template support files like the .js files and .css files and your "picts" folder into the new folder (you may need to copy other files and folders like "jQuery" or "colors" depending on your template model). One problem with this method is that you will need to maintain two websites. One inside the folder. Links that go up one folder should start with ../ and links from the top level folder that go into the sub-folder need the folder name included with the link. Example: If you name the folder "articles" use articles/index.html for the link.


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 subfolder. The two dots and a dash tell the pages to look up one folder.

Example: You'll have something like the following for the .css file call in each of your HTML pages near the top.

<link rel="stylesheet" href="coolstyle.css" type="text/css">

Add the code indicated in red:

<link rel="stylesheet" href="../coolstyle.css" type="text/css">


Fix Option #3 (Highly Recommended)
This is what is known as Absolute Mode. First, upload your support files to your server using FTP software. Be sure to upload the "picts" folder and all the .js files, the .css file and the "flash.txt".

After you have uploaded, edit one of the html pages on your local drive in the subfolder you created (see note above). You will put "http://your-domain.com/" 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="http://your-domain.com/coolstyle.css" type="text/css">

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 folder. You must also edit your menu.js and put "http://your-domain.com/" 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. You may need to copy the "flash.txt" into each subfolder, or "hard code" the flash text, or use a graphic logo for the webpages.

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


Note: 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)



Software for Editing:
Software Choices