“Profolio vCard” Documentation by “Oussama Afellad” v1.0


“Profolio vCard”

Created: 24/05/2011
By: Oussama Afellad (DeluxDesigns)
iStoreDesigns - PremiumFreebies
Email: istoredesigns@live.com

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 or my freebies blog here. Thanks so much!


Table of Contents

  1. HTML Structure
  2. CSS Files and Structure
  3. JavaScript
  4. PSD Files
  5. Sources and Credits
  6. PHP Code Explanation (If your theme uses PHP)

A) HTML Structure - top

This theme supports two columns. All the content of the theme is in the index.html file.
There are many comments to indicate the different sections in the theme.

The theme also supports the use of the back/forward buttons of your browser and let you set the page title for every menu item.
Here is the general structure.

HTML Structure

There are 5 premade menu's, if you want to create your own menu item just add a li to the menu and create the corresponding content.
If you want to create a page 'About' than add following code:

About menu

Continue by adding corresponding content to the #scroller div.
The 'contentitem' div must have a ID so that the javascript file can link that menuitem to that page, you have to use the prefix 'menu_' and than the page name.
In this case: menu_about

About content

The div 'pagetitle' in the contentitem is not shown but is used to set the pagetitle of the document.
Every menuitem in this theme must have his own pagetitle.

If you don't want a sidebar on that page; delete the div main and sidebar and put the content directly after the pagetitle div.

Customize the logo / title

Upload a transparent png version of your logo / title to the images folder (images/vcard/logo.png)
However I've included a PSD file of the logo, where you can just edit it and save it.




B) CSS Files and Structure - top

I'm using three CSS files in this theme. The first one is a generic reset file. Many browser interpret the default behavior of html elements differently. By using a general reset CSS file, we can work round this. Keep in mind, that these values might be overridden somewhere else in the file.

The second file contains all of the specific stylings for prettyphoto.

The third file contains all of the specific stylings for the page. The file is separated into sections using:

/* General Styles
-------------------------------------------*/

some code

/* Items
-------------------------------------------*/
	
some code
	
/* Header
-------------------------------------------*/
	
some code

/* Skills (skills page)
-------------------------------------------*/
	
etc, etc. 

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.

note: In the css file there are some CSS3 styles, so the website can be displayed slightly different on
browsers that doesn't support the new CSS3 functions.


C) JavaScript - top

This theme imports four Javascript files.

  1. jQuery
  2. vCard
  3. Cufon
  4. Cufon.font
  5. Custom
  6. Cycle
  7. jquery.min
  8. jquery.prettyPhoto
  1. jQuery is a Javascript library that greatly reduces the amount of code that you must write.
  2. Most of the animation in this site is carried out from the customs scripts.
    I've added many comments to the javascript file to indicate what the functions do.
    
    			
  3. I've implemented 'Cufon' in this theme to replace some fonts.
    To find out more about cufon follow this link

D) PSD Files - top

I've included the psd-file of the logo so you can customize it the way you want.
I've used the 'LubalinGraph LT' font so if you don't have this font installed text will look a slightly different.


E) Sources and Credits - top

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


F) PHP Code Explanation - top

There is one PHP file in this theme 'sendmail.php'
This file receives the data from the javascript file and sends out an email to you.
Open the file and configure the settings to your needs.

Mail

If you want to, you can also change the subject.
[NAME] will be replaced by the users name.


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.

Oussama Afellad

Go To Table of Contents