Portfolio Template #27 Copyright 2008 Winklet Web Design (c) All rights reserved. Created 10/04/2008 Flash Website Templates by WINKLET WEB DESIGN http://www.winkletwebdesign.com FOR HELP USING THIS TEMPLATE,GETTING A WEBSITE ONLINE OR WITH HTML, PLEASE VISIT: http://www.winkletwebdesign.com/help.asp INSTRUCTIONS: Included with these instructions are files which are needed for your Flash Portfolio site to run: ** Important note for your site to run: the email address specified as the recipient under contact form settings on the portfolio027.txt file should be the same as the one associated with your Paypal account when purchasing this template. If you wish to use a different email address than that which is on your Paypal account, contact us at winklet@winkletwebdesign.com and we will send you an updated file to unlock the site. When contacting us, please be sure to include your Paypal order receipt number or transaction ID. portfolio027.swf and contents.swf - these are the compiled Flash files needed for the site to run. These are not to be edited but must remain in the same location with the other template files. index.html, splashlogo.jpg, flashlogo.jpg - these are the splash page files. index2.html - the HTML page with the code that embeds the flash file on the page. music.mp3 - the music that plays on the site. This is a sample mp3 file which you can replace with an mp3 file of your choice. embed.js - This file is needed so that the Flash site will load properly on the page. You don't need to do anything with this file except keep it in the same folder as your other template files and make sure to upload it to your site along with the other template files. portfolio027.txt - the text file which you will be editing according to the instructions, which will update the content on your flash file. photogallery.txt - the text file which you will be editing to update your photgallery info. default jpg images (basically just placeholders for your reference) which you can replace with your own images. email.php and email.asp - one of these scripts will be used to allow the signup form to function. In order for everything to work properly, you must keep these files in the same directory or folder, on your local machine or on your website. The following are instructions on editing your website content, your photogallery content and formatting your text. ------------------------------------------------------------------------ TO EDIT YOUR WEBSITE CONTENT (all pages except for the Photogallery section): The file you will be mostly working with is the "portfolio027.txt" file. You can open and edit this file in any text editor. To make it easier to edit the text, make sure the Word Wrap option is on. There are several sections to the text file, each controlling a different part of your website. 1. Your company name 2. Company slogan 3. Color settings 4. Button names and titles for subsequent pages 5. Content for each page 6. Contact form settings. Each section variable begins with "&", for example: &companyname= It is after the "=" where you would type your company name which will appear on the site. Default information has been entered for each section which you are to replace with your own information. For example, if your company name is Winklet Web Design, the first part of your text file would look like this: &companyname=Winklet Web Design Which could be followed by: &slogan=Cutting Edge Flash Templates Follow the same format for each section. &music is the variable where you specify whether or not to display the music icon and load the mp3 music. Default is set to "on" to load the music. For no music to load and the sound icon to be invisible, change this to anything but "on". &homeimgs is the variable for the number of images you want to cycle on the home page. Default is 4, but you can change this to however many you want. &footer is the text that appears at the bottom of each page. You can use html in the footer. &page1button - &page7button are the variables for each button AS WELL AS the title that will appear on each page. Default titles have been entered, which you may replace with your own desired page titles. Each of these button/title variables is followed by the corresponding text variable (i.e., &page1text). See the Special Text Formatting instructions for further information on properly formatting this text. You do not have to use all 7 buttons/pages. If you only want to use 6 pages, leave the last title variable blank. You will have to delete the text between the variable and the "&" so that it looks like this: &page7button=& You may then do the same with the 6th pagebutton variable if you only want 5 pages, and so on. If you want any of the pages to link to an external site, such as a blog, or an external page, you can add the following variable after the desired page button variable: &page[x]link=http://www.blogsite.com& [x] is the page number, and you can edit the url so that it links to the desired website. You will see on the text file that this has been done as an example for page 6. You can do this for any desired page(s). If you do not want any page to link to an external page, just delete the pagelink variable and enter the text after the pagetext variable for the page. Do not modify the very last variable and value: &textloaded=OK& This is needed so Flash can detect when all the text for the site is loaded. As you work with the text file, view the site as you go. You can view the site by opening the index.html file in your web browser. As soon as you save the text file with your updated text, you'll see the changes immediately on the Flash site when you refresh your browser. ------------------------------------------------------------------------ TO ADD MUSIC You can add an mp3 of your choice to the site and can update this as often as desired. To add the music, take an mp3 of your choice, rename it to "music.mp3" and save in the same folder as your other template files. For best results, the mp3 file should be either 44100 Hz or 22500 Hz. Also make sure you have turned on the music setting on the portfolio027.txt file so that it reads: &music=on& Please note, the music playing on the sample of this template on our site was purchased for the sample templates only from www.opuzz.com. You can buy it here: http://www.opuzz.com/displayproduct2.asp?id=2435&pn=&cat=PopMusic ---------------------------------------- COLOR SETTINGS You can change the color of certain elements of the site. They are as follows: &namecolor is the variable for the color of the company name. &slogancolor is the variable for the color of the slogan. &bgcolor is the variable for the background color that appears at the top and bottom, behind the main menu items, company name, etc. and behind the footer at the bottom. &bgmiddlecolor is the variable for the background color that appears in the middle (currently white) behind the images and page text. &soundcolor is the variable for the color of the sound icon in the bottom left corner. &buttoncolor is the variable for the color of the menu items or buttons across the top of each page. &button_overcolor is the variable for the mouseover color of the above buttons. &loadtext color is the variable for the color of the "loading" text that appears when images are loading. &scrollbarcolor is the variable for the color of the scrollbar used with the main text areas. &formtextcolor is the variable for the color of the text that appears before each form field (for example, Name, Email, etc.). &thumbcolor is the variable for the color of the border of each thumbnail image. &thumb_overcolor is the variable for the mouseover border color of each thumbnail image. &galcatcolor is the variable for the color of the gallery category titles that appear on the left side of the page in the galleries section. &galcat_overcolor is the variable for the mouseover color of the gallery category titles. The above variables are followed by "0x" and a 6 character color code. This is the hexidecimal code for the color. If you are familiar with HTML, you will know that these hexidecimal codes are normally preceded by the # symbol, however for the template, you will not include this symbol. You will need to keep the "0x" for each, and follow it by the 6 character hexidecimal code for the desired color, for example: &namecolor=0xFF0000& This is specifying the color red for the company name. BACKGROUND IMAGE AND COLORS: The background image included is named "bg.jpg". If you do not wish to use this background image, you can remove it completely, or replace it with another background image of your choice. To change the background color, do the following: Open and edit the index.html file using any text or html editor. Change the bgcolor value in the tag to the desired color. A hexidecimal color code picker has been added to our site for your reference at: http://www.winkletwebdesign.com/hex.asp ---------------------------------------------- CONTACT FORM SETTINGS Also on the portfolio027.txt file are settings for the contact form, as described below: &contactform - allows you to specify which page the contact form appears on. You can enter anything from 3-7 here to place it on any page between page 3 and page 7. Do not specify page 1 or 2, those are reserved for the home page and gallery. Default is set to page 7. &formtext - allows you to change the text that appears above the form fields. &formthanks - allows you to change the thank you message that appears after a user submits the form. &recipient - the email address to which the form data will be sent when a user submits the form. &subject - the subject line of the email that is received with the form data. &scriptlocation - the name of the script used to send the form, either email.asp or email.php. You would need to upload email.asp or email.php to your webserver and specify which one is being used here. To determine which one to use, you would need to find out from your webhosting service whether php or asp is supported. Php is most common. TROUBLESHOOTING THE CONTACT FORM: Once all your site files have been uploaded to your website, you should test the contact form to make sure it works. If it doesn't, please try the following, depending on who your webhosting company is: ................. **** If you have webhosting with Godaddy.com or with Winklet Webhosting, try the following: **** Log into your account that you set up when purchasing the hosting. Go to Manage Hosting and open your control panel. There should be somewhere to install their formmail script and to enter your email address to receive mail from form submittals. Once this is completed, do the following: Change the &scriptlocation variable on portfolio0xx.txt so that it reads: &scriptlocation=gdform.asp& OR if your hosting plan supports PHP instead of ASP, change it to: &scriptlocation=gdform.php& (This is using the webhost-provided script instead of the one we sent you.) Then save, and upload the modified portfolio0xx.txt file and then try the contact form again. ................. **** If you have webhosting with Yahoo, try the following: **** Open the email.php file in a text editor (same one you use to edit the site text). Find the following line of code: $whofrom=$_POST["Email"]; Change it to: $whofrom="webmaster@yourdomain.com"; and make sure to change yourdomain.com to your actual domain name. ................ Otherwise, if your site is hosted elsewhere, please let us know the following and we will try to help: 1. Who your webhosting company is 2. What hosting package you have, and whether it supports PHP or ASP 3. Where we can view your site ---------------------------------------------- UPDATING THE IMAGES WHICH APPEAR ON EACH NON-GALLERY PAGE To replace these images with your own, or update images that you already have on the site, you must take your desired image and save it as a .JPG (Jpeg) file with the same name as the image you want to replace. All images must be JPG format and must NOT be saved as a Progressive JPG. (In your photo editing software, there will most probably be an option to save as a progressive JPG, and you must make sure this option is not selected). The images must be named as follows: Logo: logo.jpg Logo image can be whatever width that will fit across the bottom area, and a max height of 75 pixels. If you do not wish to use a logo, you can remove the logo.jpg file. HOME PAGE: The cycling images on the home page are to be named home1.jpg, home2.jpg, home3.jpg, etc. These must be sized to 940 px wide and 500 px high. OTHER NON GALLERY PAGES: Page 3-7: page3.jpg - page7.jpg Page 3-7 images can be a max width of 475 pixels and a max height of 500 pixels. The images can be different proportions than noted above, as long as they do not exceed the max width or height specified. ------------------------------------------------------------------------ TO EDIT YOUR PHOTOGALLERY CONTENT: Editing the photo gallery information: The file you will be mostly working with is the "photogallery.txt" file. You can open and edit this file in any text editor. To make it easier to edit the text, make sure the Word Wrap option is on. There are several sections to this text file, each controlling a different part of your photogallery. 1. Gallery category titles 2. Number of images in each gallery Editing these sections works exactly the same as the website content explained above. &gal[x]title is the variable for the title of each gallery where [x] is the gallery number. &gal[x]imgs is the variable for the number of images in each gallery. You can have as many images as you want in each gallery, there is no limit. You must enter a number here. Even if you are displaying no images for whatever reason, you must enter 0. Info for 5 galleries has been entered as an example. You may change this information and can continue adding the info for more galleries as needed. You can add as many gallery categories as desired. If you wish to add subcategories to a gallery category, the following variables must be added for each subcategory (where [y] is the subcategory number): &gal[x]_subcat[y]title - title of subcategory &gal[x]_subcat[y]imgs - number of images in subcategory Some example subcategories have been added in the second gallery category. You can add as many subcategories as desired. Do not modify the very last variable and value: &textloaded1=OK& This is needed so Flash can detect when all the text is loaded. ------------------------------------------------------------------------ TO EDIT YOUR PHOTOGALLERY IMAGES: Some default images have been included as a reference which you will replace with your own. To replace the default images with your own, or update images that you already have on the site, you must take your desired image and save it as a .JPG (Jpeg) file with the same name as the image you want to replace. Follow this naming format for images and thumbnails: gal[x]_img[n].jpg (large images) gal[x]_img[n]_th.jpg (thumbnails) where [x] is the gallery number and [n] is the image number in each gallery. Subcategory images must be named as follows (where [y] is the subcategory number): gal[x]_subcat[y]_img[n].jpg (large images) gal[x]_subcat[y]_img[n]_th.jpg (thumbnails) There are some guidelines you MUST follow when saving your own images for your site: 1. All images must be JPG format and must NOT be saved as a Progressive JPG. (In your photo editing software, there will most probably be an option to save as a progressive JPG, and you must make sure this option is not selected). 2. Your large gallery images should not exceed 800 pixels in width and 500 pixels in height. They do not have to be these exact dimensions, and CAN be smaller than this, but not larger. 3. Thumbnail images should be sized to 50 pixels X 50 pixels. Some sample images have been included as an example. You can replace these with your own images and then continue adding more to each gallery as needed, making sure you save and name them according to the above instructions. --------------------------------------------------------------------------------- FORMATTING THE TEXT There are a few special instructions you must follow to format line breaks and display certain characters. * To skip to the next line, instead of pressing the "Enter" key to move down, place the following html tag to indicate a single line break:
* For example, two lines of text would be formatted like this: This is the first line of text.
This is the second line of text. And they would appear on your site like this: This is the first line of text. This is the second line of text. * If you wish to skip 2 lines (as in making two separate paragraphs), you may either press the "Enter" key to go to the next line (this will actually make it appear on the site that 2 lines have been skipped), or you may enter two
tags. * The ampersand ("&") will not work if typed into your text because it is a reserved character and is used to separate each variable. Do not type a "&" for any of your text, including page titles, slogan and company name. To make the "&" appear properly, type %26 instead – this is the URL encoded value for this character. Your text file may look funny with a %26 on it, but your web page will display it as the ampersand. * The same as above applies to the plus sign ("+"). Instead of typing the plus sign, you must type %2b instead. * FYI, the URL encoded value for a single line break is %0d which can also be used instead of the html tag
. For a full list of URL encoded values, visit this page: http://www.i-technica.com/whitestuff/urlencodechart.html If you are familiar with HTML, you may use some HTML in the body of your text for the page content. You can use the following formatting in HTML: 1. Bold 2. Underline 3. Italics 4. Font Color 5. Font Face 6. Bullet lists 7. Hyperlinks 8. Paragraphs Any HTML that includes attributes, such as font color, must have double quotes around the attribute, for example: You will NOT be able to add images or tables using HTML. To change the title "Welcome to my Website" that appears in the browser title bar when viewing your site, you can open and edit the index.html file using any text or html editor. Then, change the text that appears between the tag. For some basic HTML tips and examples, please visit http://www.winkletwebdesign.com/help.asp and click on "Some Basic HTML". If you run into problems, please visit our Help section at http://www.winkletwebdesign.com/help.asp. Email help@winkletwebdesign.com if you require further assistance that is not available on our site.