[ Homepage ]
[ Allwebco Design ]
[ Allwebco Templates ]
[ Allwebco Hosting ]
[ Missing Page ]
[ Thanks Page ]
[ PayPal Thanks ]
Paypal "Type 2" Forms
Setting up your website:
Step 1:
CHOOSE OPTIONS:
Some optional pages are included in this template.
- 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" 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" 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" 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" into the "extras" folder. Rename the "OPTIONAL-3-index.html" to "index.html".
EDIT HEADER: | More Details
Edit the "logo.jpg" in the picts folder with your logo image. The header background HEX color can be edited in the "coolstyle.css" file. A "logo.PSD" file is located in the "extras" folder. The default font used is 23 points "Folio Md BT".
OPTIONAL PLAIN TEXT HEADER: To use the text header option, edit the "var logotype" in the "header.js" from "graphic" to "text". Edit the "var logo1" "Your" and "var logo2" "Website Title" text in the "header.js" with your site name.
Step 3:
REPLACE HOMEPAGE SLIDESHOW IMAGES (optional): | More Details
The homepage (index.html) includes a slideshow application called the "jQuery Cycle Plugin". In the "JQuery" folder replace 8 images, "imageJQ-1.jpg" through "imageJQ-8.jpg". Make your images 600 x 400 pixels. This will update the homepage animation. Click the link above for details and options. Cycle set #1 is used on the homepage.
The location of the "Next & Prev arrows" can be edited in the "coolstyle.css" and the button images are in the "JQuery" folder.
Step 4:
EDIT COPYRIGHT FOOTER: | 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 5:
EDIT CONTACT INFO: | 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 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:
SETTING UP THE LYTEBOX GALLERY: | 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.
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 - Paypal "Type 2" Forms | 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.
- Setup a Paypal merchant account.
- Note: gallery3.htm includes options for ordering as a sample. You can copy form code from this page to other pages, or copy and rename this page if you need options in all order forms.
- 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.
- Edit the "paypal@your-web-domain.com" in each gallery page in 1 place near the top with your Paypal e-mail. This will update the view cart button.
- You will edit the 10909929 (or 5290739 in gallery 3) 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">
Click here for steps to generate your code and setup the forms. Edit the 1st Paypal form in the "gallery1.htm" page. Find this note "START PAYPAL FORM 1-1".
- Edit all forms as shown on the Paypal Type 2 Forms setup support page in the gallery pages.
- There is a thank you page included so you can setup the "return" page to display after a payment is completed. See link above for details.
- Sales tax and shipping are setup in your Paypal account login.
REPLACE THE GRAPHICS: | 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: | 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 the other FAQ questions on this page.
Step 13:
EDIT TWITTER FACEBOOK LINKEDIN YOUTUBE LINKS: | Social Links | .js variable editing
Open the "social-links.js" in a text editor and edit the 4 link variables with your link to Twitter, Facebook, YouTube and LinkedIn. The "social-links.js" includes "yes/no" variables to turn off any or all of the social links. Variable editing help.
Step 14:
EDIT PAGES: | Software choices | Notepad Editing
Edit the text on all HTML pages with your information. You can use 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 15:
EDIT TITLES, DESCRIPTIONS AND KEYWORDS: | 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 16:
UPLOAD: | 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 "lytebox" and "JQuery" folders and all files in these folders.
Options:
WATERMARK SETUP: | 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: | 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, edit the ".gallery-align" class height in the "coolstyle.css".
FONTS: | 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. Edit the code right after the "THE NEXT LINE CONTROLS THE DEFAULT FONT SIZE" note to change the text copy on all pages. Change the "title" or "smalltitle" px size to change all the title sizes. See notes included in the template CSS files.
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: | 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: | 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: | 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" class is included in the "coolstyle.css". Edit this height to any height you need.
SITE MAP PAGE:
The "site_map.htm" is linked from 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.