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!
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
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.
<!-- 960 Container --> <div class="container"></div> <!-- End 960 Container -->
<!-- 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.
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:
The CSS files are separated into sections using:
/* =================================================================== */ /* Section ====================================================================== */ /* Sub Section ====================================*
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:
There are also styles available for inverted (white) icons, made ready with one extra class:
<i class="mini-ico-search mini-white"></i>
<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.
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">
To use wide layout, replace "boxed.css" by "wide.css":
<link rel="stylesheet" type="text/css" href="css/boxed.css" id="layout">
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.
Don't forget to remove style switcher after customize your site.
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>
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 is based on jQuery. You don't have to know PHP. To change sample email adress, open "contact.php", find and edit code below:
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.
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.
After you sign in, you’ll be taken to your application creation page. Be sure to fill in your all fields.
Go to the @Anywhere domains page and add there your domain without "WWW" or "http" prefix e.g. vasterad.com
Go back to your Twitter app’s detail page and copy following keys:
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.
Change current attrubition of user to your's ID (user=00000000@N00).
Code above is included in footer and blog widget.
You can see some help info, when click links which are below each regarding script:
The PSD files were made in Adobe Photoshop CS5, and should run in any other version.
Note: The images included in preview are for demonstration purposes and should always be replaced with your own work.