Welcome To Exit Theme Documentation

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
  • - Fontastic icons
  • - Fullscreen Background
  • - Slideshow background
  • - Fullscreen Video Background
  • - Twitter feeds
  • - Countdown
  • - Social Contacts

Installing Theme

  • After unzip Theme Files, you will found HTML Folder have 6 Theme styles single-image , slideshow-image , video-background and relative versions without twitter feeds, 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'.

HTML Structure

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.

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

CSS Structure

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: Exit
                    * File name: style.css
                    * Theme URL: exit.mordorthemes.com
                    * Description: Exit - Beautiful Under Construction 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("exit-font.css");
                    @import url("owl.transitions.css");
                    @import url("layout.css");
        
                  

Javascript Settings

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: Exit 
* File name: custom.js
* Theme URL: exit.mordorthemes.com
* Description: Exit - Beautiful Under Construction 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");
});








/* Start Ready Function */
jQuery(document).ready(function ($) { 

'use strict';






/* ==============================================
    Slideshow Images
=============================================== */
$(".wrapper").backstretch
  ("img/img1.jpg");








/* ==============================================
   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
    });






/* ==============================================
   Goole map resize on modal windows
=============================================== */
$('#localize').bind('opened', function() {
google.maps.event.trigger(window, 'load', initialize);
});







/* ==============================================
   About Carousel
=============================================== */
  $("#about-carousel").owlCarousel({
    navigation : false,
    slideSpeed : 300,
    pagination: true,
    paginationSpeed : 400,
    transitionStyle : "backSlide",
    singleItem : true,
    autoHeight : true,
    autoPlay: false
  });






});
/* end ready function */






/* ==============================================
    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();
        });







/* ==============================================
    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').css('display', 'block');
                $('#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;

    });

});








/* ==============================================
    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;

    });








/* ==============================================
  Google Map
=============================================== */ 
function initialize() {
var myLatLng = new google.maps.LatLng(43.7726657,11.2043491);
var roadAtlasStyles = [{"stylers":[{"saturation":-100},{"gamma":1}]},{"elementType":"labels.text.stroke","stylers":[{"visibility":"off"}]},{"featureType":"poi.business","elementType":"labels.text","stylers":[{"visibility":"off"}]},{"featureType":"poi.business","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"poi.place_of_worship","elementType":"labels.text","stylers":[{"visibility":"off"}]},{"featureType":"poi.place_of_worship","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"road","elementType":"geometry","stylers":[{"visibility":"simplified"}]},{"featureType":"water","stylers":[{"visibility":"on"},{"saturation":50},{"gamma":0},{"hue":"#50a5d1"}]},{"featureType":"administrative.neighborhood","elementType":"labels.text.fill","stylers":[{"color":"#333333"}]},{"featureType":"road.local","elementType":"labels.text","stylers":[{"weight":0.5},{"color":"#333333"}]},{"featureType":"transit.station","elementType":"labels.icon","stylers":[{"gamma":1},{"saturation":50}]}];

var mapOptions = {
    zoom: 16,
    center: myLatLng,
    disableDefaultUI: true,
    scrollwheel: false,
    navigationControl: false,
    mapTypeControl: false,
    scaleControl: false,
    draggable: true,
    mapTypeControlOptions: {
    mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'roadatlas']
    }
  };

  var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
  
   
  var marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      icon: 'img/pin.png',
    title: '',
  });
  
  var contentString = '
'+ '
'+ '

Exit

' + '

18, Short Street, 8th floor, LA, California. Lorem ipsum dolor sit amet incididunt ut labore et dolore psum dolor magna aliqua.

'+ '
'+ '
'; var infowindow = new google.maps.InfoWindow({ content: contentString }); google.maps.event.addListener(marker, 'click', function() { infowindow.open(map,marker); }); var styledMapOptions = { name: 'US Road Atlas' }; var usRoadMapType = new google.maps.StyledMapType( roadAtlasStyles, styledMapOptions); map.mapTypes.set('roadatlas', usRoadMapType); map.setMapTypeId('roadatlas'); } google.maps.event.addDomListener(window, "load", initialize);

Countdown Settings

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



Video Background

Open index.html and looking for this code:

              
            
   

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

Image Background

For single image

Open custom.js in js folder and looking for this code at the end of page:

              /* ==============================================
                  Slideshow Images
              =============================================== */
              $(".wrapper").backstretch
                ("img/img1.jpg");
            

And change the image with your



For slideshow image

Open custom.js in js folder and looking for this code at the end of page:

              /* ==============================================
                  Slideshow Images
              =============================================== */
              $(".wrapper").backstretch([
                "img/img1.jpg",
                  "img/img3.jpg",
                  "img/img2.jpg"
                  ], {
                    fade: 750,
                      duration: 6000
              });
            

And change images with yours



Contact Form

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";
            

Subscription Form

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";
            

Google Map

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 :


              /* ==============================================
                Google Map
              =============================================== */ 
              function initialize() {
              var myLatLng = new google.maps.LatLng(43.7726657,11.2043491); /* CHANGE HERE YOUR COORDINATES */
              var roadAtlasStyles = [{"stylers":[{"saturation":-100},{"gamma":1}]},{"elementType":"labels.text.stroke","stylers":[{"visibility":"off"}]},{"featureType":"poi.business","elementType":"labels.text","stylers":[{"visibility":"off"}]},{"featureType":"poi.business","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"poi.place_of_worship","elementType":"labels.text","stylers":[{"visibility":"off"}]},{"featureType":"poi.place_of_worship","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"road","elementType":"geometry","stylers":[{"visibility":"simplified"}]},{"featureType":"water","stylers":[{"visibility":"on"},{"saturation":50},{"gamma":0},{"hue":"#50a5d1"}]},{"featureType":"administrative.neighborhood","elementType":"labels.text.fill","stylers":[{"color":"#333333"}]},{"featureType":"road.local","elementType":"labels.text","stylers":[{"weight":0.5},{"color":"#333333"}]},{"featureType":"transit.station","elementType":"labels.icon","stylers":[{"gamma":1},{"saturation":50}]}];

              var mapOptions = {
                  zoom: 16,
                  center: myLatLng,
                  disableDefaultUI: true,
                  scrollwheel: false,
                  navigationControl: false,
                  mapTypeControl: false,
                  scaleControl: false,
                  draggable: true,
                  mapTypeControlOptions: {
                  mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'roadatlas']
                  }
                };

                var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
                
                 
                var marker = new google.maps.Marker({
                    position: myLatLng,
                    map: map,
                    icon: 'img/pin.png',
                  title: '',
                });
                

                /* INSERT HERE YOUR CUSTOMIZATED INFO */
                var contentString = '
'+ '
'+ '

Exit

' + '

18, Short Street, 8th floor, LA, California. Lorem ipsum dolor sit amet incididunt ut labore et dolore psum dolor magna aliqua.

'+ '
'+ '
'; var infowindow = new google.maps.InfoWindow({ content: contentString }); google.maps.event.addListener(marker, 'click', function() { infowindow.open(map,marker); }); var styledMapOptions = { name: 'US Road Atlas' }; var usRoadMapType = new google.maps.StyledMapType( roadAtlasStyles, styledMapOptions); map.mapTypes.set('roadatlas', usRoadMapType); map.setMapTypeId('roadatlas'); } google.maps.event.addDomListener(window, "load", initialize);

Scripts

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



# Fonts :
  • Montserrat
                
                
              


# Icons :


Open icons-reference.html in fonts folder for broese all icon available in Exit




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