[ Homepage ]
[ Allwebco Design ]
[ Allwebco Templates ]
[ Allwebco Hosting ]

Allwebco Design

[ Missing Page ]
[ Thanks Page ]
[ PayPal Thanks ]

Setting up your website template:

Step 1:
Some optional pages are included in this template.
  • The "GRAPHIC_LOGO_index.html" is only a sample file and not part of the template. To use a graphic logo in the template see "options" below on this page.
  • If you will be using the default home page (index.html), move the "OPTIONAL-index.html" and "OPTIONAL-2-index.html" and "OPTIONAL-3-index.html" and "GRAPHIC_LOGO_index.html" into the "extras" folder.
  • If you will be using the optional home page (OPTIONAL-index.html), move the "index.html" and "OPTIONAL-2-index.html" and "OPTIONAL-3" and "GRAPHIC_LOGO_index.html" into the "extras" folder. Rename the "OPTIONAL-index.html" to "index.html".
  • If you will be using the optional 2 home page (OPTIONAL-2-index.html), move the "index.html" and "OPTIONAL-index.html" and "OPTIONAL-3" and "GRAPHIC_LOGO_index.html" into the "extras" folder. Rename the "OPTIONAL-2-index.html" to "index.html".
  • If you will be using the optional 3 home page (OPTIONAL-3-index.html), move the "index.html" and "OPTIONAL-index.html" and "OPTIONAL-2" and "GRAPHIC_LOGO_index.html" into the "extras" folder. Rename the "OPTIONAL-3-index.html" to "index.html".
Step 2:
EDIT FLASH ANIMATION: | Click for more details
Open the "flash.txt" with Notepad or a plain text editor and edit "" with your name or website name. Be sure not to delete the "logo=". This will update the Flash logo on all pages. If you wish to use a graphic logo, there are instructions later in this document.

Step 3:
EDIT COPYRIGHT FOOTER: | Click for more details
Open the "footer.js" in Notepad or any text editor and edit the "" with your name or website name. This will update the footer info on all pages.

Step 4:
EDIT CONTACT INFO: | Click for more details
Open the "contact.js" in Notepad or any text editor and edit the company name, address, phone and fax numbers and e-mail address (edit the e-mail in 2 places). This will update contact info on the "contact" and "about" pages.

Step 5:
REPLACE THE FLASH CHANGER IMAGES: | Click for more details
The Flash image changer on the homepage (index.html) is showing 10 .jpg images. Replace these 10 images in the "flash" folder with your own 600 x 400 pixel .jpg images. In the "flash" folder is a file called "image_changer.xml". This file is the changer setup file. Edit this .xml file in Notepad to change how the changer works. You can also add more images to the changer. Click for details.

INCLUDED MOBILE DETECT: | Click for more details
The homepage Flash image changer includes a browser detection script. A static image, "image1-xml.jpg" in the "flash" folder will display in non-Flash browsers and mobile devices.

Step 6:

Click for current info on setting up the template forms.

Click for info on adding more fields to the forms.

Click for changing form sizes or colors.

If you want to use only e-mail on the contact page you can remove the contact form from the "contact.htm" between the comment tags.

Because of the complexity of setting up the quote form, there are notes in the "quotes.htm" to help you cut and paste to add new form fields. The form will work with most contact form scripts however you will need help files or a sample form from the script you intend to use. Most form elements work the same way from script to script, however the hidden values usually vary. You may want to consider editing the entire page in Notepad instead of a wysiwyg editor.

Step 7:
SETTING UP THE LYTEBOX GALLERY: | Click for more details | Thumbnail Help
This template is using Lytebox slideshows in all gallery pages. Click here for setup details. Because this template includes a slideshow, the best way to setup the pictures in the gallery is to replace the .jpg pictures in the "gallery" folder with your own by overwriting the files that are in there now and using the same generic names.

If you are using the Paypal cart also see the next step "PAYPAL SHOPPING CART SETUP".

Replace the "Fgallery" pictures in the "gallery" folder with full size photos. Replace the "gallery" pictures with your thumbnails. The thumbnails are now 130 x 87 pixels, Fgallery images are 600 x 400 pixels, but you can make them any size that you prefer. See links above for more details.

Step 8:
PAYPAL SHOPPING CART SETUP | Click for more details
Paypal shopping cart forms have been included in the template "gallery?.htm" pages. Follow the steps below to setup the shopping cart pages.
  1. Setup a Paypal merchant account.

  2. If you will not be using any gallery pages with no Paypal forms, move all "NO-CARTgallery?.htm" pages into the "extras" folder.

  3. Edit the "" in the "menu.js" in 1 place with your Paypal e-mail. This will update the menu view cart button.

  4. In each "gallery?.htm" page replace the info in each form with your Paypal form info. In each form edit the business e-mail, the item name and the item price. Edit the "view cart" button with your Paypal e-mail. For a quick edit, you can open a gallery page in notepad and search and replace "" with your paypal e-mail. There is a thank you page included. In each form edit the "return" URL with your web domain URL so the return page will display after a payment is completed. Click for form setup details.

  5. In each form edit the shipping price. Click for more shipping options.

  6. OPTION: To use any "NO-CARTgallery?.htm" page, rename the page to any "gallery?.htm" page, maintaining it's respective gallery number. For example, rename "NO-CARTgallery1.htm" to "gallery1.htm".

Step 9:
REPLACE PAGE IMAGES: | Click for more details
In the "picts" folder, replace "home-pic1.jpg" through "home-pic16.jpg" with your own pictures. These are used on the homepage (index.html). These images are 40 x 40 pixels.

In the "gallery" folder, replace the 8 "map-gallery-?.jpg" images in the gallery folder. These are used on the site_map.htm page.

Replace the about-pic1.jpg, about-pic2.jpg... and all the other pictures that correspond to each page in the "picts" folder. You will probably want to replace all images with your own pictures.

Step 10:
This template includes a Paypal payment page called "custom.htm". Edit the "" in this page with your Paypal e-mail and you can use this page to accept custom payments by sending clients a link to this page and having them fill in the amount on the payment page. To remove the form, delete the code between the notes for the Paypal form in the "custom.htm".

Step 11:
EDIT THE MENUS AND DROPDOWN MENUS: | Menu Editing | Adding Pages
This template includes horizontal CSS menus. You can edit the menus as you need and add and remove links and pages. You will edit the menu.js in a text editor to change the menu names and add items. Click for CSS horizontal menu help.

Step 12:
EDIT THE DYNAMIC FAQ PAGE: | Click for more details
In the "faq.htm" edit the text between the "FAQ 1" notes area for FAQ question #1. Edit only the question and answer text and do not delete any of the other code in this area. Edit or remove the other FAQ questions on this page.

Step 13:
EDIT PAGES: | Software choices | Notepad Editing
Edit the text on all HTML pages with your information. You can use Frontpage, Expression Web, Dreamweaver, CoffeeCup, any wysiwyg HTML editor or a plain text editor like Notepad. Take care not to delete any of the HTML tags that surround the text.

Step 14:
Open each of the pages and change the titles (at the very top of the page) and also the description and the keywords with details about your product or service. You can edit one page and copy and paste to the other pages. Be careful to only change what's inside the "" so you don't disturb the html code. Page titles are important so your site will get a good listing at Google, Yahoo!, Bing, and other search engines.

Step 15:
UPLOAD: | Click for more details
Upload the pages on to your hosting company's server using ftp software or Windows Explorer or your control panel. Be sure to upload the "picts" and "gallery" and "flash" folders and all files in these folders.


You can replace the Flash logo with a graphic logo. Delete or rename the "header.js" or move it into the extras folder. Rename the "graphic_logo_header.js" to "header.js". In the picts folder you will find a graphic called "logo.gif". Edit this graphic with your logo. It's best to keep the graphics the same sizes that they are now unless you edit the height and width numbers in the new "header.js". To use a .jpg image edit the "header.js".

WATERMARK SETUP: | Click for more details
You can configure the placement and opacity of the watermark over the image closeup views in the gallery and slideshow.

GALLERY WATERMARK: Edit the"lytebox.css" in the "lytebox" folder. SLIDESHOW WATERMARK: Edit the "watermark.js" to change options.

In the "lytebox" folder is a .gif image called watermark.gif. You can replace this image with your own .gif image. If you change the height of the "watermark.gif" you will need to edit this height in the "lytebox.css" and "watermark.js". Click link above for details.

The slideshow is currently setup to display all 96 pictures for the 8 gallery pages in the gallery folder. If you would like to add or remove pictures from the slideshow, open the slideshow.htm in Notepad and look for the "EDIT THIS AREA" note. Copy and paste to add new pictures to the list, or delete lines to remove pictures. You can also set the AutoPlay speed. Look for "var rotate_delay = 3000".

If you change the notes near the top of the gallery pages, the pictures may no longer line up from one page to the next. To line up the galleries, open the "line_up_pictures.js" in Notepad and change the height="90" to shorten or lengthen all the pages at once.

FONTS: | Click for more details
You can change your font colors and sizes by editing the "coolstyle.css" with a text editor. You can find other font colors by clicking here. You can also change the font sizes in the "coolstyle.css" file. Change the "TABLE" px size to change the copy on all pages. Change the "smalltitle" px size to change all the page title sizes.

See the "EDIT THE MENUS AND DROPDOWN MENUS" section above.

USING A 3rd LEVEL DROP MENU: | Drop Menu Editing
Rename your "menu.js" to "OLD-menu.js" and then move it into the "extras" folder. Copy the "menu-3LEVEL-SAMPLE.js" from the "extras" folder into the main template folder. Rename this file to "menu.js". Edit your new 3rd level "menu.js" with your links.

GALLERY MENU: | Click for more details
The "menu_gallery.js" is used only on the template gallery pages. See the notes inside this file to add more gallery links.
Open the "menu_gallery.js" file in Notepad and copy and paste to add more galleries to the navigation.

OTHER MENUS: | Click for more details
Links are included in the "footer.js". See the notes inside this file to add more footer links.

This template also includes a floating menu on the right side of each page. Click here for details and options.

ADDING GALLERIES: | Click for more details
You can add pages to your website by copying and pasting any one of the pages and renaming it to whatever you need. You can then add links from the other pages or the gallery. There are notes in the gallery pages to help you copy and paste to add more pictures and more galleries (if you are using Notepad).

So all your pages will maintain a standard height a "pageheight.js" file was included. Edit this file in Notepad and you can change the height="???" to any height you need.

Right click protection for gallery and slideshow pages can be turned on or off in the "right_click_protection.js" in the "lytebox" folder by editing the "right_click_on" variable.