Preparation Before you proceed with HTML Multipurpose Template installation, you need to prepare. It is
recommended to follow steps, listed below:
Software
We recommend that you download all the required software to edit Website Template. Software Required is
listed at template preview page.
Technical requirements might differ depending on exact template, therefore we will list the most basic
ones:
First, you'll need proper unzipping software for password-protected sources_grand_vector.zip package
extracting. You may use WinZip 9+ (Windows) and Stuffit Expander 10+ (Mac). This is a mandatory
software.
You might also require Adobe Photoshop (v. CS3 or higher). It is used for source .PSD files editing
and is needful in case of graphic design changes performing or template images editing.
You should also use code editor, i. e. Sublime Text, Notepad++, Atom, etc. for template files source
code editing.
For files uploading to server FTP manager will be also required, like FileManager at your hosting
control panel or desktop applications, such as Total Commander, FileZilla, CuteFTP, etc.
Hosting
You can just run index.html file directly from your site folder, but it won't let you explore all
template functionality. You should upload template to hosting server in order to display a fully working
website correctly.
In case you have existing server already, please check if it meets Website Template requirements,
listed at template preview page. For most templates PHP 5.2+ version is the only requirement.
You may also install Website Template to your computer locally by using localhost. In order to set up
local server you may use WAMP, AppServ, MAMP or any similar software. All of them are installed same as
regular application.
Feel free to check the following tutorials on how to set up local server:
Structure of style.css file is built on the following principle:
Bootstrap Framework ...
Bootstrap Toolkit Styles ...
Bootstrap Toolkit Plugins Styles ...
Template customization
Smooth scroll configuration for Windows
HTML Website Templates include built-in smooth scroll for Chrome browser in Windows OS. In order to
activate it, just add
.smoothscroll class to html tag.
<html lang="en" class="smoothscroll">
As an option, you can also activate smooth scrolling for all platforms
<html lang="en" class="smoothscroll-all">
Template items animation on page scroll
HTML Website Templates use Wow.js extension and Animate.css css library for the
implementation of scroll animation. In order to enable scroll animation for entire page elements you
should add
.wow-animation class to html tag.
<html lang="en" class="wow-animation"
You should also specify appropriate animation class for target item. Click here to check the list of available classes and live
examples.
HTML Website Templates include Flex-based TM Grid system, that is especially prepared. This system
provides you with
more complex and flexible solution,comparing to Bootstrap Grid. TM Grid class naming format is similar
to Bootstrap
Grid one for usability.
Table below presents various aspects of TM Grid system default way of working:
XXS Devices (< 480px)
XS Devices (≥ 480px)
SM Devices (≥ 768px)
MD Devices (≥ 992px)
LG Devices (≥ 1200px)
XL Devices (≥ 1800px)
Grid behaviour
Instant flow
Collapsed to start, horizontal above breakpoints
Container width
300~450px, Fluid
750px
970px
1200px
1800px
Class prefix
.cell-
.cell-xs-
.cell-sm-
.cell-md-
.cell-lg-
.cell-xl-
columns #
1
12
Columns width
100%
~25 → ~37px
~62px
~81px
~97px
~150px
Gutter width
30px (2 x15px, at both column sides)
Nesting
Yes
Offsets
No
Yes
Columns output order control
No
Yes
Horizontal alignment control
No
Yes
Vertical alignment control
No
Yes
Inverting
No
Yes
Please note: grid behaviour and its corresponding breakpoints may differ
from template to
template.
Columns nesting
In order to implement columns nesting in Grid system, add a new .range and target
.cell-*-* columns set into existing
column.
In order to change grid items display order you should use .cell-RS-push-X class, where RS
stands for target dimensions, X stands for order. For example,
Please note: in case of using classes, responsible for columns display
order management, you must determine each row element order.
Extensions
RD Mailform
You can use any form elements, presented on the Components > Toolkit Components > Form
Elements page, for implementing
custom forms with a custom set of fields. You can also use any Bootstrap form-related elements that
can be found on the
Bootstrap Official Website , and Bootstrap Grid and
Flex Grid elements for implementing custom form structure.
Attention: in RD Mailform, <input type="email" name="email">
is required for the correct functioning of the form. If the field is not present, you will get an
error, when submitting a form.
Basic marking for creating a standard form looks the following way:
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:
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:
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:
Register your domain at Google
reCaptcha website and get a pair of API-keys (a pair of keys consists of
site key and secret).
Specify your API-keys in bat/reCaptcha.php file in $siteKey and $secret
variables at the beginning of the file:
Paste this section to html and specify your site key in data-attributedata-sitekey=""
You can find more detailed instructions at Google ReCaptcha official website.
Google ReCaptcha Marking
The basic marking for ReCaptcha looks the following way:
<!--Google captcha-->
<div class="form-group">
<div id="captcha1" data-sitekey="You site key here" class="recaptcha"></div>
</div>
<!-- End google captcha-->
Pay attention: id attribute and .recaptcha class are
required.
Google ReCaptcha Setup
Google Recaptcha supports the following settings:
Changing size;
Changing color scheme.
Changing Google ReCaptcha Size
To change widget size, specify in data-attribute data-size one of the following size values:
compact;
normal (default).
The sample code looks the following way:
<!--Google captcha-->
<div class="form-group">
<div id="captcha1"
data-sitekey="You site key here"
data-size="compact"
class="recaptcha"></div>
</div>
<!-- End google captcha-->
Changing Google ReCaptcha widget color scheme
To change widget color scheme, specify in the data-attribute data-theme one of the following
variants:
dark;
light (default).
Sample code looks the following way:
<!--Google captcha-->
<div class="form-group">
<div id="captcha1"
data-sitekey="You site key here"
data-theme="dark"
class="recaptcha"></div>
</div>
<!-- End google captcha-->
RD Navbar. Navigation panel
HTML Website Templates use RD Navbar extension to implement site navigation functionality.
Basic HTML code structure for this extension looks as follows:
Please note: data attributes data-layout, data-stick-up,
data-hover-on can be defined for all main dimension types as data-xx-layout, data-xx-stick-up,
data-xx-hover-on (where xx can take xs, sm, md. lg values).
Navigation panel appearance for lower resolutions is defined by template design specifics only.
Dropdown menu configuration
In order to define navigation panel dropdown menu, you should just add .rd-navbar-dropdown
class to corresponding submenu item.
In order to replace background video at the existing HTML code section you should change path to
video
file in data-vide-bg data attribute. There is no need to specify video file extension, just
file
name is enough as script will automatically pick correct video format to play.
For example,
data-rd-video-path="video/video-bg"
Creating new section with background video
In order to add video to section background you should edit target section code to appear the
following
way:
HTML Website Templates use Countdown.js extension to implement timer functionality.
Adding timer to page
To add countdown timer to target HTML page you should use the following code.
<div class="countdown" data-type="until" data-time="24 Dec 2015 15:00">
Data-type attribute can take the following values:
until
the timer counts the time up to date, specified in the data-time attribute.
since
timer counts the time since the date, specified in the data-time attribute
For example,
<div class="countdown" data-type="until" data-time="24 Dec 2016 15:00">
Countdown will take place till 3.00 PM, December 24, 2016.
<div class="countdown" data-type="since" data-time="24 Dec 2014 15:00">
In this case countdown will start on 3.00 PM, December 24, 2014.
Date should be specified in data-time attribute in the following format.
DD month YYYY HH:MM
where month can take the following values:
Jan
January,
Feb
February,
Mar
March,
Apr
April,
May
May,
Jun
June,
Jul
July,
Aug
August,
Sep
September,
Oct
October,
Nov
November,
Dec
December.
For example,
<div class="countdown" data-type="until" data-time="24 Aug 2016 12:00">
This example shows countdown till 12:AM, August 24, 2016.
Timer display format configuration
In order to set timer display format you should use data-format attribute.
Use the following symbols (in the indicated order) to specify time periods to display: 'Y'
during years, "O" during few month,
"W" during couple of weeks, "D" during few days, "H" during several hours,
"М" during few minutes,
"S" for few seconds.
For example,
<div class="countdown" data-type="until" data-time="24 Aug 2016 12:00"
data-format="wdh">
In this case timer will take the following format:
During few weeks, couple of days, several hours.
Photoswipe
Photoswipe.js extension for implementing beautiful mobile-friendly galleries.
Adding gallery to a page
To make the gallery function correctly, please add the following marking at the end of the target
page before the closing <body>tag:
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:
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.
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.
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.
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.
By default slider pagination is clickable. If you need to disable this feature you should define
data-clickable attribute for corresponding slider pagination.
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.
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.
Swiper slider supports slider management by using mouse. In order to enable this option you should
use
data-mousewheel data attribute for target slider.
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.
В HTML Website Templates allow you to integrate RD Parallax parallax effect to target slide of
your Swiper slider. In order to do this you should use the following markup :
HTML Website Templates allow you to integrate Vide.js background video to target slide of your
Swiper slider. In order to do this you should use the following markup :
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.
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.
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’.
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.
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.
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.
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:
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.
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.
In order to filter items you should just define corresponding filter control buttons at target
Isotope
items group.
<button data-isotope-filter="*" data-isotope-group="gallery">
Show All
</button>
<button data-isotope-filter="type-1" data-isotope-group="gallery">
Type 1
</button>
<button data-isotope-filter="type-2" data-isotope-group="gallery">
Type 2
</button>
Responsive Tabs. Tabs
HTML Website Template use ResponsiveTabs.js extension to implement tabs functionality. In
order
to add tabs to target pages you should use the following code structure.
<div class="responsive-tabs">
<ul class="resp-tabs-list">
<li> Tab 1 Title </li>
<li> Tab 2 Title </li>
<li> Tab 3 Title </li>
</ul>
<div class="resp-tabs-container">
<div> Tab 1 Body </div>
<div> Tab 2 Body </div>
<div> Tab 3 Body </div>
</div>
</div>
Reponsive Tabs. Accordion
HTML Website Templates use ResponsiveTabs.js extension for accordion functionality
implementing. In order to add accordion to target page you should use the following code structure.
<div class="responsive-tabs" data-type="accordion">
<ul class="resp-tabs-list">
<li> Item 1 Title </li>
<li> Item 2 Title </li>
<li> Item 3 Title </li>
</ul>
<div class="resp-tabs-container">
<div> Item 1 Body </div>
<div> Item 2 Body </div>
<div> Item 3 Body </div>
</div>
</div>
RD Parallax
RD Parallax extension for implementing parallax effect on the page.
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.
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.
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.
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.
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.
This plugin allows to implement the search on several pages with the ability to set up the layout for
search results.
The basic form marking should look the following way:
<form action="search-results.html" method="GET" class="rd-search">
<div class="form-group">
<label for="search" class="form-label">Type and hit enter...</label>
<input id="search" type="text" name="s" autocomplete="off" class="form-control"/>
</div>
</form>
You can paste this marking in any desired place, 'rd-search' class is required.
This search allows to display results with any marking, but you should correctly set up all the
target pages.
Search pages setup
All the setup is carried out in the head section of every page and is necessary for generating
the search results template:
<head>
...
</head>
Title display in search results
To display the title in search results, specify it for every page inside the title tag:
<!-- Site Title-->
<title>Intense - multi-page template by TemplateMonster</title>
Keywords display in search results
To display keywords (tags) in search results, specify them for every page in 'content'
attribute of the <meta name="keywords"> tag:
<meta name="keywords" content="intense web design multipurpose template">
Additional information display in search results
To display additional information in search results, specify it for every page in meta tag
with name and content attributes, where 'name'
is the unique information name, and 'content' is the information that should be displayed. For
example, to display the page description, add the following tag:
<meta name="description" content="This page ...">
The amount of tags is unlimited.
Search form setup
Search setup is carried out on the target page in the form with .rd-search class:
You can set up a filter, which specifies pages, on which the search should be carried out (by
title).
For example, to carry out search on HTML pages, the title of which contains 'blog' word, use
the following code:
The default search filter can be changed in script.js file in defaultFilter variable,
which can be found in the code after the following comment:
/**
* RD Search
* @description Enables search
*/
Live Search setup
You can enable live search to display search results without reloading the page.
To do this, add the data-search-live attribute with id specification, which will display
the result. For example:
Search results template is closely connected with the setup of the page described above,
namely with specifying different meta-tags. You can set up the HTML markup for search results. To do
this, add data-search-template attribute,
to which you should add the corresponding marking for displaying the search results. The line support
#{rule} data transfer format.
Here, 'rule' is the 'name' attribute of the meta-tag, which is specified on the page.
There are 4 default values, which do not require meta-tags and display the necessary information:
#{title} -contains the value of the <title/> tag of the target page;
#{tokens} - contains a part of the found content of the target page, which meets the search
results;
#{href} - contains the path to the target page;
#{count} - amount of the found instances on the page.
The default search results template can be changed in script.js file in the
defaultTemplate variable, which can be found in the code after the following comment:
/**
* RD Search
* @description Enables search
*/
RD Google Maps
HTML Website Template uses RD Google Maps to implement Google maps.
The plugin supports the following settings:
Changing map coordinates;
Adding custom map markers;
Adding pop-up windows for the markers;
Custom map styling.
Search on the map;
How to add search on the map?
RD Google Maps supports adding search on the map.
To enable search on the map, add a textfield with id"rd-google-map-address" and a
button with id“rd-google-map-address-submit”.
The fool code of the map with search will look the following way:
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:
HTML Website Templates use some external JS, PHP, CSS etc. software solutions,
listed below. All of materials used are distributed for free and as an open source (MIT, CC, GPL).