Thanks for purchasing Nivin template. This documentation will give you an overview of the templates main features and how they can be customised to suit your requirements. This documentation assumes basic knowledge of HTML and CSS. We have endeavoured to make this documentation as comprehensive as possible, but understand that at times, you many need to contact us for additional support.
Check out some of features that we have in our templates. To know more about features of Nivin template, continue reading our documentation and check our available components.
Your template works on any device: desktop, tablet or mobile.
You can easily read, edit, and write your own code, or change everything.
There is a bunch of useful and necessary elements for editing template.
You can find our code well organized, commented and readable.
As you can see, we provided a comprehensive documentation.
When you purchase this template, you'll freely receive future updates.
Once you bought one of the templates, you can see a folder with several files and sub-folders. You can read description of some important files in continue.
Here we have a home-food.html page to get start with. You can read the code inside home-food.html to become familiar with code or you can just see HTML structure of same file as follow:
<!DOCTYPE html><html> <!-- Head --> <head> <!-- Default Meta Tags --> <!-- Favicon --> <!-- Other CSS Files --> <!-- Template CSS File --> <link rel="stylesheet" href="css/main.css"> <!-- Google Fonts --> </head> <!-- Body --> <body> <!-- Loader Animation --> <div id="preloader"> ... </div> <!-- Main Wrapper --> <section id="main-wrapper"> <!-- Page Navigation --> <div id="main-nav"> ... </div> <!-- Hero Slider --> <div id="hero-wrapper"> ... </div> </section> <!-- About Section --> <section id="about"> <!-- Section Header --> <div> ... </div> <!-- Section Content --> <div> ... </div> </section> <!-- About Modal --> <div id="modal-about"> ... </div> <!-- Portfolio Section --> <section id="portfolio"> <!-- Section Header --> <div> ... </div> <!-- Section Content --> <div> ... </div> </section> <!-- Portfolio Modal --> <div id="modal-portfolio"> ... </div> <!-- Gallery Section --> <section id="gallery"> <!-- Section Header --> <div> ... </div> <!-- Section Content --> <div> ... </div> </section> <!-- Accordion Section --> <section id="accordion"> <!-- Section Header --> <div> ... </div> <!-- Section Content --> <div> ... </div> </section> <!-- Blog Section --> <section id="blog"> <!-- Section Header --> <div> ... </div> <!-- Section Content --> <div> ... </div> </section> <!-- Blog Modal --> <div id="modal-blog"> ... </div> <!-- Reference Section --> <div id="reference"> <!-- Section Content --> <div> ... </div> </div> <!-- Request Section --> <section id="request"> <!-- Section Header --> <div> ... </div> <!-- Section Content --> <div> ... </div> </section> <!-- Contact Section --> <section id="contact"> <!-- Section Header --> <div> ... </div> <!-- Section Content --> <div> ... </div> </section> <!-- Info Section --> <section id="info"> <!-- Section Content --> <div> ... </div> </section> <!-- Google Map Section --> <div id="google-map"> <div id="map"></div> </div> <!-- Footer --> <footer> <!-- Footer Content --> <div> ... </div> </footer> <!-- Google Maps Script --> <script src="https://maps.googleapis.com/maps/api/js?key=<YOUR API KEY>"></script> <!-- Other JS Files --> <!-- Template JS File --> <script src="js/main.js"></script> <!-- Google Analytics Script --> </body></html>
Now that you probably understand basic structure of our templates, it's time to learn purpose of every element and class. We are going to describe into details how every element is behaving and why, so you can make your desire changes.
Replace <h2> tag under 'Logo' with tag: <img src="img/logo/food/main-logo.png" class="img-fluid" alt="Nivin Food Logo">, if you want logo picture.
<!-- Logo --><div class="logo single-page-nav"> <a href="index.html" target="_blank" class="navbar-brand white external"> <h2>Nivin <span class="color">Food</span></h2> <!-- Replace <h2> above with this one: <h2><img src="img/logo/food/main-logo.png" class="img-fluid" alt="Nivin Food Logo"></h2>, if you want logo picture. --> </a></div>
First thing you see when page is loaded is main slider which contains slides with headers. We are using fixed background image that can be seen behind all slides. For Hero Slider we are using Owl Carousel 2. To check out more Hero Slider examples, visit: Components - Hero Sliders
<!-- Main Wrapper --><section id="main-wrapper" class="padall0 image-to-background" data-overlay-black="5"> <img src="img/hero-slider/food/main-slider.jpg" alt="Hero Slider Background"> <!-- Hero Slider --> <div id="hero-wrapper"> <!-- Carousel --> <div class="hero-slider owl-carousel owl-theme"> <!-- Slide One --> <div class="container"> <div class="center-hero-text"> <h2 class="carousel-big">Dining Revolution <span class="carousel-deco animated transparent">CreativeFood</span></h2> <div class="single-page-nav"><a href="#about" class="btn btn-empty margintop30" role="button">OUR SERVICE</a></div> </div> </div> <!-- Slide Two --> <div class="container"> <div class="center-hero-text"> <h2 class="carousel-big">Experience Food <span class="carousel-deco animated transparent">&Ambience</span></h2> <div class="single-page-nav"><a href="#contact" class="btn btn-empty margintop30" role="button">RESERVE YOUR TABLE</a></div> </div> </div> <!-- Slide Three --> <div class="container"> <div class="center-hero-text"> <h2 class="carousel-big">Food for Senses<span class="carousel-deco animated transparent">Enjoy!</span></h2> <div class="single-page-nav"><a href="#portfolio" class="btn btn-empty margintop30" role="button">DISCOVER OUR MENU</a></div> </div> </div> </div><!-- END Carousel --> <!-- Arrow Down to First Section --> <div class="hero-slider-btn single-page-nav"><a href="#about" class="current"> <span class="fa fa-angle-down"></span></a> </div> </div><!-- END Hero Slider --></section><!-- END Main Wrapper -->
For background images, we are using class .image-to-background that converts image from <img> tag into background-image. <img> tag has to be child of a element with class .image-to-background in order to work. To change background image on Hero Slider, change path of image in <img src="img/hero-slider/food/hero-slider.jpg" alt="Hero Slider Background">. Also, we are using dark overlay on background image. You can set white or black overlay and set opacity of it using values from 0 to 10.
For example:
<section id="main-wrapper" class="padall0 image-to-background" data-overlay-black="5"> <img src="img/your-path/image-name.jpg" alt="Hero Slider Background"></section>
Conversion from image to background image also works with scrsets.
After Main Wrapper, page is separated into sections. Most of the sections have headers that contain titles and subtitles, and content area where are paragraphs, sliders, images, etc. For example, here is a structure of About Section.
<!-- About Section --><section id="about"> <!-- Section Header --> <div class="title header-line"> <!-- Section Subtitle --> <small>...</small> <!-- Section Title --> <div><h1>...</h1></div> </div> <!-- Section Content --> <div class="container"> <div class="row"> <div class="col-lg-10 offset-lg-1"> ... </div> </div> </div></section>
Almost every section has button that, when clicked, opens modal which can contain blogs, sliders, texts, menus, etc., depending on which section button is clicked. For example, here is a code of About Modal.
<!-- About Modal --><div id="modal-about" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="modal-about" aria-hidden="false"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-body"> <!-- Dismiss Modal Button Top --> <div class="close-btn-wrapper"> <div class="close-btn" data-dismiss="modal" aria-hidden="true"></div> </div> <section class="padall0"> <div class="container"> <!-- Modal Title --> <div class="title header-line padtop30"> <div><h1>...</h1></div> </div> <!-- Modal Content --> <div class="row padbottom60"> ... </div> </div> </section> <!-- Modal Contact --> <div> ... </div> <!-- Dismiss Modal Button Bottom --> <div class="close-btn-wrapper"> <div class="close-btn" data-dismiss="modal" aria-hidden="true"></div> </div> </div> </div> </div></div>
Same as for Hero Slider, we are using Owl Carousel 2 for all sliders on Nivin template. To check out more Sliders examples, visit: Components - Sliders
To use Owl Carousel, you need to include .css and .js files. After that it's easy. Just add classes .owl-carousel and .owl-theme on outer <div> block. Then, on every inner <div> blocks add class .item-wrapper, and inside of every inner <div> block add your image:
<div class="owl-carousel owl-theme"> <div class="item-wrapper"> <img src="img/your-path/image-name.jpg" alt="Add your description"> </div> <div class="item-wrapper"> <img src="img/your-path/image-name.jpg" alt="Add your description"> </div></div>
On Nivin template, galleries behave like modals. When opened, selected gallery starts slide show of images inside of that gallery. Or, you can have one gallery where all images are showing and when one image is clicked, slide show starts of all images. For example, here is "Food Gallery" structure. To check out more Galleries examples, visit: Components - Galleries
Images in galleris are links, and first link has child <img> element which behaves like background-image.
If you want text insted of button as overlay, you can add class .text for cool style and animation next to .grid class. And if you don't want padding between images, also add class .no-pad.
<!-- List of Galleries --><ul class="grid"> <li class="halfbox"> <!-- Here is your first image in gallery --> <a href="img/your-path/image-name-1.jpg" class="image-to-background" data-imagelightbox="a" data-ilb2-caption="Food Gallery Photo 1"> <!-- Here is your image that is showing on page, not in gallery --> <img src="img/your-path/image-name-1.jpg" alt="Some desc"> <div class="overlay-wrapper"> <div class="overlay-inner"> <div class="center"> <!-- For adding title or description to gallery, replace <div> block below with: <h3>Food Gallery</h3><p>Description of gallery</p>. --> <div class="btn btn-full-full">FOOD GALLERY</div> </div> </div> </div> </a> <a href="img/your-path/image-name-2.jpg" data-imagelightbox="a" data-ilb2-caption="Food Gallery Photo 2"></a> <a href="img/your-path/image-name-3.jpg" data-imagelightbox="a" data-ilb2-caption="Food Gallery Photo 3"></a> <a href="img/your-path/image-name-4.jpg" data-imagelightbox="a" data-ilb2-caption="Food Gallery Photo 4"></a> </li></ul>
Imagelightbox is plugin we use for gallery slide show. To add new gallery you need to change value of attribute data-imagelightbox (eg. "g") in link, because each letter represents one gallery, and every image with that letter will be in that gallery. After that, you have to add code in main.js. Here is example how would code looked if you had seven galleris:
$('a[data-imagelightbox="a"],'+ 'a[data-imagelightbox="b"],'+ 'a[data-imagelightbox="c"],'+ 'a[data-imagelightbox="d"],'+ 'a[data-imagelightbox="e"],'+ 'a[data-imagelightbox="f"],'+ 'a[data-imagelightbox="g"]').imageLightbox({ arrows: true, button: true, caption: true, overlay: true, quitOnDocClick: false, lockBody: true});
Content in Accordions Section are accordions/tabs. When screen width is less than 768px, titles behave like accordions, but when screen witdh is 768px or widther, they behave like tabs. This transition between accordions and tabs was possible with special script files, responsiveAT.js and jquery.responsive-dom.js. To check out more Accordions/Tabs examples, visit: Components - Accordions
<div id="accordion-tab" class="accordion-wrapper"> <!-- Accordions Titles --> <div id="tabsContainer" class="tabsContainer"> <div class="tabOuter col-md-4"> <a href="#tab1" data-target="#tab1" data-toggle="collapse" aria-expanded="false" class="tabToMove expandTab tabStart"> <div class="tabInner">...</div> </a> </div> <div class="tabOuter col-md-4"> <a href="#tab2" data-target="#tab2" data-toggle="collapse" aria-expanded="false" class="tabToMove expandTab"> <div class="tabInner">...</div> </a> </div> <div class="tabOuter col-md-4"> <a href="#tab3" data-target="#tab3" data-toggle="collapse" aria-expanded="false" class="tabToMove expandTab"> <div class="tabInner">...</div> </a> </div> </div> <!-- Accordions Content --> <div id="tabsContentContainer" class="tabsContentWrapper"> <div class="singleTabWrapper contentToMove"> <div class="tabMoveHere" data-tab="#tab1"></div> <div id="tab1" class="singleContentOuter collapse"> <div class="singleContentInner"> <div class="singleContent"> ... </div> </div> </div> </div> <div class="singleTabWrapper contentToMove"> <div class="tabMoveHere" data-tab="#tab2"></div> <div id="tab2" class="singleContentOuter collapse"> <div class="singleContentInner"> <div class="singleContent"> ... </div> </div> </div> </div> <div class="singleTabWrapper contentToMove"> <div class="tabMoveHere" data-tab="#tab3"></div> <div id="tab3" class="singleContentOuter collapse"> <div class="singleContentInner"> <div class="singleContent"> ... </div> </div> </div> </div> </div></div>
You can change position of tabs by changing value of tabsPosition attribute in main.js file. Options are "left" and "right", but if you don't want to aling on either side, just remove that attribute from code. To see all options of accordions, take a look at responsiveAT.js file.
$('#accordion-tab').responsiveAT({ header: '#main-nav', headerFixedStop: true, scrollOffset: 120, customTabOpen: true, tabScroll: true, contentScroll: true, hashTrack: true, hashTabScroll: true, tabsPosition: 'left'});
If you want to use Google Map the same way we use in our templates, you will need to create Google Maps JavaScript API key and replace "<YOUR API KEY>" with your key. Here is a link to tutorial on how to create Maps JavaScript API key.
Section for Google Map is made of just one div block with class that calls it. If you want to make your own map, you can visit Map Style with Google and style it how you desire, or you can find already styled maps here: SnazzyMaps. Here we have two examples of maps we use in our templates: Components - Contact.
With this code in .html file we call Google Map.
To implement map with your style, just copy map JSON code and replace it with current "data-map-style", in .html file.
<!-- Google Map Section --><section id="google-map" class="google-map"> <div id="map" class="map" data-map-style='[your map style]'></div></section>
To change infos of place you point at map, edit code in main-template-name.js
<-- Here is content that pops up when you click on pin -- >var contentString = '<div class="map-content">'+ '<h3 class="map-heading">...</h3>'+ '<h4 class="map-address">...</h4>'+ '</div>';
Here is example how you call Google Map:
<div id="map" class="map" data-map-style='[{"featureType": "administrative", "elementType": "labels.text.fill", "stylers": [{"color": "#6195a0"} ] }, {"featureType": "administrative.province", "elementType": "geometry.stroke", "stylers": [{"visibility": "off"} ] }, {"featureType": "landscape", "elementType": "geometry", "stylers": [{"lightness": "0"}, {"saturation": "0"}, {"color": "#f5f5f2"}, {"gamma": "1"} ] }, {"featureType": "landscape.man_made", "elementType": "all", "stylers": [{"lightness": "-3"}, {"gamma": "1.00"} ] }, {"featureType": "landscape.natural.terrain", "elementType": "all", "stylers": [{"visibility": "off"} ] }, {"featureType": "poi", "elementType": "all", "stylers": [{"visibility": "off"} ] }, {"featureType": "poi.park", "elementType": "geometry.fill", "stylers": [{"color": "#bae5ce"}, {"visibility": "on"} ] }, {"featureType": "road", "elementType": "all", "stylers": [{"saturation": -100 }, {"lightness": 45 }, {"visibility": "simplified"} ] }, {"featureType": "road.highway", "elementType": "all", "stylers": [{"visibility": "simplified"} ] }, {"featureType": "road.highway", "elementType": "geometry.fill", "stylers": [{"color": "#fac9a9"}, {"visibility": "simplified"} ] }, {"featureType": "road.highway", "elementType": "labels.text", "stylers": [{"color": "#4e4e4e"} ] }, {"featureType": "road.arterial", "elementType": "labels.text.fill", "stylers": [{"color": "#787878"} ] }, {"featureType": "road.arterial", "elementType": "labels.icon", "stylers": [{"visibility": "off"} ] }, {"featureType": "transit", "elementType": "all", "stylers": [{"visibility": "simplified"} ] }, {"featureType": "transit.station.airport", "elementType": "labels.icon", "stylers": [{"hue": "#0a00ff"}, {"saturation": "-77"}, {"gamma": "0.57"}, {"lightness": "0"} ] }, {"featureType": "transit.station.rail", "elementType": "labels.text.fill", "stylers": [{"color": "#43321e"} ] }, {"featureType": "transit.station.rail", "elementType": "labels.icon", "stylers": [{"hue": "#ff6c00"}, {"lightness": "4"}, {"gamma": "0.75"}, {"saturation": "-68"} ] }, {"featureType": "water", "elementType": "all", "stylers": [{"color": "#eaf6f8"}, {"visibility": "on"} ] }, {"featureType": "water", "elementType": "geometry.fill", "stylers": [{"color": "#c7eced"} ] }, {"featureType": "water", "elementType": "labels.text.fill", "stylers": [{"lightness": "-49"}, {"saturation": "-53"}, {"gamma": "0.79"} ] } ]'></div>
In Nivin Wedding we use script that countdowns to your set date.
With this code in .html file we call countdown timer.
<!-- Countdown --><div class="countdown"> <div id="timer"> <div id="days"></div> <div id="hours"></div> <div id="minutes"></div> <div id="seconds"></div> </div></div>
In order to change set date, replace date in main-wedding.js file:
var endTime = new Date('14 February 2021 00:00:00 GMT+01:00');
Here are styles for our headings. Keep in mind to resize window width to see differences in font size, weight, etc.
On this template we are using <h1>, <h2>, <h3> and <h4> tags for headings, and <small> tag for subtitles.
<h1>Heading 1</h1><h2>Heading 2</h2><h3>Heading 3</h3><h4>Heading 4</h4> <small>Small text<small>
For decoration font we use Grand Hotel font for Food and Business templates, and Pacifico font for Wedding. Headings with .deco-font class:
<h1 class="deco-font">Heading 1</h1><h2 class="deco-font">Heading 2</h2><h3 class="deco-font">Heading 3</h3><h4 class="deco-font">Heading 4</h4><h1 class="deco-font-2">Heading 1</h1><h2 class="deco-font-2">Heading 2</h2><h3 class="deco-font-2">Heading 3</h3><h4 class="deco-font-2">Heading 4</h4>
Styles for other textual elements.
<p>Paragraph with no class.</p><p class="serif">Paragraph with .serif class.</p> <p class="font-xs">Paragraph with .font-xs class.</p><p class="font-sm">Paragraph with .font-sm class.</p><p class="font-nrml">Paragraph with .font-nrml class.</p><p class="font-md">Paragraph with .font-md class.</p><p class="font-lg">Paragraph with .font-lg class.</p><p class="font-xl">Paragraph with .font-xl class.</p><p class="font-xxl">Paragraph with .font-xxl class.</p> <p class="fontweight100">Paragraph with .fontweight100 class.</p><p class="fontweight300">Paragraph with .fontweight300 class.</p><p class="fontweight400">Paragraph with .fontweight400 class.</p><p class="fontweight700">Paragraph with .fontweight700 class.</p><p class="fontweight900">Paragraph with .fontweight900 class.</p>
Paragraph with no class.
Paragraph with .serif class.
Paragraph with .font-xs class.
Paragraph with .font-sm class.
Paragraph with .font-nrml class.
Paragraph with .font-md class.
Paragraph with .font-lg class.
Paragraph with .font-xl class.
Paragraph with .font-xxl class.
Paragraph with .fontweight100 class.
Paragraph with .fontweight300 class.
Paragraph with .fontweight400 class.
Paragraph with .fontweight700 class.
Paragraph with .fontweight900 class.
Each template has its own main color. If you want to change it, you simply need to change the HEX color code in the .css files and you are good to go. We also provide classes for inverted colors of bodyground, and example for inverse template is Food-Inverse.
For every color you choose, you will need four more tints and shades of that color for hover element state (mostly). Here are some of examples of colors on Nivin Food, Wedding and Business templates:
| Main Color | Subtitle on main slider | Hover on buttons and links | Selection (ctrl+a) | Hover on form elements |
|---|---|---|---|---|
| #3cb371 | #90ee90 | #2e8b57 | #62c28d | #8ad1a9 |
| #ff1744 | #ff4a6d | #e5143d | #ff4569 | #ff738e |
| #2979ff | #71a6ff | #246ce5 | #5393ff | #7eaeff |
Forms are inside of <from> tag, with input elements for name, e-mail and reservation date, textarea for users message, and select elements for number of seats and reservation time.
To make it work you have to put your email address in a file called "contact_me.php" located in "/bin" folder. Wedding and Business Templates use "contact_me-simple.php" also in "/bin" folder.
<form> <div class="control-group name"> <div class="controls "> <input type="text" class="form-control" placeholder="Your Name" id="name" required/> </div> </div> <div class="control-group mail"> <div class="controls"> <input type="email" class="form-control" placeholder="Your Email" id="email" required/> </div> </div> <div class="control-group message"> <div class="controls"> <textarea rows="3" cols="100" class="form-control" placeholder="Message" id="message" required minlength="5" maxlength="999" style="resize:none"></textarea> </div> </div></form>
Patterns are used when you don't want to use simple color for background. In our template we have 8 different patterns you can use, or you can add yours.
<div class="dark-wood"></div><div class="light-wood"></div><div class="blackboard"></div><div class="lightboard"></div><div class="binding"></div><div class="broken"></div><div class="dotted"></div><div class="skewed"></div>
There are a lot of helper classes you can use in this template and, of course, you can make your own. Here are some examples, but you can see all in main.css files.
| CSS | Description | Example |
|---|---|---|
| .bg-(color) | Equals to background-color: (hex-color); width: 100%; height: auto; | .bg-white |
| .padtop(value) | Equals to padding-top: (value)px; | .padtop40 |
| .padbottom(value) | Equals to padding-bottom: (value)px; | .padbottom60 |
| .margintop(value) | Equals to margin-top: (value)px; | .margintop80 |
| .marginbottom(value) | Equals to margin-bottom: (value)px; | .marginbottom20 |
| .animated | Equals to transform: translate3d(0, 0, 0); | |
| .solid | Equals to opacity: 1; | |
| .transparent | Equals to opacity: 0; | |
| .img-fluid-max | Equals to display: block; height: auto; width: 100%; | |
| .image-to-background | Converts image into background-image | |
| .item-wrapper | Wrapper for items in sliders | |
| .carousel-big | Style for Hero Slider title | |
| .carousel-deco | Style for Hero Slider small title | |
| .inverse | For inverse colors (put it as parent of element you want to inverse) | |
| .drop-cap | First letter has special style | |
| .deco-line-a | Line before element | |
| .deco-line-b | Line after element | |
| .deco-star-b-left | Star icon before element | |
| .source | Style for authors | |
| .blockquote | Quote icons on element | |
| .tel-style | Style for mobile number in titles | |
| .tel-static | Style for mobile number in other elements | |