Created: 04/08/2013
By: Supview
Email: hello@iamsupview.be

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. HTML Structure
  2. CSS Files and Structure
  3. JavaScript
  4. Contact Form
  5. Sources and Credits

A) HTML Structure - top

This theme is a one page portfolio. All of the information within the main content area is nested within a div with an id of "primaryContent". The general template structure is the same throughout the template. Here is the general structure looks like.

HTML Structure

If you have to write something, remplace links, this is where you have to go :)

Here is the structure of One Work

Work Structure

Don't leave the href="" with an hashtag, it won't makes work the expander. So put a link like this one : http://www.yourdomain.com/#/


B) CSS Files and Structure - top

There's always a table of content like this one

	

/*

	00. Body and things that we don't change
	01. Header
	02. Navigation
	03. What we do/Portfolio Section
	04. Works Grid
	05. About Section
	06. Contact Section
	07. Twitter Module
	08. Social Module
	09. Footer
	
	
*/

I'm using three CSS files in this theme. The first one is media CSS Styling. This is where you can found everything about the FontFace, the Media Queries for make it responsive and finally the keyframes for little annimations on the website.

About the Background 100% for iPad / iPhone, you have to change also the link of your background in the media.css in line 146, 186 and 206

The second file ( named main.css ) contains all of the specific stylings for the page. The file is separated into sections using:

	
	/* 01. NAVIGATION ================================================== */

	some code

	/* 02. WORKS SECTION ================================================== */
	
	some code
	
	/* 03. ABOUT SECTION ================================================== */
	
	some code
	
	/* 04. CONTACT SECTION ================================================== */
	
	some code
	
	etc, etc. 

The thirth file ( named reset.css ) is used for seeing the same thing on any navigator.

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 imports Seven Javascript files.

  1. jQuery 1.9.1
  2. jQuery Modernizr Custom
  3. jquery.tweet.js
  4. grid.js
  5. scripts.js
  6. waypoints.js & waypoints-sticky.js
  1. jQuery is a Javascript library that greatly reduces the amount of code that you must write.
  2. Modernizr make an altenative for others navigators if they don't accept some code.
  3. jquery.tweet.js is used for the feed of your last post on twitter.
  4. grid.js is used for the works grid.
  5. scripts.js contain little script for making the always top navigation or the code for making work twitter like this.
  6. Waypoints.js is used for the sticky navigation and smooth scrolling.

You will probably use mostly the scripts.js, if you wan't to add your twitter feed you have just to remplace my username by yours.

/* -- TWITTER -- */


     jQuery(function($){
        $("#ticker").tweet({
          username: "Supview",
          page: 1,
          avatar_size: 0,
          count: 10,
		  template: "{text}{time}",
		  filter: function(t){ return ! /^@\w+/.test(t.tweet_raw_text); },
          loading_text: "loading ..."
        }).bind("loaded", function() {
          var ul = $(this).find(".tweet_list");
          var ticker = function() {
            setTimeout(function() {
              ul.find('li:first').animate( {marginTop: '-30px'}, 500, function() {
                $(this).detach().appendTo(ul).removeAttr('style');
              });
              ticker();
            }, 5000);
          };
          ticker();
        });
      });
  

D) Contact Form - top

It's the same structure as the index.html for the HTML Part.

For using it with your E-Mail just replace the code below here on line 5.

$email_to = "hello@yourmail.com";

E) 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.

Go To Table of Contents