Rinjani - Multi-Purpose One Page Theme

Thank you for purchasing our theme. The scope of this documentation file is to provide you with the information you need to help you get started with your new theme. Thanks so much! :D

Tips

Due to local security restrictions, some things will not work locally, especially in Chrome. But everything will work once the files have been updated to your website.
Use Firebug or Chrome Developer Tools.
Do not start from scratch, use an existing page from the demo and modify it to learn how it works.
Explore the live demo for pages ideas and sample code.

1. About The Theme

Rinjani is clean, stylish, fully responsive, and multi-purpose landing page template that has been created specifically for individual's or business agencies looking for a fresh, new design.

This template contains a variety of features that can be adapted for any situation. Within it’s charts, countdown, pricing tables, portfolios and other features it will distinguish your business among all.

  • Template Version: 1.6
  • Documentation Version: 1.6

Theme Demo

2. Color Skins

By default, the template loads this color skin, you can choose from 5 color skins. 

<!-- BLUE -->
<link href="assets/css/colors/blue.css" rel="stylesheet" type="text/css">
<link href="assets/css/component/colors/blue.css" rel="stylesheet" type="text/css">

<!-- PINK -->
<link href="assets/css/colors/pink.css" rel="stylesheet" type="text/css">
<link href="assets/css/component/colors/pink.css" rel="stylesheet" type="text/css">

<!-- PURPLE -->
<link href="assets/css/colors/purple.css" rel="stylesheet" type="text/css">
<link href="assets/css/component/colors/purple.css" rel="stylesheet" type="text/css">

<!-- RED -->
<link href="assets/css/colors/red.css" rel="stylesheet" type="text/css">
<link href="assets/css/component/colors/red.css" rel="stylesheet" type="text/css">

<!-- YELLOW -->
<link href="assets/css/colors/yellow.css" rel="stylesheet" type="text/css">
<link href="assets/css/component/colors/yellow.css" rel="stylesheet" type="text/css">

3. PHP Contact Form

Regarding contact form as main part of Contact Section, only thing you need to do is to setup your host, username and password. To do this, please open "contact/send_mail.php" file and change this line: 

$host = 'YOUR_HOST'; 

$username = 'USERNAME@DOMAIN.com'; 

$password = 'YOUR_PASSWORD';
One notice: this will be functional only on your server, php file can not be executed on your local computer.

4. Google Map

Only thing you need to do is to setup your latitude and longitude of your address. To do this, please open "assets/js/component/map.js" file and change this line: 

var $latitude = LATITUDE_OF_YOUR_ADDRESS,             
$longitude = LONGITUDE_OF_YOUR_ADDRESS,
map_zoom = 16;
If you unable to find latitude and longitude of your address. Please visit http://www.latlong.net/convert-address-to-lat-long.html you can easily generate.

5. Video Background

Prepare your video in several formats like .webm, .mp4, .ogv for cross browser compatability, also add a poster with .jpg, .png or .gif extension: 

assets/
├── img/
│   ├── video-poster.jpg
├── video/
│   ├── video-bg.mp4
│   ├── video-bg.ogv
│   └── video-bg.webm

Include plugin: 

<script src="assets/plugins/jquery-vide/jquery.vide.js" type="text/javascript"></script>

To simply play a video (like in this example), do this: 

$(function(){
    $(window).load(function(){
        $('#intro').vide({
            mp4: 'assets/video/video-bg',
            webm: 'assets/video/video-bg',
            ogv: 'assets/video/video-bg',
            poster: 'assets/img/video-poster'
        });
    });
});
All modern desktop browsers are supported.
IE9+
iOS plays video from a browser only in the native player. So video for iOS is disabled, only fullscreen poster will be used.
Some android devices play video, some not — go figure. So video for android is disabled, only fullscreen poster will be used.
Safari does not fallback correctly for webm, so include mp4 first.
Use Any Video Converter to convert video files.

6. YouTube Video Background

Include plugin: 

<script src="assets/plugins/jquery-mbYTPlayer/jquery.mb.YTPlayer.min.js" type="text/javascript"></script>

This is a HTML Constructor that let you play a YouTube Movie in a chromeless player. You can even use a movie as background of your HTML page. 

<a id="bgndVideo" class="player">YouTube</a>

JS Call:

$(function(){
    $(window).load(function(){
        if(jQuery.browser.mobile === false){
            $('.player').YTPlayer({
                videoURL: 'https://www.youtube.com/watch?v=Ufnf0ecwzVI',
                containment: 'body',
                autoPlay: true, 
                mute: true, 
                startAt: 137, // Set the seconds the video should start at.
                opacity: 1
            });
        }
        else{
            $('#intro').css('background-image', 'url("assets/img/video-poster-youtube.jpg")');
            $('.player').css('display', 'none');
        }
    });                          
});

The plug in works only if used under a web server. It doesn’t work if you run the HTML page as file (file://…).
If you want to run it locally on your computer you need a web server installed (for ex: MAMP for Mac, XAMPP for Windows, LAMP for linux) and reach the file from http://localhost... or whatever you mapped in the Host file as localhost.
This player doesn’t work as background for devices due to the restriction policy adopted by all on managing multimedia files via javascript. It fallsback to the default Youtube player if used as player (not applied to the body). So youtube video background for mobile device is disabled, only fullscreen poster will be used.

7. Less

GETTING STARTED

Less is a CSS pre-processor, meaning that it extends the CSS language, adding features that allow variables, mixins, functions and many other techniques that allow you to make CSS that is more maintainable, themable and extendable.


USING LESS

Client-side is the easiest way to get started and good for developing with Less, but in production, when performance and reliability is important, we recommend pre-compiling using node.js or one of the many third party tools available.


To start off, link your .less stylesheets with the rel attribute set to "stylesheet/less": 

<link href="assets/less/rinjani.less" rel="stylesheet/less" type="text/css"/>

Next, download less.min.js and include it in a <script></script> tag in the <head> element of your page: 

<script src="assets/plugins/less.min.js" type="text/javascript"></script>

Make sure you include your stylesheets before the script.
You can find more detailed info about LESS from the official plugin page http://lesscss.org/

8. Sources and Credits


Images Used on Demo:

The images included in preview are for demonstration purposes and should always be replaced with your own work.

Video Background:

  • Underwater Background 2 by Videvo


Once again, thank you so much for purchasing this theme. :D