Sukces Documentation

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

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 class="threecol last">
        Sidebar goes here
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 class="threecol">
        Sidebar goes here

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.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:

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>


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>
            <img src="images/portfolio/portoflio2c-09.jpg" alt="" />
        <div class="desc">
            <h4><a href="single-project.html">Urban life</a></h4>
            <p>UI, Icons</p>
    </div>  <!-- eof portfolio item -->


The actual full documentation of Layer Slider is here!s

What you need to know while using LayerSlider with Sukces:

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 -->
    <h4><span class="price">$29.99</span> <span class="time"> per month</span></h4>
        <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>
</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:

<!-- 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>Button groups</li>

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() {
        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 = "";
with your email

If you need to make any changes, add new fields to contact form, all JavaScript code is handled by file

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.