Allwebco Web Hosting
Square Peach Music
HTML5 W/Mobile Overlay - Paypal Type 2 Forms
Full & Mobile Setup - Getting Started
Some files used on the main website will also be linked to from the mobile site inside the "mobile" folder. See notes *Full & Mobile below. To setup the matching mobile site see the help-mobi.html in the "mobile" folder. See also support details and support for the included Mobile Overlay
Setting up your website template:
For more templates and template addons visit: Allwebco Design
For professional web hosting visit: Allwebco Hosting
CHOOSE HOME PAGE TO USE: | More Details
This template includes 3 homepage options:
- To use the default homepage, move the "OPTIONAL-No-Animation-Home.htm" into the "extras" folder.
- To use the no animation homepage, move the "index.html" into the "extras" folder. Rename the "OPTIONAL-No-Animation-Home.htm" to "index.html".
- To use the Google Translate homepage, move the "index.html" into the "extras" folder. Rename the "GOOGLE-TRANSLATE-HOME.htm" to "index.html".
EDIT HEADER: | More Details
Edit the "logo.png" in the picts folder with your logo image. The header background HEX color can be found in the ".css" theme you are using in the "colors" folder. The default font used is 38 point bold "Geometr706 Md BT". This will update the header for all full site pages.
The "logo.png" has a transparent background. A "logo.PSD" file is located in the "extras" folder. If you want to change to a "logo.jpg" image, edit the "header.js" in 1 place from .png to .jpg and place your "logo.jpg" in the "picts" folder.
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 LogoText" "Your Company Name" text with your site name.
REPLACE HOMEPAGE SLIDESHOW IMAGES (optional): | More Details
The homepage (index.html) includes a slideshow application called the "jQuery Cycle Plugin". In the "picts" folder replace 5 images, "home-1.jpg" through "home-5.jpg". Make your images 850 x 300 pixels. This will update the homepage animation. Click the link above for details and options. Cycle set #1 in the "cycle-SETS-home.js" is used on the homepage.
The location of the "Next & Prev arrows" can be edited in the .css files in the "colors" folder. PSD next prev files are located in the "extras" folder.
HOMEPAGE SLIDESHOW BACKGROUND COLOR: | More Details
The shading under the text can be edited with the "#textlayer" class in the .css files in the "colors" folder. Click link above for details.
EDIT FOOTER: | 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 5: *Full & Mobile
EDIT CONTACT INFO:
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: *Full & Mobile
SETTING UP THE LYTEBOX GALLERY: | 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. This will setup both the full and mobile gallery images.
Note: Set the color for the Lytebox popup in the "lytebox-JQ.css" inside the "JQuery-lytebox" folder.
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. It is best not to go wider than 130 for the thumbnails for mobile. See links above for more details.
Step 8: *Full & Mobile
SETUP THE JQUERY CONTENT SLIDESHOWS: | More Details
4 slideshow pages are included with this template to display 10 slides each with an image, title and text. More slides can be added. Images for the slideshows 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-9.jpg" is for slide #9 for slideshow #2. Replace the 4 "thumb-slideshow-?.jpg" images with 130 x 87 images to update the "slideshow-home.htm" and the mobile "resources.htm" pages.
Edit the text and title for each image by editing the "slideshow?.htm" pages. This page will probably need to be edited in "source view". Each slide is in a small code group with id="Slide1" through id="Slide10". Click for jQuery content slideshow help as well as visual examples.
Mobile Slideshows When the images in the "slideshows" folder are updated, the 4 mobile slideshow page images will also be updated. See also the help-mobi.html.
SETUP THE VIDEO PAGES: | More Details
This template uses embedded YouTube video. Setup a free YouTube account, get the embed code from each video and replace the code in each video page. Replace only the following code highlighted below and do not remove the ?wmode=opaque code:
<iframe width="640" height="390" src="http://www.youtube.com/embed/6tQR8HIOU1g?wmode=opaque"
Replace the 6 "video-?.jpg" thumbnail images in the picts folder to update the video menu.
Step 10: *Full & Mobile
EDIT TWITTER FACEBOOK LINKEDIN LINKS: | More Details
Open the "social-links.js" in a text editor and edit the 3 link variables with your link to Twitter Facebook and LinkedIn. The "social-links.js" includes "yes/no" variables to turn off any or all of the social links. Variable editing help. This will update the sidebar, the homepage and the mobile footer social icons.
paypal.htm PAYPAL PAYMENT PAGE:
This template includes a Paypal payment page called "paypal.htm". Edit the "email@example.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 12: *Full & Mobile
CHOOSE / CHANGE YOUR COLOR THEME: | More Details
Edit the "colortheme.css" to change your template theme (changes both full and mobile site). 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 13: *Full & Mobile
PDF PAGE SETUP: | 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 (both full and mobile pages). Click link above for setup details.
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 or remove the other FAQ questions on this page.
EDIT LEFT SIDEBAR: | 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.
SETUP THE SITE SEARCH:
Open the "header-right.js" and edit "allwebcodesign.com" with your website domain. To turn off the site search, open the "header-right.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-header-right.js" in your "extras" folder. Click here for help setting up the Burgdorf search.
To use a Google only search, move the "header-right.js" into your "extras" folder. Move the "OPTIONAL-GOOGLE-search-header-right.js" into the main template folder and rename that to "header-right.js".
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.
EDIT PAGE TITLES, DESCRIPTIONS AND KEYWORDS: | More Details
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 19: *Mobile
SETUP THE MOBILE WEBSITE: | More Details
See the help-mobi.html located in the "mobile" folder.
Step 20: *Full & Mobile
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 all template files and folders and all files inside the folders. You do not need to upload the "extras" folder.
MOBILE OVERLAY: | More Details
All of the full site main template pages include a mobile select overlay. You can see this select box if you make your web browser as narrow as 652 pixels. Files for the mobile select are in the "mobile-select" folder. Edit the "select-overlay.js" to change the overlay text. Edit the "select-overlay.css" to change font sizes and layout. Edit the css color theme files in the "colors" folder to edit the overlay colors.
Turn off the select overlay in the "select-overlay.js" in the "mobile-select" folder. Click link above for details.
Note: Some pages like the thanks and missing pages do not inlcude the overlay.
REMOVING THE MOBILE SITE:
To remove the mobile site. Turn off the overlay as outlined above, remove the link to the mobile site in the "site_map.htm" and turn off the mobile icon in the "header-right.js".
Drop Menu & Other 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: | More Details
There are options at the top of the "menu.js" that you can change for "align" and "min width". Only edit the "min width" option if you are having a menu "wrap" problem. Other menu options are in the css files.
MENU COLORS: | 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: | More Details
This template includes 4 other menus you can edit. The "menu-slideshows.js" is used in the slideshow pages, the "menu-gallery.js" is used on gallery pages, the "menu-videos.js" used on the video 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.
WATERMARK SETUP: | More Details
You can configure the placement of the watermark over the image closeup views in the Lytebox gallery by editing the "lytebox-JQ-??.css" color files in the "JQuery-lytebox" folder. In the "JQuery-lytebox" folder are 2 .png images called "watermark-desktop.png" (250 x 50 pixels) and "watermark-mobile.png" (200 x 37 pixels). You can replace these images with your own semi transparent .png images. You can resize the watermark images, however be sure to test for mobile.
ADDING PAGES: | 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: | More Details
You can copy any of the "video-?.htm" pages to add another video. Example:
- Make a copy of the "video-6.htm" and rename it "video-7.htm".
- Edit the "video-7.htm" and change the YouTube video link as outlined above.
- Place a new video thumbnail in the "picts" folder.
- Add the new video link to the "menu-videos.js".
- Test the "video-7.htm".
Edit the code for the iframe height and width in the "video-?.htm" pages for each video.
ADDING APPLICATIONS: | 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 | Google Fonts
This template uses Google Fonts for the homepage slideshow text. The code that "calls" the font files is the first line in each .css file in the "colors" folder. Click above for details.
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: | 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.
PAGE HEIGHTS AND WIDTHS:
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" and "content-width" classes can be edited to change the overall width of the template content area.
Paypal Shopping Cart Setup (TYPE 2 FORMS):
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.
- Setup a Paypal merchant account.
- Move the 3 "gallery?.htm" pages into the "extras" folder (do in both full and mobile sites).
- Rename 3 "FORMgallery?.htm" pages to "gallery?.htm" pages maintaining their respective gallery numbers. For example, rename "FORMgallery1.htm" to "gallery1.htm" (do in both full and mobile sites).
- Edit the "firstname.lastname@example.org" in each "gallery?.htm" page in 1 place near the top with your Paypal e-mail. This will update the view cart button (do in mobile cart pages also).
- 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.
- 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.
- Edit all forms as shown on the Paypal Type 2 Forms setup support page in the 3 gallery pages (full and mobile).
The mobile and full site gallery cart pages are separate and need to each be edited with the same products. You can use the same generated "hosted_button_id" for the same product on the full and mobile gallery pages.
- Your optional return page is named thanks-payment.htm. Include a full link to your domain to this page if you use the return option when generating the forms. You can optionally not set this while generating forms and use the Paypal default return page.
Template User Agreement:
COPYRIGHT© Allwebco Design Corporation. Unauthorized re-sale of this template, images or files is strictly prohibited by law.
User is authorized to use this template and any or all images and files 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.