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 or submit ticket on purethemes.ticksy.com . Thanks so much!
I assume you have basic knowledge of HTML and CSS, so let's get started!
All files you need are in the package you've downloaded from ThemeForest, when you extract it you'll find folder named "HTML". Your Sukces is here.
You'll find a lot of HTML files and couple folders:
Do not start from scratch, use an existing page from demo 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
Sukces template is based on 1140gs - a CSS grid system designed for various devices.
The syntax is simple and it's effective cross browser. You can really easily customize all part of site or build new.
If you want to create new page using 1140gs, the basic markup is:
<div class="container"> <!-- opening container-->
<div class="row"> <!-- opening row, sometimes "clearfix" class is required -->
<div class="eightcol">
First set of columns
</div>
<div class="eightcol">
Second set of columns
</div>
</div>
</div>
Each row can be divided into twelve columns, the classes for this are:
.onecol, .twocol, .threecol, .fourcol, .fivecol, .sixcol, .sevencol, .eightcol, .ninecol, .tencol, .elevencol, .twelvecolIf the columns is the last one in row, you need to add to it class named last
All widths are based on % of row's width, so it's possible to divide even one of the columns to another 12 elements (eg. eightcol can be a wrapper for next two "eightcol" divs).
Each file in Sukces is created from 3 main parts -> header, content and footer
Header with all in the <head> tags includes all CSS and JS files required to use Sukces features, and for html markup, it's two main wrappers, one with classes "container top cover" and one with "container topbar"
You'll find there Navigation which is wrapped in the eightcol last div, which leave just fourcol for logo, if you need wider logo you need to change those classes, just remember that in total they have to be equal to 12.
If you're creating a page or post, the main content should be additionaly wrapped in "<div class="entry">"
If you want to create blog website or a page with left side sidebar, you need to actually add sidebar after the content div, so on mobile devices users will see content first (which is more important than sidebar). But this by default will show sidebar on right side of content. This is sample markup:
<div class="row clearfix">
<div class="ninecol">
Content goes here
</div>
<div class="threecol last">
Sidebar goes here
</div>
</div>
To change it we need to "fake" the floating of content, we do it by adding class floated-right
Here's the proper markup:
<div class="row clearfix">
<div class="ninecol last floated-right">
Content goes here
</div>
<div class="threecol">
Sidebar goes here
</div>
</div>
There are 5 CSS files used in Sukces:
The main style.css has a Table of Contents:
1.0 Body
2.0 Header
2.1 Social icons
2.2 Site header
2.3 Navigation
3.0 - Repeatable Patterns
3.1 Typography
3.2 Highlights
3.3 Margins
3.4 Floats
3.5 Buttons
4.0 Slider
4.0 Content
4.1 Tag list Sidebar & Blog Entry
4.2 Entry navigation
4.2 Comments
4.3 Table
5.0 Sidebar
6.0 Shortcodes
7.0 Footer
7.1 Footer bottom
8.0 Portfolio
8.1 Filters
9.0 FlexSlider
10.0 Carousel
11.0 Pricing tables
12.0 Blog & News
13.0 Retina Images (High Resolution)
The CSS files are separated into sections using commented header:
/* ============================== */ /* 2.0 Header */ /* ============================== */
so you can just search for element using header from table of contents
Sukces uses couple of jQuery plugins. Check the list below:
All custom jQuery code can be found in custom.js file. Couple tips:
var $carousel = $('.recent-work-jc, .recent-news-jc, .testimonials-jc, .clients-jc'); In shortcodes.html you'll find HTML markup for many elements, like buttons, accordions, tabs etc. Elements are commented, so you can easily check what is where and just copy section you need for your file.
You can modify buttons using different classes for size and color, there's a small-bt for small and big-bt for big button. Not using either of this classes will display standard size button.
Possible colors for buttons are
yellow, blue, grey, green, orange
Nothing complicated here, just remember that each li element in <ul class="tabs"> must correspond with the content of tab, so the <li> <a href="#tab2">Second </a> </li> will
will activate <div class="tab" id="tab2"><h4 class="active"><i></i><a href="#">This is an example of title</a></h4>
The class "active" expands the part of accordion
That is a simple div with one of a class "warning, alert, success"
If you want to have nicely styled table, just add to table tag class "standard-table"
You have 3 layouts, the only difference is the number of columns displayed in each one. Portfolio.html should be a good base for you to start
To add new or modify current categories change data-filter attribute to category which you want.
<ul id="filters">
<li><a href="#filter" class="selected" data-filter="*">All</a></li>
<li><a data-filter=".picture" href="#">picture</a></li>
<li><a data-filter=".icons" href="#">icons</a></li>
<li><a data-filter=".ui" href="#">ui</a></li>
<li><a data-filter=".copy" href="#">copy</a></li>
</ul>
To connect filter button with project add to the div's portfolio-item class name of your filter (in example below: icons ui). You can add there categories how many you want (use spaces between classes).
<div class="fourcol portfolio-item ui icons ">
<div class="pf-cont">
<div class="overlay">
<a class="view hover-image" rel="group" href="images/portfolio/portoflio-09-large.jpg"></a>
<a class="link-image" href="single-project.html"></a>
</div>
<img src="images/portfolio/portoflio2c-09.jpg" alt="" />
</div>
<div class="desc">
<h4><a href="single-project.html">Urban life</a></h4>
<p>UI, Icons</p>
</div>
</div> <!-- eof portfolio item -->
</pre>
The actual full documentation of Layer Slider is here!s
What you need to know while using LayerSlider with Sukces:
<div class="ls-layer" style="slidedelay: 5000; transition2d: 76,77,78,79; ">to set background for it, you just add data-bg="http://url/to/image.png. In this case:
<div class="ls-layer" data-bg="images/slider/slide1bg.jpg" style="slidedelay: 5000; transition2d: 76,77,78,79; ">
<a href="#" class="ls-nav-prev" > <a href="#" class="ls-nav-next" ></a>right before the closing tag of slider's wrapper. You can delete it if you're using another skin
In pricing.html you'll find example pricing table, it's pretty flexible so you can use any column size you want (theoretically you could have 12 columns table but it won't be looking nice or readable). Add class featured to the wrapper of the table you want to make featured
<div class="pricing-table featured"> <!-- featured pricing table -->
<h3>Premium</h3>
<h4><span class="price">$29.99</span> <span class="time"> per month</span></h4>
<ul>
<li>25 GB Storage</li>
<li>Free Live Support</li>
<li>Unlimited Users</li>
<li>No Time Tracking</li>
<li>Enhanced SSL Security</li>
<li class="sign-up"><a href="#" class="blue button">Sign Up</a></li>
</ul>
</div> <!-- eof pricing-table -->
Font Awesome is a @font-face iconset so you can change size and color of these icons by CSS. If you need more informations, please visit this site: http://fortawesome.github.com/Font-Awesome/
<!-- Standard Icon --> <i class="icon-home"> <!-- White Icon --> <i class="icon-home white">
You can also use Font Awesome as list bullets, which is not available by default, thanks to custom modification you can create a list with class with the name of icon you want to use, example:
<ul class="icon-tag">
<li>Buttons</li>
<li>Button groups</li>
<li>Navigation</li>
</ul>
Twitter widget is build on Twitter API 1.1, 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.
You need to now edit file in template folder /twitter/
// Your Twitter App Consumer Key
private $consumer_key = 'PASTEHERE';
// Your Twitter App Consumer Secret
private $consumer_secret = 'PASTEHERE';
// Your Twitter App Access Token
private $user_token = 'PASTEHERE';
// Your Twitter App Access Token Secret
private $user_secret = 'PASTEHERE';
Then, in footer section of any html file, you'll find a twitter widget.
$(document).ready(function() {
$('.twitterfeed').tweet({
modpath: 'twitter/',
username: "purethemes",
join_text: "auto",
count: 1,
loading_text: 'loading twitter feed...',
/* etc... */
});
});
Just replace the username "purethemes" with your, and twitter widget should be displayed. If you'll find some problems, try to give CHMOD 775 for a "twitter" folder.
The contact form is AJAX based, you don't need to configure anything except email address on which you want to receive the message.
To do it, simply open contact.php and replace line 11
$address = "mail@example.com";
with your email
If you need to make any changes, add new fields to contact form, all JavaScript code is handled by file jquery.contact.js
Sukces comes with couple pre-made color schemes. The default one is blue, but you can easily create another one.
You'll find all of them in /css/colors. To use the color scheme on website, edit file and replace name of file in line 24
<link rel="stylesheet" href="css/colors/blue.css?v=1.0" type="text/css" media="screen" id="colors"/>
For example if you need an orange color, replace css/colors/blue.css with css/colors/orange.css
To create your own file, just duplicate for example blue.css, rename it to your choosen name, eg. pink.css, and replace each #00BFDD with your color #ff00ec, for some part you need to check rgba() of that color, for example in case of "overlays' which are semi-transparent, the color must be provided as e.g rgba(0, 191, 221, 0.75);
Sukces comes with two schemes default light, and optional dark.
If you want to change it to dark, edit line 23
<link rel="stylesheet" href="css/light.css?v=1.0" type="text/css" media="screen" id="scheme" />
and replace light with dark
In template package downloaded from ThemeForest, you'll find a PSD folder, you can find there all PSD files used for Sukces
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.