Intense Template Documentation

Changing the Logo

In Intense, you can change 3 types of logos: header logo (for desktop and mobile versions of the site) and footer logo. You can use either custom image or text logo.

Attention: Intense is an HTML product. Thus, the logo should be changed manually in every target .html file.

Changing the Logo

Header logo for the desktop version of the site should be changed in Page Head section of the target page with the .rd-navbar-brand class.

        <!--Navbar Brand-->
        <div class="rd-navbar-brand">
            <a href="index.html">
              <img src='path/to/your-logo.png' alt=''/>
            </a>
        </div>
    

How to change header logo for mobile devices

Header logo for the mobile version is changed in Page Head section with .rd-navbar-mobile-brand class in the same way.

        <!--Navbar Brand-->
        <div class="rd-navbar-mobile-brand">
            <a href="index.html">
                <img src='path/to/your-mobile-logo.png' alt=''/>
            </a>
        </div>
    

How to change footer logo

Footer logo is changed in Page Footer section of the block with .footer-brand class.

        < !--Footer Brand-->
        < div class="footer-brand">
            < a href="index.html">
                < img src='path/to/your-footer-logo.png' alt=''/>
            </a>
        </div>
    

Template navigation setup

Intense uses RD Navbar plugin for implementing website navigation.

How to change navigation type on the page

Intense supports a set of different navigation types for your convenience.

You can use one of the types listed below:

• Default
• Sidebar Toggle
• Sidebar Fixed
• Floated

How to set up the dark color scheme for navigation

To set up the color scheme for navigation, please use the .rd-navbar-dark class for the needed navigation type.

        <!-- RD Navbar -->
        <nav class="rd-navbar rd-navbar-default rd-navbar-dark" …>
        ...
        </nav>
    

Adding a new menu item

To add a new menu item to an existing menu, you should define a new list element on the first navigation level:

        <!-- RD Navbar Nav-->
        <ul class="rd-navbar-nav">
         <li>
                <a href="path/to/your-page.html>Your Page</a>
         </li>
        ...
    

Making a menu item active

To make a menu item active, use .active class for a target element:

        <!-- RD Navbar Nav-->
        ...
                <li class="active">
                        <a href="path/to/your-page.html">Your Page</a>
                </li>
        ...
    

Adding an icon to a menu item

To add an icon to the existing menu item, use the following marking:

        <!-- RD Navbar Nav-->
        ...
        <li>
             <a href="path/to/your-page.html">
                <span class="rd-navbar-icon mdi mdi-shuffle"></span>
                <span class="text-middle">Your Page</span>
             </a>
        </li>
        ...
    

where "mdi mdi-shuffle" - is a class for displaying a target icon. You can find the list of all existing classes on Components > Toolkit Components > Icons page.

Adding label for the menu item

To add a label to the existing menu item, please use the following marking:

        <!-- RD Navbar Nav-->
        ...
        <li>
                <a href="path/to/your-page.html">
                        <span class="text-middle">Your Page</span>
                        <span class="rd-navbar-label text-middle label-custom label-xs-custom">
                        Your Label
                        </span>
                </a>
        </li>
        ...
    

Attention: you can use any of the classes, listed on the Components > Toolkit Components > Labels page, for changing label style.

Adding a submenu

To add a submenu to the existing menu item, create an additional list with .rd-navbar-dropdown class inside the corresponding menu item:

        <!-- RD Navbar Nav-->
        ...
        <li>
                <a href="path/to/your-page.html">Your Page</a>
                <ul class="rd-navbar-dropdown">
                <li>
                        <a href="path/to/your-page-1.html">Submenu Item 1</a>
                </li>
                <li>
                        <a href="path/to/your-page-2.html">Submenu Item 2</a>
                </li>
                ...
                <li>
                        <a href="path/to/your-page-n.html">Submenu Item N</a>
                </li>
                </ul>
        </li>
        ...
    

Adding Megamenu

To add a Megamenu to the corresponding menu item, please use the following markup:

    <!-- RD Navbar Nav-->
    ...
    <li>
      <a href="path/to/your-page.html">Your Page</a>
      <div class="rd-navbar-megamenu">
        <div class="row">
          <ul class="col-lg-3">
            <li>
              <a href="path/to/your-page-1.html">Submenu Item 1</a>
            </li>
          </ul>

          <ul class="col-lg-3">
            <li>
              <a href="path/to/your-page-2.html">Submenu Item 2</a>
            </li>
          </ul>

          <ul class="col-lg-3">
            <li>
              <a href="path/to/your-page-3.html">Submenu Item 3</a>
            </li>
          </ul>
          <ul class="col-lg-3">
            <li>
              <a href="path/to/your-page-4.html">Submenu Item 4</a>
            </li>
          </ul>
        </div>
      </div>
    </li>
    ...
    

Bootstrap Grid is used for creating Megamenu columns. You can use any number of the columns for creating Megamenu structure. However, we recommend using 4-column structure .

Adding submenus to tabs

To add submenus to tabs of the existing menu item, please use the following structure:

        <!-- RD Navbar Nav-->
        ...
        <li>
        <a href="path/to/your-page.html">Your Page</a>
          <div class="rd-navbar-megamenu">
            <!-- Responsive-tabs-->
            <div data-type="horizontal" class="responsive-tabs responsive-tabs-classic">
              <ul data-group="tabs-group-default" class="resp-tabs-list tabs-1 text-center tabs-group-default">
                <li>Tab 1</li>
                <li>Tab 2</li>
              </ul>
              <div data-group="tabs-group-default" class="resp-tabs-container text-left tabs-group-default">
                <div>
                ... Tab 1 Content ...
                </div>
                <div>
                ... Tab 2 Content ...
                </div>
              </div>
            </div>
          </div>
        </li>
        ...
    

By default, Intense uses Megamenu marking to present the menu content in tabs, but you can also use any custom content there.

How to work with the optimization of styles file

1. To minify the styles file, use one of the following services: CSS Minifier, CSS Compressor, Minify and Compress CSS.
2. Name the file with the minification results style.min.css.
3. Copy it to the css/ folder of your template.
4. Attach this file in the HTML files of your website instead of the one that is not modified.
   Enter:

   
       <link rel="stylesheet" href="css/style.min.css">
   

   instead of:

   
       <link rel="stylesheet" href="css/style.css">
   

Setting up a Shop

Intense is an HTML template that targets developers. A Shop example in Intense is used just for simplifying the successive work on the product that developers carry out as a part of their orders. It does not contain functionality of implementing a live store.

Attention: Intense does not have the functionality for creating a working online-shop. The Demo just has some examples of HTML marking for implementing a store based on Intense.

Maintenance Page Setup

Intense contains some ready-made examples of Maintenance and Coming Soon pages in Pages section. You can find some information about setting up these pages below .

Setting up the countdown date

Intense uses jQuery Countdown plugin for implementing the countdown functionality. You can find more detailed information about working with the plugin in Extensions > Countdown section .

To set up the countdown timer in Intense, please specify the target date in data-time attribute in "DD Mon YYYY" format in the corresponding countdown marking section.

        <div class="countdown-custom countdown-ellipse">
        <div data-type="until" data-time="25 Apr 2017" data-format="dhms" class="countdown"></div>
        </div>
    

Mailform setup

Intense uses a set of RD Mailform plugins for implementing contact forms. You can find more detailed instructions about these plugins in Extensions > RD Mailform section.

In order to set up the email address to send the e-mails (sent with the help of RD Mailform) to, please replace in bat/rd-mailform.php file the e-mail, which is specified in $recipients variable, with the needed recipient's email:

$recipients = '[email protected]';

Smooth scroll for Windows setup

In HTML Website Templates, there is a built-in support of smooth scroll for Chrome browser in OS Windows. To enable it, just add the .use--smoothscroll class for the html tag.

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

Template scroll animation setup

HTML Website Template uses Wow.js extension and css library Animate.css for implementing the scroll animation. To enable animation on page scroll, add .wow-animation class for the html tag.

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

You should also specify the .wow class and the corresponding class for the target element.

        <div class=wow fadeIn">
        ...
        </div>
    

You can also set the animation delay, using the data-wow-delay attribute.

        <div data-wow-delay="0.2s" class="wow fadeIn">
        ...
        </div>
    

You can find the list of available animations on the Components > Toolkit Components > Animations template page. You can find a list of classes for generating different animated effects below.

• fadeIn
• fadeLeft
• fadeRight
• fadeUp
• fadeDown
• slideLeft
• slideRight
• slideUp
• slideDown

Slider Setup

Intense uses Swiper Slider plugin for implementing the slider. You can find more detailed instructions on setting it up in Extensions > Swiper Slider section.

Parallax Setup

Intense comes with RD Parallax plugin for implementing parallax effect. You can find more detailed information about the plugin and its setup in Extensions > RD Parallax section.

Adding a section with background image parallax

To create a section with background image parallax, please use the following marking, in which you should replace the image path in data-url attribute:

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

Search by pages setup

Intense comes with RD Search plugin for implementing search by pages.

Intense has Live Search on header-sidebar-fixed-light and header-sidebar-fixed-dark pages with date and tags display.

Changing the date on the page

To change the date on the target page, find the meta-tag with name="date" attribute and change the value of the 'content' attribute.

        <meta name="date" content="...">
    

How to change tags on the page

To change tags on the target page, find the meta-tag with name="keywords" attribute and change the value of the 'content' attribute.

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

hese tags are required for the correct functioning of the search. If you add new pages, you should also add these meta-tags.