“Fantasia” by “Innuma Themes” v1.0


Fantasia - HTML Business, Portfolio, Ecommerce Theme

Created: March 30, 2010
By: Innuma Themes
Visit Us: Themeforest User Page

Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, please feel free to email us via our user page contact form here. Thanks so much!


Table of Contents

  1. HTML Structure
    1. Featured Image Slider
    2. Homepage Background Slider
    3. Gallery/Portfolio Structure
  2. CSS Files and Structure
  3. JavaScript
  4. PSD Files
  5. Sources and Credits
  6. PHP Contact Form (Requires PHP Capable Server)

A) HTML Structure - top

This theme comes with 2 homepages, and 6 different subpage variations. We'll breakdown each page to show exactly where to edit the content, and get you on your way to integrating your content into this beautiful website.

The homepage (index.html) is a fixed width centered page that features a jQuery powered large image rotator. Other features include a navigation menu with dropdown capability, a jQuery powered accordion to feature services and products, a section for the latest blog or news items, and a featured image which is linkable to other pages.

The second homepage (index2.html) is a fixed width centered page that features a jQuery powered centered featured image rotator. It uses a body class of .featured_image to organize and align the other divs to fit with the slideshow on the page. Other features include a navigation menu with dropdown capability, a jQuery powered accordion to feature services and products, a section for the latest blog or news items, and a featured image which is linkable to other pages.

The gallery page (gallery.html) is also a width centered page. This page features a jQuery powered layout switcher to change from a thumbnail version to full posts.

The products page (products.html) is also a width centered page. This page features a jQuery powered lightweight shopping cart solution. See more details below in the Javascript section.

The blog page (blog.html) is also a width centered page. This page includes a featured post section, post templates with meta data, and a simple sidebar.

The services page (services.html) is also a width centered page. This page includes a customized subpage header complete with a quote request button, call to action section, and pricing information. Its content section contains columns to describe and list services.

The about us page (about_us.html) is also a width centered page. This page includes a contact button, a testimonials box, a location box with social media icons, as well as a box for mapping your location.

The inner pages all have generally the same structure, however, they each come ready to customize with different types of content.

Inner Page Content

The Inner Page content is easy to edit. Some pages may include more extensive structure through added divs, but you may simply find the div with an id of #content_wrapper and add/edit any content within that div.

Subpage Content

Featured Image Slider

The featured image slider uses the jQuery cycle plugin to cycle through images within the #slideshow div. One thing to keep in mind is that images can be as wide as you'd like them to be, but they should only have a height of 332px so that they will fit properly.

Lets take a look at the code for the slideshow:

Slideshow

Adding Slides

To add a new slide, simply copy and paste the img tag and link to your new image.

Homepage Background Slider

The background slideshow allows multiple image items to be cycled in and out on the background of the homepage (index.html only). It also cycles lines of text to go with each image as well. The images are located in the div with an id of #supersized. The text is located in the div with an id of #slides. The javascript code initiates the slider can be found below in the javascript section. Here is a quick look at the code:

Content Slider

Portfolio/Gallery Structure

The Gallery/Portfolio section of Fantasia is quite powerful. It allows the layout to easily switch from standard view to thumb view with the click of a button. This is all powered with inline jQuery which can be found in the header section of the the gallery.html page. The code to take note of here is that everything must be wrapped in an li tag.

Content Slider


B) CSS Files and Structure - top

We use a single primary structured CSS file, along with 3 smaller supporting stylesheets in this theme as well.

Here is a general overview of the style.css file that contains all of the specific stylings for each page. The file is separated into sections using:

	/* === Header === */

	All header styles are located in this section.

	/* === Content === */
	
	All content styles are located in this section.
	
	/* === Subpage Content === */
	
	All subpage content are located in this section.
	
	/* === Gallery === */
	
	All gallery styles are located in this section.
	
	/* === Product Styles === */
	
	All product styles are located in this section.
	
	/* === Blog === */
	
	All blog styles are located in this section.
	
	/* === Services === */
	
	All services styles are located in this section.
	
	/* === About Us & Contact Us === */
	
	All about us and contact styles are located in this section.
	
	/* === Footer === */
	
	All footer styles are located in this section.

The three supporting stylesheets are the reset.css, nav-menu.css, and colorbox.css. These are fairly self explanatory and straight forward.

If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.


C) JavaScript - top

This theme makes use of several different jQuery powered javascript components including:

  1. jQuery Cycle
  2. jQuery ColorBox
  3. jQuery Tools
  4. jQuery DropShadow
  5. Superfish DropDown Menu
  6. SimpleCart js
  7. Custom jQuery
  1. jQuery is a Javascript library that greatly reduces the amount of code that you must write. It was implemented in this theme to rotate images, content, and interact with images. Most of the animation in this site is carried out using the jQuery cycle plugin. The plugin file itself is extendible, so you won't need to manually edit anything in the main source file. The only necessary thing to know is how to activate the plugin and make it ready for use. This is all done in with inline javascript and in the fantasia.js file.

    For example this piece of javascript initiates the featured image slider and includes options as well:
    $(document).ready(function() {
        $('#supersize').cycle({
    		fx: 'fade',
    		next: '.next',
    		prev: '.prev'
    	});
    	$('#slides').cycle({
    		fx: 'fade',
    		next: '.next',
    		prev: '.prev'
    	});
    	$('.pause').click(function() {
     		if( this.className.indexOf('resume')==-1) 
    		{
    			$(this).addClass("resume");
    			$('#supersize').cycle('pause');
    			$('#slides').cycle('pause');
    		}
    		else
    		{
    			$(this).removeClass("resume");
    			$("#supersize").cycle('resume',true);
    			$('#slides').cycle('resume', true);
    		}
    		return false;
    		});
    	});
    	
    For more information regarding the cycle plugin and its options please refer to the jQuery Cycle Homepage - Visit Site
  2. The Colorbox plugin for jQuery provides a very high quality lightbox solution for your images in this template. Simply add the class .colorbox to a link attribute to enlarge images inside the lightbox window. For videos such as those found on youtube simply add the class .youtube to the link attribute, and the video will then be active in a lightbox window as well. For more information regarding lightbox you can check it out here.
  3. The jQuery tools plugin has been used to run the accordion on the homepage. It can be located in the div with an id of #accordion on the homepage. The jQuery that initiates this function is found in the fantasia.js file.
  4. jQuery dropshadow was used briefly to apply a shadow to the footer text. This shadow function is initiated in the fantasia.js file.
  5. SimpleCartjs is a jQuery powered shopping cart provides a simple e-commerce solution that is linkable to paypal and other major payment systems. It runs simply off of javascript and html, which means it does not require a database. For more information about the script behind the shopping cart system visit SimpleCartjs.com
  6. The jQuery superfish menu plugin has been used in the main navigation menu. This function is called in the fantasia.js file and uses the nav-menu.css for styling.
  7. We have also implemented a few custom snippets of our own. Most of these can be left untouched as they simply enhance the user interaction experience.

D) PSD Files - top

We've included seven different psds with this theme:

  1. The Homepage Layout
  2. Gallery
  3. Products
  4. Services
  5. About Us
  6. Blog
  7. Contact

If you'd like to change essentially any of portion of the website that involves something other than the code, simply open the psds folder and find the psd associated with what your looking to modify.


E) Sources and Credits - top

We've used the following images, icons or other files as listed.


F) PHP Contact Form

The contact form needs just 2 modifications before it is ready to go.
#1. Open the contact.php and scroll down to the comment that says “add email address.” Replace the code that says “your email address” with the email address that youʼd like the contact form to be sent to.

#2. Scroll down to the comment in contact.php that says “Redirect Link” and replace the web address below that with the page that youʼd like your users to see after they submit the form.


Once again, thank you so much for purchasing this theme. As we said at the beginning, Innuma is glad to help you if you have any questions relating to this theme. Obviously there are no guarantees, but we'll do our absolute best to assist you. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

Also as you may have noticed we are currently in the experimental phase of development here at Innuma. This means that we encourage in depth feedback on our themes, and would love to hear about new ideas or suggestions that you would like to see in our future work.

Best Regards

Innuma Themes - Follow Us
http://innuma.com

Go To Table of Contents