Created: 1/15/2010
By: Ashish Bogawat

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

  1. HTML Structure
  2. CSS Files and Structure
  3. JavaScript
  4. PHP
  5. PSD Files
  6. Sources and Credits

A) HTML Structure - top

This theme is a single page personal site best suited for independent designers, developers and photographers who want to establish their presence on the web and showcase their work. The template is divided in three main areas (DIVs) - header, content and footer. The header DIV contains the navigation elements and the content DIV side contains all content pages in separate DIVs. I'm using jQuery for the fading effect when navigating across sections. Here's the broad HTML document structure.


Content for each of the four section is contained within DIVs with the class page. Each section has a left & a right section. The left side contains the author's photo, featured site, twitter update and contact form in their respective sections. The remaining content is on the right side.

Here's a look at how the "关于 me" section is structured. I've followed similar logic for the rest, so you should be able to follow along fine.


B) CSS Files and Structure - top

All styles for the content are in the styles/2143/style.css file. The CSS is structured like this:

	/* --- RESET --- */

	An adaptation of Eric Meyer's CSS reset for cross-browser consistency

	/* --- GLOBAL TYPOGRAPHY --- */
	All primary text styling
	/* --- STRUCTURE --- */
	Document structure, layout and positioning
	/* --- NAVIGATION --- */
	Styling for the navigation menu
	/* --- CONTENT - XYZ --- */
	Styling specific to each of the four content sections

For IE7 and IE8 compatibility, I've included a separate CSS file - styles/2143/ie.css - using conditional linking in the index.html. There is also the ligstyles/2143/htbox.css file which contains style definitions for the jQuery lightbox.

Please note that the template is not compatible with IE6.

C) JavaScript - top

This template imports four Javascript files:

  1. jQuery: Used for the rollover and content sliding effects, as well as to be able to call specific selectors for Cufon font replacement.
  2. jQuery Lightbox: For opening images in the work/portfolio section in modal boxes.
  3. Cufon: The Cufon font replacement library.
  4. Desyrel: The font used to replace headings and link text using Cufon.

It also uses custom jquery definitions for:

D) PHP - top

This template imports two PHP files for the contact form function:

  1. contactengine.php: Contains the actual code that sends the message to your inbox.
  2. contactthanks.php: The page that appears after the form has been sent.

To customize the form to your specific requirements, change the e-mail IDs in lines 3 and 4 in the contactengine.php file. Note that this is a critical step and the contact form will not work unless you enter the correct e-mail ID(s).

E) PSD Files - top

Included with the template is cardex.psd, wihch is the base PSD file which contains all the content layouts and site elements.

To create more color variations, just change the hue-saturation settings for the bg layer and change the colors for site title and links accordingly.

F) Sources and Credits - top

The template uses icons from the following two sets as well as some custom created icons. The icons that I created are available as smart objects in the PSD file. You will need Adobe Illustrator to edit them. The icons picked from other sets are licensed for use in commercial templates and have been attributed in the template footer.

I've used two custom fonts:

I've also used a free texture for the background from DeviantArt. As the link on the page suggests, the textures are free for any kind of use without attribution.

Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. 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.

Ashish Bogawat

Go To Table of Contents