alive documentation

app, product & startup theme

Thank you for purchasing alive We're giving our best, to deliver you top-quality and up-to-date theme. In any case, fell free to contact us. But before that - please, take a look on the topics below. We placed there answers to the most common questions. You can navigate this file easily with Contents button in the top right corner of your screen.


This documentation will guide you thought the customization process of alive theme. Alive is based on HTML5, Bootstrap, CSS3, LESS and jQuery. To edit theme content you'll just need to know some of basics of HTML.

If you're a HTML beginner, please install some HTML editor before you start a customization process. I recommend you to choose Notepad++ or Komodo Edit if you're a Windows user, and consider Brackets if you're working on Mac.

In this documentation we'll be using two types of special text. Every time, when you'll see something like this, it refers to comment labels in the code. Paths to the files, class names, elements IDs, variables and function names will be marked like this. Now, when you know this, it should be easy to learn from this documentation.

If you've already enjoy the alive theme, please don't forget to rate it * * * * * in the download section of your ThemeForest account. Thank you! :-)

Theme Layouts

alive theme comes with 4 different layouts. You'll find all of them in the \theme\ folder. You can choose from different top sections of the page:

Choose the one you want to use as your page, and open the index.html file in your code editor. You'll see the main HTML5 code of the page. It's rich in comments, so you'll always know what the chosen section, div or tag is responsible for.

The difference between the layouts code is inside the === HEADER === section. To edit it, find the following section marker:

<!-- =========================
============================== -->

Inside every layout, you'll find some standard elements.

First of all - the title of the section. It's in the Header title. To change it, simply replace the text inside small title span to modify the first line of title, and the regular title to change the second line. To add some color to your caption, use the <span class="header-txt-color"></span> tag.

    <!-- SMALL TITLE -->
    <span class="header-txt-small">The app theme</span></br/>
    <!-- REGULAR TITLE -->
    You'll <span class="header-txt-color">love</span>

If there's a subtitle, you can change it by editing the content of h3 tag marked as subtitle.

<!-- SUBTITLE -->
<h3>is finally here!</h3>

Also, there are action buttons, placed in HEADER BUTTONS. Don't forget to add a link to your app, by modifying the href="" inside the DOWNLOAD BUTTON part of the code.

<div class="btn btn-lg btn-success anim-bounce-left">
  <a href="#">
      <!-- ICON -->
      <span class="elegant icon_cloud-download_alt"></span>
      <!-- BUTTON TEXT -->

Some individual markup for each layout type is described below.

Header, Buttons & Image

To change the image that appears on right, place the path to your image in src="" in the PRODUCT IMAGE div.

<div class="header-image-right">
        <img class="anim-from-right" src="img/header/img-iphone.png" alt>

Or, simply overwrite the img-iphone.png image in \theme\layout-[X]\img\header\

Header & Buttons

Nothing new here. Everything you need to know to edit this header is listed above.

Subscribe Form

The subscribe form starts just after the HEADER SUBSCRIBE FORM. There's a standard Bootstrap form markup. To make the form validate itself, we used the Bootstrap validator.js v0.6.0 plugin by Cina Saffary. You can find more information about it on the plugin page.

This form collects users e-mails. It creates database in txt file. You can find it in \theme\layout-[3]\php\emails\users-emails.txt

Every time someone submit this form with valid e-mail address, the users-emails.txt file is updated. You can easily import those e-mails to your newsletter application, or email client.


The countdown header uses the The Final Countdown for jQuery v2.0.4 by Edson Hilios. All the information about the markup can be found on the plugin page. Setting of this script can be found in \theme\layout-4\js\jquery.countdown.min.js

Color Schemes

Alive comes with 8 predefined color schemes, and in few seconds you can create your own, thanks to LESS!

Changing the color scheme

To change the color scheme of the page, simply modify just one line of code. Find the === MAIN STYLESHEETS === section in the <head> part of page. Inside, you'll see the main css file:

<!-- ALIVE! THEME -->
<link href="css/style-default.css" rel="stylesheet">

What we're going to do is to change the path placed in href="" attribute. Available predefined colors are:

  • href="css/style-pantone2015.css" - Pantone color of the year 2015
  • href="css/style-pink.css" - Pink scheme
  • href="css/style-yellow.css" - Yellow scheme
  • href="css/style-green.css" - Green Theme
  • href="css/style-pantone2014.css" - Pantone color of the year 2014
  • href="css/style-blue.css" - Blue scheme
  • href="css/style-coldgrey.css" - Cold Grey scheme
  • ...and of course href="css/style-default.css" - Default scheme

Custom color scheme with LESS

If you're not familiar with LESS language, check first.

To make a new color scheme, in your code editor, open style.less file located in \theme\layout-[X]\less\ where [X] is your theme layout number.

To create new color scheme, change the following varibles:

@bg-main: #fff;
@bg-second: #f3f3f3;

@txt-color-1: #333;
@txt-color-2: #666;
@txt-color-3: #ccc;
@txt-color-4: #fff;

@main-color-1: #da4a3a;
@main-color-2: #3d3d3d;

This lines of code are responsible for:

  • @bg-main - page background color
  • @bg-second - secondary background color
  • @txt-color-1 to @txt-color-4 - colors of the fonts
  • @main-color-1 - main theme color
  • @main-color-2 - secondary scheme color

When you're done, it's time to compile LESS code to the css file. You can do this in many ways, but we recommend the SimpLESS Compiler. Download it, drag'n'drop your LESS file, and change your output folder to \theme\layout-[X]\css\style-default.css. Then save your LESS file in the code editor. SimpLESS will compile it to css file instantly. That's it, your custom color scheme is ready! :-)

Changing background images

The default background low-poly images comes from Low Poly Background Textures package by Rounded Hexagon (thanks guys!). You can download all 30 textures here.

If you want to change the default background image in === HEADER === section, just overwrite the file in \theme\layout-[X]\img\header\bg03.jpg. If you're using different color scheme, overwrite the 03-[SchemeName].jpg file in the same directory.

The header background image dimensions should be 1920 x 900 px.

To modify the background used in content sections, such as === TESTIMONIALS === or === TABS ===, overwrite the file in \theme\layout-[X]\img\parallax_bg\01.jpg. If you're using different color scheme, overwrite the 01-[SchemeName].jpg file in the same directory.

The sections background image dimensions should be 1920 x 1920 px.

Overlay Effects

Sections with background images are overlayed by default by a dark div. It's opacity is set to 35% for header, and 30% for content sections. You can change the color and the opacity of the overlay div by editing LESS code as described above. This time, you'll want to edit this two variables:

@header-overlay: fade(#000, 35%);
@sections-overlay: rgba(0,0,0,0.3);

This two lines are responsible for:

  • @header-overlay - overlay in header section
  • @sections-overlay - overlay in content sections

You can also change the default dark overlay, with color overlay. To do it easily, just change the overlay class in header to color-class:

<!-- FOR COLOR OVERLAY, CHANGE CLASS TO color-overlay -->
<div class="overlay">

In the same way you can make the content sections colorful - by changing the overlay-sec class to color-overlay-sec:

<!-- FOR COLOR OVERLAY, CHANGE CLASS TO color-overlay-sec -->
<div class="overlay-sec">

Parallax Effect

The parallax effect in alive is applied to all sections with parallax class. If you want to turn it off, just remove this class.

You can also play a little with scrolling speed in parallax effect. To do this, open the file located in: \theme\layout-[X]\js\parallax.js. Find this lines of code:

var parallax = document.querySelectorAll(".parallax"),
    speed = -0.15;

and change the value of speed to one that suites you best.


We're using the Elegant Icon Set prepared by Nick Roach.

The complete list of available icons, their class names and glyphs code can be found here. To add an icon from this set, simply just copy and paste one of the class names listed in the linked file. For example, to get heart icon on your website, use:

<span class="icon_heart"></span>


Once you scroll alive, you notice how elements enters the site with animation effect. There are 12 animations types in our theme. To use them, just pick a class name from list below, and add it to an element you want to animate.

Animations class names:

  • anim-from-right - element smoothly appears from right
  • anim-from-left - element smoothly appears from left
  • anim-fade-down - element smoothly moves down
  • anim-fade-up - element smoothly moves up
  • anim-fade - element smoothly gains opacity
  • anim-bounce - element 'pops' into the screen
  • anim-bounce-left - element bounce into screen from left
  • anim-bounce-right - element bounce into screen from right
  • anim-bounce-down - element moves down and bounce into screen
  • anim-bounce-up - element moves up and bounce into screen
  • anim-zoom-up - element zoom-in with move to top
  • anim-zoom-down - element zoom-in with move to bottom

You can also add your own animations in \theme\layout-[X]\less\animations.less. We're using the Animate.css, so basically all animations from this stylesheet are available.

To add new animation effect, declare its name in SCROLL ANIMATIONS section of the LESS file. Then, open the file in \theme\layout-[X]\js\alive.scripts.js, find the SCROLL ANIMATIONS section, and below add another code like this:

$('.anim-new').bind('inview', function(event, isInView, visiblePartX, visiblePartY) {
  if (isInView) {
    // element is visible in the viewport
    $(this).addClass('animated flipInX');
    $(this).css({'opacity' : '1'});

There are two things you need to modify. First, the new animation class name declared in the first line. In this example its .anim-new. Second, define the animation name from Animate.css file. We choose flipInX for this example. Save the files, copy and paste the css code of you animation into \theme\layout-[X]\css\animations\animate.css. You can also simply rewrite the animate.css file with complete stylesheet downloaded from here.


There are 3 modal in the theme. First, behind the Join Us button, and two more for contact form validation. There's a standard Bootstrap modals markup.

Join Us modal has a bit more code to handle. To edit it, go to === Join us modal === section. You'll find there three content divs with modal-body class:

  • LOGIN FORM - by default, loaded just after Join Us button click
  • Registration form - displayed after click on Need an account in modals footer
  • PASSWORD REMINDER FORM - displayed after click on Forgot your password below the login form submit button

The forms are built with Bootstrap forms markup rules. Note, that to make it work - login and register a user, and remind a password, it still need to be integrated with your PHP code or CMS system.

Frequently Asked Questions

a) How to remove FUN FACTS section?

To remove === FUN FACTS === section, follow these steps:

  1. Open index.html file from your theme main folder.
  2. Find and delete this code:

    <!-- =========================
         FUN FACTS
    ============================== -->
    <section id="funfacts">
    ... fun facts markup here ...
  3. Still inside the index.html file, find === JS SCRIPTS === section. It's located just before end of the body tag.
  4. Delete this two lines of code:

    <!-- COUTNUP -->
    <script type="text/javascript" src="js/countUp.min.js">
  5. Now, open the /js/alive.scripts.js file.
    NOTE: it is located in js folder of your theme.
  6. Find ///// FUN FACTS COUNTUP section.
    By default, it begins at line 175.
  7. Delete the code, up to line 192. It should look like this:

    var options = {
    useEasing : true,
    useGrouping : false,
    separator : ',',
    decimal : '.',
    prefix : '',
    suffix : '' 
    var count01 = new countUp("count01", 0, 65, 0, 3, options);
    var count02 = new countUp("count02", 0, 104, 0, 4, options);
    var count03 = new countUp("count03", 0, 1027, 0, 5, options);
    var count04 = new countUp("count04", 0, 25, 0, 2.5, options);
    $('#count01').on('inview', function(event, isInView, visiblePartX, visiblePartY) {if (isInView) {count01.start();} return false;});
    $('#count02').on('inview', function(event, isInView, visiblePartX, visiblePartY) {if (isInView) {count02.start();} return false;});
    $('#count03').on('inview', function(event, isInView, visiblePartX, visiblePartY) {if (isInView) {count03.start();} return false;});
    $('#count04').on('inview', function(event, isInView, visiblePartX, visiblePartY) {if (isInView) {count04.start();} return false;});
  8. That's it, you're done! :)

Contact form

Contact form sends you a message through PHP. That's why you need to host your site on a PHP hosting for contact form to work.

Define your e-mail address, for the messages send from the page. To do that, open \theme\layout-[X]\php\mail.php file. Inside, you'll find code like this:

mail("",     /* <----  ----  ----  ----  PLACE YOUR E-MAIL ADDRESS HERE */

Replace this random e-mail with your inbox address, and save the file. The contact form will now work correctly.