Thank you for your purchasing this template. If you have any questions that are beyond the scope of this help file, please feel free to email us.Thank you.
This template, which is a responsive layout for tablet and other mobile devices, is based on the HTML5 structure and Twitter Bootstrap 3. Visit http://getbootstrap.com/ to learn more about Bookstrap. For a detailed information about its grid system, click on http://getbootstrap.com/css/#grid.
As a brief explanation, the grid is composed of 12 columns; each named as "col-xs-1", "col-xs-2", "col-xs-3", "col-xs-4", and so on and so forth. The column divisions are grouped in rows.
The grid system works for multiple devices. Please check the table below.
| Extra Small Devices(<481) | Intermediate Small Devices(≥481 and < 768) | Small Devices(≥768) | Medium Devices(≥992) | Large Devices(≥1200) | ||||
| Container width | Auto | |||||||
| Class Prefix | col-xs- | col-sms- | col-sm- | col-md- | col-lg- | |||
Simple grid layout looks like following:
<div class="row"> <div class="col-sms-6 col-sm-6"> </div> <div class="col-sms-6 col-sm-6"> </div> </div
The general HTML structure should appear in the following format.
<div id="page-wrapper"> <header id="header" class="navbar-static-top"> <!-- HEADER CONTENT GOES HERE (logo, page info, menu, ribbon, etc) --> </header> <div class="page-title-container"> <!-- PAGE TITLE SECTION(Inner Starts) --> </div> <section id="content"> <div class="container"> <div class="row"> <div id="sidebar" class="col-sm-3"> <!-- SIDEBAR CONTENT GOES HERE --> </div> <div id="main" class="col-sm-9"> <!-- MAIN CONTENT GOES HERE (search box, etc) --> </div> </div> </div> </section> <footer id="footer"> <div class="footer-wrapper"> <div class="container"> <!-- FOOTER CONTENT GOES HERE --> </div> </div> <div class="bottom"> <!-- LOGO, COPYRIGHT, BACK TO TOP, etc --> </div> </footer> </div>
We use SCSS for stylesheets. For more information about SCSS, visit http://sass-lang.com/guide.
SCSS files are located in the /sass directory. Other CSS files are located in the /css directory.
We compile SCSS files to CSS to make them usable. All complied files are located in the /css.
This template imports several JS files.
The Javascript files are loaded both in the header and footer. Several files are loaded in the header but most of them are loaded at the bottom to increase the site speed and rendering.
The Javascript files used in this template are the following:
Change a default logo by changing logo.png in the /images directory, or by opening each of the pages and changing the following code.
<div class="logo pull-left"> <a href="index.html" title="Travelo - home"> <img src="images/logo.png" alt="Travelo HTML5 Template" /> </a> </div>
Currently, we have 10 skin colors and each one of these uses its own logo. If you opt for a skin color other than the default, change the logo in /images/logo/{color skin}/logo.png.
After that, please add the following css code in /css/custom.css.
#header .logo { margin-top: 7px !important; } // give proper value according to the height of logo
The header7 logo is 28px in height by default. If you want to change this height to fit your logo, please add the following css code in /css/custom.css.
#header.style7 .logo img { height: auto; }
#header.style7 .logo a { background-size: auto auto; }
#header.style7 .logo { margin-top: 20px; } // give proper value according to the height of logo
The logo on mobile browsers(narrow width) is 30px in height. If you want to resize logo, please add following css code in /css/custom.css.
@media (max-width: 991px) {
#header .logo { padding-top: 6px !important; }
#header .logo a { height: 55px; background-size: auto 55px !important; }
#header .logo a img { height: 55px; }
}
We can resize logo in sticky menu bar by chaning its height. The height is 20px by default.
Please use the following css code to change it.
.chaser .logo { margin-top: 11px; } // give proper value according to the height of logo
.chaser .logo a { background-size: auto 25px; }
.chaser .logo a img { height: 25px; }
We are using Google Lato font by default.
To change the embedded font, look for the tag below in the head section of your website.
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
Once you see the $font-stack variable in variables.scss, change the value of which.
$font-stack: 'Lato', Arial, Helvetica, sans-serif;
We have 10 skin colors by default as mentioned earlier.
If you want to use skin2, you can change style.css to precompiled red-color.css.
<link id="main-style" rel="stylesheet" href="css/red-color.css">
Otherwise you can compile skin2 using variables.
You need to comment current variables and uncomment these variables.
/* Skin2 */ $skin-logo: $skin2-logo; $skin-bg-color: $red-color; $skin-active-color: $red-color; $skin-select-color: #e6c687; $skin-hover-color: #fc989e; $skin-mobile-menu-color: $red-theme-color; $skin-light-color: #fc989e; $skin-dark-color: #a70b14;
As you can see in the menu, there are eight header styles including a default style.
To change a header style to another, you will have to make some changes in every single page.
<header id="header" class="navbar-static-top style1"> ... </header>
Please change all header contents .
You can see header styles in header-style1.html, header-style2.html, ... , header-style7.html.
We have seven inner start styles.
Similar to the process of changing a header style, you need to change all inner start sections to another style of your choice.
<div class="page-title-container style1"> <div class="container"> <div class="page-title pull-left"> <h2 class="entry-title">Before You Fly</h2> </div> <button class="btn-medium sky-blue1">SIGNUP</button> <button class="btn-medium">LOGIN</button> </div> </div>
Please have a check inner-starts-style1.html, ... , inner-starts-style7.html.
We provide seven footer styles.
To change from one type of footer to another type of footer, make single changes in every single page.
<footer id="footer" class="style1">
Change style1 with style2 , style3, style4, ... , style7.
We have six items per column in the mega menu by default. To change it, see the following code in theme-scripts.js.
// mega menu var megamenu_items_per_column = 6;
Change 6 to your preferred number.
You can also perform changes for a specific mega menu.
<li class="menu-item-has-children megamenu-menu"> <a href="#">Pages</a> <div class="megamenu-wrapper container" data-items-per-column="8"> ... </div> </li>
Add data-items-per-column="{count}" to the mega menu in which you want to change the number of items per column.
Sticky menu bar is 48px in height by default. If you want to change the height, please add the following css code in the /css/custom.css. (Change 48px with your value.)
.chaser .logo a, .chaser ul.menu > li > a { height: 48px; line-height: 48px; }
.chaser ul.menu > li:hover > ul, .chaser ul.menu > li:hover > .megamenu-wrapper { top: 46px !important; } // 48px - 2px
We are currently using 3 sliders: Revolution Slider, Flex Slider and BXSlider.
All sliders are located in /components.
We have seven revolution sliders by default.
Please check sliders menu.
<div id="slideshow"> <div class="fullwidthbanner-container"> <div class="revolution-slider"> ... </div> </div> </div>
We are using Flex Slider for the photo gallery that comes in two types.
Please check shortcode-gallery-styles.html.
The photo gallery comes in four styles.
<div id="gallery_style1" class="flexslider photo-gallery style1" data-animation="slide" data-sync="#carousel_style1"> <ul class="slides"> <!-- slideshow --> </ul> </div> <div id="carousel_style1" class="flexslider image-carousel style1" data-animation="slide" data-item-width="70" data-item-margin="10" data-sync="#gallery_style1"> <ul class="slides"> <!-- thumbnail navigation --> </ul> </div>
There are three styles in the image carousel.
If you want a detailed information about FlexSlider, please check http://www.woothemes.com/flexslider/.
We can customize current styles and make new styles easily using SCSS.
We support hotel, flight, car, cruise and tour booking pages.
We provide a search box for hotel, flight, car, cruises and tour; furthermore, we support three search box styles except tour.
We have 10 skin colors for this template, thus users can freely pick and change their skin color.
We support eight header styles for this template. You will be amazed to see how a simple header style can change the entire look of a website and give it a new unique personality.
We support seven inner start styles that offer different contents, colors and graphical changes to this template.
You will love the inner start styles.
We support seven footer styles that give remarkable graphical and color changes to this template.
This template provides a clear and complete view of the dashboard pages, which are very modern, as they cover all the aspects of a travel-based website. All account pages are available in three unique body structures and color schemes.
We added new a grid system for intermediate small devices(≥481px and < 768px).
We have several colored menu styles that include blue, yellow, green and skin-colored styles.
Please check shortcode-dropdowns.html.
<li class="menu-item-has-children menu-color-blue">
We added a sticky menu to this template which displays when one scrolls down the website. Users, however, can enable or disable it anytime.
The sticky menu bar is enabled by default, but it can be disabled by adding the code below before calling theme-scripts.js.
enableChaser = 0; //disable
We added an Ajax photo gallery.
To use this, add a URL which leads to a photo gallery and popup-gallery class.
<a href="ajax/slideshow-popup.html" class="hover-effect popup-gallery"><img width="270" height="161" alt="" src="images/shortcodes/listings/style01/hotel/1.png"></a>
We added a Google Map popup box.
To use this, add popup-box class and data-box attribute which describe latitude and longitude.
<a class="button btn-small yellow popup-map" href="#" data-box="48.856614, 2.352222">VIEW ON MAP</a>
Popup is a responsive lightbox & dialog script with focus on simple and clean.
There are 2 ways to use popup box.
<button class="soap-popupbox" data-target="#travelo-login">LOGIN</button> //Using button <a class="soap-popupbox" href="#travelo-login"> //Using a tag ... <div id="travelo-login"> ... </div>
We have three login pages, three coming soon pages, three 404 pages and three loading pages.
We support 100% original custom designed vector based icons and icon fonts for you.
There are more than 180 unique icons which you can use while creating your own versions of websites. You will love the cleanliness and clarity of these icons.
See index.html for the page preloader.
Add the following code to insert the preloader.
<!-- Javascript Page Loader -->
<script type="text/javascript" src="js/pace.min.js" data-pace-options='{ "ajax": false }'></script>
<script type="text/javascript" src="js/page-loading.js"></script>
If you want to change the contents or style of the preloader page, please customize js/page-loading.js file.
We have parallax background function.
You can see a blue colored map background that has parallax function in several pages.
Just add the following code to include this function.
<div class="parallax" data-stellar-background-ratio="0.5">
We support css3 animation effects. Visit http://daneden.github.io/animate.css to see how animation effects work.
Please see the code below.
<div class="animated" data-animation-type="bounce" data-animation-duration="1" data-animation-delay="0.3"></div>
- data-animation-type: Animation effect name
- data-animation-duration: Animation duration
- data-animation-delay: Animation delay
Take a look at shortcode-animations.html to see detailed examples.
We support toggle & accordion with image.
Please see following code.
<div class="toggle-container with-image box" id="accordion1" data-image-animation-type="zoomIn" data-image-animation-duration="1">
<div class="panel style2">
<img src="{image_url}" alt="" />
<h4 class="panel-title">
<!-- panel title -->
</h4>
<div class="panel-collapse collapse" id="acc10">
<div class="panel-content">
<!-- panel content -->
</div>
</div>
</div>
...
</div>
- data-image-animation-type: Animation name
- data-image-animation-duration: Animation duration
Take a look at shortcode-accordions-toggles.html to see detailed examples.
Any Images or logos used in previews are not included in this item or final purchase and you need to contact authors to get permission in case you want to use them in your commercial or non-commercial projects.
We used http://placehold.it/ for placeholders.