Thank you for purchasing this theme. If you have any questions that are beyond the scope of this help file, please feel free to send an email to support@mordorthemes.com.. Thanks so much!

Theme Preview

Theme features :

• - HTML5 & CSS3
• - Responsive Design
• - Ajax/Php Form with validation
• - Ajax/Php Contact Form with validation
• - Font Awesome
• - Fullscreen Background
• - Slideshow background
• - Fullscreen Video Background
• - Countdown
• - Social Contacts

• → After unzip Theme Files, you will found HTML Folder have 3 Theme styles single-image , slideshow-image , video-background, choose folder to upload to your site.
• → You can view this Theme in any web browser from your desktop computer. Because the files are written in HTML, you do not need an internet connection in order to display or edit the Theme.
• → The exception is the contact form which functions based on the PHP coding language and requires a server to send messages.
• → Start your FTP client (I personally use Filezila which is free) and login. Login to your server. You will need your server name (often times this will be your domain name), username, and password that you setup with the hosting company.
• → Start your FTP client (I persoanlly use Filezila which is free) and login. Login to your server. You will need your server name (often times this will be your domain name), username, and password that you setup with the hosting company.
• → Locate the domain folder you wish to upload your Theme files to on your server. You are going to want to click and drag every file that you have labeled .html, .css, .php, .js into your FTP client.
• → Once the files are done uploading, rename the file you want to be your home page as 'index.html'.

This Theme has a Responsive layout with a variation of column layouts depending on device. This theme uses Foundation5 grid system(12 columns) which will help streamline any customization you wish to make. If you're unfamiliar with Foundation5 grid system, be sure to go to Foundation grid documentation, and you will see the Grid system with divs.

          	
 
                
...
      
                
...
                
...
              
              
 
                
...
                
...
 
                
...
 
              
 
              
 
                
...
 
                
...
 
                
...
 
              
 
              
 
                
...
 
                
...
 
              
 
              
 
                
...
 
                
...
 
              
 
              
 
                
...
 
                
...
 
              
 
              
 
                
...
 
                
...
 
              
		      

I'm using one main CSS file (style.css) in this theme which you are free to modify depending on the customization you require. There are also six additional style sheets that I do not recommend changing. Those style sheets reside in the 'CSS' folder. The six additional style sheets are:

            /*
            * Theme Name: Booster
            * File name: style.css
            * Theme URL: booster.mordorthemes.com
            * Description: Tangram - One page html/css website template
            * Author: Mordorthemes
            * Author URL: http://www.mordorthemes.com
            * Support: support@mordorthemes.com
            * Version: 1.0
            */

            @import url("normalize.css");
            @import url("foundation.css"); 
            @import url("font-awesome.css");
            @import url("animate.min.css");
            @import url("owl.transitions.css");
            @import url("layout.css");

          

Here you can modify any settings for ( Sliders, parallax, googlemap and more..)
Please note that ajax version does not work locally in all browsers

           
    /*
    * Theme Name: Booster
    * File name: custom.js
    * Theme URL: booster.mordorthemes.com
    * Description: Booster - Coming Soon Template
    * Author: Mordorthemes
    * Author URL: http://www.mordorthemes.com
    * Support: support@mordorthemes.com
    * Version: 1.0
    */





    /* ==============================================
        Page Preloader
    =============================================== */
    $(window).load(function() { 
        $("#loader").delay(500).fadeOut(); 
        $(".mask").delay(1000).fadeOut("slow");
    });




    /* ==============================================
        Sticky Footer
    =============================================== */
    $(document).ready(function(){

        'use strict';

            $(window).resize(function(){
                    var footerHeight = $('.footer').outerHeight();
                    var stickFooterPush = $('.push').height(footerHeight);
            
                    $('.wrapper').css({'marginBottom':'-' + footerHeight + 'px'});
                });
            
                $(window).resize();
            });





    $(document).ready( function(){

        'use strict';

    /* ==============================================
       Countdown
    =============================================== */
      // Create a countdown instance. Change the launchDay according to your needs.
      // The month ranges from 0 to 11. I specify the month from 1 to 12 and manually subtract the 1.
      // Thus the launchDay below denotes 7 May, 2014.
      var launchDay = new Date(2015, 5-1, 7);
      $('#timer').countdown({
      until: launchDay
      });





    /* ==============================================
      Carousel
    =============================================== */
      var sync1 = $("#sync1");
        var sync2 = $("#sync2");
         
        sync1.owlCarousel({
        singleItem : true,
        slideSpeed : 1000,
        navigation: false,
        pagination:false,
        autoHeight:true,
        transitionStyle : "goDown",
        afterAction : syncPosition,
        responsiveRefreshRate : 200,
        });
         
        sync2.owlCarousel({
        items : 3,
        itemsDesktop : [1199,3],
        itemsDesktopSmall : [979,3],
        itemsTablet : [768,3],
        itemsMobile : [479,3],
        pagination:false,
        responsiveRefreshRate : 100,
        afterInit : function(el){
        el.find(".owl-item").eq(0).addClass("synced");
        }
        });
         
        function syncPosition(el){
        var current = this.currentItem;
        $("#sync2")
        .find(".owl-item")
        .removeClass("synced")
        .eq(current)
        .addClass("synced")
        if($("#sync2").data("owlCarousel") !== undefined){
        center(current)
        }
        }
         
        $("#sync2").on("click", ".owl-item", function(e){
        e.preventDefault();
        var number = $(this).data("owlItem");
        sync1.trigger("owl.goTo",number);
        });
         
        function center(number){
        var sync2visible = sync2.data("owlCarousel").owl.visibleItems;
        var num = number;
        var found = false;
        for(var i in sync2visible){
        if(num === sync2visible[i]){
        var found = true;
        }
        }
         
        if(found===false){
        if(num>sync2visible[sync2visible.length-1]){
        sync2.trigger("owl.goTo", num - sync2visible.length+2)
        }else{
        if(num - 1 === -1){
        num = 0;
        }
        sync2.trigger("owl.goTo", num);
        }
        } else if(num === sync2visible[sync2visible.length-1]){
        sync2.trigger("owl.goTo", sync2visible[1])
        } else if(num === sync2visible[0]){
        sync2.trigger("owl.goTo", num-1)
        }
        }




    /* ==============================================
      Contact Form
    =============================================== */
    $('#contactform').submit(function(){

        'use strict';

            var action = $(this).attr('action');

            $("#message").slideUp(300,function() {
            $('#message').hide();

            $('#submit')
                .after('')
                .attr('disabled','disabled');

            $.post(action, {
                name: $('#name').val(),
                email: $('#email').val(),
                comments: $('#comments').val()
            },
                function(data){
                    document.getElementById('message').innerHTML = data;
                    $('#message').slideDown(300);
                    $('#contactform img.loader').fadeOut('slow',function(){$(this).remove()});
                    $('#submit').removeAttr('disabled');
                    if(data.match('success') != null) $('#contactform').slideUp('slow');

                }
            );

            });

            return false;

        });


    });
    /* end ready function */





    /* ==============================================
        Text Rotator
    =============================================== */
    jQuery(document).ready(function(){

            $("body");
                options = {
                speed: 4e3,
                transition_speed: 500,
                sub_selector: ".rotate"
             };
             $("#rotate").rotator(options);
    });






    /* ==============================================
        Newsletter Subscription Form
    =============================================== */
    jQuery(document).ready(function(){

    'use strict';

        $('#subscribe').submit(function(){

            var action = $(this).attr('action');

            $("#message-subscribe").slideUp(300,function() {
            $('#message-subscribe').hide();

            $('#ssubmit')
                .after('')
                .attr('disabled','disabled');

            $.post(action, {
                email: $('#semail').val()
            },
                function(data){
                    document.getElementById('message-subscribe').innerHTML = data;
                    $('#message-subscribe').slideDown(300);
                    $('#subscribe img.subscribe-loader').fadeOut('slow',function(){$(this).remove()});
                    $('#ssubmit').removeAttr('disabled');
                    if(data.match('success') != null) $('#subscribe').slideUp('slow');

                }
            );

            });

            return false;

        });

    });






    /* ==============================================
      Text Rotator Function
    =============================================== */
    (function (e) {


        e.fn.rotator = function (n) {
            function f() {
                u.stop().fadeOut(r.transition_speed, function () {
                    if (i == o) {
                        u = s.first();
                        i = 0
                    } else u = u.next();
                    u.fadeIn(r.transition_speed);
                    i++;
                    setTimeout(f, r.speed)
                })
            }
            var r = e.extend({}, t, n);
            var i = 1;
            var s = this.children(r.sub_selector);
            var o = s.length;
            s.hide();
            var u = s.first();
            var a = this;
            u.fadeIn();
            setTimeout(f, r.speed);
            return this
        };
        var t = e.fn.defaults = {
            speed: 3e3,
            transition_speed: 500,
            sub_selector: ".rotate"
        }
    })(jQuery)

           

For setting countdown

Open js/custom.js and looking for this code:

              $(document).ready( function(){

                'use strict';

                /* ==============================================
                   Countdown
                =============================================== */
                    // Create a countdown instance. Change the launchDay according to your needs.
                    // The month ranges from 0 to 11. I specify the month from 1 to 12 and manually subtract the 1.
                    // Thus the launchDay below denotes 7 May, 2014.
                    var launchDay = new Date(2015, 5-1, 7);
                    $('#timer').countdown({
                    until: launchDay
              });
            

And change the date as you want

Open index.html and looking for this code:

Here you can change your video
Booster uses YTPlayer.js for play video, for customization and info about plugin you can look here: YTPlayer.js

For single image

Open index.html and looking for this code at the end of page:

And change the image with your

For slideshow image

Open index.html and looking for this code at the end of page:

And change images with yours

Contact Form : is PHP Script for sending messages to your email to be connected with your visitors or clients , you should edite email default to your email to start receive messages , now do this below :

Go To File ( php/contact.php ) in main folder and change email :

              //$address = "example@example.net";
              $address = "example@example.net";
            

Contact Form : is PHP Script for sending messages to your email to be connected with your visitors or clients , you should edite email default to your email to start receive messages , now do this below :

Go To File ( php/subscribe.php ) in main folder and change email :

              //$address = "example@example.net";
              $address = "example@example.net";
            

Please follow this links and read documentations if you want modify plugin i have use in Booster

• jquery.backstretch
• jquery.mb.ytplayer
• Countdown.js
• owl-carousel.js

# Fonts :

• Open Sans

# Icons :

• Font Awesome 4.1.0

---

Once again, thank you so much for purchasing this Theme. !!