Help

Setting up your website template:

Step 1:

CHOOSE OPTIONS:

• 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 "Photositename.com" 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 "yourwebsite.com" 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

Open the "footer.js" in Notepad or any text editor and edit the "yourwebsite.com" with your name or website name. This will update the footer info on all pages.

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:

EDIT THE CONTACT AND QUOTES FORM:

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:

EDIT FLASH ANIMATION: | 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:

AYPAL 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 "paypal@your-web-domain.com" 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 "paypal@your-web-domain.com" 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:

AYPAL SHOPPING CART SETUP | 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:

custom.htm PAYPAL PAYMENT PAGE:

This template includes a Paypal payment page called "custom.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 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:

EDIT TITLES, DESCRIPTIONS AND KEYWORDS: | Click for more details

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

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.

Options:

USING A GRAPHIC LOGO:

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.

SETTING UP THE SLIDESHOW PICTURES: | Click for more 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".

LINING UP THE GALLERIES:

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.

CHANGING / ADDING MENU BUTTONS:

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).

PAGE HEIGHTS:

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:

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.

TEMPLATE .js FILES: | Click for .js variable help

Javascript .js files included in most templates have variables at the top of these files. These variables can be changed. You can edit popup sizes, some template colors and turn options on and off in these files. Edit .js files in a plain text editor. Click above for details.

GETTING BETTER SEARCH ENGINE RESULTS: | Click for optimizing details

If you would like better listings at search engines be sure to edit or add the "alt" tags on each image including the "spacer.gif" and put in phrases related to your product. Also add some important phrases to your title but don't let it get to long. Alt tags should look like this:

SUBMITTING YOUR SITE TO SEARCH ENGINES: | Click for search engine details

Be sure to edit your template page titles. For SE help please see the submitting your site support page.

FREE ADD-ONS: | Click for add-on details

Be sure to edit your template page titles. For SE help please see the submitting your site support page.

CHANGING THE FLASH FONT FACE AND COLOR: | Click for Flash details

The font used in the Flash animation is a fixed font locked into the animation. You can download a free trial version of Macromedia Flash and edit the .fla file in the "flash" directory. Otherwise you can contact AllWebCo and we can change the font for you for a small fee.

HELPFUL WEBSITE RESOURCES:

FreeSticky

The JavaScript Source

The best free javascript website on the planet.

WDG

The Web Design Group CSS style sheet and HTML help.

Lissa Explains it All

Super easy HTML CSS and Javascript help.

DevX

High end website development help.

Font Colors

The standard Netscape Hex Color Chart.