Documentation by “Designesia"

“Cubic”

Cubic Template
By: designesia

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to ask via item's comments. Also please don't forget to give rating! Thanks so much! :)

HTML Structure
1. Sample Structure For Content
2. Create Columns
CSS
1. List of CSS files
2. Light color
3. Dark color
JavaScript
1. Animate Objects On Scroll
2. Create Parallax Background
Contact PHP

A) HTML structure - top

This template using Bootstrap framework. Main content is placed between header and footer area. The content is nested within <section> tag. To create more section you can duplicate <section> code then rename id atributte with dieffrent name.

1) Sample Structure For Content

... header area ...

<section id="content">
     <div class="container">
          <div class="row">
               <div class="col-md-4">
                    this is your content			
               </div>
               <div class="col-md-8">
                    this is your content
               </div>
          </div>
     </div>
</section>


<section id="about-us">
     <div class="container">
          <div class="row">
              <div class="col-md-12">
                  this is your content
              </div>
          </div>
     </div>
</section>

... footer area ...

2) Create Columns

For a simple two column layout, create a .row and add the appropriate number of .col-md-* columns. As this is a 12-column grid, each .col-md-* spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent). Click here for more information.

<div class="row">
     <div class="col-md-6"> this is 1/2 columns </div>
     <div class="col-md-6"> this is 1/2 columns </div>
</div>

<div class="row">
     <div class="col-md-4"> this is 1/3 columns </div>
     <div class="col-md-8"> this is 2/3 columns </div>
</div>

<div class="row">
     <div class="col-md-3"> this is 1/4 columns </div>
     <div class="col-md-9"> this is 3/4 columns </div>
</div>

B) Color Schemes- top

This theme already with two color schemes. You can simply use it by add class name to <body> tag.

1) List of CSS files

animate.css - used for animation on scroll
bootstrap.css - bootstrap framework css
flexslider.css - flexslider css
jpreloader.css - text rotator preloader css
owl.carousel.css - owl carousel css
owl.theme.css - owl styling css
plugin.css - related to plugin css
prettyPhoto.css - prettyPhoto plugin css (for popup image)

For customization you can edit files below:

style.css - main css file
color.css - color scheme (orange color on templates)
custom-style.css - insert your custom css here also for parallax background
rev-settings.css - styling for revolution slider

2) Light Color

This color is by default.

3) Dark Color

Insert class below in body or any div tag

<body class="dark">

C) Javascript - top

jquery.min.js - http://docs.jquery.com/Downloading_jQuery
bootstrap.min.js - bootstrap js file
designesia.js - custom js file
jquery.isotope.min.js - used in gallery page
jquery.prettyPhoto.js - used to open popup image
easing.js - http://archive.plugins.jquery.com/project/Easing
jquery.ui.totop.js - used to scroll to top
validation.js - used for contact form validation

1) Animate Object On Scroll

Select an object that you want to animate. As example you want create animate for H1 element. You can see below:

<h1 class="animated" data-animation="fadeIn" data-delay="150">Animate Text</h1>

You must add class name "animated" for object that you want to animate.
data-animation: type of animation. You can see all animation available from: http://daneden.github.io/animate.css/
data-delay: determine when animation will start (on milisecond)

2) Create parallax backrgound

Create a section tags then give it an id name.

<section id="my-section">...content here...</section>

Add data-stellar-background-ratio attribute below.

 <section id="my-section" data-stellar-background-ratio=".2">...content here...</section>

Open style.css file, set background image for your section.
```
#my-section{
     background-image:my-bg-image.jpg;
}
```
Done.

C) Contact Page- top

Open > email.php. Change $to value with your email.

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.

designesia

Go To Table of Contents