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:

  1. 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.
  2. 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.
  3. You should also use code editor, i. e. Sublime Text, Notepad++, Atom, etc. for template files source code editing.
  4. 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:

  1. Bootstrap Framework
    ...
  2. Bootstrap Toolkit Styles
    ...
  3. 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.

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

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 2: .cell-*-6
Level 1: .cell-*-1 Level 1: .cell-*-1 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 .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 .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 .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 .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 .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:

  1. Contact form
    contact;
  2. Order form
    order;
  3. 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:

  1. 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>
    ...
                
  2. 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>
    ...
                
  3. 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>
    ...
                
  4. 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>
    ...
                
  5. 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 "<!--Google captcha-->" - "<!-- End google captcha-->".

Getting Started with Google ReCaptcha

To manage Google ReCaptcha, you should:

  1. Register your domain at Google reCaptcha website and get a pair of API-keys (a pair of keys consists of site key and secret).

  2. 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';
          
  3. 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:
  1. Static
    rd-navbar-static
  2. Wide
    rd-navbar-fullwidth
  3. Mobile
    rd-navbar-fixed
  4. 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:

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:
  1. until
    the timer counts the time up to date, specified in the data-time attribute.
  2. 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:

  1. Jan
    January,
  2. Feb
    February,
  3. Mar
    March,
  4. Apr
    April,
  5. May
    May,
  6. Jun
    June,
  7. Jul
    July,
  8. Aug
    August,
  9. Sep
    September,
  10. Oct
    October,
  11. Nov
    November,
  12. 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.

  1. data-height
    defines requires slider height;
  2. data-min-height
    defines slider height minimum;

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

  1. *px
    defines static height, it will stay unchanged on screen resize;
  2. *%
    defines slider height as a percent of its width;
  3. *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:

  1. fade
  2. slide
  3. coverflow
  4. 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>

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:

  1. linear
  2. easeIn
  3. easeOut
  4. 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:

  1. masonry;
  2. fitRows;
  3. 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 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).

CSS & Fonts

Modified font icon packages:

jQuery & Java Script

PHP