[ HomePage ]|
[ Allwebco Templates ]
[ Allwebco Hosting ]
[ Square Peach Music ]
[ Your Missing Page ]
[ Your Thanks Page ]
Setting up your website template:|
Image Type R375X125
EDIT FLASH ANIMATION: | Click for more details
Open the "flash.txt" file with Notepad or any plain text editor and edit "YOUR NAME" with your name or company name. Be sure not to delete the "logoLARGE=". Or, you can remove the text following "logoLARGE=" and place your name or site name after "&logoSMALL=" to use a smaller logo font size. This will update the Flash logo on all pages. With this font you must use all capital letters. You can include spaces after your name if you want to shift the logo text to the left. To use a graphic logo, see the options section below on this page.
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 MOBILE DETECT - HEADER DETECT: | Click for 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.
THE HOMEPAGE FLASH IMAGE CHANGER: | Click for more details
The animation on the index.html is showing 8 .jpg images. You will find these images in the "flash" folder. You can replace "image1.jpg" through "image8.jpg" with any standard .jpg images and the flash will update. Make your image sizes 375 wide x 125 pixels high. If you want to use other image sizes you can edit the "imagechanger.js" and also the "imagechanger.fla" in the flash folder with Flash software.
INCLUDED MOBILE DETECT - HOME IMAGE CHANGER: | Click for more details
The homepage Flash image changer includes a browser detection script. A static image, "image1.jpg" in the "flash" folder will display in non-Flash browsers.
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.
EDIT CONTACT INFO: | Click for more details
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.
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.
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.
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.
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.
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.
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 "flash" folders and all files in these folders.
USING A GRAPHIC LOGO:
You can replace the Flash logo with a graphic logo: Delete or rename the "header.js", then rename the "graphic_logo_header.js" to "header.js". In the picts folder you will find a graphic called "logo.jpg". Edit this graphic with your logo. The "logo.jpg" is now 45 pixels high. You can make this image any size height you would like. It is best to keep this logo 750 pixels wide or less. The background color for the graphic logo header can be edited in the coolstyle.css.
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".
The index.html on this template has a background sound named "home-sound.mp3". You can replace this sound with another file named "home-sound.mp3", or by creating a .wav, .mid or .mp3 file and putting your newly created sound file in this website folder. Then, edit the index.html and change the code following the "START SOUND CODE, DELETE TO REMOVE" notes in the index.html. Replace "home-sound.mp3" in 2 places. To remove the homepage sound delete between the notes in the index.html.
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 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.
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 PAGE:
The "gallery.htm" gallery index page is linked from the index.html. It is best not to remove this link so search engines can find your gallery pages and properly list all your pages when users search at major search engines.
PAGE HEIGHTS & MARGINS:
So all your pages will maintain a standard page height, CSS code is included. Edit the "PAGE WHITESPACE" area in your "coolstyle.css" to adjust page heights, margins and widths. Also edit your "pageheight.js".
FOOTER W3C LOGO:
The image in the template footer is a W3C HTML validation logo. The unedited template pages are all W3C valid. If you want to display this logo you can use the W3C HTML Validator to check your pages after you edit them. You can also turn this logo off in the "footer.js" or edit the link in the "footer.js" and replace the "w3c.gif" in the picts folder with your own image.