“Innovo” Documentation by “Theme Starz” v1.0.0

“Innovo - Innovative Parallax Coming Soon Template”

Created: 16.5.2017
By: Theme Starz
Email: support@themestarz.net

Thank you for purchasing our 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. Thanks so much!

Running The Template

In order to use the template correctly, we recommend you to run it on localhost server.

You can use for example XAMPP

Template Versions and Variants

Template has 3 variants:

Parallax variant
Static Text variant
Default variant

Each variant has then 3 versions:

Text version (only static text)
Form version (text and subscribe form)
Count Down version (Text and big count down)

For example 2-form-snow.html is Variant "2" (static text) and Form version (text and subscribe form)

Layers Structure

If you want to achieve 3D parallax effect, you need to put your images and HTML elements into DIV with layer class.

<figure class="cd-floating-background">
    <div class="base-layer" data-background-color="#000000"></div>
    <div class="layer animate" data-background-image="assets/img/lines-1.png" data-layer-depth="50"></div>
    <div class="layer animate" data-background-image="assets/img/lines-2.png" data-layer-depth="150"></div>
    <div class="layer animate pointer-events-none" data-background-image="assets/img/lines-3.png" data-layer-depth="450"></div>
    <div class="layer animate" data-layer-depth="300">
        <div id="content">
            <div class="content-wrapper">
                <div class="container">
                    // Content
                </div>
            </div>
        </div>
    </div>
</figure>

base-layer `class`

The first layer at the very bottom in layer structure. This layer should be used for background image or background color

data-background-image`data attribute`

With this data attribute you specify path to image for desired layer

data-background-color`data attribute`

With this data attribute you specify HEX color value for background.
Note: This attribute should be used only for <body> element and base-layer class

data-layer-depth `data attribute`

Depth of the layer in "3D space". The higher the number, the nearer in "3D space" is layer. You can use these data-layer-depth number:

data-layer-depth="0"
data-layer-depth="50"
data-layer-depth="100"
data-layer-depth="150"
data-layer-depth="200"
data-layer-depth="250"
data-layer-depth="300"
data-layer-depth="350"
data-layer-depth="400"
data-layer-depth="450"
data-layer-depth="500"
data-layer-depth="550"
data-layer-depth="600"
data-layer-depth="650"
data-layer-depth="700"
data-layer-depth="750"
data-layer-depth="800"
data-layer-depth="850"
data-layer-depth="900"
data-layer-depth="950"
data-layer-depth="1000"

pointer-events-none

If the layer has bigger data-layer-depth (is nearer) then it will block the content (button, forms etc.) from clicking. Use this data attribute to "disable" this layer (it will act as hidden).

Email forms

To set the for receiving messages, open assets/php/email.php and change email@example.com to your own. Forms can have these four predefined name attributes:

name
email
phone
message

Loading screen (Pace plugin)

To enable loading screen just add has-loading-screen class into body to enable.

Self Hosted Video

You can play MP4, OGV and WEBM videos as a fullscreen background from your server. You just need to upload this videos and set the path in data-vide-bg="assets/video/YOUR_VIDEO" without extension.

Map settings

To display the map, you need to have these lines at the end of your page:

<script type="text/javascript" src="http://maps.google.com/maps/api/js"></script>
<script type="text/javascript">
    var latitude = 34.038405; // latitude of the map center
    var longitude = -117.946944; // longitude of the map center
    var markerImage = "assets/img/map-marker-w.png"; // image of the marker icon
    var mapTheme = "dark"; // map theme. Use dark or light
    google.maps.event.addDomListener(window, 'load', simpleMap(latitude, longitude, markerImage, mapTheme));
</script>

Google Maps API Key

If you don't have an API ked, the map will not be displayed, or there will be only grey background with "Oops! Something went wrong" message.

Get your API Key here:

https://developers.google.com/maps/documentation/javascript/get-api-key#get-an-api-key

At the bottom of the page with map find:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=YOUR_API_KEY"></script>

Replace the YOUR_API_KEY with the one you have generated.

Count down timer

To change the date of the countdown change these data attributes:

data-countdown-year
data-countdown-month - without "0". So for the July it is data-countdown-month="6"
data-countdown-day

Universal classes

width-10 { width: 10%; }
width-20 { width: 20%; }
width-25 { width: 25%; }
width-30 { width: 30%; }
width-33 { width: 33%; }
width-40 { width: 40%; }
width-50 { width: 50%; }
width-60 { width: 60%; }
width-70 { width: 70%; }
width-80 { width: 80%; }
width-90 { width: 90%; }

Icons used

Font Awesome

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.

Theme Starz

Go To Table of Contents