| |||||||
 Homepage Allwebco Templates Allwebco Web Hosting Square Peach Music 
|
Template Style: HTML5 W/Mobile Overlay 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: CHOOSE HOME PAGE TO USE: | More Details This template includes 3 homepage options:
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. Step 3: 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. Step 4: 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: Open the "phone.js" file in Notepad or any text editor and change the company name, address, phone and fax number, and e-mail address (edit the e-mail in 2 places). This will update contact info on the contact page (full and mobile). This is done as a javascript file so your e-mail will not be read by search engines and you'll receive less spam e-mail. 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: *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. 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="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 9: *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. Step 10: paypal.htm PAYPAL PAYMENT PAGE: 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: *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. Click link above to change to another color theme or to edit your template colors. Step 12: *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. Step 13: 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. Step 14: 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. Step 15: 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". Step 16: 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 17: 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 18: *Mobile SETUP THE MOBILE WEBSITE: | More Details See the help-mobi.html located in the "mobile" folder. Step 19: *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 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". 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 3 other menus you can edit. The "menu-slideshows.js" is used in the slideshow 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. 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:
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 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. 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. | ||||||