 Homepage Your Missing Page Your Thanks Page Payment Thanks Search Support Allwebco Design Allwebco Hosting |
Template Style: 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 Step 1: HOMEPAGE CHOICE: | More Details
EDIT HEADER: | More Details Edit the "logo.jpg" in the picts folder with your logo image. The header background HEX color can be found in the "corporatestyle.css" file. A "logo.PSD" file is located in the "extras" folder. The default font used is 40 points "abeatbyKai" with a letter spacing of -1. OPTIONAL PLAIN TEXT HEADER: To use the text header option, edit the "var logotype" in the "header.js" from "graphic" to "text". Edit the "Welcome" text for the "var LogoText" in the "header.js" with your site name. Step 3: *Full & Mobile EDIT COPYRIGHT: | More Details Open the "footer-copyright.js" file in Notepad or any text editor, and edit the "Yourcompany.com" text with your website or company name. This will update the footer info on all pages (both full and mobile sites). Edit all ".js" files with a text editor. Step 4: *Full & Mobile EDIT CONTACT INFO: | More Details Open the "phone.js" file in Notepad or any text editor and change the company name, address, phone and fax number and email address (edit the email in 2 places). This will update contact info on the "contact" page (both full and mobile sites). Step 5: EDIT THE CONTACT 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. NO FORM OPTION: If you DO want to use the contact form, move the "No-Form-contact.htm" into the "extras" folder. If you want to NOT use a form on the contact page, move the "contact.htm" into the extras folder and re-name the "No-Form-contact.htm" to "contact.htm" or you can optionally rename the "staff.htm" to "contact.htm". Step 6: *Full & Mobile REPLACE THE CART/GALLERY PICTURES: | More Details | Thumbnail Help If you want use the plain no-cart gallery pages see options below. 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. In the "gallery" folder, replace the 18 "Fgallery.jpg" pictures with full size photos. Replace the 18 "gallery.jpg" pictures with your thumbnails. The thumbnails are now 175 x 117 pixels and full size gallery images are 700 x 467, you can optionally make them any size that you prefer. Edit thumb widths in the "corporatestyle.css" (edit the "style-mobi.css" for mobile thumb widths). For the Paypal cart setup see "options" below. Note: Set the color for the Lytebox popup in the "lytebox-JQ.css" inside the "JQuery-lytebox" folder. This will setup both the full and mobile gallery and all slideshow images (mobile and full site). Step 7: *Full & Mobile PAYPAL CART SETUP: See Paypal section at the bottom of this page. Step 8: 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="360" src="http://www.youtube.com/embed/6tQR8HIOU1g?wmode=opaque" Replace the 4 "video-?.jpg" thumbnail images in the picts folder to update the video menu. Step 9: EDIT RIGHT SIDEBAR: | More Details Open the "sidebar-right.js" file in Notepad or any text editor, and edit the text and links with your own text. Editing the "sidebar-right.js" will update all HTML pages except for the "index.html" at one time. Edit the "index.html" to update the homepage sidebar. Step 10: *Full & Mobile EDIT TWITTER, FACEBOOK, LINKEDIN LINKS: | More Details Open the "social-links.js" in a plain text editor. Edit the 3 links with your social network links. To turn off the social links edit the "var social" in this file from "yes" to "no". To remove any single link delete the lines of code as noted in this file. This will update the full site sidebar and footer social icons, and the mobile footer social icons. Step 11: REPLACE HOMEPAGE SLIDESHOW IMAGES (optional): | More Details The homepage (index.html) includes a slideshow application called the "jQuery Cycle Plugin". In the "JQuery-Cycle" folder replace 6 images, "imageJQ-1.jpg" through "imageJQ-6.jpg". Make your images 750 x 125 pixels. This will update the homepage animation. Click the link above for details and options. Cycle set #1 is used on the homepage. Step 12: SETUP THE SITE SEARCH: Open the "site_map.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 13: EDIT PAGES: | Software choices | Notepad or TextEdit Editing Change the text on all pages with your website information. You can use Frontpage, Expression Web, Dreamweaver, Contribute, CoffeeCup, any wysiwyg HTML editor or a text editor like Notepad or TextEdit. Take care not to delete any of the HTML tags that surround the text. Step 14: *Full & Mobile PDF PAGE SETUP: | More Details In the "PDF" folder, replace the "PDFsample1.pdf" through "PDFsample6.pdf" with your PDF files. The mobile "PDFgallery.htm" page links to the same PDF files. Edit the "PDFgallery.htm" with info for your PDF files (both full and mobile pages). Click link above for setup details. 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 your product or service information. 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: *Mobile SETUP THE MOBILE WEBSITE: | More Details See the help-mobi.html located in the "mobile" folder. Step 17: *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. Options: 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 "corporatestyle.css" 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. 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 "index.html" and turn off the mobile icon in the "header.js". EDITING THE FOOTER "footer.htm": | More Details You will edit the "footer.htm" like any other HTML page. Editing the "footer.htm" will update all the pages at one time. If you need more height in the footer you can edit the "footer-frame" height style in the "FOOTER OPTIONS" section in the "corporatestyle.css". USING THE NO-CART GALLERY PAGES: To have plain image gallery pages with no Paypal cart, move the 3 "gallery?.htm" pages into the extras folder or delete them. Rename the 3 NO-CARTgallery?.htm pages to "gallery1.htm", "gallery2.htm" and "gallery3.htm". FONTS: *Full & Mobile | More Details You can change your font colors and sizes by editing the "corporatestyle.css" with a text editor. You can find other font colors by clicking here. You can also change the font sizes in the "corporatestyle.css" file. Change the "table" px size to change the copy on all pages. Change the "title" px size to change all the title sizes. Many of the style classes in the "corporatestyle.css" will update both the full and mobile websites. CHANGING / ADDING MENU BUTTONS: | More Details You can change the names on the buttons like "about us" or "service" to other page names by editing the "menu.js" in Notepad. Only change the one instance of the name and not the name with the ".htm" after it. Whatever you change in the menu.js will change every page on the website. Keep the names short so they don't go outside the menu. You can add more pages by copying one button in the menu.js and pasting it right below the next. Be sure to back up your files before you edit them. Click here for more details on editing your menu. MENU IMAGES: The menu includes 2 images under the buttons. These are switched on and of by editing the "showimage1" and "showimage2" to "yes" or "no" in the "menu.js". USING A 3RD LEVEL DROP MENU: | More Details In the "extras" folder you will find a file named "menu-3LEVEL-SAMPLE.js". Copy this file into your main template folder. Rename your "menu.js" to "menu-old.js" and move it into the "extras" folder. Rename the "menu-3LEVEL-SAMPLE.js" to "menu.js". WATERMARK OPTION: | More Details You can turn on a watermark for the image closeups by editing the "lytebox-JQ.css" in the "JQuery-lytebox" folder. Change the code at the bottom from "none" to "block". In the "JQuery-lytebox" folder are 2 .png images called "watermark-desktop.png" (300 x 40 pixels) and "watermark-mobile.png" (200 x 27 pixels). You can replace these images with your own semi transparent .png images. You can resize the watermark images. 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 then add links from the other pages or even add the page to the menu by opening the "menu.js" and copying and pasting one of the buttons below another. There are notes in the "menu.js" to help you add a button. ADDING MORE VIDEOS: | More Details You can copy any of the "video-?.htm" pages to add another video. Example:
Edit the code for the iframe height and width in the "video-?.htm" pages for each video. PICTURES: | More Details You can replace the pictures with your own. Each page has it's own picture which is named according to the page it's on. You will find all pictures in the "picts" folder. Hover over any image to see the size. Images used for the overlay and for the mobile header icon are loaced in the "mobile-select" folder. PAGE HEIGHTS: So all your pages will maintain a standard height a ".pageheight" class is included in the css file. You can edit this height to any height you need. SITE MAP PAGE: The "site_map.htm" is linked from the "index.html" in the sidebar. 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): *Full & Mobile | More Details Paypal shopping cart forms have been included in the template "gallery?.htm" pages (Both full and mobile sites). Follow the steps below to setup the shopping cart pages. This template includes "Type 2" Paypal forms.
|