Modern Estate Template Documentation

Preparation
Before you proceed with HTML Multipurpose Template installation, you need to prepare. It is recommended to follow steps, listed below:

Software

We recommend that you download all the required software to edit Website Template. Software Required is listed at template preview page.

Technical requirements might differ depending on exact template, therefore we will list the most basic ones:

First, you'll need proper unzipping software for password-protected sources_grand_vector.zip package extracting. You may use WinZip 9+ (Windows) and Stuffit Expander 10+ (Mac). This is a mandatory software.
You might also require Adobe Photoshop (v. CS3 or higher). It is used for source .PSD files editing and is needful in case of graphic design changes performing or template images editing.
You should also use code editor, i. e. Sublime Text, Notepad++, Atom, etc. for template files source code editing.
For files uploading to server FTP manager will be also required, like FileManager at your hosting control panel or desktop applications, such as Total Commander, FileZilla, CuteFTP, etc.

Hosting

You can just run index.html file directly from your site folder, but it won't let you explore all template functionality. You should upload template to hosting server in order to display a fully working website correctly.

In case you have existing server already, please check if it meets Website Template requirements, listed at template preview page. For most templates PHP 5.2+ version is the only requirement.

You may also install Website Template to your computer locally by using localhost. In order to set up local server you may use WAMP, AppServ, MAMP or any similar software. All of them are installed same as regular application.

Feel free to check the following tutorials on how to set up local server:

Template structure
This section includes information on complete template and its separate files structure.

Package structure

After HTML Website Template package extracting you'll see the following files structure:

Documentation – includes template's documentation files (on template editing and setup).
- documentation.html - main documentation file. Includes link to online documentation you are currently reading.
Screenshots - includes template's sceenshots. Not to be used at live site.
Site - includes template's pages as .html files.
- bat - includes all .php scripts, used in template.
- audio - includes all audio files, used in template.
- css - includes all .css files, used in template.
- fonts - includes all custom typography and iconic fonts, used in template.
- images - includes all images, used in .html files.
- js - includes JavaScript libraries and jQuery plugins.
- video - includes all audio files, used in template.
sources - contains source files.
- psd - includes .psd Adobe Photoshop files.
- sass - includes .scss SASS files, used in template.
- jade - includes .jade Jade files, used in template.
info.txt - includes information on a password-protected "sources" folder.

HTML Structure

HTML Website Template .html pages structure is built on the following principle:

<!DOCTYPE html>
<html lang="en">
<head>

  <!-- Your Stylesheets, Core Scripts (jQuery etc) & Title -->
  ...

</head>
<body>

<!-- Page -->
<div class="page">
  <!-- Header -->
    <header class="page-header">

    ...

  </header>

  <!-- Page Content -->
  <main class="page-content">
    <section>
      <div class="container">

      ...

      </div>
    </section>
  </main>

  <!-- Page Footer -->
  <footer class="page-footer">
    <div class="container">

    ...

    </div>
  </footer>
</div>

<!-- Java script -->
<script src="js/core.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>

CSS Structure

All HTML Website Templates styles are located in style.css file.

Code is commented according to CSSDoc standard.

Structure of style.css file is built on the following principle:

Bootstrap Framework
...
Bootstrap Toolkit Styles
...
Bootstrap Toolkit Plugins Styles
...

Template customization

Smooth scroll configuration for Windows

HTML Website Templates include built-in smooth scroll for Chrome browser in Windows OS. In order to activate it, just add .smoothscroll class to html tag.

As an option, you can also activate smooth scrolling for all platforms

<html lang="en" class="smoothscroll-all">

Template items animation on page scroll

HTML Website Templates use Wow.js extension and Animate.css css library for the implementation of scroll animation. In order to enable scroll animation for entire page elements you should add .wow-animation class to html tag.

<html lang="en" class="wow-animation"

You should also specify appropriate animation class for target item. Click here to check the list of available classes and live examples.

Components

All of standard components are listed on the official Bootstrap framework page.

Modules

TM Grid System

HTML Website Templates include Flex-based TM Grid system, that is especially prepared. This system provides you with more complex and flexible solution,comparing to Bootstrap Grid. TM Grid class naming format is similar to Bootstrap Grid one for usability.

Table below presents various aspects of TM Grid system default way of working:

	XXS Devices (< 480px)	XS Devices (≥ 480px)	SM Devices (≥ 768px)	MD Devices (≥ 992px)	LG Devices (≥ 1200px)	XL Devices (≥ 1800px)
Grid behaviour	Instant flow	Collapsed to start, horizontal above breakpoints
Container width	300~450px, Fluid		750px	970px	1200px	1800px
Class prefix	.cell-	.cell-xs-	.cell-sm-	.cell-md-	.cell-lg-	.cell-xl-
columns #	1	12
Columns width	100%	~25 → ~37px	~62px	~81px	~97px	~150px
Gutter width	30px (2 x15px, at both column sides)
Nesting	Yes
Offsets	No	Yes
Columns output order control	No	Yes
Horizontal alignment control	No	Yes
Vertical alignment control	No	Yes
Inverting	No	Yes

Please note: grid behaviour and its corresponding breakpoints may differ from template to template.

Columns nesting

In order to implement columns nesting in Grid system, add a new .range and target .cell-*-* columns set into existing column.

Level 1: .cell-*-9

Level 2: .cell-*-6

Level 1: .cell-*-1

For instance,

<div class="range">
  <div class="cell-md-9">
  Level 1: .cell-md-9
    <div class="range">
      <div class="cell-md-6">
        Level 2: .cell-md-6
      </div>
      <div class="cell-md-6">
        Level 2: .cell-md-6
      </div>
    </div>
  </div>
</div>

Please note: nested columns width calculation is based on the parent column width instead of main container.

Columns offset

In order to add certain column offset you should use corresponding .cell-*-preffix-* class.

.cell-*-4

For example,

<div class="range">
  <div class="cell-md-4 cell-md-preffix-4">
  Level 1: .cell-md-4
  </div>
</div>

Columns inverting

In order to invert columns display order you should add corresponding .range-* or .range-*-reverse class into parent .range class:

.range-*-reverse

inverts columns display order, starting from dimensions specified.
.range-*

returns regular columns display order in case .row-*-reverse was applied to lower dimension.

For example,

<div class="range range-xs-reverse range-sm">
  <div class="cell-md-4">
    Level 1: .cell-md-4
  </div>
  <div class="cell-md-4">
    Level 1: .cell-md-4
  </div>
  <div class="cell-md-4">
    Level 1: .cell-md-4
  </div>
</div>

Gutter disabling

In order to disable columns gutter you should just add .range-no-gutter class to parent container with .range class.

For example,

<div class="range range-no-gutter">
  <div class="cell-md-6">
    Level 1: .cell-md-6
  </div>
  <div class="cell-md-6">
    Level 1: .cell-md-6
  </div>
</div>

Columns vertical alignment management

Use one of the following classes to align columns vertically:

.range-*-middle

aligns all 1st level columns to the middle;

.cell-*-6
	.cell-*-6

For example,

<div class="range range-md-middle">
  <div class="cell-md-6">
    Level 1: .cell-md-6
  </div>
  <div class="cell-md-6">
    Level 1: .cell-md-6
  </div>
</div>

.range-*-bottom

pushes all 1st level columns to the bottom;

.cell-*-6

	.cell-*-6

For example,

<div class="range range-md-bottom">
  <div class="cell-md-6">
    Level 1: .cell-md-6
  </div>
  <div class="cell-md-6">
    Level 1: .cell-md-6
  </div>
</div>

.range-*-top

pushes all 1st level columns to the top;

.cell-*-6	.cell-*-6

For example,

<div class="range range-md-top">
  <div class="cell-md-6">
    Level 1: .cell-md-6
  </div>
  <div class="cell-md-6">
    Level 1: .cell-md-6
  </div>
</div>

.cell-*-middle

aligns target column to the middle;

.cell-*-6
	.cell--6.cell--middle

For example,

<div class="range">
  <div class="cell-md-6">
    Level 1: .cell-md-6
  </div>
  <div class="cell-md-6 cell-md-middle">
    Level 1: .cell-md-6
  </div>
</div>

.cell-*-top

aligns target column to the top;

.cell-*-6	.cell--6.cell--top

For example,

<div class="range">
  <div class="cell-md-6">
    Level 1: .cell-md-6
  </div>
  <div class="cell-md-6 cell-md-top">
    Level 1: .cell-md-6
  </div>
</div>

.cell-*-bottom

aligns target column to the bottom.

.cell-*-6

	.cell--6.cell--bottom

For example,

<div class="range">
  <div class="cell-md-6">
    Level 1: .cell-md-6
  </div>
  <div class="cell-md-6 cell-md-bottom">
    Level 1: .cell-md-6
  </div>
</div>

Columns horizontal alignment management

Use of the following classes to align columns horizontally:

.range-*-left

aligns 1st level columns to the left;

.cell-*-4

For example,

<div class="range range-md-left">
  <div class="cell-md-4">
    Level 1: .cell-md-4
  </div>
  <div class="cell-md-4">
    Level 1: .cell-md-4
  </div>
</div>

.range-*-center

aligns 1st level columns to the middle;

.cell-*-4

For example,

<div class="range range-md-center">
  <div class="cell-md-4">
    Level 1: .cell-md-4
  </div>
  <div class="cell-md-4">
    Level 1: .cell-md-4
  </div>
</div>

.range-*-right

aligns 1st level columns to the right;

.cell-*-4

For example,

<div class="range range-md-right">
  <div class="cell-md-4">
    Level 1: .cell-md-4
  </div>
  <div class="cell-md-4">
    Level 1: .cell-md-4
  </div>
</div>

.range-*-justify

aligns 1st level columns by width;

.cell-*-4

For example,

<div class="range range-md-justify">
  <div class="cell-md-4">
    Level 1: .cell-md-4
  </div>
  <div class="cell-md-4">
    Level 1: .cell-md-4
  </div>
</div>

.range-*-around

aligns 1st level columns by width with additional padding at the edges.

.cell-*-4

For example,

<div class="range range-md-around">
  <div class="cell-md-4">
    Level 1: .cell-md-4
  </div>
  <div class="cell-md-4">
    Level 1: .cell-md-4
  </div>
</div>

Columns order display management

In order to change grid items display order you should use .cell-RS-push-X class, where RS stands for target dimensions, X stands for order. For example,

<div class="range">
  <div class="cell-md-4 cell-md-push-2">
    Level 1: .cell-md-4
  </div>
  <div class="cell-md-4 cell-md-push-1">
    Level 1: .cell-md-4
  </div>
</div>

Please note: in case of using classes, responsible for columns display order management, you must determine each row element order.

Extensions

RD Mailform

You can use any form elements, presented on the Components > Toolkit Components > Form Elements page, for implementing custom forms with a custom set of fields. You can also use any Bootstrap form-related elements that can be found on the Bootstrap Official Website , and Bootstrap Grid and Flex Grid elements for implementing custom form structure.

Attention: in RD Mailform, <input type="email" name="email"> is required for the correct functioning of the form. If the field is not present, you will get an error, when submitting a form.

Basic marking for creating a standard form looks the following way:

<form data-form-output="form-output-global" method="post"
                action="bat/rd-mailform.php" class="rd-mailform">
    <div class="form-group">
        <label for="contact-us-name" class="form-label form-label-outside">Name:</label>
        <input id="contact-us-name" type="text" name="name"
                data-constraints="@Required" class="form-control">
    </div>
    <div class="form-group">
        <label for="contact-us-email" class="form-label form-label-outside">E-Mail:</label>
        <input id="contact-us-email" type="email" name="email"
                data-constraints="@Required @Email" class="form-control">
    </div>
    <div class="form-group">
        <label for="contact-us-message" class="form-label form-label-outside">Message:</label>
        <textarea id="contact-us-message" name="message"
                data-constraints="@Required" class="form-control"></textarea>
    </div>
    <div class="group-sm text-center text-lg-left offset-top-30">
        <button type="submit" class="btn btn-primary">Send</button>
        <button type="reset" class="btn btn-default">Reset</button>
    </div>
</form>

Mailform type setup

RD Mailform supports 3 mailform types:

Contact form

contact;
Order form

order;
Subscription form

subscribe;

To change the contact form type, add to HTML marking of the target form 'data-form-type' attribute, where you should specify the form type as the value:

<form class='rd-mailform' data-form-type="contact" method="post" action="bat/rd-mailform.php">
    ...
</form>

Form fields setup

RD Mailform supports the following field the following field types:

Text field:

...
<div class="form-group">
    <label for="contact-us-name" class="form-label form-label-outside">Name:</label>
    <input id="contact-us-name" type="text" name="name"
            data-constraints="@Required" class="form-control">
</div>
...

Date and time selection menu. This menu supports 3 display types:

Time selection

time;
Date selection

date;
Time and date selection

datetime.

To choose one of the display types, please use the 'date-time-picker' with the necessary value:

...
<div class="form-group">
 <label for="rd-mailform-time" class="form-label form-label-outside">Time:</label>
     <input id="rd-mailform-time" type="text" name="time"
date-time-picker="time" class="form-control">
</div>
...

Simple selection menu;

...
<div class="form-group">
    <label for="select" class="form-label form-label-outside">Gender:</label>
    <select id="select" data-placeholder="Select an option"
            data-minimum-results-for-search="Infinity" class="form-control">
        <option>Male</option>
        <option>Female</option>
    </select>
</div>
...

Selection menu with subcategories;

...
<div class="form-group">
    <select data-placeholder="Select an option"
            data-minimum-results-for-search="Infinity" class="form-control select-filter">
        <optgroup label="Category 1">
            <option>Demo Item 1-1</option>
            <option>Demo Item 1-2</option>
            <option>Demo Item 1-2</option>
        </optgroup>
        <optgroup label="Category 2">
            <option>Demo Item 2-1</option>
            <option>Demo Item 2-2</option>
            <option>Demo Item 2-3</option>
        </optgroup>
    </select>
</div>
...

Textarea:

...
<div class="form-group">
    <label for="message" class="form-label form-label-outside">Message:</label>
    <textarea id="message" name="message" data-constraints="@Required"
                                            class="form-control"></textarea>
</div>
...

Form fields validation setup

For dynamic validation of the form fields the mailform uses the Regula library. A link to Regula documentation can be found in Credits section.

Information messages setup

RD Mailform supports custom messages that inform about successful/unsuccessful sending of the form.

To change some default information messages, change the value of the msg field of the target validation type in script initialization file (scripts.js) in RD Mailform module:

        msg = {
        'MF000': 'Successfully sent!',
        'MF001': 'Recipients are not set!',
        'MF002': 'Form will not work locally!',
        'MF003': 'Please, define email field in your form!',
        'MF004': 'Please, define type of your form!',
        'MF254': 'Something went wrong with PHPMailer!',
        'MF255': 'Aw, snap! Something went wrong.'
        };

SMTP server setup

SMTP server setup is no way related to the RD Mailform setup.

o send messages through the SMTP server, please refer to the official documentation of the PhpMailer (the library, which is used for sending messages) or refer to a tutorial in the official documentation:

http://phpmailer.worxware.com

Attention: mailform extension will not work on the local server. To send a mailform, upload your website to the hosting server you use.

Configuring spam and abuse protection

RD Mailform uses Google reCAPTCHA for spam protection.

Pay attention: in order to disable Google reCAPTCHA, just delete a section of html code, wrapped in comments "" - "".

Getting Started with Google ReCaptcha

To manage Google ReCaptcha, you should:

Register your domain at Google reCaptcha website and get a pair of API-keys (a pair of keys consists of site key and secret).
Specify your API-keys in bat/reCaptcha.php file in $siteKey and $secret variables at the beginning of the file:
```
        $siteKey = 'You site key here';
        $secret = 'You secret key here';
      
```
Paste this section to html and specify your site key in data-attribute data-sitekey=""

You can find more detailed instructions at Google ReCaptcha official website.

Google ReCaptcha Marking

The basic marking for ReCaptcha looks the following way:

<!--Google captcha-->
<div class="form-group">
  <div id="captcha1" data-sitekey="You site key here" class="recaptcha"></div>
</div>
<!-- End google captcha-->

Pay attention: id attribute and .recaptcha class are required.

Google ReCaptcha Setup

Google Recaptcha supports the following settings:

Changing size;
Changing color scheme.

Changing Google ReCaptcha Size

To change widget size, specify in data-attribute data-size one of the following size values:

compact;
normal (default).

The sample code looks the following way:

<!--Google captcha-->
<div class="form-group">
  <div id="captcha1"
       data-sitekey="You site key here"
       data-size="compact"
       class="recaptcha"></div>
</div>
<!-- End google captcha-->

Changing Google ReCaptcha widget color scheme

To change widget color scheme, specify in the data-attribute data-theme one of the following variants:

dark;
light (default).

Sample code looks the following way:

<!--Google captcha-->
<div class="form-group">
  <div id="captcha1"
       data-sitekey="You site key here"
       data-theme="dark"
       class="recaptcha"></div>
</div>
<!-- End google captcha-->

RD Navbar. Navigation panel

HTML Website Templates use RD Navbar extension to implement site navigation functionality. Basic HTML code structure for this extension looks as follows:

  <!-- RD Navbar -->
  <div class="rd-navbar-wrap">
    <nav class="rd-navbar" data-rd-navbar-lg="rd-navbar-static">
      <div class="rd-navbar-inner">

        <!-- RD Navbar Collapse -->
        <div class="rd-navbar-collapse">
          <button class="rd-navbar-collapse-toggle">
            <span></span>
          </button>
          <ul class="rd-navbar-collapse-items list">
            <li>
            ...
            </li>
          </ul>
        </div>
        <!-- END RD Navbar Collapse -->

        <!-- RD Navbar Panel -->
          <div class="rd-navbar-panel">

          <!-- RD Navbar Toggle -->
          <button class="rd-navbar-toggle"><span></span></button>
          <!-- END RD Navbar Toggle -->

          <!-- RD Navbar Brand -->
          <div class="rd-navbar-brand">
          ...
          </div>
          <!-- END RD Navbar Brand -->

          </div>
        <!-- END RD Navbar Panel -->

        <div class="rd-navbar-nav-wrap">
          <!-- RD Navbar Search -->
          <div class="rd-navbar-search">
            <form class="rd-navbar-search-form"
            action="search.php" method="GET">
              <label class="rd-navbar-search-form-input">
                <input type="text" name="s"
                placeholder="Search.." autocomplete="off"/>
              </label>
              <button class="rd-navbar-search-form-submit"
              type="submit"></button>
            </form>
            <span class="rd-navbar-live-search-results"></span>
            <button class="rd-navbar-search-toggle"></button>
          </div>
          <!-- END RD Navbar Search -->

        <!-- RD Navbar Nav -->
        <ul class="rd-navbar-nav">
          <li>
          ...
          </li>
          <li>
          ...

            <!-- RD Navbar Dropdown -->
            <ul class="rd-navbar-dropdown">
              <li>
              ...
              </li>
            </ul>
          <!-- END RD Navbar Dropdown -->
          </li>
          <li>
          ...

            <!-- RD Navbar Megamenu -->
              <ul class="rd-navbar-megamenu">
              <li>
              ...
              </li>
            </ul>
          <!-- END RD Navbar Megamenu -->
          </li>
        </ul>
        <!-- END RD Navbar Nav -->
        </div>
      </div>
    </nav>
  </div>
  <!-- END RD Navbar -->

Please, note: navbar HTML structure might differ depending on exact template design specifications.

Navbar layout configuration

HTML Website Templates navbar works with 4 different layouts:

Static

rd-navbar-static
Wide

rd-navbar-fullwidth
Mobile

rd-navbar-fixed
Sidebar

rd-navbar-sidebar

In order to change layout for corresponding navigation panel you should just alter “data-layout” attribute value.

In order to enable/disable stick-up dropdown menu just edit “data-stick-up” attribute value (true/false).

In order to enable/disable dropdown menu on hover just edit “data-hover-on” attribute value (true/false).

  <div class="rd-navbar-wrap">
    <nav class="rd-navbar" data-layout="rd-navbar-fixed" data-hover-on="false" data-stick-up="false">
    ...
    </nav>
  </div>

Please note: data attributes data-layout, data-stick-up, data-hover-on can be defined for all main dimension types as data-xx-layout, data-xx-stick-up, data-xx-hover-on (where xx can take xs, sm, md. lg values). Navigation panel appearance for lower resolutions is defined by template design specifics only.

Dropdown menu configuration

In order to define navigation panel dropdown menu, you should just add .rd-navbar-dropdown class to corresponding submenu item.

  <div class="rd-navbar-wrap">
    <nav class="rd-navbar" data-rd-navbar-lg="rd-navbar-static">
      <ul class="rd-navbar-nav">
        <li>
          <a href="#">Menu Link</a>
          <ul class="rd-navbar-dropdown">
            <li>
              <a href="#">Submenu Link 1</a>
            </li>
          </ul>
        </li>
      </ul>
    </nav>
  </div>

Mega menu configuration

In order to define navigation panel mega menu you should add .rd-navbar-megamenu class to corresponding submenu item.

  <div class="rd-navbar-wrap">
    <nav class="rd-navbar" data-rd-navbar-lg="rd-navbar-static">
      <ul class="rd-navbar-nav">
        <li>
          <a href="#">Menu Link</a>
          <ul class="rd-navbar-megamenu">
            <li>
              … Your Custom HTML Content in 1 Column ...
            </li>
            <li>
              … Your Custom HTML Content in 2 Column ...
            </li>
          </ul>
        </li>
      </ul>
    </nav>
  </div>

By default columns size and width are calculated automatically, based on space available.

TimeCircles - Timer

HTML Website Templates use TimeCircles.js extension to implement functionality for timer with radial progress bar.

Inserting timer to page

In order to implement countdown timer to target HTML page you should use the following code structure:

<div id="DateCountdown" data-date="2016-10-01 00:00:00"
									class="text-white"></div>

Data-date attribute defines counting start or end date in the following format: data-date="yyyy-mm-dd hh:mm:ss"

For example,

<div id="DateCountdown" data-date="2016-10-01 00:00:00"
									class="text-white"></div>

Countdown will take place till 00:00 October 01, 2016.

Vide - Background video

HTML Website Templates use Vide.js extension to implement background video functionality.

Files requirements

To ensure cross-browser functionality video should be prepared in several formats, such as:

*.webm
*.mp4
*.ogv

Please also prepare an image with *.jpg extension to display it on mobile devices.

Feel free to follow this video tutorial to convert video:

How to convert video to WEB formats;

Background video replacing

In order to replace background video at the existing HTML code section you should change path to video file in data-vide-bg data attribute. There is no need to specify video file extension, just file name is enough as script will automatically pick correct video format to play.

For example,

data-rd-video-path="video/video-bg"

Creating new section with background video

In order to add video to section background you should edit target section code to appear the following way:

    <section data-rd-video-path="video/video-bg" data-rd-video-loop="true" data-rd-video-image-lg="50" class="rd-video">
    ...
    </section>

CountTo - Counter

HTML Website Templates use countTo.js extension to add counters to webpage.

Creating new counter

In order to create new counter the following HTML code should be added to page content:

<div class="counter" data-from="25" data-to="125"></div>

where, data-from attribute is responsible for counter origin, and data-to attribute - for the final result that will be displayed on page.

Counter working time correction

In order to change speed of counting you should add data-speed attribute and set time interval to the end of counting, in milliseconds.

For example,

<div class="counter" data-from="25" data-to="125" data-speed="5000"></div>

Counter update interval

in order to change time interval between counter updates you should add data-refresh-interval attribute and set needed time interval in milliseconds.

For example,

<div class="counter" data-from="25" data-to="125" data-speed="5000" data-refresh-interval="300"></div>

Countdown - Timer

HTML Website Templates use Countdown.js extension to implement timer functionality.

Adding timer to page

To add countdown timer to target HTML page you should use the following code.

<div class="countdown" data-type="until" data-time="24 Dec 2015 15:00">

Data-type attribute can take the following values:

until

the timer counts the time up to date, specified in the data-time attribute.
since

timer counts the time since the date, specified in the data-time attribute

For example,

<div class="countdown" data-type="until" data-time="24 Dec 2016 15:00">

Countdown will take place till 3.00 PM, December 24, 2016.

<div class="countdown" data-type="since" data-time="24 Dec 2014 15:00">

In this case countdown will start on 3.00 PM, December 24, 2014.

Date should be specified in data-time attribute in the following format.

DD month YYYY HH:MM

where month can take the following values:

Jan

January,
Feb

February,
Mar

March,
Apr

April,
May

May,
Jun

June,
Jul

July,
Aug

August,
Sep

September,
Oct

October,
Nov

November,
Dec

December.

For example,

<div class="countdown" data-type="until" data-time="24 Aug 2016 12:00">

This example shows countdown till 12:AM, August 24, 2016.

Timer display format configuration

In order to set timer display format you should use data-format attribute.

Use the following symbols (in the indicated order) to specify time periods to display: 'Y' during years, "O" during few month, "W" during couple of weeks, "D" during few days, "H" during several hours, "М" during few minutes, "S" for few seconds.

For example,

<div class="countdown" data-type="until" data-time="24 Aug 2016 12:00"
									data-format="wdh">

In this case timer will take the following format:

During few weeks, couple of days, several hours.

Photoswipe

Photoswipe.js extension for implementing beautiful mobile-friendly galleries.

Adding gallery to a page

To make the gallery function correctly, please add the following marking at the end of the target page before the closing <body>tag:

<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="pswp__bg"></div>
    <div class="pswp__scroll-wrap">
        <div class="pswp__container">
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
        </div>
        <div class="pswp__ui pswp__ui--hidden">
            <div class="pswp__top-bar">
                <div class="pswp__counter"></div>
                <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
                <button class="pswp__button pswp__button--share" title="Share"></button>
                <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
                <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
                <div class="pswp__preloader">
                    <div class="pswp__preloader__icn">
                        <div class="pswp__preloader__cut">
                            <div class="pswp__preloader__donut"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                <div class="pswp__share-tooltip"></div>
            </div>
            <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
            </button>
            <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
            </button>
            <div class="pswp__caption">
                <div class="pswp__caption__center"></div>
            </div>
        </div>
    </div>
</div>

Creating a popup window with a single image

To add a popup window with a single image, use the 'data-photoswipe-item' attribute for the corresponding link and 'data-size' attribute to specify a large WxH-format image:

<a class="thumbnail-classic" data-photo-swipe-item="" data-size="1170x600" href="link-to-popup-image.jpg">
    <img width="270" height="270" src="link-to-thumbnail-of-popup-image.jpg" alt="">
</a>

Creating a gallery with multiple images and control elements

To add a gallery with multiple images, use the data-photoswipe-gallery="gallery" attribute for the parent element of the group of separate images:

<div data-photo-swipe-gallery="gallery">
    <a class="thumbnail-classic" data-photo-swipe-item=""
                    data-size="1170x600" href="link-to-popup-image.jpg">
        <img width="270" height="270" src="link-to-thumbnail-of-popup-image.jpg" alt="">
    </a>
    <a class="thumbnail-classic" data-photo-swipe-item=""
                    data-size="1170x600" href="link-to-popup-image-2.jpg">
        <img width="270" height="270" src="link-to-thumbnail-of-popup-image-2.jpg" alt="">
    </a>
</div>

Swiper - Slider

HTML Website Templates use Swiper.js extension to implement slider functionality to template pages with extended data-API for interaction.

Default slider code structure appears as follows:

<!-- Swiper -->
<div class="swiper-container swiper-slider" data-height="" data-min-height="">
  <div class="swiper-wrapper">
    <div class="swiper-slide" data-slide-bg="">
      <div class="swiper-slide-caption">

      </div>
    </div>
    <div class="swiper-slide" data-slide-bg="">
      <div class="swiper-slide-caption">

      </div>
    </div>
    <div class="swiper-slide" data-slide-bg="">
      <div class="swiper-slide-caption">

      </div>
    </div>
  </div>

  <!-- Swiper Pagination -->
  <div class="swiper-pagination"></div>

  <!-- Swiper Navigation -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <!-- Swiper Scrollbar -->
  <div class="swiper-scrollbar"></div>
</div>
<!-- END Swiper -->

Slide background image configuration

In order to set corresponding slide background image for target slider you should use data-slide-bg data attribute.

<div class="swiper-container swiper-slider">
  <div class="swiper-wrapper">
    <div class="swiper-slide" data-slide-bg="link/to/yourslide.jpg">
      <div class="swiper-slide-caption">
        ...
      </div>
    </div>
  </div>
</div>

Slider height configuration

Swiper slider height is set by using corresponding data-height and data-min-height attributes to target slider.

data-height

defines requires slider height;
data-min-height

defines slider height minimum;

You can set slider height (data-height, data-min-height) value in 3 formats:

*px

defines static height, it will stay unchanged on screen resize;
*%

defines slider height as a percent of its width;
*vh

defines slider height as a percent of window height.

Static height example.

  <div class="swiper-container swiper-slider" data-height="500px">
    ...
  </div>

Slider percent example

  <div class="swiper-container swiper-slider" data-height="50%" data-min-height="300px">
    ...
  </div>

Window height example

  <div class="swiper-container swiper-slider" data-height="100vh" data-min-height="300px">
    ...
  </div>

In case you do not specify slider height, it will be calculated based on the embedded content.

Slider autoplay configuration

By default Swiper slider in HTML Website template has autoplay enabled. In order to disable it or change slides switching time you should use data-autoplay attribute by using false key or time value in milliseconds. It should be added to target item with .swiper-slider class.

For example,

  <div class="swiper-container swiper-slider" data-autoplay="false">
    ...
  </div>

or,

  <div class="swiper-container swiper-slider" data-autoplay="3000">
    ...
  </div>

Slider loop configuration

To loop the slide display in slider you should use the data-loop data attribute (true/false, by default it’s set to true) for target item with .swiper-slider class.

For example,

  <div class="swiper-container swiper-slider" data-loop="false">
    ...
  </div>

Sliding direction setup

Swiper slider allows you to change direction of slides switching from horizontal to vertical. In order to do this you should use data-direction data attribute (“horizontal”/”vertical”, by default it’s set to “horizontal”) for target item with .swiper-slider class.

For example,

  <div class="swiper-container swiper-slider" data-direction="vertical">
    ...
  </div>

Slider navigation setup

Swiper supports the display of “Previous” and “Next” buttons to manage slides appearance. In order to show them you should use the following code structure for target slider.

  <div class="swiper-container swiper-slider">
    <!-- Slider Navigation -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>

Slider pagination setup

Swiper supports slider pagination display. In order to show it you should use the following code structure for target slider.

  <div class="swiper-container swiper-slider">
    <!-- Slider Pagination -->
    <div class="swiper-pagination"></div>
  </div>

By default slider pagination is clickable. If you need to disable this feature you should define data-clickable attribute for corresponding slider pagination.

  <div class="swiper-container swiper-slider">
    <!-- Slider Pagination -->
    <div class="swiper-pagination" data-clickable="false"></div>
  </div>

To show the numeric value for corresponding pagination point you should use data-index-bullet=”true” data attribute for target slider pagination.

  <div class="swiper-container swiper-slider">
    <!-- Slider Pagination -->
    <div class="swiper-pagination" data-index-bullet="true"></div>
  </div>

Scrollbar configuration

Swiper slider supports scrollbar display. In order to show them you should use the following code structure for target slider.

  <div class="swiper-container swiper-slider">
    <!-- Slider Scrollbar -->
    <div class="swiper-scrollbar"></div>
  </div>

By default interaction with scrollbar is enabled. If you need to disable this feature you should define data-draggable=”false” data attribute for corresponding scrollbar in target slider code.

  <div class="swiper-container swiper-slider">
    <!-- Slider Scrollbar -->
    <div class="swiper-scrollbar" data-draggable="false"></div>
  </div>

Arrows management

Swiper slider allows to manage slides appearance by using keypad arrow buttons. In order to enable this option you should use data-keyboard data attribute for target slider.

  <div class="swiper-container swiper-slider" data-keyboard="true">
    ...
  </div>

Mouse management

Swiper slider supports slider management by using mouse. In order to enable this option you should use data-mousewheel data attribute for target slider.

  <div class="swiper-container swiper-slider" data-mousewheel="true">
    ...
  </div>

By default this option blocks further page scrolling when first or last slide is reached. In order to disable page scrolling in this case you should use data-mousewheel-release=”true” data attribute for target slider.

  <div class="swiper-container swiper-slider" data-mousewheel="true"
    data-mousewheel-release="true">
    ...
  </div>

Slide parallax integration

В HTML Website Templates allow you to integrate RD Parallax parallax effect to target slide of your Swiper slider. In order to do this you should use the following markup :

<!-- Swiper -->
<section class="rd-parallax rd-parallax-swiper">
  <div class="rd-parallax-layer" data-speed="" data-sm-speed=""    data-type="html">
    <section class="swiper-container swiper-slider"          	         	data-parallax="true">
      <div class="swiper-wrapper">
        <!-- RD Parallax -->
        <div class="swiper-slide" data-slide-bg="images/page-1_img01.jpg">
        </div>

        <div class="swiper-slide"></div>
      </div>
    </section>
  </div>
</section>

Slide background video integration

HTML Website Templates allow you to integrate Vide.js background video to target slide of your Swiper slider. In order to do this you should use the following markup :

<div class="swiper-slide">
  <div class="vide" data-vide-bg="video/video-bg">
    <div class="swiper-caption swiper-parallax" data-speed="0.5" data-fade="true"></div>
  </div>
</div>

Animate.css integration to slide elements

HTML Website Templates allow you to integrate Animate.css to slider elements. In order to do this you should define corresponding data attributes: data-caption-animate and data-caption-delay (to set delay if needed) for target slide. Delay time for data-caption-delay is set in milliseconds. You can use any animation effect, available in Animate.css as a target animation.

  <div class="swiper-container swiper-slider">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <div class="swiper-slide-caption">
          <h2 data-caption-animate="fadeUp">Your text goes here</h2>
          <p data-caption-animate="fadeUp" data-caption-delay="200">
          Some other text goes here
          </p>
        </div>
      </div>
    </div>
  </div>

Sliding effect configuration

Swiper slider has few sliding effects available:

fade
slide
coverflow
cube

To change sliding effect, you should use corresponding data-slide-effect data attribute for target slider.

  <div class="swiper-container swiper-slider" data-slide-effect="fade">
    ...
  </div>

Owl Carousel - Carousel

HTML Website Templates use Owl-carousel.js extension for carousel functionality implementing to template pages with extended data-API for interaction.

Carousel default code structure appears the following way:

  <!-- Owl Carousel -->
  <div class="owl-carousel">
    <div class="owl-item">
      ...
    </div>
    <div class="owl-item">
      ...
    </div>
    <div class="owl-item">
      ...
    </div>
  </div>

Carousel loop configuration

In order to enable carousel loop you should use data-loop data attribute (true/false, by default is set to true) for target item with .owl-carousel class.

For example,

  <div class="owl-carousel" data-loop="false">
    ...
  </div>

Carousel autoplay configuration

HTML Website templates Owl Carousel has autoplay disabled by default. In order to enable this feature you should use data-autoplay data attribute with value set to ‘true’.

  <div class="owl-carousel" data-autoplay="true">
    ...
  </div>

Carousel items display configuration

Owl carousel allows to display one or couple of items at once. In order to manage carousel items display you should use corresponding data attributes data-items and data-*-items.

data-items=”N”

shows N carousel items by default (default value = 1).
data-xs-items=”N”

shows N carousel items, starting from XS screen dimensions.
data-sm-items=”N”

shows N carousel items, starting from SM screen dimensions.
data-md-items=”N”

shows N carousel items, starting from MD screen dimensions.
data-lg-items=”N”

shows N carousel items, starting from LG screen dimensions.

For example,

  <div class="owl-carousel" data-items="2" data-xs-items="3" data-lg-items="4">
    ...
  </div>

This example shows that by default there will appear 2 carousel items, for xs, sm and md dimensions - 3 items, for lg dimensions - 4 items.

Carousel navigation setup

In order to display “Previous”/”Next” navigation in Owl Carousel you should use corresponding data-nav=”true” data attribute for target carousel.

  <div class="owl-carousel" data-nav="true">
    ...
  </div>

Carousel pagination setup

In order to display pagination in Owl Carousel you should use corresponding data-dots=”true” data attribute for target carousel.

  <div class="owl-carousel" data-dots="true">
    ...
  </div>

In order to define pagination dots display step you should use data-dots-each=”N” data attribute.

  <div class="owl-carousel" data-dots="true" data-dots-each="1">
    ...
  </div>

Carousel scene padding configuration

In order to define carousel scene padding you should use data-*-stage-padding=”N” data attribute.

  <div class="owl-carousel" data-xs-stage-padding="30">
    ...
  </div>

Carousel items padding configuration

In order to define carousel items padding you should use data-*-margin=”N” data attribute (by default = 30).

  <div class="owl-carousel" data-xs-margin="15">
    ...
  </div>

RD Calendar. Events calendar

HTML Website Templates use RD Calendar extension to implement event calendar functionality.

Basic calendar HTML code structure is

  <div class="rd-calendar">
    <div class="rdc-panel">
      <a class="rdc-next"></a>
      <a class="rdc-prev"></a>
      <div class="rdc-today_day"></div>
      <div class="rdc-today_date"></div>
      <div class="rdc-today_month"></div>
      <div class="rdc-today_fullyear"></div>
      <div class="rdc-month"></div>
      <div class="rdc-fullyear"></div>
    </div>
    <div class="rdc-table"></div>
    <div class="rdc-events">
      <a class="rdc-events_close"></a>
      <ul>
        <li class="rdc-event" data-date="10/28/2015">
          Event 1
        </li>
        <li class="rdc-event" data-date="10/31/2015">
          Event 2
        </li>
      </ul>
    </div>
  </div>

Map of classes for HTML structure

RD Calendar includes the following structural items for creating the calendar.

.rdc-today_day

Shows current day of the week;
.rdc-today_date

Shows current day of the month;
.rdc-today_month

Shows current month;
.rdc-today_fullyear

Shows current year;
.rdc-panel

Shows informing panel;
.rdc-prev

Shows previous month switcher;
.rdc-next

Shows next month switcher;
.rdc-month

Shows a month;
.rdc-fullyear

Shows a year;
.rdc-table

Shows month days table;
.rdc-table_day

Shows single day of the week;
.rdc-table_date

Shows single day of the month;
.rdc-table_events

Shows day’s events;
.rdc-table_has-events

Shows dates with events assigned;
.rdc-table_events-count

Shows number of events, assigned to specific date;
.rdc-table_event

Shows day’s event;
.rdc-table_today

Shows today’s date;
.rdc-table_prev

Shows previous month dates;
.rdc-table_next

Shows next month dates;

Days output configuration

By default RD Calendar displays days as

Sun, Mon, Tue, Wed, Thu, Fri, Sat

In order to specify custom days output format you should use data-days data attribute for target calendar. Specify it as a line of days, separated by commas in HTML code structure.

  <div class="rd-calendar" data-days="Sn, Mn, Te, Wd, Th, Fr, St">
    ...
  </div>

Months output configuration

By default RD Calendar displays months as

January, February, March, April, May, June, July, August, September, October, November, December

In order to specify custom month output format you should use data-months data attribute for target calendar. Specify it as a line of months titles, separated by commas in HTML code structure.

  <div class="rd-calendar" data-months="Jan, Feb, Mar, Apr, May,
  Jun, Jul, Aug, Sep, Oct, Nov, Dec">
    ...
  </div>

Calendar events management

In order to assign an event to specific date you should use the following event code structure at target calendar events list.

  <!-- RD Calendar -->
  <div class="rd-calendar">
    ...
    <!-- Events List Holder -->
    <div class="rdc-events">
        ...
      <!-- Events List -->
      <ul>
      <!-- Create Event -->
        <li class="rdc-event" data-date="10/28/2015">
          Event 1
        </li>
      </ul>
    </div>
  </div>

Please note, data-date="10/28/2015" data attribute at .rdc-event event item is a mandatory one. it should be set in MM/DD/YYYY format, otherwise script will ignore it and won’t display this event in calendar. An event itself can have any code structure included.

Progress Bar - horizontal and circular progress bars

HTML Website Templates use ProgressBar.js extension to implement horizontal and circular progress bars functionality.

Basic HTML code structure for progress bar creating appears as follows:

  <div class="progress-bar progress-bar-type progress-bar-style"
  data-value="70" data-stroke="30" data-trail="15"
  data-easing="linear" data-counter="true" data-duration="600"></div>

, where

progress-bar-type

progress bar class (mandatory class)
progress-bar-style

progress bar style,
data-value

progress bar value (mandatory attribute),
data-stroke

progress bar data stroke (mandatory attribute),
data-trail

progress bar data trail,
data-easing

progress bar animation easing function,
data-counter

progress bar counter display checkbox,
data-duration

progress bar animation duration in milliseconds.

Progress bar value configuration

In order to define progress bar fill level you should use data-value data attribute.

  <div class="progress-bar progress-bar-horizontal progress-bar-default"
  data-value="70" data-stroke="30"></div>

Progress bar data stroke configuration

In order to define progress bar data stroke you should use data-stroke data attribute.

  <div class="progress-bar progress-bar-horizontal progress-bar-default"
  data-value="70" data-stroke="30"></div>

Progress bar data trail configuration

In order to define progress bar data trail you should use data-trail data attribute.

  <div class="progress-bar progress-bar-horizontal progress-bar-default"
  data-value="70" data-stroke="30" data-trail="15"></div>

Progress bar animation easing setup

In order to define progress bar fill animation you should use data-easing attribute, specifying corresponding animation easing function.

  <div class="progress-bar progress-bar-horizontal progress-bar-default"
  data-value="70" data-stroke="30" data-easing="linear"></div>

The following animation easing functions are available:

linear
easeIn
easeOut
easeInOut

Progress bar animation duration setup

In order to change animation duration (by default it is set to 800 milliseconds), you should use data-duration data attribute.

  <div class="progress-bar progress-bar-horizontal progress-bar-default"
  data-value="70" data-stroke="30" data-easing="linear"
  data-duration="1000"></div>

Progress bar counter display setup

In order to display progress bar counter you should use data-counter=”true” data attribute at the target progress bar HTML code structure.

  <div class="progress-bar progress-bar-horizontal progress-bar-default"
  data-value="70" data-stroke="30" data-counter="true"></div>

Isotope. Layout filter

HTML Website Templates use Isotope extension for layout filters creating.

Implementing Isotope to page

In order to implement isotope to target page corresponding layout you should just add data-isotope-layout data attribute to the target HTML structure, specifying needed layout type.

  <div class="row isotope" data-isotope-layout="masonry">
    <div class="col-sm-6 col-md-4">
      Item 1
    </div>
    <div class="col-sm-6 col-md-4">
      Item 2
    </div>
  </div>

The following layout types are available:

masonry;
fitRows;
vertical.

In order to implement isotope to layouts that do not include grid elements, you should additionally define .isotope-item class for each isotope item.

  <div class="isotope" data-isotope-layout="masonry">
    <div class="isotope-item">
      Item 1
    </div>
    <div class="isotope-item">
      Item 2
    </div>
  </div>

Please, note: in this case, Isotope items sizes have to be defined manually. HTML Website Template include ready-to-use functionality for grid items only.

Isotope items filtering

In order to implement isotope filters to page you should define group of isotope items by using data-isotope-group data attribute and corresponding filter types for each item.

  <div data-isotope-group="gallery" data-isotope-layout="masonry" class="isotope">
    <div class="isotope-item" data-filter="type-1">
      Item 1
    </div>
    <div class="isotope-item" data-filter="type-2">
      Item 2
    </div>
  </div>

In order to filter items you should just define corresponding filter control buttons at target Isotope items group.

  <button data-isotope-filter="*" data-isotope-group="gallery">
    Show All
  </button>
  <button data-isotope-filter="type-1" data-isotope-group="gallery">
    Type 1
  </button>
  <button data-isotope-filter="type-2" data-isotope-group="gallery">
    Type 2
  </button>

Responsive Tabs. Tabs

HTML Website Template use ResponsiveTabs.js extension to implement tabs functionality. In order to add tabs to target pages you should use the following code structure.

  <div class="responsive-tabs">
    <ul class="resp-tabs-list">
      <li> Tab 1 Title </li>
      <li> Tab 2 Title </li>
      <li> Tab 3 Title </li>
    </ul>

    <div class="resp-tabs-container">
      <div> Tab 1 Body </div>
      <div> Tab 2 Body </div>
      <div> Tab 3 Body </div>
    </div>
  </div>

Reponsive Tabs. Accordion

HTML Website Templates use ResponsiveTabs.js extension for accordion functionality implementing. In order to add accordion to target page you should use the following code structure.

  <div class="responsive-tabs" data-type="accordion">
    <ul class="resp-tabs-list">
      <li> Item 1 Title </li>
      <li> Item 2 Title </li>
      <li> Item 3 Title </li>
    </ul>

    <div class="resp-tabs-container">
      <div> Item 1 Body </div>
      <div> Item 2 Body </div>
      <div> Item 3 Body </div>
    </div>
  </div>

RD Parallax

RD Parallax extension for implementing parallax effect on the page.

Basic script marking looks the following way:

        <!-- RD Parallax -->
        <section class="rd-parallax">
            <div class="rd-parallax-layer" data-speed="0.2" data-type="media"
                 data-url="path/to/your-image.jpg"></div>
            <div class="rd-parallax-layer" data-speed="0.3" data-type="html" data-fade="true">
                ...
            </div>
        </section>
        <!-- END RD Parallax-->

Each parallax element constitutes a separate layer. The number of layers is unlimited.

Layer type setup

To set up the layer type, use the 'data-type' attribute. 'data-type' attribute can take 'media', 'html' values. It defines the parallax layer type. If it's defined as 'media', layer size will be defined in relation to the parallax section height. If it's defined as 'html' the size will be defined by the content.

E.g.:

        <div class="rd-parallax-layer" data-speed="0.2" data-type="media">

Layer speed setup

To set up the layer speed, use the 'data-speed' attribute. 'data-speed' attribute can have values from 0 to 2. It defines the parallax speed in relation to scrollbar movement. For instance, if the speed value equals 1, you'll get the css property 'background-attachment: fixed' emulated.

E.g.:

        <div class="rd-parallax-layer" data-speed="0.2" data-type="media">

Layer blur setup

To set up layer blur, please use 'data-blur' attribute. 'data-blur' can have values 'true', 'false'. If set to 'true', the image will be blurred,in case it's size is too small for good-quality display in parallax section.

        <div class="rd-parallax-layer" data-speed="0.2" data-type="media" data-blur="true">

Layer direction setup

To set up layer direction, use the 'data-direction' attribute.

'data-direction' attribute can have the following values 'inverse', 'normal'.

It defines the parallax direction. If set to 'normal', parallax will move in the same direction as the scroll. If set to 'inverse', it'll move in the opposite direction.

E.g.:

        <div class="rd-parallax-layer" data-speed="0.2" data-type="media" data-direction="inverse">

Background image setup

To set a background image inside the media-object, just specify the 'data-url' attribute.

E.g.:

        <div class="rd-parallax-layer" data-speed="0.2" data-type="media" data-url="path/to/your-image.jpg">

HTML layer fade effect

To set up fade effect for the HTML layer, please use the 'data-fade' attribute.

'data-fade' attribute can have 'true', 'false' values.

If set to 'true', the layer will gradually emerge from the full transparency to full opacity, depending on the position of the scroll layer.

E.g.:

        <div class="rd-parallax-layer" data-speed="0.2" data-type="media" data-fade="true">

Managing layer custom content

The block with the data-type="media" attribute can contain any custom content, for example, different slider scripts, background videos, etc. To place custom content inside the media-object, do not specify the 'data-url' attribute.

E.g.:

        <div class="rd-parallax-layer vide" data-speed="0.2" data-type="media">

RD Search

This plugin allows to implement the search on several pages with the ability to set up the layout for search results.

The basic form marking should look the following way:

<form action="search-results.html" method="GET" class="rd-search">
    <div class="form-group">
        <label for="search" class="form-label">Type and hit enter...</label>
        <input id="search" type="text" name="s" autocomplete="off" class="form-control"/>
    </div>
</form>

You can paste this marking in any desired place, 'rd-search' class is required.

This search allows to display results with any marking, but you should correctly set up all the target pages.

Search pages setup

All the setup is carried out in the head section of every page and is necessary for generating the search results template:

<head>
    ...
</head>

Title display in search results

To display the title in search results, specify it for every page inside the title tag:

        <!-- Site Title-->
        <title>Intense - multi-page template by TemplateMonster</title>

Keywords display in search results

To display keywords (tags) in search results, specify them for every page in 'content' attribute of the <meta name="keywords"> tag:

        <meta name="keywords" content="intense web design multipurpose template">

Additional information display in search results

To display additional information in search results, specify it for every page in meta tag with name and content attributes, where 'name' is the unique information name, and 'content' is the information that should be displayed. For example, to display the page description, add the following tag:

        <meta name="description" content="This page ...">

The amount of tags is unlimited.

Search form setup

Search setup is carried out on the target page in the form with .rd-search class:

        <form action="search-results.html" method="GET" class="rd-search">
            ...
        </form>

Search filter setup

You can set up a filter, which specifies pages, on which the search should be carried out (by title). For example, to carry out search on HTML pages, the title of which contains 'blog' word, use the following code:

        <form action="search-results.html" method="GET" class="rd-search" data-search-filter="*blog*.html">
            ...
        </form>

The default search filter can be changed in script.js file in defaultFilter variable, which can be found in the code after the following comment:

        /**
        * RD Search
        * @description Enables search
        */

Live Search setup

You can enable live search to display search results without reloading the page. To do this, add the data-search-live attribute with id specification, which will display the result. For example:

        <form action="search-results.html" method="GET" class="rd-search" data-search-live="search-results">
            ...
        </form>
        <div id="search-results"></div>

Search results template setup

Search results template is closely connected with the setup of the page described above, namely with specifying different meta-tags. You can set up the HTML markup for search results. To do this, add data-search-template attribute, to which you should add the corresponding marking for displaying the search results. The line support #{rule} data transfer format.

Here, 'rule' is the 'name' attribute of the meta-tag, which is specified on the page. There are 4 default values, which do not require meta-tags and display the necessary information:

#{title} -contains the value of the <title/> tag of the target page;
#{tokens} - contains a part of the found content of the target page, which meets the search results;
#{href} - contains the path to the target page;
#{count} - amount of the found instances on the page.

For example:

        <form  action="search-results.html" method="GET" class="rd-search" data-search-template="">
            <div class="result-item">
                <h4 class="title"><a href="#{href}">#{title}</a></h4>
                <p class="tags">in #{keywords}</p>
            </div>
        ...
        </form>
        <div id="search-results"></div>

The default search results template can be changed in script.js file in the defaultTemplate variable, which can be found in the code after the following comment:

        /**
        * RD Search
        * @description Enables search
        */

RD Google Maps

HTML Website Template uses RD Google Maps to implement Google maps.

The plugin supports the following settings:

Changing map coordinates;
Adding custom map markers;
Adding pop-up windows for the markers;
Custom map styling.
Search on the map;

How to add search on the map?

RD Google Maps supports adding search on the map.

To enable search on the map, add a textfield with id "rd-google-map-address" and a button with id “rd-google-map-address-submit”.

The fool code of the map with search will look the following way:

    <!--Google map search-->
    <div class="form-wrap">
      <label for="rd-google-map-address" class="form-label rd-input-label">Address</label>
      <div class="input-group">
        <input id="rd-google-map-address"
                  type="text" name="address"
                  data-constraints="@Required"
                  placeholder="" autocomplete="off"
                  class="form-input
                  form-input-has-validation">
          <span class="input-group-btn">
          <a id="rd-google-map-address-submit" href="#" class="btn btn-primary">Find Address</a>
          </span>
      </div>
    </div>
    <!-- RD Google Map-->
    <div class="rd-google-map">
      <div id="rd-google-map"
              data-zoom="15"
              data-x="-73.9874068"
              data-y="40.643180"
              data-styles="[]"
              class="rd-google-map__model">
      </div>
      <ul class="map_locations">
        <li data-x="-73.9874068" data-y="40.643180">
          <p>9870 St Vincent Place, Glasgow, DC 45 Fr 45.</p>
        </li>
      </ul>
    </div>

Changing map coordinates

To change map coordinates to your custom ones, specify 2 attributes in .html file in the corresponding section:

        <!-- RD Google Map-->
        <div id="google-map" class="map_model">
            ...
        </div>

data-x (northern longitude) and data-y (western latitude). As a result, you'll get the following lines of code:

        <!-- RD Google Map-->
        <div class="rd-google-map">
            <div id="google-map" class="map_model" data-x="-73.9994068" data-y="40.643180">
                ...
            </div>
            ...
        </div>

You can find out the coordinates with the help of Google Maps service. To do this, right-click the target map sector and select the "What's there?" option. In the pop-up window, you 'll the needed to copy coordinates below the location name, where the first number is data-x and the second one is data-y.

Attention: it is often the case, that the coordinates get mixed. Then, the map will display a wrong address in the opposite hemisphere.

How to add a map marker

To add a custom map marker, add a new element to the list in the .html file:

        <!-- RD Google Map-->
        ...
        <ul class="map_locations">
            ...
        </ul>
        ...

and define two data attributes in it: data-x (longitude) and data-y (latitude). As a result, you’ll get:

        <!-- RD Google Map-->
        ...
        <ul class="map_locations">
            <li data-x="-73.9994068" data-y="40.643180"></li>
        </ul>
        ...

If you do not specify the coordinates, the script will ignore an empty list item and the marker will not be displayed.

The full code example looks the following way:

        <!-- RD Google Map-->
        <div class="rd-google-map">
            <div id="google-map" class="map_model"></div>

            <ul class="map_locations">
                <li data-x="-73.9874068" data-y="40.643180">
                    <p> 9870 St Vincent Place, Glasgow, DC 45 Fr 45.
                        <span>800 2345-6789</span>
                    </p>
                </li>
                <li data-x="-72.9874068" data-y="39.643180">
                    <p> 9870 St Vincent Place, Glasgow, DC 45 Fr 45.
                        <span>800 2345-6789</span>
                    </p>
                </li>
            </ul>
        </div>

where:

        <!-- RD Google Map-->
        ...
        <li data-x="-73.9874068" data-y="40.643180">
            <p> 9870 St Vincent Place, Glasgow, DC 45 Fr 45.
                <span>800 2345-6789</span>
            </p>
        </li>
        ...

is the new map marker.

Adding marker popup windows

To add a marker popup window, just add the pop-up window content to the corresponding item of the map markers list:

        <!-- RD Google Map-->
        ...
        <li data-x="-73.9994068" data-y="40.643180" >
            ...
        </li>
        ...

As a result, you'll get the following lines of code :

        <!-- RD Google Map-->
        ...
        <li data-x="-73.9994068" data-y="40.643180" >
            Our office
        </li>
        ...

Changing map styling

RD Google Map supports many map styling variants. Some ready-made styling solution can be found on the following website:https://snazzymaps.com/.

On this website, copy the set of styles you like to the 'data-style' attribute of the map on the target *.html page.

        <!-- RD Google Map-->
        <div id="google-map" class="map_model" data-styles='Your Map Styles'>
            ...
        </div>

How to add search on the map

RD Google Map supports enabling search on the map.

To enable search on the map, add a textfield with "rd-google-map-address" id and a button with rd-google-map-address-submit id.

  
    <!-- RD Google Map Search-->
    <input type="text" id="rd-google-map-address">
    <a href="#" class="btn btn-primary" id="rd-google-map-address-submit">
    </div>

The full sample code of the map with search should look the following way:

  
    <!-- RD Google Map With Search-->
    <div class="form-wrap">
    <label for="rd-google-map-address" class="form-label rd-input-label">Address</label>
    <div class="input-group">
    <input id="rd-google-map-address" type="text" name="address" autocomplete="off" class="form-input"/>
    <span class="input-group-btn">
    <a id="rd-google-map-address-submit" href="#" class="btn btn-primary">Find Address</a>
    </span>
    </div>
    </div>
    <!-- RD Google Map-->
    <div class="rd-google-map">
    <div id="google-map" data-zoom="14" data-x="-73.9874068" data-y="40.643180"></div>
    </div>

Credits

HTML Website Templates use some external JS, PHP, CSS etc. software solutions, listed below. All of materials used are distributed for free and as an open source (MIT, CC, GPL).

Preparation Before you proceed with HTML Multipurpose Template installation, you need to prepare. It is recommended to follow steps, listed below:

Software

Hosting

Template structure This section includes information on complete template and its separate files structure.

Package structure

HTML Structure

CSS Structure

Template customization

Smooth scroll configuration for Windows

Template items animation on page scroll

Components

All of standard components are listed on the official Bootstrap framework page.

Modules

TM Grid System

Columns nesting

Columns offset

Columns inverting

Gutter disabling

Columns vertical alignment management

Columns horizontal alignment management

Use of the following classes to align columns horizontally:

Columns order display management

Extensions

RD Mailform

Mailform type setup

Form fields setup

Form fields validation setup

Information messages setup

SMTP server setup

Configuring spam and abuse protection

Getting Started with Google ReCaptcha

Google ReCaptcha Marking

Google ReCaptcha Setup

Changing Google ReCaptcha Size

Changing Google ReCaptcha widget color scheme

RD Navbar. Navigation panel

HTML Website Templates use RD Navbar extension to implement site navigation functionality. Basic HTML code structure for this extension looks as follows:

Navbar layout configuration

HTML Website Templates navbar works with 4 different layouts:

Dropdown menu configuration

Mega menu configuration

TimeCircles - Timer

HTML Website Templates use TimeCircles.js extension to implement functionality for timer with radial progress bar.

Inserting timer to page

Vide - Background video

HTML Website Templates use Vide.js extension to implement background video functionality.

Files requirements

To ensure cross-browser functionality video should be prepared in several formats, such as:

Background video replacing

Creating new section with background video

CountTo - Counter

HTML Website Templates use countTo.js extension to add counters to webpage.

Creating new counter

Counter working time correction

Counter update interval

Countdown - Timer

HTML Website Templates use Countdown.js extension to implement timer functionality.

Adding timer to page

Data-type attribute can take the following values:

Timer display format configuration

Photoswipe

Adding gallery to a page

Creating a popup window with a single image

Creating a gallery with multiple images and control elements

Swiper - Slider

HTML Website Templates use Swiper.js extension to implement slider functionality to template pages with extended data-API for interaction.

Slide background image configuration

Slider height configuration

Slider autoplay configuration

Slider loop configuration

Sliding direction setup

Slider navigation setup

Slider pagination setup

Scrollbar configuration

Arrows management

Mouse management

Slide parallax integration

Slide background video integration

Animate.css integration to slide elements

Sliding effect configuration

Preparation
Before you proceed with HTML Multipurpose Template installation, you need to prepare. It is recommended to follow steps, listed below:

Template structure
This section includes information on complete template and its separate files structure.