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!
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.
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.
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:
To add a new slide, simply copy and paste the img tag and link to your new image.
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:
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.
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.
This theme makes use of several different jQuery powered javascript components including:
$(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
We've included seven different psds with this theme:
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.
We've used the following images, icons or other files as listed.
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