| |||||||||
 Homepage Allwebco Templates Allwebco Web Hosting Square Peach Music 
|
Template Style: HTML5 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 2 homepage options:
EDIT FLASH ANIMATION: | More details Open the "flash.txt" with Notepad or any text editor and edit "Your Website Title" text with your website or company name. Be sure not to delete the "logo=". See options below to use a graphic logo. Edit the "Welcome" text for the "var LogoText" in the "header.js" with your site name. To test this, make the "var showflash" a "no" and open the "index.html" in your web browser. This is the text that will show in non-Flash browsers. Change the "var showflash" back to "yes" when you are done. INCLUDED FLASH DETECT - HEADER DETECT: | More details The "header.js" includes a browser detection script for non-Flash browsers and devices. An option for testing and to show either text, or an image in non-Flash browsers is included in the "header.js". Click above for details. HOMEPAGE TEXT & IMAGE CHANGER: | More details The homepage (index.html) Flash changer is showing 5 .jpg images with a title, text area, link text, and link for each slide. These 5 images are in the "text-slideshow" folder and are 850 x 300 pixels each. You can replace "homeflash1.jpg" through "homeflash5.jpg" with your .jpg images to update the homepage. Click link above for more options. In the "text-slideshow" folder edit the "flash-slideshow.txt". There is a title?, text?, linktext? and link? for each slide. Edit the text following the "=" to setup text and links for each slide. Example: Edit the following for slide #1: &title1=Your Title &text1=Your Text &linktext1= Click here text &link1=yourpage.htm INCLUDED FLASH DETECT - HOMEFLASH: | More details The homepage Flash image/text slideshow includes a browser detection script. A static image, the "homeflash1.jpg" in the "text-slideshow" folder will display in any non-Flash browsers and mobile devices without Flash. Step 3: 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 4: EDIT CONTACT INFO: In the "sidebar.htm" edit the company name, address, phone and fax number and email address. The email is using a Javascript so search engines can not see your email and you will receive less spam email. Edit the following variables in the source code to update the email. Do not include the @ in the variables: var emailname = "info"; var emailserver = "your-web-domain.com"; Step 5: 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 6: 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 125 x 83 images to update the "slideshow-home.htm" page. 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. Step 7: SETUP THE VIDEO PAGE: | More details This template uses HTML5 "popup" video code. The "videos.htm" page links to 6 video pages in the "videos-HTML5" folder. Replace the 5 video files for each video in the "video-?" subfolders with your videos, and edit the "video-?.jpg" with your thumbnail image for each video. Edit the "videos.htm" with your video titles and descriptions. Be sure to test all links on the "videos.htm". Edit the 6 HTML pages in your "videos-HTML5" folder like any other HTML page. All images used on the "videos.htm" page can be found in the "videos-HTML5/picts-video" folder. Click link above for more details. Step 8: EDIT TWITTER FACEBOOK LINKEDIN LINKS: | More details Edit the links in the "index.html" and also near the top of the "sidebar.htm" with your link to Twitter Facebook and LinkedIn. To remove these links, delete the code between the "START SOCIAL LINKS" and "END SOCIAL LINKS" notes. Step 9: 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 10: CHOOSE / CHANGE YOUR COLOR THEME: | More details Edit the "colortheme.css" to change your template theme. 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 11: 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. Click link above for setup details. 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 or remove the other FAQ questions on this page. Step 13: 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 14: SETUP THE SITE SEARCH: Open the "search.js" and edit "your-web-domain.com" with your website domain. To turn off the site search, open the "search.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.js" in your "extras" folder. Click here for help setting up the Burgdorf search. To use a Google only search, move the "search.js" into your "extras" folder. Move the "OPTIONAL-GOOGLE-search.js" into the main template folder and rename that to "search.js". Step 15: 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 16: 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 17: 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 "colors" and "picts" and "JQuery-Content" and "text-slideshow" and "videos-HTML5" and "PDF" and "slideshows" and "calendar" and "flash" folders and all files in these folders. Options: 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 2 other menus you can edit. The "menu-slideshows.js" used in the slideshow 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. USING A GRAPHIC LOGO: To replace the Flash logo with a graphic logo: edit the "header.js". Edit the "var showflash" from "yes" to "no". Edit the "var logotype" from "text" to "graphic" (all lowercase). In the "picts" folder you will find a graphic called "logo.jpg". Edit this graphic with your logo image. The "logo.jpg" is now 600 pixels wide by 60 pixels high. You can make this image any size you would like. Edit the ".header" class background color in the .css color file you are using in the "colors" folder. 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 (videos.htm): | More details If you edit the "videos.htm" in a plain text editor you can copy and paste sections to add more videos. Example: Copy the code between the "START VIDEO-6" notes in the "videos.htm" and paste it below itself to add another video. See the HTML5 popup videos support page. REMOVING THE VIDEO PAGE: To remove the template video page: Move the "videos.htm" into the "extras" folder. Move the "videos-HTML5" folder into the "extras" folder. Edit the "menu.js" and remove the section that links to the video page. Remove the videos link on the "site_map.htm". SIZING VIDEO POPUPS: | More details You can change some options for the video popups by editing the pop-closeup.js in Notepad. Options include new browser window, or popup for the viewer. OTHER VIDEO OPTIONS: | More details Click the link above for all other video options including video size and adding more videos. 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 Flash files is strictly prohibited by law. User is authorized to use this template and any or all images and Flash 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. | ||||||||