HTML Templates Documentation

Extensions

RD Mail Form. Mail form.

HTML Website Templates use RD Mail Form extension to implement mail form functionality. Basic form code structure is similar to the one below:


    <!-- RD Mailform -->
    <form class='rd-mailform' method="post" action="bat/rd-mailform.php">
        <!-- RD Mailform Type -->
        <input type="hidden" name="form-type" value="contact"/>
        <!-- END RD Mailform Type -->
        <fieldset>
            <label data-add-placeholder data-add-icon>
                <input type="text"
                       name="name"
                       placeholder="Name"
                       data-constraints="@LettersOnly @NotEmpty"/>
            </label>

            <label data-add-placeholder data-add-icon>
                <input type="text"
                       name="email"
                       placeholder="Email"
                       data-constraints="@Email @NotEmpty"/>
            </label>

            <label data-add-placeholder data-add-icon>
                <input type="text"
                       name="phone"
                       placeholder="Phone"
                       data-constraints="@Phone"/>
            </label>


            <label data-add-placeholder>
                <select name="gender">
                    <option>Gender</option>
                    <option>Male</option>
                    <option>Female</option>
                </select>
            </label>

            <label data-add-placeholder data-add-icon>
                <input type="date"
                       name="birthday"
                       data-placeholder="Birthday"
                       data-constraints="@Date"
                    />
            </label>

            <label data-add-placeholder>
       <textarea name="message" placeholder="Message"
                 data-constraints="@NotEmpty"></textarea>
            </label>

            <div class="mfControls btn-group">
                <button class="btn btn-lg btn-primary" type="submit">Submit</button>
                <button class="btn btn-lg btn-default" type="reset">Reset</button>
            </div>
            <div class="mfInfo"></div>
        </fieldset>
    </form>
    <!-- END RD Mailform -->

Form mode configuration

RD Mailform allows to use mail form in three modes:

Contact form

contact;
Booking form

order;
Newsletter form

subscribe;

In order to change form working mode you should add hidden form-type field to target form HTML code, where respectable form mode is set as a value.

<!-- RD Mailform -->
<form class='rd-mailform' method="post" action="bat/rd-mailform.php">
    <!-- RD Mailform Type -->
    <input type="hidden" name="form-type" value="contact"/>
    <!-- END RD Mailform Type -->
</form>
<!-- END RD Mailform -->

Mail configuration for messages delivery

Form sends messages to specific email address, defined in bat/rd-mailform.php file in $recipients variable. You may set any number of email addresses, separated by space here.

$recipients = "test@demolink.com test2@demolink.com"

Form fields configuration

Mail form RD Mailform allows you to use the following field types:

Text field

  ...
  <label data-add-placeholder>
      <input type="text"
             name="name"
             placeholder="Name"
          />
  </label>
  ...

Date selector

  ...
  <label data-add-placeholder>
      <input type="date"
             name="date"
             data-placeholder="Date"
          />
  </label>
  ...

Menu selector

  ...
  <label data-add-placeholder>
      <select name="select">
          <option>Option 1</option>
          <option>Option 2</option>
          <option>Option 3</option>
      </select>
  </label>
  ...

Text area

  ...
  <label data-add-placeholder>
      <textarea name="message" placeholder="Message"></textarea>
  </label>
  ...

Form fields validation setup

Mail form RD Mailform supports form fields dynamic validation. You should add data-constraints data attribute to target field HTML code in order to implement this validation for target form.

There are following validation types available:

@LettersOnly

field’s value should be set to letters only;
@NumbersOnly

field’s value should be set to numbers only;
@NotEmpty

field must be filled in;
@Email

field’s value should be set to email address;
@Phone

field’s value should be set to phone number in the international format;
@Date

field’s value should be set to date in MM / DD / YYYY format;
@SelectRequired

at least one of menu options must be selected.

For instance,

  ...
  <label data-add-placeholder>
      <textarea name="message" placeholder="Message"
                  data-constraints="@NotEmpty"></textarea>
  </label>
  ...

Form informing messages configuration

Mail form RD Mailform allows you to set custom informing messages, such as fields validation error messages or messages on successful/unsuccessful form submitting.

In order to change some default informing messages, you should edit script initialization script.js file, by changing corresponding message field for RD Mailform module target validation type.

  /**
  * @module       RD Mailform
  * @description  Enables RD Mailform Plugin
  */
  ;
  (function ($) {
     ...
     // Form validation messages
     validator: {
        'constraints': {
           '@LettersOnly': {
              message: 'Please use letters only!'
           },
           '@NumbersOnly': {
              message: 'Please use numbers only!'
           },
           '@NotEmpty': {
              message: 'Field should not be empty!'
           },
           '@Email': {
              message: 'Enter valid e-mail address!'
           },
           '@Phone': {
              message: 'Enter valid phone number!'
           },
           '@Date': {
              message: 'Use MM/DD/YYYY format!'
           },
           '@SelectRequired': {
              message: 'Please choose an option!'
           }
        }
     }
     ...
     // Form Submit Messages
     {
        'MF000': '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.'
     }
     ...
  })(jQuery);

SMTP server configuration

SMTP server setting does not relate to RD Mailform form settings at all.

In order to send your site messages via SMTP-server you'll need to refer to official PhpMailer (library, used in form) documentation or check this tutorial from official documentation.

http://phpmailer.worxware.com/?pg=examplebsmtp

Please, note: mail form extension does not work locally. You should upload site to corresponding hosting server in order to send emails.

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-rd-navbar-lg data attribute value.

  <div class="rd-navbar-wrap">
      <nav class="rd-navbar" data-rd-navbar-lg="rd-navbar-sidebar">
          ...
      </nav>
  </div>

Please, note: layout type in data-rd-navbar-lg attribute defines only desktop layout for your panel. Navigation panel appearance for lower resolutions is defined by template design specifications 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.

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-vide-bg="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-vide-bg="video/video-bg" class="vide">
    ...
</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.

Magnific Popup - Modal window

HTML Website Templates use Magnific Popup extension to implement modal windows functionality.

Inserting modal window to page

Data-lightbox attribute adding to any of page links or buttons will automatically convert it into modal window. You may also use different types of modal windows for a quick initialization.

Separate image

To insert modal window with separate image you should use data-lightbox=”image” attribute at the target link code.

<a href="link-to-popup-image.jpg" data-lightbox="image">
    <img src="link-to-thumbnail-of-popup-image.jpg" alt="Image 1"/>
</a>

Iframe

To insert modal window with iframe you should use data-lightbox=”iframe” attribute at the target link code.

<a href="http://yoursite.com/target-page/" data-lightbox="iframe">Open Page In Modal</a>

Youtube & Vimeo Video

To insert modal window with Youtube or Vimeo video you should use data-lightbox=”iframe” attribute at the target link code.

<a href="http://www.youtube.com/watch?v=0O2aH4XLbto" data-lightbox="iframe">Open Video</a>

<a href="https://vimeo.com/45830194" data-lightbox="iframe">Open Video</a>

Gallery

To create modal gallery you should use data-lightbox=”gallery” attribute for parent item of target child modal items group.

<div data-lightbox="gallery">
    <a href="http://yoursite.com/target-page/" data-lightbox="iframe">
        Gallery Iframe item
    </a>
    <a href="link-to-modal-image.jpg" data-lightbox="image">
        Gallery Image item
    </a>
    <a href="https://vimeo.com/45830194" data-lightbox="iframe">
        Gallery Video item
    </a>
</div>

Adding captions to images

To add corresponding image caption in modal window you should specify optional title attribute to target item with data-lightbox data attribute.

<a href="link-to-popup-image.jpg" data-lightbox="image" title="Image Caption">
    <img src="link-to-thumbnail-of-popup-image.jpg" alt="Image 1"/>
</a>

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">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <div class="swiper-slide-caption">
                Slide 1
            </div>
        </div>
        <div class="swiper-slide">
            <div class="swiper-slide-caption">
                Slide 2
            </div>
        </div>
        <div class="swiper-slide">
            <div class="swiper-slide-caption">
                Slide 3
            </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>

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 define additional .rd-parallax class at target slide and specify corresponding data-url , etc. data attributes to configure parallax effect.

<div class="swiper-container swiper-slider">
    <div class="swiper-wrapper">
        <div class="swiper-slide rd-parallax">
            <div class="rd-parallax-layer" data-speed="0.6" data-type="media"
                 data-url="images/page-1_img01.jpg"></div>
            <div class="rd-parallax-layer" data-speed="0.7" data-type="html"
                 data-fade="true">
                <div class="swiper-slide-caption">
                    ...
                </div>
            </div>
        </div>
    </div>
</div>

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 define additional .vide class at target slide and specify corresponding data-vide-bg, etc. data attributes to configure background video effect.

<div class="swiper-container swiper-slider">
    <div class="swiper-wrapper">
        <div class="swiper-slide vide"
             data-vide-bg="path/to/video">
            <div class="swiper-slide-caption">
                ...
            </div>
        </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" 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 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">
    <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.


<div class="isotope-filters">
    <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>
</div>

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>

Stacktable. Responsive tables

HTML Website Templates use Stacktable extension to create responsive tables.

In order to change target table to responsive one you should just add data-responsive=”true” data attribute to its code structure.

<table data-responsive="true">
    ...
</table>

RD Parallax. Parallax script

HTML Website Templates use RD Parallax extension to implement parallax effects to page.

Basic script code structure appears as follows:

<!-- 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 item is set as separate layer. There can be an unlimited number of layers.

Layer type configuration

In order to configure type of layer you should use data-type data attribute.

Data-type data attribute can take media and html values.

It defines parallax layer type. If it’s set to media, layer size calculation will be based on parallax section height, if html - size is based on content included.

For example,

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

Layer speed configuration

In order to configure speed of layer you should use data-speed data attribute.

Data-speed data attribute can take values from 0 to 2.

It defines parallax scrolling speed compared to scrollbar. For better understanding, if the speed is set to 1 you get emulation of background-attachment: fixed css property.

For example,

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

Layer blur configuration

In order to configure layer blur you should use data-blur data attribute.

Data-blur attribute can take true, false values.

If it’s set to true image blur is enabled, in case it’s size is not enough for correct image appearing in parallax section.

For example,

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

Layer scrolling direction setup

In order to set layer scrolling direction you should use data-direction data attribute.

Data-direction attribute can take inverse, normal values.

It defines scrolling direction of parallax layer. It it’s set to normal parallax will move parallel to page scroll, if to inverse - in the opposite direction.

For example,

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

Media layer background image setup

In order to set background image to media layer, just specify data-url data attribute.

For example,

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

HTML layer appearance effect configuration

In order to customize HTML layer appearance effect you should use data-fade data attribute.

Data-fade attribute can take values true, false.

If it’s set to true, layer will gradually emerge from the full transparency to full opacity depending on layer scroll position.

For example,

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

Custom layer content management

Block with data-type="media" data attribute can include any custom content inside, like various slider scripts, background video, etc. In order to place custom content inside of media object, just do not specify data-url data attribute.

For example,

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