| Tour Setup |
Lytebox |
Colors |
Pictures |
Menu Editing |
Using Video |
Adding Pages |

[ HomePage ]
[ Allwebco Design ]
[ Allwebco Templates ]
[ Allwebco Hosting ]

Allwebco Design Corporation

[ Your Missing Page ]
[ Your Thanks Page ]

Setting up your website template:

Step 1:
EDIT FLASH ANIMATION: | Click for more details
Open the "flash.txt" file in Notepad and change "yourwebsitetitle.com" after the "logo=" and after the "&logo-tour=" change "yourwebsitetitle.com Virtual Tour" with your name or company name. Be sure not to delete the "logo=" or "&logo-tour". Edit the four "&textline1=" to any phrases you would like or leave them blank. Be sure not to delete the "&textline1=" parts. This will update the Flash logo on all pages. If you wish to use a graphic logo, there are instructions later in this document.

FLASH IMAGE SHOW: | Click for more details
The animation in the header area is showing 8 .jpg images. You will find these images in the "flash" folder. You can replace "image1.jpg" through "image8.jpg" with any standard .jpg images and the flash will update. Make your images 550 x 50 pixels in size.

Step 2:
EDIT FOOTER: | Click for more details
Open the "footer.js" in Notepad or any text editor and edit the "Your Company" text with your site or company name. This will update the bottom page info on all pages.

Step 3:
EDIT CONTACT INFO: | Click for more details
Open the "phone.js" file in Notepad or any text editor and change 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 "quotes" pages.

Step 4:
EDIT THE CONTACT & QUOTES FORM: | Click for more details

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.

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.

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.

Step 5:
SETTING UP THE GALLERY: | Click for more details | Thumbnail Help
The best way to setup the pictures in the gallery is not to edit the HTML pages and edit the pictures on each HTML page. The fastest way is to simply replace the pictures in the "gallery" folder with your own by overwriting the .jpg files that are in there now using the same generic names.

Replace the "Fgallery" pictures in the "gallery" folder with full size photos. Replace the "gallery" pictures with your thumbnails. The thumbnails are now 100 x 67 pixels, Fgallery images are 500 x 333 pixels. You can resize these images and make them any size that you prefer.

The "image-viewer.htm" is the page that displays an image when you click on a thumbnail. You can edit or remove the text on this page.

PICTURE VIEWING OPTIONS: | Click for more details
To change "image-viewer.htm" options, open the "pop-closeup.js" in Notepad and put a "yes" or "no" (all lowercase) for the options you want to change. See the notes in the "pop-closeup.js" for details.

Step 6:
EDIT THE TOUR AREA: | Click for more details
All the files for the tour area can be found in the "tour" folder.
  1. In the "tour" folder edit the "tour-1.htm" through "tour-4.htm" pages with your own item descriptions.
  2. For each tour replace the images used in the tour popups. For example, for tour #1, edit the panoramic.jpg and the 9 other .jpg images found in the "tour_folder-1" that is inside the "tour" folder. Each tour image has a thumbnail and a full sized image to edit. For the scrolling image (panoramic.jpg) the matching thumbnail is called tour-1thumb.jpg.
  3. In Windows you can hover your mouse over any image to see the image sizes.
  4. If you need to change the header color, change the variables in the header-tour.js in the "tour" folder.
  5. For other tour info, or if you would like to use tour videos click here for details.
  6. Sizes and options for the tour popups can be edited in the "pop-closeup.js".
  7. Sizes, borders, fonts and some other tour options can be edited in the "coolstyle.css".

Step 7:
LYTEBOX SETUP slideshow-home.htm: | Click for more details
To setup the Lytebox slideshows you will edit the files in the "slide_images" and "slide_pages" folders. Edit the "slideshow-home.htm" to edit the Lytebox slideshow page. Click for Lytebox details. All scripts for the slideshows is located in the "lytebox.js".

Step 8:
EDIT SIDEBAR: | Click for more details
You will edit the "sidebar.htm" like any other HTML page. Editing the "sidebar.htm" will update all the pages at one time. If you need more height in the sidebar you can edit the "sidebar-frame" height style in the "coolstyle.css".

Step 9:
Open the "search.js" and edit "your-web-domain.com" with your website domain. To turn off the site search, open the "search.js" and edit the show search to "no".

If you require a more custom search with no ads, you can use the "OPTIONAL-Burgdorf-search.js" in your extras folder. Click here for help setting up the Burgdorf search.

Step 10:
EDIT PAGES: | Software choices | Notepad Editing
Edit the text on all HTML pages with your information. You can use a text editor like Notepad or Expression Web, Frontpage, Dreamweaver or any HTML editor. Take care not to delete any of the HTML tags that surround the text. You will find notes inside each page to help you navigate. NOTE: You will not see the footer and header in some software because they are .js include files so you can globally edit your e-mail and other info.

Step 11:
Open each of the pages and change the titles (at the very top of the page) and also the description and the keywords with your product or service info. 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 or MSN and other search engines. Click for optimization help.

Step 12:
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 all template folders and all files and subfolders in these folders.

You can replace the Flash logo with a graphic one. To do this, delete or rename the "header.js", then rename the "graphic_logo_header.js" to "header.js". In the picts folder you will find a graphic called "logo.jpg", open this graphic and edit it with your logo. For the tour header, rename or delete the "header-tour.js" and then rename the "graphic_header-tour.js" to "header-tour.js". Then edit the logo-tour.jpg also in the "picts" folder with your own logo image.

This template includes a Paypal payment page called "paypal.htm". Edit the "paypal@your-web-domain.com" 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 any amount on the payment page.

COLOR CHANGES: | Click for more details
Template colors can be edited in the "coolstyle.css". Header colors can be edited in the "header.js" and the "header-tour.js". Click the above link for details.

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

CHANGING / ADDING MENU BUTTONS: | Click for more details
You can edit the names and links on the menus to other page names by editing the template menus. This template includes 3 menus you can edit:

1. menu.js
2. menu-left.js
3. footer.js

If you are editing only the name showing on the menu, edit only the name and not the name with the ".htm" after it unless you want the page link to change. Whatever you change in any of the menus will update every page on the website. You can add more links to pages by copying a button in one of the menu files and pasting it right below itself. Be sure to back up your files before you edit them. Click for more menu details.

PICTURES: | Click for more details
You can replace all the template pictures with your own images. You will find images in the "picts" and "gallery" folders. You will find the 8 images used in the Flash header changer inside your "flash" folder.

USING VIDEO IN THE TOUR POPUPS: | Click for more details
Click above for details to setup video in the tour popup windows.

ADDING PAGES: | Click for more details
You can add new pages to your website by copying and pasting any existing page and renaming it. You can then add links either on the other pages, or you can add button links to any of the menu files by copying and pasting one of the buttons below another. To add more tour pages, make a copy of the "tour-1.htm" and "tour_folder-1" folder that are inside the "tour" folder.

The "site_map.htm" is linked on the index.html. It is best not to remove this link so search engines can find your site map and properly list all your pages when users search at major search engines.

So all your pages will maintain a standard height a "pageheight" class can be found in the "coolstyle.css". Edit the height for this class to any height you need.