| Form setup |
Slideshows |
Flash |
Colors |
Menu Setup |
Videos |
Graphic Logo |
Gallery |
Paypal Cart |
Adding Pages |

Allwebco Design

Allwebco Templates
Allwebco Web Hosting
Square Peach Music

This template includes:
Paypal "Type 2" Forms:

Setting up your website template:
For more templates and template addons visit: Allwebco Design
For professional web hosting visit: Allwebco Hosting

Step 1:
This template includes 2 homepage options:
  • To use the default homepage , move the "NOFLASH-HOME.htm" into the "extras" folder.
  • To use the no Flash homepage, move the "index.html" into the "extras" folder. Rename the "NOFLASH-HOME.htm" to "index.html". See options below to use a graphic logo.
  • To use the Google Translate homepage, move the "index.html" into the "extras" folder. Rename the "GOOGLE-TRANSLATE-HOME.htm" to "index.html".
Step 2:
EDIT FLASH ANIMATION: | Click for more details
Open the "flash.txt" with Notepad or any text editor and edit "Your Website Title" text with your website or company name. Be sure not to delete the "logo=". See options below to use a graphic logo.

HOMEPAGE TEXT & IMAGE CHANGER: | Click for more details
The homepage (index.html) Flash changer is showing 5 .jpg images with a title, text area, link text, and link for each slide. These 5 images are in the "text-slideshow" folder and are 850 x 300 pixels each. You can replace "homeflash1.jpg" through "homeflash5.jpg" with your .jpg images to update the homepage. Click link above for more options.

In the "text-slideshow" folder edit the "flash-slideshow.txt". There is a title?, text?, linktext? and link? for each slide. Edit the text following the "=" to setup text and links for each slide. Example: Edit the following for slide #1:

&title1=Your Title
&text1=Your Text
&linktext1= Click here text

INCLUDED MOBILE DETECT: | Click for more details
The homepage (index.html) Flash image text slideshow includes a browser detection script. A static image, the "homeflash1.jpg" in the "text-slideshow" folder will display in non-Flash browsers and mobile devices like iPods.

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

Step 4:
In the "sidebar.htm" edit the company name, address, phone and fax number and email address. The email is using a Javascript so search engines can not see your email and you will receive less spam email. Edit the following variables in the source code to update the email. Do not include the @ in the variables:

var emailname = "info";
var emailserver = "your-web-domain.com";

Step 5:

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 6:
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. 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 not using the Paypal shopping cart, move all "FORMgallery?.htm" pages into the "extras" folder. If you are using the Paypal cart see "PAYPAL SHOPPING CART SETUP" below on this page.

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 7:
SETUP THE XML SLIDESHOWS: | Click for more details
Three Flash XML slideshow pages are included with this template. All files for this slideshow are included in the "slideshows" folder. Replace all "Fslide?-?.jpg" images in this folder with 600 x 400 pixel images. The images are named by the slideshow they are in. EXAMPLE: "Fslide1-1.jpg" is for slide #1 in slideshow #1. "Fslide2-12.jpg" is for slide #12 for slideshow #2. Edit the captions for each image by editing the "slideshow?.xml" files. Replace the 3 "thumb-slideshow-?.jpg" images with 125 x 83 images to update the "slideshow-home.htm" page. Click for XML slideshow setup details.

Step 8:
SETUP THE VIDEO PAGE: | Click for more details
This template uses "page type" video code. The "videos.htm" links to 6 "sets" of video pages in the "videos" folder. Replace the 18 video files in your "videos" folder with your videos. Each video has a MOV file a WMV file and a MP4 (for mobiles) you will replace. Edit the "videos.htm" with your video titles and descriptions. Be sure to test all links on the "videos.htm". You can edit the 12 HTML pages in your "videos" folder like any other HTML page. All images used on the "videos.htm" page can be found in the "videos" folder. Click link above for more details.

Step 9:
Edit the links in the "index.html" and also near the top of the "sidebar.htm" with your link to Twitter Facebook and LinkedIn. To remove these links, delete the code between the "START SOCIAL LINKS" and "END SOCIAL LINKS" notes.

Step 10:
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 the amount on the payment page. To remove the form, delete the code between the notes for the Paypal form in the "paypal.htm".

Step 11:
CHOOSE / CHANGE YOUR COLOR THEME: | Click for more details
Edit the "colortheme.css" to change your template theme. Edit the color in 2 places. Available color themes are listed at the top of this file. Colors for the Lytebox gallery are also set in this file. Click link above to change to another color theme or to edit your template colors.

Step 12:
PDF PAGE SETUP: | Click for more details
In the "PDF" folder, replace the "PDFsample1.pdf" through "PDFsample6.pdf" with your PDF files. Edit the "PDFgallery.htm" with info for your PDF files. Click link above for setup details.

Step 13:
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 14:
EDIT LEFT 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 "SB-frame" height style in the .css color file you are using in the "colors" folder.

Step 15:
EDIT PAGES: | Software choices | Notepad editing
Edit the HTML pages with your website information. You can use an editor like Notepad, Expression Web, Frontpage, Dreamweaver or any wysiwyg 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 locate areas to edit.

Step 16:
Open each HTML page and edit the page titles, (at the top of the page) the description, and keywords with your product or service details. 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! and other search engines.

Step 17:
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 "colors" and "picts" and "slideshows" and "text-slideshow" and "videos" folders and all files in these folders.


Drop Menu Editing:

EDIT THE DROPDOWN MENUS: | Drop 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.

MENU OPTIONS: | Click for more details
There are options at the top of the "menu.js" that you can change for "align" and "padding". Only edit the width option if you are having a menu "wrap" problem.

MENU COLORS: | Click for more details
Click the above link for info on drop menu colors, widths and other options.

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.

OTHER MENUS: | Click for more details
This template includes 2 other menus you can edit. The "menu-slideshows.js" used in the slideshow pages, and the "menu-footer.js". You can add more menu links by copying code in the menu files and pasting it below itself. You may want to back up your files before you edit them.


To replace the Flash logo with a graphic logo: edit the "header.js". Change the "var logotype" from "flash" to "graphic" (all lowercase). In the "picts" folder you will find a graphic called "logo.jpg". Edit this graphic with your logo image. The "logo.jpg" is now 600 pixels wide by 60 pixels high. You can make this image any size you would like. Edit the ".header" class background color in the .css color file you are using in the "colors" folder.

WATERMARK SETUP: | Click for more details
You can configure the placement and opacity of the watermark over the image closeup views in the Lytebox gallery by editing the "lytebox.css" in the "lytebox" folder. 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".

ADDING PAGES: | 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 add text links to the other pages.

ADDING MORE VIDEOS (videos.htm): | Click for more details
If you edit the "videos.htm" in a plain text editor you can copy and paste sections to add more videos. Example: Copy the code between the "START VIDEO-6" notes in the "videos.htm" and paste it below itself to add another video. See the pagetype videos support page.

ADDING APPLICATIONS: | Click for more details
You can add scripts, video, Flash applications, links, images and almost any feature you see on other websites can be added to the template pages. Allwebco provides many free scripts and add-ons as well as reasonably priced premium add-ons that can be added to any template or website.

FONTS: | Font colors | Themes
You can change your font colors and sizes by editing the ".css" files in the "colors" folder with a text editor. Change the "table" px size to change the copy font on all pages. Change the "title" px size to change all the title sizes. Click links above for more help.

TEMPLATE COLORS: | Colors | Themes
All template page colors can be edited in the ".css" files in the "colors" folder with a text editor. Click links above for more help. See menus above for menu colors.

CHANGING THE GRAPHICS/PICTURES: | Click for more details
You can replace each HTML page picture with your own .jpg image. You can re-size the images to any other size, but it is recommended that you keep the images 848 pixels wide. You will find all pictures and background images in the "picts" folder. Hover over any image to view the size.

So you can set the height of your webpage, there is a "pageheight" style class you can edit in each css files in the "colors" folder. The "pagewidth" class can be edited to change the overall width of the template content area.

Paypal shopping cart forms have been included in the template "FORMgallery?.htm" pages. Follow the steps below to setup the shopping cart pages. This template includes "Type 2" Paypal forms.
  1. Setup a Paypal merchant account.

  2. Move the 3 "gallery?.htm" pages into the "extras" folder.

  3. Rename 3 "FORMgallery?.htm" pages to "gallery?.htm" pages maintaining their respective gallery numbers. For example, rename "FORMgallery1.htm" to "gallery1.htm".

  4. Edit the "paypal@your-web-domain.com" in each "gallery?.htm" page in 1 place near the top with your Paypal e-mail. This will update the view cart button.

  5. The "FORMgallery?.htm" pages include options for the Paypal forms. These options can be edited or removed. Also see the Paypal Type 2 Forms setup support page.

  6. You will edit the "5290739" in each form in the "gallery?.htm" pages with your generated product number. This will be the following code:

    <input type="hidden" name="hosted_button_id" value="5290739">

    Edit the 1st Paypal form in the "gallery1.htm" page. Find this note "START PAYPAL FORM 1-1". Click here for steps to setup the forms.

  7. Edit all forms as shown on the Paypal Type 2 Forms setup support page in the 3 gallery pages.

Template User Agreement:
COPYRIGHTę Allwebco Design Corporation. Unauthorized re-sale of this template, images or Flash files is strictly prohibited by law.

User is authorized to use this template and any or all images and Flash included on a single website or for any type of project(s) for personal or business websites, either for their own or a client use. Templates, as blank templates, may not be distributed to other parties without written permission from Allwebco Design Corporation. User is authorized to modify all included files. For more details please see the Allwebco Templates Users Agreement.