1. Start
  2. Helpful Tips
  3. HTML Structure
  4. CSS Structure
  5. Icons Usage
  6. Style Switcher
  7. Portfolio Filtering
  8. Contact Form
  9. Twitter & Flickr
  10. JavaScript
  11. PSD FIles
  12. Sources & Credits

Centum

Responsive HTML Template


Thank you for your purchase! If you have any questions that you feel should have been in this document, please log in using the account used to purchase the file and email via my user page contact form here. Thanks so much!

For questions on basic HTML, JavaScript or CSS editing - please give your question a quick Google or visit W3Schools as theme issues get top priority. You will need some knowledge of HTML/CSS to edit this theme.

Helpful Tips


Do not start from scratch, use an existing page I have created and modify it to learn how it works

Quickly find what you're looking for in this document by using your browser's "Find in Page" feature, typically Control+F.

Trying to locate/replace text, styles or code in themes? "Find in Files" command which is commonly found in any decent text editor which will save you hours of searching

Getting an error message, chances are someone else has seen it too, try a google search for a quick fix.

Many times plugins are to blame when a site fails, always try disabling any third-party plugins if you encounter an error you can't solve.

Don't forget to re-explore the live demo for layouts, usage ideas and sample code

HTML Structure


Centum template is based on Skeleton - a small collection of CSS & JS by Dave Gamache files that can help you rapidly develop sites that look beautiful at any size, be it a 17" laptop screen or an iPhone.

Skeleton's base grid is a variation of the 960 grid system. The syntax is simple and it's effective cross browser, but the awesome part is that it also has the flexibility to go mobile like a champ. You can really easily customize all part of site or build new.

1. Firstly add 960 container
    <!-- 960 Container -->
    <div class="container"></div>
    <!-- End 960 Container -->
2. Secondly add a few columns from one to sixteen (that's max columns)
    <!-- 960 Container -->
    <div class="container">
         <div class="eight columns">1/2 Column - Content Here</div>
         <div class="eight columns">1/2 Column - Content Here</div>
    </div>
    <!-- End 960 Container -->

I've added some examples - check "full_width.html" file. That'll help you a lot.

CSS Structure


I used four CSS files in this template (all styles're imported in main file of CSS - style.css). By using of them, we can work round this. Those files also contains some general styling, such as anchor tag colors, font-sizes, etc. Keep in mind, that these values might be overridden somewhere else in the files below:

  1. styles.css - main css file + media query layouts;
  2. base.css - contains the basic styles like reset, typography;
  3. skeleton.css  - skeleton's 960 grid;
  4. fancybox.css - lightbox's styles.

The CSS files are separated into sections using:

/* =================================================================== */
/* Section
====================================================================== */

/* Sub Section
====================================*

 

Icons Usage


How to use

Centum uses an <i> tag for all icons, but they have no case class—only a shared prefix. To use, place the following code just about anywhere:

Small icon:

<i class="mini-ico-search"></i>

Standard icon:

<i class="ico-search"></i>

 

There are also styles available for inverted (white) icons, made ready with one extra class:

Small icon:

<i class="mini-ico-search mini-white"></i>

Standard icon:

<i class="ico-search ico-white"></i>

There are 140 classes for small icons and 360 for standard and  to choose from for your icons. Just add an <i> tag with the right classes and you're set. You can find the full list in shortcodes.

 

Style Switcher


1. Main Color

You can use one of predefinied colors or build custom CSS with color which you want.

<link rel="stylesheet" type="text/css" href="css/colors/green.css" id="colors">

 

2. Layout Style (Boxed / Wide)

To use wide layout, replace "boxed.css" by "wide.css":

<link rel="stylesheet" type="text/css" href="css/boxed.css" id="layout">

 

3. Background

Custom background is allowed only in "boxed" layout. If you want to use other than standard pattern or solid background, open "boxed.css" and modify on 5 line link to background's pattern.

 

4. At the end

Don't forget to remove style switcher after customize your site.

 

 

 

Portfolio Filtering


Filter's Buttons

To add new or modify current categories change data-option-value attribute to category which you want.

<!-- Filters -->
<div id="filters">
  <ul class="option-set" data-option-key="filter">
     <li><a href="#filter" class="selected" data-option-value="*">All</a></li>
     <li><a href="#filter" data-option-value=".example-a">Example A</a></li>
     <li><a href="#filter" data-option-value=".example-b">Example B</a></li>
   </ul>
</div>
Project's Thumbnails

To connect filter button with project add to first div's class name of your category (in example below: sample-a). You can add there categories how many you want (use spaces between classes).

<div class="eight columns portfolio-item example-a">
  <div class="item-img"><a href="project.html"><img src="images/project_01.jpg" alt=""/><div class="overlay zoom"></div></a></div>
     <div class="portfolio-item-meta">
     <h4><a href="single_project.html">Project's Title</a></h4>
     <p>Project's Description.</p>
  </div>
</div>

 

Contact Form


Contact form is based on jQuery. You don't have to know PHP. To change sample email adress, open "contact.php", find and edit code below:

1
2
// ====== Your mail here  ====== //
$to = 'Your Name <mail@example.com>';  

 

Twitter & Flickr


Twitter

Twitter widget is build on Twitter API 1.1 because Twitter disabled API 1.0. Unfortunately Twitter is not that easy now to include on your website, you need to have API keys (similar to Facebook). To get the access keys you need to sign in and create an application on the Twitter Developer Site. Once your application is created Twitter will generate your Oauth settings and access tokens.

 

Step 1: Sign in to Twitter

Sign in to Twitter. If you don’t already have a Twitter account, you can sign up at the Twitter home page to create one.

 
Step 2: Create your Twitter App

After you sign in, you’ll be taken to your application creation page. Be sure to fill in your all fields.

  • Name: This will be displayed on each member’s Twitter update.
  • Description: Give a description.
  • WebSite: Enter in the web address of your site, for example, http://vasterad.com
  • Callback URL: Enter in the web address of your site, for example http://vasterad.com

 

Step 3: Authorize your domain

Go to the @Anywhere domains page and add there your domain without "WWW" or "http" prefix e.g. vasterad.com

 

Step 4: Get Access Tokens

Go back to your Twitter app’s detail page and copy following keys:

  • Access Token
  • Access Token Secrect
  • Consumer Key
  • Consumer Secret

 

Step 5: Setting up widget

When you have this keys and authorized your domain, open twiter.php and paste them to the correct fields:

// The tokens, keys and secrets from the app you created at https://dev.twitter.com/apps
$config = array(
'oauth_access_token' => 'token-here',
'oauth_access_token_secret' => 'token-here',
'consumer_key' => 'token-here',
'consumer_secret' => 'token-here',
'use_whitelist' => false, // If you want to only allow some requests to use this script.
'base_url' => 'http://api.twitter.com/1.1/'
);

use_whitelist must be set to false

 

Then in HTML files replace current widget script with script below and change nickname to yours. You can also modify count of visible tweets. Keep in mind that you need to upload your site online to make widget works.

<script type="text/javascript">
	jQuery(document).ready(function($){
	$.getJSON('twitter.php?url='+encodeURIComponent('statuses/user_timeline.json?screen_name=Vasterad&count=1'), function(tweets){
		$("#twitter").html(tz_format_twitter(tweets));
	}); });
</script>


Flickr

Change current attrubition of user to your's ID (user=00000000@N00).

Code above is included in footer and blog widget.

JavaScript


You can see some help info, when click links which are below each regarding script:

  1. jQuery - is a Javascript library that greatly reduces the amount of code that you must write. For more information, please visit http://www.jquery.com/
  2. Flexslider - Refer to the author's documentation for additional notes on how to use it.
  3. Isotope - Refer to the author's documentation for additional notes on how to use it.
  4. Fancybox - Refer to the author's documentation for additional notes on how to use it.
  5. Wilto Carousel - Refer to the author's documentation for additional notes on how to use it.

PSD Files


The PSD files were made in Adobe Photoshop CS5, and should run in any other version.

  1. Home (01_Home.psd)
  2. Blog (02_Blog.psd)

Sources & Credits


Note: The images included in preview are for demonstration purposes and should always be replaced with your own work.


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. <br/><br/>If you have a more general question relating to the themes on ThemeForest, basic HTML/CSS/JavaScript related questions, you might consider visiting the forums and asking your question in the "Item Discussion" section.

Regards,
Vastera