HTML Templates Documentation

Extensions

RD Calendar. A calendar with events support

HTML Website Template use RD Calendar extension for implementing calendar functionality. The basic HTML marking for a calendar looks the following way:

        <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 the classes for creating the HTML markup

RD Calendar supports the following structural elements for creating a calendar markup:

  • .rdc-today_day
    displays the current day of the week;
  • .rdc-today_date
    displays the current day of the month;
  • .rdc-today_month
    displays the current month;
  • .rdc-today_fullyear
    displays the current year;
  • .rdc-panel
    displays the info panel;
  • .rdc-prev
    displays the previous month switcher;
  • .rdc-next
    displays the next month switcher;
  • .rdc-month
    displays the calendar month;
  • .rdc-fullyear
    displays the calendar year;
  • .rdc-table
    displays the days of the month table;
  • .rdc-table_day
    displays the day of the week in the calendar;
  • .rdc-table_date
    displays the day of the month in the calendar;
  • .rdc-table_events
    displays events of the day of the month in the calendar;
  • .rdc-table_has-events
    displays a calendar day that contains events;
  • .rdc-table_events-count
    displays the amount of events in a calendar day;
  • .rdc-table_event
    displays an event in a day of a month in the calendar;
  • .rdc-table_today
    displays the current day of a month in the calendar;
  • .rdc-table_prev
    displays the days of the previous month of the calendar;
  • .rdc-table_next
    displays the days of the next month of the calendar;

Days of the week display format setup

By default, days of the week are displayed in the following way in RD Calendar:

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

To setup a custom days of the week display format, please use the data attribute 'data-days' for the target calendar in the HTML marking. The value should be represented as a line of the days, separated by commas:


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

Attention: RD Calendar display format can take any form. You just need to specify the content you need: any text in any language in a format, shown in the example (text that is separated by commas).

Months of the year format setup

By default moths of the year in RD Calendar are displayed in the following format:

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

To set up a custom months of the year format, use the 'data-months'attribute for the target calendar in the HTML marking. The value should be represented as a line of the months, separated by commas:


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

Attention: RD Calendar display format can take any form. You just need to specify the content you need: any text in any language in a format, shown in the example (text that is separated by commas).

Managing events in the calendar

To match a certain event with a certain day in the calendar, set the corresponding event marking in the events list of the target calendar:


        <!-- 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 pay attention that data-date="10/28/2015" attribute of the .rdc-event element is required and should have the MM/DD/YYYY format, otherwise the script will not display the day with the described event and will not show it in the calendar. The event itself can contain any nested marking.

RD Parallax

HTML Website Template uses 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 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:


<!-- RD Mailform-->
<form data-form-output="form-output-global" data-form-type="contact" method="post" action="bat/rd-mailform.php" class="rd-mailform">
  <div class="form-wrap">
    <label for="contact-name" class="form-label">Name</label>
    <input id="contact-name" type="text" name="name" data-constraints="@Required" class="form-input">
  </div>
  <div class="form-wrap">
    <label for="contact-phone" class="form-label">Phone</label>
    <input id="contact-phone" type="text" name="phone" data-constraints="@Required" class="form-input">
  </div>
  <div class="form-wrap">
    <label for="contact-email" class="form-label">E-Mail</label>
    <input id="contact-email" type="email" name="email" data-constraints="@Email @Required" class="form-input">
  </div>
  <div class="form-wrap">
    <label for="contact-message" class="form-label">Message</label>
    <textarea id="contact-message" name="message" data-constraints="@Required" class="form-input"></textarea>
  </div>
  <button type="submit" class="button button-primary">Send</button>
</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 Template Template 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 Template Template 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.

RD Navbar supports managing layout with the help of data-attributes:
  1. data-layout
    sets default navbar layout.
  2. data-sm-layout
    sets navbar layout for SM resolution.
  3. data-md-layout
    sets navbar layout for MD resolution.
  4. data-lg-layout
    sets navbar layout for LG resolution.

Setting navbar layout type for mobile devices

  1. data-sm-device-layout
    sets navbar layout type for mobile devices with SM resolution.
  2. data-md-device-layout
    sets navbar layout type for mobile devices with MD resolution.
  3. data-lg-device-layout
    sets navbar layout type for mobile devices with LG resolution.

Pay attention: data-md-device-layout='rd-navbar-fullwidth', data-lg-device-layout="rd-navbar-static" attributes are required. Otherwise, touchpad desktops will display navbar layout for mobile devices.

Offset for stick up on scroll setup

RD Navbar supports setting up the offset, on which the navbar will stick up. Use data-(*)-stick-up-offset attribute for this:

  1. data-sm-stick-up-offset
    sets navbar stick-up offset for SM resolution.
  2. data-md-stick-up-offset
    sets navbar stick-up offset for MD resolution.
  3. data-lg-stick-up-offset
    sets navbar stick-up offset for LG resolution.

You can specify the exact offset value, as well as navbar height ratio.

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.

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-group">
      <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-control
                  form-control-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-group">
    <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-control"/>
    <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>

  

RD Video Player

HTML Website Template uses RD Video Player extension for implementing a video player.

Adding video player to the page

To add the video player to the target HTML page, use the following markup:


        <div data-rd-video-path="path/to/video" class="rd-video-player">
            <div class="rd-video-wrap embed-responsive-16by9">
                <div class="rd-video-preloader">< /div>
                <video preload="metadata">/video>
                <div class="rd-video-preview">/div>
                <div class="rd-video-top-controls">
                    <span class="rd-video-title"></span>
                    <a href="#" class="rd-video-fullscreen mdi mdi-fullscreen rd-video-icon"></a>
                </div>
                <div class="rd-video-controls">
                    <div class="rd-video-controls-buttons">
                        <a href="#" class="rd-video-prev mdi mdi-fast-forward rd-video-icon"></a>
                        <a href="#" class="rd-video-play-pause mdi mdi-play"></a>
                        <a href="#" class="rd-video-next mdi mdi-fast-forward rd-video-icon"></a>
                    </div>
                    <div class="rd-video-progress-bar"><  /div>
                    <div class="rd-video-time">
                        <span class="rd-video-current-time">< /span>
                        <span class="rd-video-time-divider">:</span>
                        <span class="rd-video-duration">< /span><  /div>
                    <div class="rd-video-volume-wrap">
                        <a href="#" class="rd-video-volume mdi mdi-volume-high rd-video-icon">/a>
                        <div class="rd-video-volume-bar-wrap">

                            <div class="rd-video-volume-bar"></div>
                        </div>
                    </div>
                </div>
            </div>
    

You can alter this markup in order to change the appearance of the video player. To make player work, you just need to add classes for certain elements. You will find a list of these classes below in a class map:

Video player class map

  • .rd-video-prev
    the player switches to the previous video;
  • .rd-video-play-pause
    play/pause button;
  • .rd-video-next
    the player switches to the next video;
  • .rd-video-stop
    stop button;
  • .rd-video-progress-bar
    playback progress bar;
  • .rd-video-progress-bar-slider
    video progress bar slider;
  • .rd-video-duration
    displays video duration;
  • .rd-video-current-time
    displays current playback time;
  • .rd-video-title
    displays video title;
  • .rd-video-fullscreen
    a button to enable\disable fullscreen mode;
  • .rd-video-volume
    a button to enable\disable sound;
  • .rd-video-volume-bar
    volume bar;
  • .rd-video-volume-bar-slider
    volume bar slider;
  • .rd-video-playlist
    playlist.

Changing video in video player

To change the video, specify the new video path without the format in 'data-rd-video-path' attribute. This attribute won’t work, if you have a playlist:


        <div data-rd-video-path="path/to/video" class="rd-video-player">
            ...
        </div>
    

Changing video title in video player

To change the tilt of the video, specify the video title in 'data-rd-video-title' attribute. This attribute won’t work, if you have a playlist:


        <div data-rd-video-title="Your title" class="rd-video-player">
            ...
        </div>
    

Disabling video volume in the video player by default

To disable the video player volume, add the 'data-rd-video-muted' attribute with 'true' value:


        <div data-rd-video-muted="true" class="rd-video-player">
            ...
        </div>
    

Setting up the default video player volume

To change the default video player volume, add the data-rd-video-volume attribute. It can take values from 0 to 1:


        <div data-rd-video-path="path/to/video" class="rd-video-player" data-rd-video-volume="0.5">
            ...
        </div>
    

Adding a playlist to the video player

HTML marking for creating a playlist looks the following way:


        <ul data-rd-video-play-on="li" class="rd-video-playlist">
            <li data-rd-video-src="path/to/video1" data-rd-video-title="title 1">
                ...
            </li>
            <li data-rd-video-src="path/to/video2" data-rd-video-title="title 2">
                ...
            </li>
        </ul>
    

The marking inside the element can take any form. To add a url of a video file with list elements, use the following attributes:

  • data-rd-video-src
    path to the video file without format;
  • data-rd-video-title
    video title (an additional attribute, necessary for displaying the video title in the player).

RD Audio Player

HTML Website Template uses RD Audio Player extension for implementing audio player functionality.

Adding audio player to the page

To add audio player to the target HTML page, use the following marking:


        <div data-rd-audio-playlist-name="audio-playlist" class="rd-audio">
            <div class="rd-audio-controls">
                <div class="rd-audio-controls-left">
                    <a href="#" class="rd-audio-prev mdi mdi-fast-forward rd-audio-icon"></a>
                    <a href="#" class="rd-audio-play-pause mdi mdi-play rd-audio-icon has-controls"></a>
                    <a href="#" class="rd-audio-next mdi mdi-fast-forward rd-audio-icon"></a>
                </div>
                <div class="rd-audio-progress-bar-wrap">
                    <div class="rd-audio-progress-bar"></div>
                    <div class="rd-audio-time">
                        <span class="rd-audio-current-time">00:00</span>
                        <span class="rd-audio-time-divider">/</span>
                        <span class="rd-audio-duration">00:00</span>
                    </div>
                    <div class="rd-audio-title-wrap">
                        <span class="rd-audio-author"></span>
                        <span class="rd-audio-title-divider">- </span>
                        <span class="rd-audio-title"></span>
                    </div>
                </div>
                <a href="#" class="rd-audio-volume mdi mdi-volume-high rd-audio-icon"></a>
                <div class="rd-audio-volume-bar"></div>
                <div class="rd-audio-controls-right">
                    <a href="#" class="rd-audio-playlist-button rd-audio-icon mdi mdi-dots-horizontal"></a>
                </div>
            </div>
        </div>
    

You can alter this marking in order to change the appearance of the video player. To make player work, you just need to add classes for certain elements. You will find a list of these classes below in a class map:

Audio player class map

q
  • .rd-audio-prev
    the player switches to the previous track;
  • .rd-audio-play-pause
    play/pause button;
  • .rd-audio-next
    next track button;
  • .rd-audio-stop
    stop button;
  • .rd-audio-progress-bar
    playback progress bar;
  • .rd-audio-progress-bar-slider
    playback progress bar slider;
  • .rd-audio-duration
    displays track duration;
  • .rd-audio-current-time
    displays current playback time;
  • .rd-audio-title
    displays track title;
  • .rd-audio-author
    displays track author;
  • .rd-audio-volume
    a button to enable\disable sound;
  • .rd-audio-volume-bar
    volume bar;
  • .rd-audio-volume-bar-slider
    volume bar slider;
  • .rd-audio-playlist
    playlist.

Changing the track in audio player

To change the track, specify the new audio track path without the format in 'data-rd-audio-src' attribute. This attribute won’t work, if you have a playlist:


        <div data-rd-audio-src="path/to/audio" class="rd-audio">
            ...
        </div>
    

Adding a playlist to the audio player

This plugin supports creating an unlimited number of playlists on the page.To load a certain playlist, add the 'data-rd-audio-playlist-name' attribute and specify the playlist name:


        <div data-rd-audio-playlist-name="name" class="rd-audio">
            ...
        </div>
        ...
        ...
        <ul data-rd-audio-playlist="name">
            ...
        </ul>
    

The main principles of creating a playlist are specified below.

Changing audio title in audio player

To change the title of the audio, specify the audio title in 'data-rd-audio-title' attribute. This attribute won’t work, if you have a playlist:


        <div data-rd-audio-title="Your Title" class="rd-audio">
            ...
        </div>
    

Changing the author of the audio track title in audio player

To change the author of the track, specify the author in 'data-rd-audio-author' attribute. This attribute won’t work, if you have a playlist:


        <div data-rd-audio-author="Your Author" class="rd-audio">
            ...
        </div>
    

Track autoplay

To enable track autoplay, add the 'data-rd-audio-autoplay' attribute with 'true' value:


        <div data-rd-audio-autoplay="true" class="rd-audio">
            ...
        </div>
    

Audio loop

To enable audio loop, add the 'data-rd-audio-loop' attribute with 'true' value:


        <div data-rd-audio-loop="true" class="rd-audio">
            ...
        </div>
    

Adding a playlist to the audio player

HTML marking for creating a playlist looks the following way:


        <ul data-rd-audio-playlist="audio-playlist" data-rd-audio-play-on="li" class="rd-audio-playlist">
            <li data-rd-audio-src="path/to/audio1" data-rd-audio-title="title 1"
                                                                        data-rd-audio-author="author 1">
                ...
            </li>
            <li data-rd-audio-src="path/to/audio2" data-rd-audio-title="title 2"
                                                                        data-rd-audio-author="author 2">
                ...
            </li>
        </ul>
    

The marking inside the element can take any form. To add a url of a video file with list elements, use the following attributes:

  • data-rd-audio-src
    path to the audio file;
  • data-rd-audio-title
    audio track title (an additional attribute, necessary for displaying the audio track title in the player);
  • data-rd-audio-author
    track author (an additional attribute, necessary for displaying the audio track author in the player).

RD Background Video

HTML Website Template uses RD Background Video for adding a page background video. The basic marking looks the following way:


        <div
                data-rd-video-path="video/bg-video-1/bg-video-1"
                data-rd-video-image-xs="26"
                data-rd-video-image-sm="26"
                data-rd-video-image-md="37"
                data-rd-video-image-lg="74"
                data-rd-video-image-xlg="100"
                class="rd-video">
            ...
        </div>
    

File requirements

This plugin can adopt the video quality to Internet speed. To achieve this, prepare 5 versions of the video with different extensions for the correct functioning of the script. Moreover, prepare 5 version of the image with *.jpg extension for image display on mobile devices or PCs with low Internet speed.

Please name the files the following way:

video-(suffix).mp4
video-image-(suffix).jpg

Here is the list of extensions, which you should prepare, and their suffixes:

  • 1920х1080 - xlg (video-xlg.mp4);
  • 1280х720 - lg (video-lg.mp4);
  • 854х480 - md (video-md.mp4);
  • 640х360 - sm (video-sm.mp4);
  • 380х240 - xs (video-xs.mp4).

As a result, you should have 10 files: 5 video files and 5 images.

Changing the background video

To change the background video in the existing section of HTML marking, change the video path in 'data-rd-video-path' data attribute. You shouldn’t specify the video extension, just specify the filename, and the script will automatically select the right format.

E.g.:


        <div data-rd-video-path="video/bg-video-1/bg-video-1"></div>
    

Moreover, to correctly determine Internet speed, specify the size of each image in KB with the help of attributes. Attribute suffixes are specified in "File requirements" section.

E.g.:


        <div
                data-rd-video-path="video/bg-video-1/bg-video-1"
                data-rd-video-image-xs="26" data-rd-video-image-sm="26"
                data-rd-video-image-md="37"
                data-rd-video-image-lg="74"
                data-rd-video-image-xlg="100"
                class="rd-video">
            ...
        </div>
    

RD Flickr Gallery

HTML Website Template uses RD Flickrgallery extension to display data from https://www.flickr.com/ service on the web-page.

Adding widget to the page

The basic HTML marking for the widget looks the following way:


        <div class="flickr" data-flickr-id="[email protected]">
            <div data-type="flickr-item">
                <img data-image_q="src" data-title="alt" src="images/_blank.png" alt=""/>
            </div>
        </div>
    

You can display an unlimited number of items and use this widget several times on one page. Moreover, you can integrate this extension with any third-party scripts (e.g.: carousel, gallery, etc.) HTML structure inside the widget is up to you. For example, you can use ТМ Grid system for handy placing of the elements. Only the data-type="flickr-item" attribute is required.

Flickr account setup

To set up the user, specify the user ID in 'data-id' attribute. E.g.:


        <div class="flickr" data-flickr-id="[email protected]">
    

You can get the user ID by the following link:

http://idgettr.com/.

To get data from several accounts, specify them in 'data-id' attribute, separated by commas.

Data filtering setup

To filter data by tags, add the 'data-tags' attribute. To specify several tags, point them out, separated by commas. E.g.:


        <div class="flickr" data-flickr-id="[email protected],[email protected]"
                            data-flickr-tags="webdesign, baseball" data-flickr-tagmode="any">
    

Where the 'data-flickr-tagmode' defines the filtration type and can take 2 values:

  • any
    displaying the element, if it corresponds to at least one tag;
  • all
    displaying the element, if it corresponds to all tags.

Date format setup

To set up the date format, add the 'data-flickr-date-format' attribute. E.g.:


        <div class="twitter" data-flickr-date-format="%b/%d/%Y">
    

where

  • %d
    displays a digit (1,2,3);
  • %Y
    displays full year format (2011, 2013, 2015);
  • %y
    displays 2 last digits of the year (11, 13, 15);
  • %m
    displays month number (1,2,3);
  • %B
    displays full month name (January, February, March);
  • %b
    displays shortened month name (Jan, Feb, Mar).

By default, the date has the Oct/30/2015 format.

Language setup

To change the language, add the 'data-lang' attribute. E.g.:


        <div class="flickr" data-flickr-id="[email protected],[email protected]" data-flickr-lang="en-us">
    

Allowed values:

  • de-de
    German;
  • en-us
    English;
  • es-us
    Spanish;
  • fr-fr
    French;
  • it-it
    Italian;
  • ko-kr
    Korean;
  • pt-br
    Portuguese;
  • zh-hk
    Chinese.

Creating the valid element structure

You can get the element data only inside the block with data-type="flickr-item" attribute. E.g.:


        <div data-type="flickr-item">
            <img data-image_q="src" data-title="alt" src="images/_blank.png" alt=""/>
        </div>
    

Widget logics

To obtain widget element data, add the following attribute:

data-(data name)="target"

Where 'target' is the attribute to insert the data into. If 'target' has 'text' value, the data inside the tag will be displayed as regular text. You can find some examples on getting data of different types below. If you need to enter the data values to several attributes, specify them, separated by commas.

Item image display

To add a link to the service image, specify the data-image_(image suffix)="src" attribute. E.g.:


        <img data-image_q="src" data-title="alt" src="images/_blank.png" alt=""/>
    

With the help of the image suffix, you can specify the desired image size. You can use the following values:

  • s: 75px75px;
  • q: 150pх150px;
  • t: 100px on the larger side;
  • m: 240px on the larger side;
  • n: 320px on the larger side;
  • -: 500px on the larger side;
  • z: 640px on the larger side;
  • c: - 800px on the larger side;
  • b: - 1024px on the larger side;
  • h: - 1600px on the larger side;
  • k: - 2048px on the larger side;
  • o: - original image.

Item link display

To display the service image link, add the data-link="href,text" attribute. For example, to display a link with text, use the following markup:


        <a href="#" data-link="href,text"></a>
    

Item author display

To display the element author and specify the e-mail, add the data-author_name="text" attribute. E.g.:


        <p data-author_name="text"></p>
    

To display the author without the e-mail, please use the data-author="text" attribute. E.g.:


        <p data-author="text"></p>
    

Item tags display

To display item tags, add the data-tags="text" attribute. E.g.:


        <p data-tags="text"></p>
    

Item title display

To display item title, add the data-title="text" attribute. E.g.:


        <p data-title="text"></p>
    

Adding date display

To display the item adding date, add the data-dating="text" attribute. To display the date in YY-MM-DD, specify the data-datetime="text" attribute. E.g.:


        <time data-dating="text" data-datetime="datetime"></time>
    

Item description display

To display the item description, specify the data-description="text" attribute. E.g.:


        <p data-description="text"></p>
    

RD Twitterfeed

HTML Website Template uses jquery.rd-twitter-feed.js to get data from https://twitter.com/ service on the website.

Adding widget to the page

The basic widget HTML markup to display one element looks the following way:


        <div class="twitter" data-twitter-username="templatemonster">
            <div data-twitter-type="tweet">
                <img data-media_url="src" src="images/_blank.png" alt=""/>
                <p data-tweet=text></p>
            </div>
        </div>
    

You can display an unlimited number of elements and use this widget several times on one page. Moreover, you can integrate this extension with any third-party script (e.g.: carousel, gallery, etc.) HTML structure inside the widget is up to you. For example, you can use ТМ Grid system for handy placing of the elements. Only the data-twitter-type="tweet" attribute is required.

Project setup to work with Twitter API

To work with Twitter API, create an application in your Twitter account, generate the keys and specify the in bat/twitter_api/config.php file. Here is the list of the necessary keys:

  • CONSUMER_KEY;
  • CONSUMER_SECRET;
  • ACCESS_TOKEN;
  • ACCESS_SECRET.

config.php file:


        // Consumer Key
        define('CONSUMER_KEY', 'Put CONSUMER_KEY here ');
        define('CONSUMER_SECRET', 'Put CONSUMER_SECRET here');

        // User Access Token
        define('ACCESS_TOKEN', 'Put ACCESS_TOKEN here');
        define('ACCESS_SECRET', 'Put ACCESS_SECRET here');
    

Local use

If you run the project from files, the plugin won’t work as it requires PHP 5.2+. If used on the local server, Twitter date won’t be received as Twitter authentication service can’t access local data. You will see text data instead, that are identical to what you get from Twitter. When you load the template to a live server, you’ll get the real data.

Twitter account setup

To set up the user, specify the username in data-twitter-username attribute. E.g.:


        <div class="twitter" data-twitter-username="templatemonster">
    

Displaying tweets by a hashtag

To filter tweets by hashtags, specify its name in 'data-twitter-hashtag' attribute.


        <div class="twitter" data-twitter-hashtag="webdesign">
    

Attention! You can display tweets only by a hashtag or by a username

Displaying tweets from a list

To filter tweets by a list, specify its name in data-twitter-listname attribute and specify the username with the help of data-twitter-username attribute. E.g.:


        <div class="twitter" data-twitter-username="templatemonster" data-twitter-listname="templatemonster">
    

Attention! You can display tweets by a list, only if you specify the username.

Date format setup

If the tweet was added recently (up to 2 days), set up the date format in the following way:

  1. If the tweet was added less than a minute ago: To configure this text, add the 'data-twitter-date-seconds' attribute. E.g.:

    
                    <div class="twitter" data-twitter-date-seconds="less 1m">
                
  2. If the tweet was added less than an hour ago: To configure the text that is displayed next to the number of minutes (after the tweet was added), add the 'data-twitter-date-minutes' attribute. E.g.:

    
                    <div class="twitter" data-twitter-date-minutes="m">
                
  3. If the tweet was added less than 24 hours ago: To configure the text that is displayed next to the number of minutes (after the tweet was added), add the 'data-twitter-date-hours' attribute. E.g.:

    
                    <div class="twitter" data-twitter-date-hours="h">
                
  4. If the tweet was added yesterday: To configure the text that is displayed next to the number of minutes (after the tweet was added), add the 'data-twitter-date-yesterday' attribute. E.g.:

    
                    <div class="twitter" data-twitter-date-yesterday="yd">
                
  5. If the tweet was added more than 2 days age, add the 'data-date-format' attribute to set up the date display format. E.g.:

    
                    <div class="twitter" data-twitter-date-format="%b/%d/%Y">
                

    where

    • %d
      displays a digit (1,2,3);
    • %Y
      displays full year format (2011, 2013, 2015);
    • %y
      displays 2 last digits of the year (11, 13, 15);
    • %m
      displays month number (1,2,3);
    • %B
      displays full month name (January, February, March);
    • %b
      displays shortened month name (Jan, Feb, Mar).

    By default, the date has the Oct/30/2015 format.

Creating the valid element structure

You can get the element data only inside the block with data-type="tweet" attribute. E.g.:


        <div data-twitter-type="tweet">
            <img data-media_url="src" alt="" src="#"/>
            <div data-tweet="text"></div>
        </div>
    

Widget logics

To obtain widget item data, add the following attribute: data-(data name)="target" Where 'target' is the attribute to insert the data to. If 'target' has ‘text’ value, the data inside the tag will be displayed as regular text. You can find some examples on displaying data of different types below. If you need to enter data values to several attributes, specify them, separated by a comma.

Tweet image display

To add a link to the tweet image, specify the data-media_url="src" attribute. E.g.:


        <img data-media_url="src" src="#" alt=""/>
    

Attention: if there is no image in the tweet, this element will be deleted from markup. If you want to display 2 or more images, copy-paste this string of code as many times as needed.

Tweet text display

To display tweet text, specify the data-tweet="text" attribute. E.g.:


        <p data-tweet="text"></p>
    

Adding date display

To display the item adding date, add the data-date="text" attribute. E.g.:


        <div data-date="text"></div>
    

To get the date in 'datetime' attribute format of the 'time', add the data-datetime="datetime" attribute.

User avatar display

To display avatar tags, add the ata-avatar="src" attribute. E.g.:


        <img data-avatar="src" src="#" alt=""/>
    

Tweet link display

To display the tweet link, please use the data-url="href,text" attribute. E.g.:


        <a data-url="href,text"></a>
    

User login display

To display user login in "@templatemonster" format, specify the data-screen_name="text" attribute. E.g.:


        <div data-screen_name="text"></div>
    

Username display

To display the username, specify the data-user_name="text" attribute. E.g.:


        <div data-user_name="text"></div>
    

RD Facebook Feed

HTML Website Template uses jquery.rd-facebook-feed.js to display data from https://facebook.com/ service on the website.

Adding widget to the page

The basic widget HTML markup to display one element looks the following way:


        <div class="facebook" data-fb-id="TemplateMonster" data-fb-access="...">
            <div data-fb-post>
                <img src="images/_blank.png" alt="" data-picture="src" data-remove/>
                <p data-message="text"></p>
            </div>
        </div>
    

You can display an unlimited number of items and use this widget several times on one page. Moreover, you can integrate this extension with any third-party scripts (e.g.: carousel, gallery, etc.) HTML structure inside the widget is up to you. For example, you can use ТМ Grid system for handy placing of the elements. Only the 'data-fb-post' or 'data-fb-user' attribute is required.

Project setup to work with Facebook API

To work with Facebook API, create an application in your Facebook account, generate the AccessToken and specify it the 'data-fb-access' attribute:


        <div class="facebook" data-fb-access="...">
        </div>
    

Facebook account setup

To set up the user, specify the user ID in the 'data-fb-id' attribute. E.g.:


        <div class="facebook" data-fb-id="TemplateMonster">
    

Date format setup

If the post was added more the 2 days ago, add the 'data-fb-date-format' to set up the date display. E.g.:


        <div class="facebook" data-fb-date-format="%b/%d/%Y">
    

where

  • %d
    displays a digit (1,2,3);
  • %Y
    displays full year format (2011, 2013, 2015);
  • %y
    displays 2 last digits of the year (11, 13, 15);
  • %m
    displays month number (1,2,3);
  • %B
    displays full month name (January, February, March);
  • %b
    displays shortened month name (Jan, Feb, Mar).

By default, the date has the Oct/30/2015 format.

Creating valid item structure

You can get the element data only inside the block with 'data-fb-post' or 'data-fb-user' attribute. E.g.:


        <div data-fb-post>
            ...
        </div>
    

Widget logics

To obtain post data, add the following attribute: data-(data name)="target" Where 'target' is the attribute to insert the data to. If 'target' has ‘text’ value, the data inside the tag will be displayed as regular text. You can find some examples on displaying data of different types below. If you need to enter data values to several attributes, specify them, separated by a comma.

Post image display

To display the post image, specify the data-picture="src" attribute. E.g.:


        <img data-picture="src" src="_blank.png" alt=""/>
    

Post text display

To display the post text, specify the data-message="text" attribute. E.g.:


        <p data-message="text"></p>
    

Attachment name display

To display the attachment name, add the data-name="text" attribute. E.g.:


        <div data-name="text"></div>
    

Attachment description display

To display the attachment description, add the data-description="text". attribute. E.g.:


        <div data-description="text"></div>
    

Likes count display

To display likes count, please add the data-likes-count="text" attribute. E.g.:


        <div data-likes-count="text"></div>
    

Post link display

To display post link, use the data-postlink=”href” attribute. E.g.:


        <a href="#" data-postlink="href"></div>
    

User avatar display

To display user avatar, use the data-from-picture="src" attribute. E.g.:


        <img data-from-picture="src" src="_blank.png" alt=""/>
    

Username display

To display username, add the data-from-picture="src" attribute. E.g.:


        <div data-from-name="text"></div>
    

CountTo

HTML Website Template uses jQuery CountTo extension for implementing countdown timers on web-pages.

Adding countdown timer to the page

To add a countdown timer, paste the following HTML code string to the page:


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

where 'data-from' attribute stands for the starting point of the counter, and 'data-to' attribute stands for the final point, required for displaying the countdown on the page.

Adjusting the countdown time

To change the counting speed, add data-speed attribute and specify the time period in milliseconds before the countdown end.

Например,


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

Countdown refresh interval

To change the countdown timer refresh interval, add data-refresh-interval attribute and set the time span in milliseconds.

E.g.:


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

Countdown

HTML Website Template uses jQuery Countdown for implementing the countdown timer.

Adding timer to the page

To add a countdown timer to the target HTML page, please use the following marking:


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

data-type attribute may have the following values:

  1. until
    the timer counts the time until the date specified in the data-time attribute;
  2. since
    the timer counts the time starting from the date specified in the data-time attribute.

E.g.:


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

The countdown will take place until 15:00 December 24, 2016.


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

In this case, the count will start at 15:00 December 24, 2014.

The countdown date should be specified in data-time attribute, using the following format:

    
        DD month YYYY HH:MM
    

where "month" is the month, which 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

E.g:


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

In this case, the countdown will take place until 12:00 August 24, 2016.

Timer display format setup

To set the timer display format, add the data-format attribute.

Use the following symbols (respectively) to specify, which time spans you want to display: "Y" for many years, "O" for several month, "W" for several weeks, "D" for several days, "H" for several hours, "М" for several minutes, "S" for several seconds.

E.g.:


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

In this case, the timer will have the following format:

for several weeks, for several days, for several hours.

RD Range. Range selection

HTML Website Templates use RD Range plugin to enable range selection.

The plugin supports the following settings:

  • data-min
    sets min range value.
  • data-max
    sets max range value.
  • data-step
    sets step value.
  • data-start
    sets start position. For example: [10,20].
  • data-min-diff
    sets min acceptable difference between 2 values.
  • data-input
    you should specify CSS selector of the HTML element, in which the value should be displayed (required).
  • data-input-2
    you should specify CSS selector of the HTML element, in which the second value should be displayed.
  • data-precision
    data-precision - sets the number of characters after the decimal point for values. For example: (0,01).
  • data-tooltip
    data-tooltip - enables\disables tooltips with current values for each indicator.

The basic range selection marking looks the following way:

  
        <!-- RD Range-->
        <input type="text" name="value-1" class="rd-range-input-value-1"/>
        <input type="text" name="value-2" class="rd-range-input-value-2"/>

        <div class="rd-range" data-min="50" data-max="1000" data-start="[75, 244]" data-step="1"
          data-tooltip="true" data-min-diff="10"
          data-input=".rd-range-input-value-1" data-input-2=".rd-range-input-value-2"></div>
    

You can create a simple range selection slider:

  
         <!-- RD Range single line-->
         <div class="rd-range-input-value-3"> </div>

         <div class="rd-range" data-min="1" data-max="100" data-start="[15]" data-step="1"
                data-min-diff="10" data-input=".rd-range-input-value-3" > </div>
    

Isotope layout filter

HTML Website Template uses Isotope for creating a layout filter.

Adding Isotope to the page

To insert isotope to the corresponding layout of the target page, you should just add the 'data-isotope-layout' attribute to the target HTML marking and specify the corresponding layout mode:


        <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>
    

Supported layout modes are the following:

  1. masonry
    elements are grouped randomly;
  2. fitRows
    elements are grouped horizontally;
  3. vertical
    elements are grouped vertically.

To insert isotope to the layouts, which do not contain grid elements, you should define the .isotope-item class for every isotope element.


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

Attention: in this case, dimensions of Isotope elements should be set up manually. HTML Website Template offers the ready-made functionality only for the grid elements.

Isotope item filter

To add Isotope filters to a page, you should define a group of Isotope items with the help of the 'data-isotope-group' attribute and define the 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>
    

Now, for items filtering it’s enough just to define the corresponding filter control buttons for the target group of Isotope items.


        <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>
    

Bootstrap Accordions. Accordions

HTML Website Template uses Bootstrap extension for implementing accodrions. To add аccordions to the target page, use the following marking:


<div id="accordionOne" role="tablist" aria-multiselectable="true" class="accordion-custom">
  <!-- Bootstrap panel-->
  <div class="panel panel-custom">
    <div id="accordionOneHeading1" role="tab" class="accordion-custom-title">
      <a role="button" data-toggle="collapse" data-parent="#accordionOne" href="#accordionOneCollapse1"
            aria-controls="accordionOneCollapse1" aria-expanded="true">Accodrion 1
        <div class="accordion-custom-arrow"></div></a></div>
    <div id="accordionOneCollapse1" role="tabpanel" aria-labelledby="accordionOneHeading1"
          aria-expanded="true" class="panel-collapse collapse in">
      <div class="accordion-custom-body">
        <p>Accordion content 1</p>
      </div>
    </div>
  </div>
  <!-- Bootstrap panel-->
  <div class="panel panel-custom">
    <div id="accordionOneHeading2" role="tab" class="accordion-custom-title">
      <a role="button" data-toggle="collapse" data-parent="#accordionOne" href="#accordionOneCollapse2"
          aria-controls="accordionOneCollapse2" aria-expanded="false" class="collapsed">Accodrion 2
        <div class="accordion-custom-arrow"></div></a></div>
    <div id="accordionOneCollapse2" role="tabpanel"
          aria-labelledby="accordionOneHeading2"
          aria-expanded="false" class="panel-collapse collapse">
      <div class="accordion-custom-body">
        <p>Accordion content 2</p>
      </div>
    </div>
  </div>
  <!-- Bootstrap panel-->
  <div class="panel panel-custom">
    <div id="accordionOneHeading3" role="tab" class="accordion-custom-title">
        <a role="button" data-toggle="collapse" data-parent="#accordionOne" href="#accordionOneCollapse3"
            aria-controls="accordionOneCollapse3" aria-expanded="false" class="collapsed">Accodrion 3
        <div class="accordion-custom-arrow"></div></a></div>
    <div id="accordionOneCollapse3" role="tabpanel" aria-labelledby="accordionOneHeading3"
          aria-expanded="false" class="panel-collapse collapse">
      <div class="accordion-custom-body">
        <p>Accordion content 3</p>
      </div>
    </div>
  </div>
</div>

Bootstrap Tabs.Tabs

HTML Website Template uses Bootstrap extension for implementing tabs. To add tabs to the target page, use the following marking:


<div class="tabs-custom">
  <ul class="tabs-custom-list accordion-custom">
    <li class="accordion-custom-title active"><a href="#tabs-1-1" data-toggle="tab">Tab 1
        <div class="accordion-custom-arrow"></div></a></li>
    <li class="accordion-custom-title"><a href="#tabs-1-2" data-toggle="tab">Tab 2
        <div class="accordion-custom-arrow"></div></a></li>
    <li class="accordion-custom-title"><a href="#tabs-1-3" data-toggle="tab">Tab 3
        <div class="accordion-custom-arrow"></div></a></li>
  </ul>
  <!-- Tab panes-->
  <div class="tab-content text-secondary">
    <div id="tabs-1-1" class="tab-pane accordion-custom-body tab-content-item fade in active">Tab content 1</div>
    <div id="tabs-1-2" class="tab-pane accordion-custom-body tab-content-item fade">Tab content 2</div>
    <div id="tabs-1-3" class="tab-pane accordion-custom-body tab-content-item fade">Tab content 3</div>
  </div>
</div>

Responsive Tabs

HTML Website Template uses jQuery Responsive Tab extension for implementing tabs. To add tabs to the target page, use the following marking:


        <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>
    

Responsive Tabs. Accordion

HTML Website Template uses jQuery Responsive Tab extension for implementing accordion. To add accordion to a target page, use the following marking:


        <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 Material Tabs

HTML Website Template uses RD Material Tabs to implement tabs. To add a tab, use the following marking:

    // RD Material Tabs
    <div class="rd-material-tabs">
      <div class="rd-material-tabs__list">
        <ul>
          <li>
            <a href='#'>  Tab 1 </a>
          </li>
          <li>
            <a href='#'>  Tab 2 </a>
          </li>
          <li>
            <a href='#'>  Tab 3 </a>
          </li>
        </ul>
      </div>
      <div class="rd-material-tabs__container">
        <div>
          Content 1
        </div>
        <div>
          Content 2
        </div>
        <div>
          Content 3
        </div>
      </div>
    </div>
  

Stacktable. Adaptive tables

HTML Website Template uses Stacktable extension for implementation of adaptive tables.To make a target table adaptive, just add the data-responsive="true" attribute to its marking:


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

Progress Bar. Horizontal and radial progress bars

TML Website Templates use ProgressBar.js to implement horizontal and radial progress bars.

The basic HTML marking for a progress bar looks the following way:

  
      <!-- Progress-bar -->
      <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 type (this class is required).
  • progress-bar-style
    progress bar styles.
  • data-value
    progress bar value (this attribute is required).
  • data-stroke
    progress bar tail width (this attribute is required).
  • data-trail
    progress bar trail width.
  • data-easing
    progress bar animation easing.
  • data-counter
    progress bar counter.
  • data-duration
    progress bar animation duration in milliseconds.

Progress bar value setup

To specify the percentage of how much the progress bar is filled, use the data-attribute data-value.

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

Progress bar tail width setup

To specify progress bar tail width, use the data-attribute data-stroke.

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

Progress bar trail width setup

To set up progress bar trail width, set the data-attribute data-trail.

  
     <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

To set up progress bar animation easing, use the data-attribute data-easing, using the corresponding animation easing function.

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

The following animation easing functions are supported:

  1. linear
  2. easeIn
  3. easeOut
  4. easeInOut

Progress bar animation duration

To set progress bar animation duration (800 milliseconds by default), use the data-attribute data-duration.

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

Circle-progress. Radial progress bar with gradient

HTML Website Template uses jquery-circle-progress.js to implement radial progress bars with gradient.

The basic HTML marking for creating a progress bar looks the following way:


    <!-- Circle Progress Bar-->
    <div data-value="0.8"
         data-gradient="#5aba67, #78c157"
         data-empty-fill="rgb(245,245,245)"
         data-size="150" class="progress-bar-circle">
      <span></span>
    </div>
  

where:

  • data-value
    progress bar value (required attribute);
  • data-gradient
    progress bar filled part color value (required attribute);
  • data-size
    progress bar size in pixels;
  • data-empty-fill
    progress bar empty part color value.

Swiper Slider

HTML Website Template uses Swiper Slider extension to implement a slider on template pages with advanced data-API user interface.


        <!-- 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 -->
    

Slider height setup

Swiper slider height is set with the help of the 'data-height' and 'data-min-height' attributes for the target slider:

  1. data-height
    defines the desired slider height;
  2. data-min-height
    defines the minimal slider height.

To define the slider height (data-height, data-min-height), use values in 3 formats:

  1. *px
    sets a static height that won't change, when resizing a window;
  2. *%
    sets static height as a percentage of its width;
  3. *vh
    sets static slider height as a percentage of the window height.

An example with static width:


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

An example with height as a percentage of slider width:


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

An example with height as a percentage of the window height:


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

If you don't set the slider height, it will be counted based on inserted content.

Slider autoplay setup

Slider autoplay in Swiper for HTML Website template is enabled by default. To disable or change the period between switching the slides, please use the 'data-autoplay' attribute with 'false' value or with time span in milliseconds for the target element with .swiper-slider class.

E.g.:


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

or:


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

Slider loop setup

To set up slider loop for the images, use the 'data-loop' attribute (true/false, by default 'true') for the target element with the .swiper-slider class.

E.g.:


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

Slider direction setup

In Swiper slider, you can change slides switching direction from horizontal to vertical. To do this, use the 'data-direction' ("horizontal"/"vertical", by default "horizontal") for the target element with the .swiper-slider class.

E.g.:


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

Slider navigation setup

Swiper supports 'Prev'/'Next' buttons display for managing slider display. To display these buttons, please add the following marking to the 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. To display pagination, please add the following marking to the target slider:


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

By default, slider pagination is clickable. To disable this, add the 'data-clickable' attribute to the corresponding slider pagination:


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

To display the serial number of the corresponding pagination point, use the data-index-bullet = "true" attribute for the corresponding slider pagination:


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

Slider scrollbar setup

Swiper supports slider scrollbar display. To display it , add the following marking to the target slider:


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

By default, the ability to interact with the scrollbar is enabled. To disable it, use the data-draggable = "false" attribute for the target slider scrollbar:


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

Slider keyboard navigation

Swiper supports slider keyboard navigation. To enable it, please use the 'data-keyboard' attribute for the target slider:


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

Slider mousewheel navigation

Swiper supports slider mousewheel navigation. To enable it, please use the 'data-mousewheel' attribute for the target slider:


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

By default, this option prevents further page scrolling, when you reach the last or the first slide in the slider. To enable the page scrolling in this situation, you must use the data-mousewheel-release = "true" attribute for the target slider:


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

Integrating parallax to the slider

RD Parallax is used for implementing the parallax effect.

To integrate parallax to the slider, use the slider inside the parallax by using the rd-parallax-swiper class. In this way, parallax effect will be used for slider content. To change the speed of an element in the slider, add the swiper-parallax class and the data-speed attribute to change the speed:


        <div class="rd-parallax rd-parallax-swiper">
            <div data-speed="0.3" data-sm-speed="1" data-type="html" class="rd-parallax-layer">
                <div class="swiper-container swiper-slider">
                    ...
                    <div data-speed="0.5" class="swiper-caption swiper-parallax">
                        ...
                    </div>
                </div>
            </div>
    

Background video integration

RD Video Background plugin is used for implementing a background video in the slider.

To add a background video to the slider, add the background video activation marking to the 'swiper-slide' block :


        <div class="swiper-slide">
            <div data-rd-video-path="path/to/video" class="rd-video">
                ...
            </div>
        </div>
    

The path to the video should be specified without the extension.

Photoswipe

HTML Website Template uses 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>
    

Magnificent. Image zoom

HTML Website Templates use Magnificent.js extension to implement image zoom.

The basic HTML marking looks the following way:

  
    <!-- Magnificent-->
    <div mag-thumb="inner">
      <img src="images/puppyafter.jpg" width="500" height="300"/>
    </div>
    <div mag-zoom="inner">
      <img src="images/puppyafter.jpg"/>
    </div>
  

Custom-scrollbar

HTML Website Templates use jquery custom scrollbar extension to implement scrollbar.

The basic HTML marking looks the following way:

  
    <div class="scrollspy-example scroll-wrap">
      <h2>"Scroll bar"</h2>
      <hr>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      <p>Duis aute irure dolor in reprehenderit in voluptate velit </p>
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</p>
      <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut</p>
      <p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet</p>
      <p>Quis autem vel eum iure reprehenderit qui in ea voluptate</p>
      <hr>
      <p>End of content.</p>
    </div>