CRUISE Documentation by LIMPIDTHEMES v 1.

CRUISE - RESPONSIVE TRAVEL AGENCY

TEMPLATE

Created: 13/09/2015

By: LimpidThemes

Email: limpidthemes@gmail.com

Thank you for purchasing our theme. We are here to help you, if you have any questions that
are beyond the scope of this help file, please feel free to email us via GMAIL or by item
discussion page on THEMEFOREST. Thanks so much!
Table of Contents
1. HTML Structure
2. CSS Files and Structure
3. JavaScript
4. Sources and Credits

1. HTML Structure
This template is based on Twitter Bootstrap 3+. Template has many sections like Navigation
Section, Search Section, Footer Section, Listing Section, Content Section etc. Template can be
easily modified as per requirements. General structure of template is

/* PRELOADER SECTION */

Preloader Code Goes Here

/* NAV SECTION */

Navigation Code Goes Here

/* SEARCH SECTION */

Search Code Goes Here

/* CONTENT SECTION OR LISTING SECTION */

Content or Listing Code Goes Here

/* FOOTER SECTION */

Footer Code Goes Here

If you would like to edit the color, font, or style of any elements throughout the template you
can do that easily. For example if you wish to change font or color of the FILTER TITLE, you
would do the following

.filter-area h5 {
Color: #f9676b;
Font-family: ‘Open Sans’, ‘sans serif’;
}
If you find that your new style is not overriding, it is most likely because of a specificity
problem. Scroll down in your CSS file and make sure that there isn't a similar style that has
more weight.
2. CSS Files and Structure
Mainly template uses two CSS file first is style.css and another is color scheme file. Color file
contains styles that are used to give color to the template. Secondly there is style.css file which
is the backbone of the template and it contains all the necessary styles that gives the feel and
look to the template. Styles in the styls.css file has been divided into multiple sections i.e
preloader section, nav section, footer section etc. Most importantly style.css has page wise
style section as well. There are 47 section in style.css file some of them are

/* GENERAL STYLES */

CSS Styles Goes Here

/* PRELOADER */

CSS Styles Goes Here

/* SUPERSIZED SLIDER */

CSS Styles Goes Here

/* NAVIGATION TRANSPARENT MENU */

CSS Styles Goes Here

/* LIGHT MENU */

CSS Styles Goes Here

/* HOMEPAGE SEARCH BOX */

CSS Styles Goes Here

/* HOMEPAGE (INDEX-1, INDEX-2, INDEX-3, INDEX-4 ETC.) */

CSS Styles Goes Here

If you would like to edit a specific section of the site, simply find the appropriate label in the CSS
file, and then scroll down until you find the appropriate style that needs to be edited.
If you would like to edit the color, font, or style of any elements throughout the template you
can do that easily. For example if you wish to change font or color of the FILTER TITLE, you
would do the following

.filter-area h5 {
Color: #f9676b;
Font-family: ‘Open Sans’, ‘sans serif’;
}

3. JavaScript
This template imports three Javascript files.

1. jQuery
2. My custom scripts (js.js)
3. Some plugin

1. jQuery is a Javascript library that greatly reduces the amount of code that you must
write.

2. Since most of the animation in the template are carried out using CSS3 so there is very
little involved in the template. Since there are few areas which needs javascript.
Javascript file contains various initializations like Owl Carousel, jquery UI elements like
date picker spinner, range slider etc. Javascript files contains proper commenting to help
you better understand the structure and modification. You can change Datepicker
range, slider range, carousel speed and items etc. using the js.js file. For example if you
wish to change the range if the datepicker you would do following

$( "#departure_date" ).datepicker({ minDate: -0, maxDate: "+3M" });

change minDate and maxDate parameter to suit your needs.

Similarly you can play with Owl Carousel. If you wish to change the setting of recent post
carousel you can do that by changing following parameter as per your requirements

if (jQuery("#post-list").length){

jQuery("#post-list").owlCarousel({

loop:true,
 margin:30,

responsiveClass:true,

autoplay:false,

autoplayTimeout:5000,

navigation:false,

stopOnHover:true,

responsive:{

0:{

items:1,

loop:true

},

600:{

items:2,

loop:true

},

1000:{

items:4,

loop:true

});

}
4. Sources and Credits
Images Used From

1. http://unsplash.com/

2. http://pexels.com/

3. http://pixabay.com/

Fonts Used From

1. https://www.google.com/fonts#UsePlace:use/Collection:Open+Sans

2. http://fortawesome.github.io/Font-Awesome/

Plugins Used

1. Owl Carousel

2. Flexslider

3. Bootstrap Js

4. Bootstrap Select

5. jQuery & jQuery UI

6. Supersized

7. wow.js

8. animate.css

9 magnific-popup

Once again, thank you so much for purchasing this theme. As we said at the beginning, we
would be glad to help you if you have any questions relating to this template. If you have a
more general question relating to the template on ThemeForest, you might consider visiting
the forums and asking your question in the "Item Discussion" section.