Thank you for purchasing our Template. If you have any questions that are beyond the scope of this help file, please contact us. Thanks so much!
Note: Homepage <body> have an attribute id="home".
<header>
<div id="preHeader">
- phone, email and language switcher
</div>
<div id="mainHeader">
- main menu and logo
</div>
</header>
<section id="introHome">
- First screen: paralax, slider or video background
</section>
<div id="articles-home">
- Featured articles: news, events...
</div>
<section id="menuCard">
- Menu card sample
</section>
<div id="testimonials">
- Some testimonials
</div>
<section id="parallaxHome">
- Small text with a parallax background
</section>
<section id="aboutUs">
- More about your business here
</section>
<section id="reservation-wrapper">
- Booking information (video background)
</section>
<footer>
<section id="mainFooter">
- main footer (logo, widgets)
</section>
<div id="footerRights">
- copyright, social links
</div>
</footer>
<header>
<div id="preHeader">
- phone, email and language switcher
</div>
<div id="mainHeader">
- main menu and logo
</div>
</header>
<section id="page">
- main content here
</section>
<footer>
<section id="mainFooter">
- main footer (logo, widgets)
</section>
<div id="footerRights">
- copyright, social links
</div>
</footer>
This fully responsive template includes the Bootstrap 3.x grid system, a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases.
Rows (.row) are placed within a container (.container). Rows contain horizontal groups of columns (.col-*) and content is placed within columns. More information
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
4 main CSS files, stored in the folder /css/, are used in this theme:
There are 8 ready-to-use color schemes in 8 other CSS files:
The CSS files are separated into sections. If you would like to edit a specific section of the site, simply find the appropriate label in the table of content of the CSS file, and then scroll down until you find the appropriate style that needs to be edited.
/****************** GENERAL ******************/ #some css rules /****************** BOOTSTRAP ******************/ #some css rules /****************** HEADERS ******************/ #some css rules
The CSS files of the plugins, stored in the folders /js/plugins/plugin_name/, are loaded in the header tag of the html structure.
<!-- ================ CSS =============== --> <!-- Bootstrap --> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="https://getbootstrap.com/assets/css/docs.min.css"> <!-- Basic font --> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700"> <!-- Royal slider --> <link rel="stylesheet" href="js/plugins/royalslider/royalslider.css" media="all"> <link rel="stylesheet" href="js/plugins/royalslider/skins/minimal-white/rs-minimal-white.css" media="all">
The javascript files of the plugins, stored in the folders /js/plugins/plugin_name/, are loaded at the bottom of the html structure, before closing </body> tag.
The file /js/custom.js is the main javascript code of this template. This script executes general code and initializes the js plugins.
Some of these javascript files are required by the file /js/custom.js. The library Modernizr loads these javascript files before calling custom.js, only when all of these js files are loaded.
<!-- ============= Javascript =========== -->
<!-- JQuery -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<!-- Javascript loader -->
<script>
Modernizr.load({
load : [
// Bootstrap
'bootstrap/js/bootstrap.min.js',
// Media queries
'js/plugins/respond/respond.min.js',
// Cookies
'js/plugins/jquery-cookie/jquery-cookie.js',
// Isotope
'js/plugins/isotope/isotope.pkgd.min.js',
// Video player
'js/plugins/ytplayer/jquery.mb.YTPlayer.js',
// Animation
'js/plugins/appear/jquery.appear.min.js',
'js/plugins/easing/jquery.easing.1.3.min.js',
// Image layout
'https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/2.1.0/jquery.imagesloaded.min.js',
'js/plugins/imagefill/js/jquery-imagefill.js',
// Parallax
'js/plugins/parallax/js/jquery.stellar.min.js',
// Touch effects
'js/plugins/toucheeffect/toucheffects.js'
// ADD YOUR OWN JS FILES HERE
...
],
complete : function(){
// Custom JS and plugins init
// INITIALIZE YOUR OWN JS PLUGINS IN THIS FILE
Modernizr.load('js/custom.js');
}
});
</script>
Edit the function initialize in the file /js/custom.js
function initialize(id){
'use strict';
var locations = [
// ['Name', 'Address', Latitude, Longitude]
// Edit the existing location and add places if needed
['Red Bistro', 'Westminster London SW1A 0AA', '51.499887', '-0.124512'],
['location 2', 'my full address', '36.399795', '25.451858'],
['location 3', 'my full address', '36.399795', '25.451858']
];
...
}
There are 2 parallax effect on homepage: 1st is common to all index files and the 2nd, specific to the file index.html, in the first screen (fullscreen intro).
- To change the 1st background image, you can either replace the file /images/bg-parallax.jpg or edit the css rule #parallaxHome in the file /css/layout.css.
- To change the 2nd background image, you can either replace the file /images/slides/home/slide-2.jpg or edit the css rule #parallaxHomeMain in the file /css/layout.css.
The file index-video.html displays a fullscreen background video. Edit this file and replace the value of the property videoURL with the YouTube video ID of your own video:
<div class="player" data-property="{videoURL:'FOLHgoRcMHU', containment:'#introHome', showControls:false, autoPlay:true, loop:true, vol:50, mute:true, startAt:0, opacity:1, addRaster:false, quality:'default'}"></div>
All pages run a video as background of the reservation section (before the footer). Make the same changes in these files:
<div class="player" data-property="{videoURL:'FOLHgoRcMHU', containment:'#reservation-wrapper', showControls:false, autoPlay:true, loop:true, vol:50, mute:true, startAt:0, opacity:1, addRaster:false, quality:'default'}"></div>
Replace all images in the folder /images/ with your own pictures.
3 source files are provided in the folder /sources/: