Vision Documentation by UniSphere v1.1


Vision

MafiaShare.net

Updated: 13/04/2010
By: UniSphere
Email: unispheredesign@gmail.com

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!


Table of Contents

  1. General Features
  2. Theme Structure
  3. HTML Structure
  4. CSS Files and Structure
  5. JavaScript
  6. PSD Files
  7. Setting your Contact Page Destination Email
  8. Changing the Cufon Font
  9. Sources and Credits

A) General Features - top


B) Theme Structure - top

When you download the template there are several files and directories in the zip file:


C) HTML Structure - top

This theme is a fixed layout with two columns. All of the information within the main content area is nested within a div with a class of "hfeed". The sidebar's (column #2) content is within a div with a class of "aside". The general template structure is the same throughout the template. Here is the general structure.

If you would like to edit the color, font, or style of any elements in one of these columns, you would do the following:

If you find that your new style is not overriding, it is most likely because of a specificity problem. Scroll down in your CSS file and make sure that there isn't a similar style that has more weight.

I.E.

So, to ensure that your new styles are applied, make sure that they carry enough "weight" and that there isn't a style lower in the CSS file that is being applied after yours.

Replacing your logo is easy. Just replace logo.png with your company’s logo in the /images/ directory. Below is the HTML code that refers to your logo.


TOP NAVIGATION MENU

The code below refers to the top navigation menu of the template. As you can see, the only thing you need to pay attention to is to add the current_page_item CSS class to the item you want selected.


HOME PAGE FULL WIDTH SLIDER

The code below refers to the full width home page slider. Just add items to it by replicating the li content like below. Also notice that if you add an image smaller than 1920px width, the CSS centers it and you can set the background color of the li to match the images's background color.

Right below the slider's HTML there's a bit of JavaScript to initialize the fading animation. The default time between transitions is 4 seconds (4000 miliseconds) so change that value at your discretion.


ALTERNATE HOME PAGE SLIDER

The code below refers to the alternate home page slider. Just add items to it by replicating the li content like below. Make sure that the images being shown are 900x350 in resolution.

Right below the slider's HTML there's a bit of JavaScript to initialize the fading animation. The default time between transitions is 3 seconds (3000 miliseconds) so change that value at your discretion.


THE 3 HOME BOXES BELOW SLIDER

The code below refers to the 3 home sections below the home page slider. As you can see, each section is identified by their number:

Just put the section’s title in an h3 tag and your desired HTML inside p tags.


FOOTER WIDGETS

The code below refers to the 5 footer widget boxes. You just need to add a div with a class of footer-widget-box and widget, the title goes in an h3 tag and you can add text, lists, images, etc:


The code below refers to the footer. As you can see, it’s actually very similar to the top navigation menu. Also, make sure to use absolute urls when linking the social bockmark icons (e.g. http://www.twitter.com/)


CONTENT PAGE SUB-HEADER

The code below refers to the content page’s sub-header. As you can see in the code, just set the title in the h2 tag and the headline in a span tag with the meta class.


PORTFOLIO 1 AND 2 ITEMS

The code below refers to the Portfolio 1 and 2 items. You can set the name of the Portfolio category in an h2 tag and it's description in p tag, both inside a div tag with the class portfolio-cat-description-wrapper. Just replicate the li to add more items.


PORTFOLIO 3 ITEMS

The code below refers to the Portfolio 3 items. You can set the name of the Portfolio category in an h2 tag. Just replicate the li to add more items.


PORTFOLIO ITEM DETAIL

The code below refers to the Portfolio item detail. Add the title in a h2 tag and description in p tags inside a div with a class portfolio-detail-description. You can also have images fading by adding images inside a ul with a id of portfolio-detail-items.

Right below the ul there's a bit of JavaScript to initialize the fading animation. The default time between transitions is 3 seconds (3000 miliseconds) so change that value at your discretion.


BLOG ITEMS

The code below refers to the Blog items. Replicate the code below to add more posts. Add the title in a h2 tag with the class entry-title and the description inside a p tag.


MAIN PAGE CONTENT

The code below refers to the Main page content. Just add your content inside the div with the hfeed class.


SIDEBAR CONTENT

The code below refers to the Sidebar content. Inside the div with the class aside, just add your content inside divs with the widget class. The title goes in h3 tags. You can add lists, images, text, etc.


D) CSS Files and Structure - top

I'm using 4 CSS files in this theme. The first one is a generic reset file (reset.css). Many browser interpret the default behavior of html elements differently. By using a general reset CSS file, we can work round this.

The second file (base.css) contains some general styling for most default HTML tags such as font-sizes and margin/padding to add the vertical rhythm. Keep in mind, that these values might be overridden somewhere else in the file.

The third file (screen.css) contains all of the specific stylings for the entire theme in terms of positioning, floating, specific sizes, etc. It's the css file that contains the visual structure of the theme.

The fourth file is the skin.css file (inside the /css/skins/light/ for the light theme or /css/skins/dark/ for the dark theme)

The files you'll be working on in order to customize the theme's appearence are the screen.css and the skin.css files. They are separated into sections, e.g:

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.


E) JavaScript - top

This theme imports several Javascript files.

  1. jQuery: jQuery is a Javascript library that greatly reduces the amount of code that you must write
  2. Cufon: supports the embeding of custom fonts
  3. jQuery InnerFade: used for the fadding effect of the home page full width slider and the portfolio item detail images (explained here: Home Page Full Width Slider)
  4. jQuery jCarousellite: used for the sliding effect of the alternate home page slider (explained here: Alternate Home Page Slider)
  5. jQuery PrettyPhoto: provides a lighbox effect for displaying biger images. Just add rel=lightbox to the link that contains the image
  6. jQuery Superfish: adds dropdown menu capability to the theme
  7. BrowserDetect: this scripts adds a specific browser version as a class to the body tag, which allows to set specific browser rules in css without the need to have another css file, e.g.: .ie7 img { margin-top: 5px; }
  8. screen.js: custom scripts explained below

CUSTOM SCRIPTS (screen.js)

The next bit of code is responsible for validating and submiting the Ajax Contact Form.


The following code tells Cufon which text is to be replaced by the custom font. As you can see it uses CSS selectors.


The following code sets a watermark text for the search input field. You can change it by editing the watermark variable.


The following code sets image preloading and displays a open icon when mousing hover lightbox images


The following code instructs the PrettyPhoto lightbox plugin to be used on links which have the rel="lightbox" attribute.


This next code fades a Portfolio thumbnail image to 60% transparency when a user mouse hovers the image. You can set other transparency value by changing the 0.6 value (60%).


The following code is only executed when the site is viewed in IE7. It sets correct z-index values for the top navigation due to absolute positioning of the menu.


Finally, the next line of code sets the home page slider's description bar to 70% transparency (0.7).


F) PSD File - top

I've included one psd with this theme containing the light version of this theme.

The theme only uses images for the social bookmarking icons and the logo, so if you need to change anything in the theme my advice is to change the main CSS files (screen.css and skin.css)


G) Setting your Contact Page Destination Email - top

In order to set your contact page’s destination email edit contact.php, locate the following lines and change the variable $emailTo value to your destination email:


H) Changing the Cufon Font - top

This theme uses Cufon fonts, so if you need to change the default font (ChunkFive) you have to generate a new Cufon javascript for your desired font. Instructions are on the Cufon website (http://wiki.github.com/sorccu/cufon/about).

After you have the new font .js you need to:

I've also included another cufon font script that supports more characters in case the language of your site requires it. Just edit the files and uncomment the following last line:


I) Sources and Credits - top

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


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.

UniSphere

Go To Table of Contents