ACCESS to ONLINE Setup Guide and VIDEO Tutorials

We've designed and easy to work with web template. Instructions on how to modify specific elements of the template as listed (in short form) on this page as well as a very detailed set of video instructions are included in the Setup Guide. The Quick Start Guide includes information to help you build your website from beginning to end, with text and  video instructions of two varieties! Each aspect of building your website includes a quick 'reference' video, if you just want to learn how to complete a task in under 3 minutes. And a Case Study video, where our design team teaches you some very detailed tips and tricks for modifying the look and feel of the template.

This package contains:

• your web site template in a self installing .exe file format
• Read_ME_First.pdf document (important information for reference)
• support_information.pdf (includes support info and product updates)
• Quick_Start_Guide.chm (your detailed help guide, with Instructor Led Video Tutorials)
• FAQs.pdf (a growing list of frequently asked questions)
• customization_services.pdf (information and pricing for customizing the color / theme for your template)

Just download, and click on the self installing file. Your files will initially be added to your desktop. You can move them to another folder at any point after installation.

We recommend that you 'save' a copy of the PDF files, and the Quick Start Guide to the "My Documents" folder for easy reference.

Image Licensing Information:

The royalty free images used in this template are provided as a part of a licensing agreement between (Getty Images / Jupiter Images / Bigstockphoto.com / or Hemera Studios ) and Lucky Marble Solutions Corp / i3dthemes. If you wish to purchase a larger version of the images for your own marketing use, please contact our design team for image 'stock' number. For detailed information on the image licensing please read the licensing.pdf document included in the download package.

We highly recommend:

• For the highest quality images and selection: Getty Images
• For the best value in royalty free images: Bigstockphoto.com

Source Files Included

This template was created using Macromedia Fireworks and Flash. Source files are provided in PNG format. Photoshop .psd files are not available for this template. You can download your source files from your members download page.

• Macromedia Fireworks .png files

• 1_background.png
• 2_index.png
• 3_template.png
• 4_elements.png
• 5_flash_header.png
• logo.png
• themed-image.png
  

• Macromedia Flash .fla files

• header.fla
• template_header.fla
• animations.fla
• flash-images.fla
• music.fla
• taglines.fla
• time-date.fla

Important NOTE for FrontPage 2000 / 2002 / 2003 users:

This template uses CSS-based layout which means that the page may not look exactly as it does when previewed or viewed in an actual web browser. Older versions of FrontPage use 'older' technologies in the design and preview modes and we recommend that you always 'preview' your web page in an actual web browser to see an actual representation of your web page.

This template uses TRANSPARENT PNG graphics for the logo, themed image, and icons. As with CSS, FrontPage does not 'render' the PNG graphics in the design window accurately. You would see a grey or white outline around these images. This only happens in the design window. When you preview the page in your browser, this effect will not be visible. We are using the most up to date coding practices, some of which FrontPage was not designed to take advantage of 4-6 years ago.

The 'menu' buttons or 'navigation' that many of our FrontPage users have grown accustom to, have been replaced with 'easier' to manage CSS Menu's. The CSS menu's do not rely upon FrontPage extensions, and will not have any issues if your web server looses it's FrontPage extensions. And they are far more search engine friendly.

By offering these advanced coding techniques, your website will be easier to update, fair much better in the search engines and be 'current' for years to come.

Template Details

Can you customize the template for me?

Yes, we offer a special customization service that includes modifying the template color, and images. Please refer to the customization_services.pdf file included with your download for up to date details.

Can I change the colors?

You can change the font colors by editing the stylesheet, or by modifying the text directly on the page.

To modify the 'background' graphics or art work (also known as the 'template interface') you would need to modify the source graphic files first using Macromedia Fireworks. Then export your newly colored images to the graphics folder in the template. Providing that only the colors have been modified, you should be able to export in as a single action. In some templates you would also need to modify the 'header.fla' and the 'template_header.fla' using a combination of colorized .png files and flash .fla files. We do provide video instruction in the Quick Start Guide for those wanting to learn how we build, and modify our templates. This type of modification is best suited for experienced graphic designers, and flashers or for folks wanting to learn some new skills. The template source files are designed to be easily modified, but this also depends on the level of experience of the person modifying them. Depending on the template, and the degree to which you would like to modify the color of the template will greatly influence the amount time and effort it will take.

Different Page Layouts

This template includes 9 pre-designed pages and 3 different 'template' page layouts you can use to create as many new pages as you need.

You can easily create a new page by opening one of the 'template' pages in the 'Templates' folder:

• with the template page open in the design window
• click on the file menu
• select Save as...
• give the page a new file name (page_name.htm)
• click Save, and that's it

Once you've created a new page based on a template page, we also recommend that you 'title' the page right away. You can title the page by right clicking on it, selecting page properties, then adding your title to the 'Title' area in the properties window.

Info boxes, and content areas

Many of our templates include 'graphical' information boxes usually located in the side menu area's, and content boxes used in the main body of the web page. You can create duplicates of the boxes, if you wish to have more than one information box, or content area on the page. These boxes use a combination of jpg images and CSS. You can copy an existing box, and paste below or above the original. Just place your cursor inside the box and look for a '<div> tag labeled  #wrapper_content or #wrapper_message_box. Copy the entire div, and paste to create a new information box.

Include pages for FrontPage / Library Pages for Dreamweaver

We've really made this template easy to update, as all pages that share 'common' elements such as the:

logo, themed image, icons, top links, vertical links, bottom links, site info copyright

can  be easily updated from one central location. The includes folder for FrontPage, or the Library folder for Dreamweaver. Your include pages are labeled. Just open the 'top links' page for example, make your changes and save. All pages will be updated automatically. No need to go through each page and copy and paste.

Website Name graphic

We've include a generic "Website name" transparent PNG graphic that we will modify FREE of Charge.

We've also included detailed instructions in the Quick Start Guide that demonstrate how you can:

• order your free text logo
• replace this graphic with your own logo graphic
• replace this graphic with text
• modify this graphic using Macromedia Fireworks (download link for 30 free trial version included)

You can easily modify the 'website name' graphic by simply opening the includes / Library folder, then open the 'logo' page. Replace the generic graphic on this page with your own graphic, or text and your web pages will be updated. Detailed info check out the Quick Start Guide.

Contact form for servers with FrontPage Extensions, or PHP (version 4+)

We've included a contact page for use with FrontPage enabled servers for FrontPage 2000 / 2002 / 2003 / Expression Web Designers.

For web servers that do not included FrontPage extensions, we've included a PHP 'form handler'. All you need is PHP to be enabled on your hosting account, and you can publish your web via FTP with a working form page. Just edit the information in the 'process_form.php' page, instructions located at the top of this page.

General Instructions:

With exception to the 'make a new web' instructions, the remaining instructions in the list are very basic and brief. For detailed instructions please refer to the Video Tutorials included in the Quick Start Guide.

• make a new web
• replace the 'Website Name' graphic
• add  remove or rename pages
• edit the icons (remove, rename and change links)
• edit the top links (add, remove, rename and change links)
• edit the vertical menu buttons (add, remove, rename and change links)
• edit the bottom links (add, remove, rename and change links)
• edit the site info and copyright (add, remove, rename and change links)
• edit the 'flash text messages'
• replace the 'flash images'
• replace the 'themed image'
• change the 'music'

make a new web...

• download your package
• double click to install
• your web template will be added to your desktop
• start your favorite editor

FrontPage / Expression INSTRUCTIONS:

• start FrontPage / Expression Web Designer
• click on the File menu...
• click on Open Site/Open Web...
• browse to your installation folder
• select and open the *TemplateName_web* folder
• once you see the system folders:

_private
flash
images
Template...

• click Open 

Dreamweaver INSTRUCTIONS:

start Dreamweaver

• click on the Site menu (top row of buttons)
• click on "Manage Sites" menu
• click on the "New..." button
• select "Site"
• switch to the Advanced Tab

Define a site name:

• in the Site Name, enter a name for your web

Locate your installed web template

• click on the folder icon next to the 'Local root folder' text field
• browse to c:/luckymarble/websites/ (click here to open folder)
• click on the Select button

You're now have access to your website to start the building process

replace the 'Website Name' graphic

• open the 'Templates' or 'Templates_webname' folder
• open the 'logo' page

To replace the 'Website Name' graphic with text

• delete the logo graphic
• type your text into the page
• save and preview

The 'text' is formatted through the 'stylesheet.css' file in the styles folder. For instructions on how to modify the 'font properties' please review the Quick Start Guides 'case study' video (Section C / Part D / Chapter 3)

To replace the 'Website Name' graphic with your own graphic

• delete the graphic from the page
• drag your own graphic image onto the page
• save and preview

For best results:

• use a transparent PNG or
• use a square or rectangular JPG image

Gif images may produce a jagged edge when placed over the page background. Results will vary.

For users wanting to create your own logo, you can use Macromedia Fireworks MX 2004 or 8 to modify the 'Website Name' graphic. This graphic is saved as an editable unflattened PNG. You can easily change the font, style, properties and effects using Fireworks. Save and update your site in one action.

To modify the 'Website Name' graphic using Macromedia Fireworks:

• right click on the 'Website Name' graphic
• select Open With...
• select Fireworks MX 2004 or 8 from the list
• Fireworks will open the editable PNG graphic
• make your changes, click on the File menu and select SAVE
• preview a web page in your browser

add  remove or rename pages

• open the Templates or ‘Templates_webname’ folder
• open one of the following blank template page layouts by double clicking on the page in the folder list:

• compact.htm
• fullscreen.htm
• index.htm
• with the template open in the design window
• click on the File menu...
• click on Save As...
• give the page a new name (ex: page_name.htm)

bad example: Fruits & Veggies 4 $$$.htm

good example same page: fruits_and_vegatables_for_sale.htm

Tip, search engines will have an easier time listing your pages if the page file name is relevant to the topic of the page, and in 'legible' format. 

• click on the "Change Title" button to give the new page a title, or change this in the page properties
• click on Save

Removing a page: INSTRUCTIONS:

• locate the page you wish to remove in the folder list
• right click and select delete from the command menu
• remember to remove this page from any navigation elements

• top links
• icons
• vertical menu
• bottom links

Renaming a page: INSTRUCTIONS:

• select the page in the folder list
• right click and select 'Rename'
• type a new name, and remember to include the file extension of .htm
• open the renamed page
• switch to code view, (or right click and select page properties)
• change the title:

   <Title> Page Title goes here </Title> to match the new page name

• change the keywords and description if required
• update any navigation buttons that link to this page

bad example: Fruits & Veggies 4 $$$.htm

good example same page: fruits_and_vegatables_for_sale.htm

Tip, search engines will have an easier time listing your pages if the page file name is relevant to the topic of the page, and in 'legible' format. 

edit the icons (remove, rename and change links)

• open the includes / Library folder
• open the icons page
• edit the text links as you would edit a regular text hyperlink
• save to update

edit the top links (add, remove, rename and change links)

• open the includes / Library folder
• open the top_links page
• edit the text links as you would edit a regular text hyperlink
• save to update

edit the vertical menu buttons (add, remove, rename and change links)

• open the includes / Library folder
• open the 'vertical_menu' page

change the name on the button

• double click on the text on the button to activate text edit mode
• type in the new name for the button

change the hyperlink on a button

• right click on a text on the button
  
• select Hyperlink Properties
• (FrontPage): browse to the page you will be linking to and click to select this page as the new hyperlink
• (Dreamweaver): use the hyperlink tool in the Properties window, drag the page locator onto the page you want to set the hyperlink too
• (both): or - type the name of the page into the 'Address' text field
• click OK once a new page has been selected

add a new button

• place your cursor at the end of an existing line of button text
• press enter on your keyboard to create a new 'blank' space
• in the blank space type a name for your new button
• select the text for the new button (all text)
• right click, selecting HYPERLINK properties
• (FrontPage): browse to the page you will be linking to and click to select this page as the new hyperlink
• (Dreamweaver): use the hyperlink tool in the Properties window, drag the page locator onto the page you want to set the hyperlink too
• (both): or - type the name of the page into the 'Address' text field
• click OK

remove a button

• select the button name with your cursor
• press backspace on your keyboard TWICE

edit the bottom links (add, remove, rename and change links)

• open the includes / Library folder
• open the bottom_links page
• edit the text links as you would edit a regular text hyperlink
• save to update

edit the site info and copyright (add, remove, rename and change links)

• open the includes / Library folder
• open the site_info page
• edit the text as you would edit a regular text
• save to update
• preview in browser
• if you add additional lines of text to the site info page, this may 'skew' the bottom of the web page. preview in browser to find out if the text your added to the site info include or Library page has altered the bottom of the web pa

edit the 'flash text messages'

• open the flash folder
• open the taglines folder
• open the taglines.txt file
• edit the text between the " = " and the " & "
• DO NOT DELETE the equal sign ( = ) or the ampersand ( & )
• characters are limited so test it out in an actual web browser when complete

replace the 'flash images'

• open the flash folder
• open the flash-images folder
• you'll see 4 images named:

• flash-image1.jpg
• flash-image2.jpg
• flash-image3.jpg
• flash-image4.jpg
  
• replace these images with new images using the exact same file name (all lower case including the .jpg extension)
• use NON Progressive .jpg images (these settings are located in your graphic editors export settings
• use images of the same size if possible, or larger
• to determine the size (dimensions) of the replacement images:

• create a new blank page
• drag flash-image1.jpg onto the page
• double click on the image to activate the properties window
• look for the 'width' and 'height' properties of this image
• create your replacements using the same dimensions
• save your replacement images to the flash / flash-images folder to over write the existing pics

replace the 'themed image'

• create a new 24bit Transparent PNG image in your favorite graphic editor, or download an image from an online resoucre
• scale the image to approximately the save height and width as the image included in the template
• save the replacement image as 'themed-image.png'
• open the flash folder
• open the 'themed-image' folder
• drag or import your new 'themed -image.png' file into this folder to replace the exiting file
• exact sizing does not matter, your image will be rendered at the size you created it at
• all pages including template pages will be updated

to remove the themed image from the 'Template' pages

• first, open the includes / Library folder
• open the 'themed_image' page
• delete the 'themed-image.png' from the page
• save

to remove the themed image from the 'Index' page

• open the flash folder
• delete the 'themed-image.png' from the page

change the 'music'

• find a replacement MP3 file
• rename the file as: music1.mp3
• open the flash folder
• open the music folder
• drag or import this new music1.mp3 file into the flash/music folder to over write the existing file