|
[ HomePage ] [ Allwebco Templates ] [ Allwebco Hosting ] [ Square Peach Music ] 
[ Your Missing Page ] [ Your Thanks Page ] |
Setting up your website template: Template Style: HTML5 Step 1: CHOOSE HOME PAGE TO USE: | More details This template includes 2 homepage options:
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 .css file. A "logo.PSD" file is located in the "extras" folder. The default font used is 26 points "AvanteGarde Md BT". 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" "Website Title" text in the "header.js" with your site name. Font size and colors are edited in the .css file. Step 3: EDIT FOOTER: | Click for more details Open the "footer.js" file in Notepad or any text editor, and change the "yourwebsite.com" line with your name or website name. This will update the lower page info on all pages. Edit all ".js" files with a text editor. Step 4: EDIT CONTACT INFO: | Click for more details Open the "contact.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 and headshot page. 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. IMPORTANT NOTE: The info included in the "contact.js" is hidden on all pages except for the 2 pages listed above and will display during printing. Be sure to edit this file, or remove all info from this file you do not want printed out. Do not delete this file. Try a "print preview" in the "biography.htm" to see this contact info display. Step 5: EDIT THE CONTACT FORM: | Click for more details 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. Step 6: REPLACE THE GALLERY PICTURES: | Click for more details The best way to setup the pictures in the gallery is not to actually edit the HTML pages and change the pictures on each individual page. The fastest way is to simply replace the 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 update the gallery pages and the slideshow. In the "gallery" folder, replace all "Fgallery" pictures you will be using with full size photos. This will be 12 images per page. Replace the "gallery" pictures with your thumbnails. The "gallery?.jpg" thumbnails are now 50 x 50 pixels and "Fgallery.jpg" images are 500 x 500 pixels, but you can make them any size that you prefer. It is best to not go wider than 750 pixels total width for any page on your site. See "options" below for setting up the slideshow. Step 7: EDIT THE HEADSHOT IMAGE: | Click for more details Edit the "headshot.jpg" and "headshot-thumb.jpg" in the "picts" folder with your image. The "headshot.jpg" is now 550 x 825 pixels. The thumb is 50 x 50 pixels. Step 8: EDIT TWITTER FACEBOOK LINKEDIN GOOGLE+ LINKS: | 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, LinkedIn and Google+. The "social-links.js" includes "yes/no" variables to turn off any or all of the social links. Variable editing help. Move the location of the social icons in the "coolstyle.css". An optional "social-links-VERTICAL.js" is included in the "extras" folder to have your social icons stack vertically. Step 9: REPLACE HOMEPAGE SLIDESHOW IMAGES (optional): | More details The homepage (index.html) includes a slideshow application called the "jQuery Cycle Plugin". In the "JQuery" folder replace 8 images, "imageJQ-1.jpg" through "imageJQ-8.jpg". Make your images 375 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. The location of the "Next & Prev arrows" can be edited in the "coolstyle.css". Optional images and PSD files are included in the "extras" folder. Step 10: EDIT PAGES: | Software choices | Notepad Editing Edit the text on all HTML pages with your information. You can use a text editor like Notepad, 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 navigate. NOTE: You will not see the footer and header in some software because they are .js include files so you can globally edit your e-mail and other info. Step 11: EDIT TITLES, DESCRIPTIONS AND KEYWORDS: | Click for 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 info. 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 or MSN and other search engines. Click for optimization help. Step 12: UPLOAD: | Click for 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", "gallery" and "JQuery" and "sounds" folders and all files in these folders. Options: SETTING UP THE SLIDESHOW PICTURES: | Click for more details The slideshow is currently setup to display all "Fgallery" pictures in the gallery folder. If you would like to add or remove pictures from the slideshow, open the slideshow.htm in Notepad and look for the "EDIT THIS AREA" note. Copy and paste to add new pictures to the list, or delete lines to remove pictures. You can also set the AutoPlay speed. Look for "var rotate_delay = 3000". HOMEPAGE SOUND & SLIDESHOW SOUND: | Click for more details The homepage (index.html) and "slideshow.htm" each have a background sound named "home-sound.mp3" and "home-sound.ogg" and "slideshow-sound.mp3" and "slideshow-sound.ogg" in the "sounds" folder. Optionally replace these files to have your own sound play on the homepage and slideshow. You may want to keep the sound files small so the pages download fast. To remove the background sound in these pages delete between the "START SOUND CODE" and "END" notes in the "index.html" or "slideshow.htm". COLORS FONTS & CSS code: | Click for more details You can change your font colors and sizes, background colors and borders by editing the "coolstyle.css" with a text editor. Change the "TABLE" px size to change the copy on all pages. Change the "title" px size to change all the title sizes. PAGE COLOR BARS: | Click for more details Each page has a colored bar just under the header. Edit these colors in your "coolstyle.css". See the "IMAGE TABLE, DIV AND COLOR BARS" section in this file to edit those. EDITING THE MENUS: | Click for more details You can change the names on the menu buttons like "biography" or "contact" 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 even add more pages by copying one button in the menu.js and pasting it right below the next. Be sure to back up your file before you edit it. GALLERY MENU: | Click for more details The "menu_gallery.js" is used only on the template gallery, slideshow and headshot pages. See the notes inside this file to add more gallery links. ADDING PAGES: | Click for 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. IF YOU NEED MORE ROOM ON THE MENU: You can add a second menu. For Example: You can make a copy of the "menu.js", name this "menu2.js". In each HTML page, copy the line below and paste this line just above the "PICTURE TABLE" note. <script type="text/javascript" src="menu2.js"></script> PICTURES: | Click for more details You can replace the pictures with your own. The pictures are now 375 x 125 pixels in the header area and 150 x 375 in the right sidebar area. You can use any size picture you want and the pages will size them to fit automatically. Each page has it's own set of pictures which are named according to the page they're on. You will find all pictures in the "picts" folder. If you change the image width of the images in the header area you will want to edit the ".imagewidth" class in your CSS file to match. GALLERY INDEX "site_map.htm" PAGE: The "site_map.htm" gallery index page is linked from the "index.html". It is best not to remove this link so search engines can find your template pages and properly list all your pages when users search at search engines. PAGE HEIGHTS, WIDTHS & MARGINS: So all your pages will maintain a standard page height, CSS code is included. Edit the "pageheight" class in the "coolstyle.css" file. Edit the "PAGE WHITESPACE AND WIDTHS" area to adjust page heights, margins and overall and content widths. FOOTER ALLWEBCO LOGO: The image in the template footer is a standard .gif image. You can turn this logo off in the "footer.js" or edit the link in the "footer.js" and replace the "allwebco8015.gif" in the picts folder with your own image. |