[ Homepage ] [ Allwebco Design ] [ Allwebco Templates ] [ Allwebco Hosting ] [ Your Missing Page ] [ Your Thanks Page ] [ Your PayPal Thanks ]

Setting up your website template: HTML5 - Paypal "Type 2" Forms Full & Mobile Setup: Note: Some files used on the main website will also be linked to from the mobile site inside the "mobile" folder. See notes Full & Mobi below. To setup the matching mobile site see the help-mobi.html located in the "mobile" folder. See also support details. Step 1: EDIT HEADER: | More Details Edit the "logo.png" in the picts folder with your logo image. The default font used is "AvantGarde Md BT". The logo size is 600 x 75 pixels. If you change the size, edit the header.js with your new height and width. 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. Set padding for your logo with the ".headerpad" class in the "coolstyle.css". 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 logohtext" "Your Website Title" text in the "header.js" with your site name. HEADER IMAGE: The header image right side icon is located in the "picts" folder. The link for the header icon is in the "header.js". Step 2: Used on Full & Mobi EDIT COPYRIGHT: | More Details Open the "copyright.js" file in Notepad or any text editor and edit the "Your Company" with your name or site name. This will update the footer info on all pages including the mobile website. Step 3: Used on Full & Mobi EDIT CONTACT INFO: | More Details Open the "contact.js" file in Notepad or any text editor and edit the company name, address, phone and fax number and e-mail address (info@your-web-domain.com in 2 places). This will update contact info on the "contact" page and also the mobile contact page. This text is placed in a .js file so search engines won't see your e-mail and you'll get less spam. Step 4: 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 5: Used on Full & Mobi SETTING UP THE LYTEBOX GALLERY: | More Details | Thumbnail Help Mobi Note: The same images in the "gallery" folder are used on both the full and mobile sites and also for the "slideshow-home.htm" page. The mobile site does not use Lytebox code to stay more mobile compliant. This template is using Lytebox popup gallery slideshows in the 3 gallery pages and also the "slideshow-home.htm". 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. By using the default generic image names, the 3 slideshows on the "slideshow-home.htm" and the mobile gallery will be setup at the same time. 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" .jpg images are 650 x 433 pixels, but you can make them any size that you prefer. See links above for more details. SLIDESHOW "slideshow-home.htm" SETUP : | More Details You can add and remove images in the slideshows in the "slideshow-home.htm" by editing the source code and adding and removing images from the list for each slideshow. There is a separate list of images in the "slideshow-home.htm" source code for each slideshow, "lytebox[show1]", 2 and 3. View more details. Step 6: Used on Full & Mobi 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. This will setup the PDF files on both the full and mobile sites. Click link above for setup details. Mobi Note: If you do not want to use the same generic names for the .PDF files, you will need to edit the links on both the full and mobile "PDFgallery.htm" page. Step 7: SETUP THE SITE SEARCH: Open the "resources.htm" and edit "allwebcodesign.com" in the "START SEARCH", "END SEARCH" section with your website domain in (2) places. If you require a more custom search with no ads, check in your Google account for info. Step 8: Used on Full & Mobi SOCIAL LINK SETUP: | 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, Google+ 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 social links on all pages including the mobile site social icons. Step 9: EDIT PAGES: | Software Choices | Notepad Editing Edit the text on all HTML pages with your information. You can use Expression Web, Frontpage, Dreamweaver, any wysiwyg HTML editor or a text editor like Notepad. Take care not to delete any of the HTML tags that surround the text. Step 10: EDIT TITLES, DESCRIPTIONS AND KEYWORDS: | More Details Open each of the pages and change the title tag (at the very top of the page) and also the description and the keywords with your product or service details. You can edit one page and copy and paste to the other pages. You should use a unique title on each page. 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 Yahoo and other search engines. Step 11: SETUP THE MOBILE WEBSITE: | More Details See the help-mobi.html located in the "mobile" folder. Step 12: 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 "PDF" and "mobile" folders and all files and subfolders inside these folders. Options: RESPONSIVE CODE: | More Details Some "Media Queries" responsive code is located at the bottom of the "coolstyle.css" that is used for the intro page (index.html). HEADER BACKGROUND COLOR: The background color for the header can be edited in your "coolstyle.css". Edit the shading .png image line, or edit the background from "transparent" to a hex color in the ".headercolor" class. See "transparent backgrounds" below. SEMI-TRANSPARENT BACKGROUNDS: | More Details Some areas of the website, header, menu and text content areas are using a semi-transparent background that you can edit. See notes in the .css files. Available shade colors are located in the "picts/shading" folder. view support details. WATERMARK SETUP: | More Details You can configure the placement, and whether or not to have a watermark over the images in the closeup views. In the "lytebox" folder, edit the "watermark.png" with your watermark. There is a .PSD file in the "lytebox_extras" folder. Edit the "lytebox.css" to adjust the watermark location or height. To have no watermark edit the visibility to "visibility: hidden;". Click here for details. 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 change the font sizes in the "coolstyle.css" file. Change the "body" style right after the "THE NEXT LINE CONTROLS THE DEFAULT FONT SIZE" note px size to change the copy on all pages. Change the "title" px size to change all the title sizes. CHANGING LINKS / ADDING TO THE MENU: | More Details There are a total of 2 menu type files you can add and remove links in. 1. menu.js (top menu) 2. menu-2.js (2nd menu down on the pages) You can change the names of the links like "about" or "gallery" to other page names by editing the "menu.js". Only change the one instance of the name and not the name with the ".htm" after it. Whatever you change in the menu.js or any .js file will change every page on the website. You can add more page links by copying one link in the menu.js or menu-2.js and pasting it right below the next. Be sure to back up your files before you edit them. There are notes in each "menu" .js files to add another link. 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 then add text links on the other pages or in the "menu.js". CHANGING THE GRAPHICS/PICTURES: | More Details You can replace the page pictures and backgrounds with your own pictures. You can use any size picture you want and the pages will size them to fit automatically. Each page has it's own pictures which are named according to the page they're on. You will find all pictures in the "picts" folder. Hover your mouse over any image in the "picts" folder to see the image size in pixels. PAGE HEIGHTS & WIDTHS: So all your pages will maintain a standard height a ".pageheight-min" class is included in the "coolstyle.css". Edit this height to any height you need. Content width is controlled by the ".content-width" class. SITE MAP PAGE: The "site_map.htm" is linked from the "home.htm" which 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. 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. Rename 3 "FORMgallery?.htm" pages to "gallery?.htm" pages maintaining their respective gallery numbers. For example, rename "FORMgallery1.htm" to "gallery1.htm". 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. The top 3 products in each "FORMgallery?.htm" page include options for the Paypal forms as an example. For more on "options" see the Paypal Type 2 Forms setup support page. You will edit the "5290739" or "10909929" 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 all gallery pages.