Graphsign

General introduction

This template include 2 layouts:

• Art Layouts
• Business Layout

Each layout is included in one folder and consists of following pages:

• index.html
• blog-classic.html
• blog-2.html
• blog-3.html
• blog-mansory-3.html
• single-default.html
• single-gallery-lightbox.html
• single-gallery-slider.html
• single-image.html
• single-link.html
• single-quote.html
• single-status.html
• single-video.html
• shortcodes.html
• coming-soon-page.html
• error-page.html

The core stylesheets (CSS) of this template are placed in /css/ folder.
All Images are in /images/ folder.
All Javascripts files are in /js/ folder.

HTML Structure

The Basic Structure contains:

	<div id="site" class="site">
		<header class="header"></header> - logo, main navigation
		  {{ALL THE CONTENT}} – section, main content
		  <footer class="footer"></footer> - footer social, footer copyright
	</div>
			

12 Column Grid:

	<section id="section-id" class="section">
	      <div class="container">
	            <div class="row clearfix">
	                  <div class="col-md-9">
	                        {{ 9/12 COLUMN PAGE CONTENT }}
	                  </div>
	                  <div class="col-md-3">
	                        {{ 3/12 COLUMN PAGE CONTENT }}
	                  </div>
	            </div>
	      </div>
	      <!-- .container -->
	</section>
	<!-- #section-id -->
			

Stylesheets

Files

All specific theme CSS are located in the "/css/" folder of the template. Each CSS File is well commented and easy to use and customize to your own needs. Here's the list of the CSS files:

• main.css - Specific theme settings.
• shortcodes.css - Shortcodes page settings.
• art-layout.css - Art layout settings.
• business-layout.css - Business layout settings.
• coming-soon-page.css – Coming soon page settings.
• error-page.css – Error page settings.

NOTE: main.css, shortcodes.css must declare on all pages of Graphsign.

main.css includes:

• COMMON STYLING
• BOXED LAYOUT
• DARK STYLE
• HEADER

JavaScript

All specific theme JavaScript are located in the "/js/" folder of the template.
main.js – Specific theme settings.
If you want to change settings, a slider, a lightbox, a countdown,… you must edit the main.js file.
main.js includes:

• MAIN NAV MENU
• MENU SCROLLING
• SLIDE NAV - MAIN NAV MENU
• SPACE TOP ON MOBILE
• STICK MENU
• TEXT ON A CIRCLE
• APPEAR
• COUNTER
• BACK TO TOP
• TOGGLE CLASS - ELEMEMT
• TOGGLE CLASS - WRAPPER
• DATA PLACEHOLDER
• FILTER
• LIGHTBOX STYLE 1
• LIGHTBOX STYLE 2 - LIGHTBOX GALLERY
• LIGHTBOX STYLE 3 - ZOOM GALLERY
• POST MANSORY
• PROGRESS CIRCLE - PIE CHART - SHORTCODES
• PROGRESS CIRCLE STYLE 2 - PIE CHART - SHORTCODES
• DATA HREF
• FADE ANIMATION SLIDER - SHORTCODES
• AUTO ANIMATION SLIDER - SHORTCODES
• RANDOM SLIDER WITH TIMER - SHORTCODES
• JPLAYER VIDEO 1 (HORIZONTAL TAB - SHORTCODES PAGE)
• ART SLIDESHOW HOME
• ART SLIDER ABOUT US
• PIE CHART - EXPERTIES SKILLS SLIDER - ART SLIDER ABOUT US
• ART SLIDER TESTIMONIAL
• ART SLIDER LOGO BRAND
• MAP CONTACT
• POST #5 SLIDER
• BUSINESS SLIDESHOW HOME
• BUSINESS SLIDER OUR AMAZING TEAM
• BUSINESS SLIDER TESTIMONIAL
• POST #25 SLIDER
• SET HEIGHT - COMING SOON PAGE
• COUNTDOWN - COMING SOON PAGE

jquery and CSS Libraries

All jQuery and CSS libraries are located in the “/libs/” folder of the template. You do not need to edit these items.

• jquery - jQuery v2.1.4
  • jquery-2.1.4.min.js
  • => jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML.
  • bootstrap - Bootstrap v3.3.5
    • bootstrap.min.css
    • bootstrap.min.js
    • => Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web
  • font-awesome - Font Awesome 4.4.0
    • font-awesome.min.css
    • => The iconic font and css toolkit.
  • smoothscroll - SmoothScroll for websites v1.4.0
    • SmoothScroll.js
    • => Easy implementation of smooth scrolling for same-page links.
  • superfish-menu – Superfish v1.7.6
    • superfish.css
    • superfish.min.js
    • => Superfish is an enhanced Suckerfish-style menu jQuery plugin that takes an existing pure CSS drop-down menu.
  jquery-countto
  • jquery.countTo.js
  • => jQuery countTo is a jQuery plugin that will count up (or down) to a target number at a specified speed, rendered within an HTML DOM element.
  • jquery-appear - jQuery appear plugin 0.3.6
    • jquery.appear.js
    • => It implements a custom 'appear'/'disappear' events which are fired when an element became visible/invisible in the browser view port.
  • as-pie-progress - jQuery asPieProgress - v0.3.4
    • jquery-asPieProgress.min.js
    • => A jQuery plugin that animate the pie progress.
  • caroufredsel - jQuery carouFredSel 6.2.1
    • jquery.touchSwipe.min.js (helper-plugins): TouchSwipe is a jquery plugin to be used with jQuery on touch input devices such as iPad, iPhone etc.
    • jquery.carouFredSel-6.2.1-packed.js
    • => Responsive Image Slider.
  • isotope - Isotope PACKAGED v2.2.2
    • isotope.pkgd.min.js
    • fit-columns.js: Items are arranged into columns. Columns progress horizontally. fitColumns is ideal for items that have the same width.
    • => Filter & sort magical layouts
  • magnific-popup - Magnific Popup - v1.0.0
    • magnific-popup.css
    • jquery.magnific-popup.min.js
    • => Magnific Popup is a responsive lightbox & dialog script with focus on performance and providing best experience for user with any device
  • jplayer – jPlayer 2.9.2
    • jquery.jplayer.min.js
    • => jPlayer is the completely free and open source (MIT) media library written in JavaScript.
    • lightslider - lightslider - v1.1.3
    • lightslider.min.css
    • lightslider.min.js
    • => JQuery lightSlider is a lightweight responsive Content slider with carousel thumbnails navigation
  • lwt-countdown - jQuery Countdown plugin v1.0
    • jquery.lwtCountdown-1.0.js
    • => Javascript CountDown

Site Layout

Wide Layout

Wide layout is default layout.

Boxed Layout

You need to add class boxed-layout in each body tag.

HTML

	<body class="boxed-layout">
	      {{BODY CONTENT}}
	</body>
			

CSS – main.css

	body.boxed-layout {
	      background-color: #fff;
	}
	body.boxed-layout .site {
	      position: relative;
	      overflow: hidden;
	      background: #fff;
	      -webkit-box-shadow: 0 0 7px rgba(0, 0, 0, 0.4);
	      box-shadow: 0 0 7px rgba(0, 0, 0, 0.4);
	      padding: 0;
	      margin: 0 auto;
	}
	body.boxed-layout .header {
	      left: auto;
	      right: auto;
	}
			

Site Skin

Light Style

Light Style is style default.

Dark Style

Similarly as Boxed layout, you need to add class dark-style in each body tag.

HTML

	<body class="dark-style">
	      {{BODY CONTENT}}
	</body>
			

CSS – main.css

	body.dark-style,
	body.dark-style .site {
	      color: #ededed;
	      background: #424242;
	}
	body.dark-style .header {
	      background: #424242;
	      border-color: #5A5A5A;
	}
	body.dark-style .header .logo-default {
	      display: block;
	}
	body.dark-style .header .logo-scroll {
	      display: none;
	}
			

Colors

CSS for skin color of the theme is located in folder “/css/color/”:

• color1.css
• color2.css
• color3.css
• color4.css
• color5.css

HTML

	 <link rel="stylesheet" href="css/color/color1.css">
			

Default style is file color1.css. To select other colors, file color1.css will be replaced with file color2.css, color3.css, color4.css or color5.css corresponding to the color you want.

Art Layout

• General structure of Mainbody

  HTML

  <div class="gr-main-body art-main-body gr-wrap">       <div class="container">             {{MAIN BODY CONTENT}} - main content, article, sidebar       </div> <!-- .art-main-body-->

• Art Blog Classic

  General structure of “Art Blog Classic” Mainbody:

  HTML

  <div class="gr-main-body art-main-body gr-wrap">       <div class="container">             <div class="row gr-content-sidebar art-content-sidebar">                   <div class="gr-content-sidebar-content col-xs-12 col-md-9">                         <div class="art-blog art-blog-classic gr-blog-classic">                               <div class="gr-list-post-wrapper">                                     <div class="gr-list-post">                                           <article class="post">                                                 {{POST CONTENT}}                                           </article>                                           <!-- .post-->                                           {{...}}                                     </div>                                     <!-- .gr-list-post-->                               </div>                               <!-- .gr-list-post-wrapper-->                               <div class="pagination-post">                                     {{PAGINATION POST CONTENT}}                               </div>                               <!-- .pagination-post-->                         </div>                         <!-- .art-blog-classic-->                   </div>                   <!-- .gr-content-sidebar-content-->                   <div class="gr-content-sidebar-sidebar col-xs-12 col-md-3">                         <div class="art-aside">                               {{ART ASIDE}}                         </div>                         {{...}}                   <!-- .gr-content-sidebar-sidebar-->             </div>       </div> </div> <!-- .art-main-body-->

• Art Blog 2

  General structure of “Art Blog 2” Mainbody:

  HTML

  <div class="gr-main-body art-main-body gr-wrap">       <div class="container">             <div class="row gr-content-sidebar art-content-sidebar">                   <div class="gr-content-sidebar-content col-xs-12 col-md-9">                         <div class="art-blog art-blog-2 gr-blog-2">                               <div class="gr-list-post-wrapper">                                     <div class="row gr-list-post">                                           <article class="post">                                                 {{POST CONTENT}}                                           </article>                                           <!-- .post-->                                           {{...}}                                     </div>                                     <!-- .gr-list-post-->                               </div>                               <!-- .gr-list-post-wrapper-->                               <div class="pagination-post">                                     {{PAGINATION POST CONTENT}}                               </div>                               <!-- .pagination-post-->                         </div>                         <!-- .art-blog-2-->                   </div>                   <!-- .gr-content-sidebar-content-->                   <div class="gr-content-sidebar-sidebar col-xs-12 col-md-3">                         <div class="art-aside">                               {{ART ASIDE}}                         </div>                         {{...}}                   </div>                   <!-- .gr-content-sidebar-sidebar-->             </div>       </div> </div> <!-- .art-main-body-->

• Art Blog 3

  General structure of “Art Blog 3” Mainbody:

  HTML

  <div class="gr-main-body art-main-body gr-wrap">       <div class="container">             <div class="art-blog art-blog-3 gr-blog-3">                   <div class="gr-list-post-wrapper">                         <div class="row gr-list-post">                               <article class="post">                                     {{POST CONTENT}}                               </article>                               <!-- .post-->                               {{...}}                         </div>                         <!-- .gr-list-post-->                   </div>                   <!-- .gr-list-post-wrapper-->                   <div class="pagination-post">                         {{PAGINATION POST CONTENT}}                   </div>                   <!-- .pagination-post-->             </div>             <!-- .pagination-post-->       </div>       <!-- .art-blog-3--> </div> <!-- .art-main-body-->

• Art Blog Mansory

  General structure of “Art Blog Mansory” Mainbody:

  HTML

  <div class="gr-main-body art-main-body gr-wrap">       <div class="container">             <div class="art-blog art-blog-mansory">                   <div class="gr-list-post-wrapper">                         <div class="row gr-list-post gr-post-mansory-wrapper">                               <article class="post post-mansory">                                     {{POST CONTENT}}                               </article>                               <!-- .post-->                               {{...}}                         </div>                         <!-- .gr-list-post-->                   </div>                   <!-- .gr-list-post-wrapper-->                   <div class="pagination-post">                         {{PAGINATION POST CONTENT}}                   </div>                   <!-- .pagination-post-->             </div>             <!-- .art-blog-mansory-->       </div> </div> <!-- .art-main-body-->

  JAVASCRIPT – main.js

  $(".gr-post-mansory-wrapper").each(function() {       $(this).isotope({             itemSelector: '.post-mansory'       }); });

• Art Blog Single

  General structure of “Art Blog Single” Mainbody:

  HTML

  <div class="gr-main-body art-main-body gr-wrap">       <div class="container"><             <div class="row gr-content-sidebar art-content-sidebar">                   <div class="gr-content-sidebar-content col-xs-12 col-md-9">                         <div class="art-blog art-blog-single gr-blog-single">                               <article id="{{post_id}}" class="post format-{{single_format}}">                                     <div class="post-inner">                                           <div class="content-header">                                                 {{CONTENT HEADER CONTENT}} - title, date create, comment counter,...                                           </div>                                           <!-- .content-header-->                                           <div class="content-featured">                                                 {{CONTENT FEATURED CONTENT}} - thumbnail post, slider, quote, lightbox,...                                           </div>                                           <!-- .content-featured-->                                           <div class="content-main">                                                 {{CONTENT MAIN CONTENT}} - description, detail content                                           </div>                                           <!-- .content-main-->                                           <div class="content-author-wrapper">                                                 {{CONTENT AUTHOR CONTENT}} - author info                                           </div>                                           <!-- .content-author-wrapper-->                                           <div class="content-post-navigation">                                                 {{CONTENT POST NAVIGATION CONTENT}}                                           </div>                                           <!-- .content-post-navigation-->                                           <div class="content-comment">                                                 {{CONTENT COMMENT CONTENT}}                                           <!-- .content-comment-->                                     </div>                               </article>                               <!-- .post-->                         </div>                         <!-- .art-blog-single-->                   </div>                   <!-- .gr-content-sidebar-content-->                   <div class="gr-content-sidebar-sidebar col-xs-12 col-md-3">                         <div class="art-aside">                               {{ART ASIDE}}                         </div>                         {{...}}                   </div>                   <!-- .gr-content-sidebar-sidebar-->             </div>       </div> </div> <!-- .art-main-body-->

• Art CSS

  <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/shortcodes.css"> <link rel="stylesheet" href="css/art-layout.css">

Note: main.css, shortcodes.css, art-layout.css must declare on all pages of Art Layout.

Business Layout

• General structure of Mainbody

  HTML

  <div class="gr-main-body business-main-body gr-wrap">       <div class="container">             {{MAIN BODY CONTENT}} - main content, article, sidebar       </div> </div> <!-- .business-main-body-->

• Business Blog Classic

  General structure of “Business Blog Classic” Mainbody:

  HTML

  <div class="gr-main-body business-main-body gr-wrap">       <div class="container">             <div class="row gr-content-sidebar business-content-sidebar">                   <div class="gr-content-sidebar-content col-xs-12 col-md-9">                         <div class="business-blog business-blog-classic gr-blog-classic">                               <div class="gr-list-post-wrapper">                                     <div class="gr-list-post">                                           <article class="post">                                                 {{POST CONTENT}}                                           </article>                                           <!-- .post-->                                           {{...}}                                     </div>                                     <!-- .gr-list-post-->                               </div>                               <!-- .gr-list-post-wrapper-->                               <div class="pagination-post">                                     {{PAGINATION POST CONTENT}}                               </div>                               <!-- .pagination-post-->                         </div>                         <!-- .business-blog-classic-->                   </div>                   <!-- .gr-content-sidebar-content-->                   <div class="gr-content-sidebar-sidebar col-xs-12 col-md-3">                         <div class="art-aside">                               {{ART ASIDE}}                         </div>                         {{...}}                   </div>                   <!-- .gr-content-sidebar-sidebar-->             </div>       </div> </div> <!-- .business-main-body-->

• Business Blog 2

  General structure of “Business Blog 2” Mainbody:

  HTML

  <div class="gr-main-body business-main-body gr-wrap">       <div class="container">             <div class="row gr-content-sidebar business-content-sidebar">                   <div class="gr-content-sidebar-content col-xs-12 col-md-9">                         <div class="business-blog business-blog-2 gr-blog-2">                               <div class="gr-list-post-wrapper">                                     <div class="row gr-list-post">                                           <article class="post">                                                 {{POST CONTENT}}                                           </article>                                           <!-- .post-->                                           {{...}}                                     </div>                                     <!-- .gr-list-post-->                               </div>                               <!-- .gr-list-post-wrapper-->                               <div class="pagination-post">                                     {{PAGINATION POST CONTENT}}                               </div>                               <!-- .pagination-post-->                         </div>                         <!-- .business-blog-2-->                   </div>                   <!-- .gr-content-sidebar-content-->                   <div class="gr-content-sidebar-sidebar col-xs-12 col-md-3">                         <div class="art-aside">                               {{ART ASIDE}}                         </div>                         {{...}}                   </div>                   <!-- .gr-content-sidebar-sidebar-->             </div>       </div> </div> <!-- .business-main-body-->

• Business Blog 3

  General structure of “Business Blog 3” Mainbody:

  HTML

  <div class="gr-main-body business-main-body gr-wrap">       <div class="container">             <div class="business-blog business-blog-3 gr-blog-3">                   <div class="gr-list-post-wrapper">                         <div class="row gr-list-post">                               <article class="post">                                     {{POST CONTENT}}                               </article>                               <!-- .post-->                               {{...}}                         </div>                         <!-- .gr-list-post-->                   </div>                          <!-- .gr-list-post-wrapper-->                   <div class="pagination-post">                         {{PAGINATION POST CONTENT}}                   </div>                   <!-- .pagination-post-->             </div>             <!-- .business-blog-3-->       </div> </div> <!-- .business-main-body-->

• Business Blog Mansory

  General structure of “Business Blog Mansory” Mainbody:

  HTML

  <div class="gr-main-body business-main-body gr-wrap">       <div class="container">             <div class="business-blog business-blog-mansory">                   <div class="gr-list-post-wrapper">                         <div class="row gr-list-post gr-post-mansory-wrapper">                               <article class="post post-mansory">                                     {{POST CONTENT}}                               </article>                               <!-- .post-->                               {{...}}                         </div>                         <!-- .gr-list-post-->                   </div>                   <!-- .gr-list-post-wrapper-->                   <div class="loading-post text-center">                         {{LOADING POST CONTENT}}                   </div>                   <!-- .loading-post-->             </div>             <!-- .business-blog-mansory-->       </div> </div>          <!-- .business-main-body-->

  JAVASCRIPT – main.js

  $(".gr-post-mansory-wrapper").each(function() {       $(this).isotope({             itemSelector: '.post-mansory'       }); });

• Business Blog Single

  General structure of “Business Blog Single” Mainbody:

  HTML

  <div class="gr-main-body business-main-body gr-wrap">       <div class="container">             <div class="row gr-content-sidebar business-content-sidebar">                   <div class="gr-content-sidebar-content col-xs-12 col-md-9">                         <div class="business-blog business-blog-single gr-blog-single">                               <article id="{{post_id}}" class="post format-{{single_format}}">                                     <div class="post-inner">                                           <div class="content-header">                                                 {{CONTENT HEADER CONTENT}} - title, date create, comment counter,...                                           </div>                                           <!-- .content-header-->                                           <div class="content-featured">                                                 {{CONTENT FEATURED CONTENT}} - thumbnail post, slider, quote, lightbox,...                                           </div>                                           <!-- .content-featured-->                                           <div class="content-main">                                                 {{CONTENT MAIN CONTENT}} - description, detail content                                           </div>                                           <!-- .content-main-->                                           <div class="content-more-picture">                                                 {{CONTENT MORE PICTURE CONTENT}}                                           </div>                                           <!-- .content-more-picture-->                                           <div class="content-author-wrapper">                                                 {{CONTENT AUTHOR CONTENT}} - author info                                           </div>                                           <!-- .content-author-wrapper-->                                           <div class="content-post-navigation">                                                 {{CONTENT POST NAVIGATION CONTENT}}                                           </div>                                           <!-- .content-post-navigation-->                                           <div class="content-comment">                                                 {{CONTENT COMMENT CONTENT}}                                           </div>                                           <!-- .content-comment-->                                     </div>                               </article>                               <!-- .post-->                         </div>                         <!-- .business-blog-single-->                   </div>                   <!-- .gr-content-sidebar-content-->                   <div class="gr-content-sidebar-sidebar col-xs-12 col-md-3">                         <div class="art-aside">                               {{ART ASIDE}}                         </div>                         {{...}}                   </div>                   <!-- .gr-content-sidebar-sidebar-->             </div>       </div> </div>          <!-- .business-main-body-->

• Business CSS

  <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/shortcodes.css"> <link rel="stylesheet" href="css/business-layout.css">

Note: main.css, shortcodes.css, business-layout.css must declare on all pages of Business Layout.

Accordion

• Accordion

  HTML

  <div id="accordion-shortcode-1" role="tablist" aria-multiselectable="true" class="panel-group">       <div class="panel panel-default">             <div role="tab" class="panel-heading">                   <h4 class="panel-title"><a role="button" data-toggle="collapse" data-parent="#accordion-shortcode-1" href="#collapse11" aria-expanded="true" aria-controls="collapse11"><span class="text">About Accordions</span></a></h4>             </div>             <div id="collapse11" role="tabpanel" class="panel-collapse collapse in">                   <div class="panel-body">                         <p>I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.</p>                   </div>             </div>       </div>       <div class="panel panel-default">             {{PANEL CONTENT}}       </div>        <div class="panel panel-default">             {{PANEL CONTENT}}       </div>        <div class="panel panel-default">             {{PANEL CONTENT}}       </div> </div>

  CSS - shortcodes.css

  [class*="gr-accordion-style-"]:before, [class*="gr-accordion-style-"]:after {       content: " ";       clear: both;       display: table; } .gr-accordion-style-1 .panel-group .panel {       background: transparent;       border: none;       -webkit-border-radius: 0;       border-radius: 0;       -webkit-box-shadow: none;       box-shadow: none;       margin-bottom: 2px; }

• Accordion with icon

  HTML

  <div id="accordion-shortcode-2" role="tablist" aria-multiselectable="true" class="panel-group">       <div class="panel panel-default">             <div role="tab" class="panel-heading">                   <h4 class="panel-title"><a role="button" data-toggle="collapse" data-parent="#accordion-shortcode-2" href="#collapse21" aria-expanded="true" aria-controls="collapse21"><span class="text">About Accordions</span><span class="icon"><i class="icon-default fa fa-angle-up"></i><i class="icon-active fa fa-angle-down"></i></span></a></h4>             </div>             <div id="collapse21" role="tabpanel" class="panel-collapse collapse in">                   <div class="panel-body">                         <p>I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.</p>                   </div>             </div>       </div>       <div class="panel panel-default">             {{PANEL CONTENT}}       </div>       <div class="panel panel-default">             {{PANEL CONTENT}}       </div>       <div class="panel panel-default">             {{PANEL CONTENT}}       </div> </div>

  CSS - shortcodes.css

  .gr-accordion-style-1 .panel-group .panel-title a .icon-default {       display: block; } .gr-accordion-style-1 .panel-group .panel-title a .icon-active {       display: none; } .gr-accordion-style-1 .panel-group .panel-title a, .gr-accordion-style-1 .panel-group .panel-title a:hover {       color: #fff;       background: #02cdb3; }

Togglable tabs

• Horizontal Tab

  HTML

  <div class="gr-tab-style-1">       <ul role="tablist" class="nav nav-tabs">             <li class="active"><a role="tab" data-toggle="tab" href="#tab11">About Tabs</a></li>             <li><a role="tab" data-toggle="tab" href="#tab12">Add Any Content</a></li>             <li><a role="tab" data-toggle="tab" href="#tab13"><i class="fa fa-send"></i> Tab With Icon</a></li>             <li><a role="tab" data-toggle="tab" href="#tab14">Hover Tab</a></li>       </ul>       <!-- .nav-tabs-->       <div class="tab-content">             <div id="tab11" class="tab-pane active">                   {{TAB PANE CONTENT}}             </div>             <div id="tab12" class="tab-pane">                   {{TAB PANE CONTENT}}             </div>             <div id="tab13" class="tab-pane">                   {{TAB PANE CONTENT}}             </div>             <div id="tab14" class="tab-pane">                   {{TAB PANE CONTENT}}             </div>       </div>       <!-- .tab-content--> </div> <!-- .gr-tab-style-1-->

  CSS - shortcodes.css

  .gr-tab-style-1 {       width: 100%; } .gr-tab-style-1 .nav-tabs {       border-bottom: 0; } .gr-tab-style-1 .nav-tabs > li {       float: left;       width: 25% !important;       margin-bottom: -1px; }

• Vertical Tab

  HTLM

  <div class="gr-tab-style-2">       <ul role="tablist" class="nav nav-tabs">             <li class="active"><a role="tab" data-toggle="tab" href="#tab21">Normal Tab</a></li>             <li><a role="tab" data-toggle="tab" href="#tab22">Active Tab</a></li>             <li><a role="tab" data-toggle="tab" href="#tab23">Hover Tab</a></li>             <li><a role="tab" data-toggle="tab" href="#tab24"><i class="fa fa-music"></i> Tab With Icon</a></li>       </ul>       <!--.nav-tabs-->       <div class="tab-content">             <div id="tab21" class="tab-pane active">                   {{TAB PANE CONTENT}}             </div>             <div id="tab22" class="tab-pane">                   {{TAB PANE CONTENT}}             </div>             <div id="tab23" class="tab-pane">                   {{TAB PANE CONTENT}}             </div>             <div id="tab24" class="tab-pane">                   {{TAB PANE CONTENT}}             </div>       </div>       <!-- .tab-content--> </div> <!-- .gr-tab-style-2-->

  CSS - shortcodes.css

  .gr-tab-style-2 {       width: 100%; } .gr-tab-style-2 .nav-tabs {       float: left;       width: 22.5%;       border-bottom: 0; } @media screen and (max-width: 767px) {       .gr-tab-style-2 .nav-tabs {             float: none;             width: 100%;       }< }

Counter

HTML

	<div data-from="0" data-to="277" class=" gr-number-counter">277</div>
			

CSS - shortcodes.css

	.gr-counter-style-1 {
	      text-align: center;
	}
	.gr-counter-style-1 .content-number {
	      font-family: 'Raleway', sans-serif;
	      font-size: 72px;
	      font-weight: bold;
	}
			

JAVASCRIPT – main.js

	(function($) {
	      if (!$(".gr-number-counter").length) return;
	 
	      $(".gr-number-counter").appear(); // require jquery-appear
	 
	      $(document.body).on("appear", ".gr-number-counter", function() {
	            var counter = $(this);
	 
	            if (!counter.hasClass("count-complete")) {
	                  counter.countTo({
	                        speed: 1500,
	                        refreshInterval: 100,
	                        onComplete: function() {
	                              counter.addClass("count-complete");
	                        }
	                  });
	            }
	      });
	 
	      $(document.body).on("disappear", ".gr-number-counter", function() {
	            $(this).removeClass("count-complete");
	      });
	})(jQuery);
			

You need to declare libraries script below:

	<script type="text/javascript" src="libs/jquery-countto/jquery.countTo.js"></script>
	<script type="text/javascript" src="libs/jquery-appear/jquery.appear.js"></script>
			

Progress Bar

HTML

	<div class="gr-progress-bar lean-bars rounded-bars">
	      <div class="progress">
	            <div style="width: 80%;" class="progress-bar-wrap">
	                  <div class="progress-bar progress-bar-primary gr-animated"></div>
	            </div>
	            <div class="progress_title">Basic Bar</div>
	            <div class="progress_label"><span data-from="0" data-to="80" class="gr-number-counter">80</span>%</div>
	      </div>
	</div>
	<div class="gr-progress-bar thick-bars rounded-bars">
	      <div class="progress">
	            <div style="width: 80%;" class="progress-bar-wrap">
	                  <div class="progress-bar progress-bar-primary gr-animated">
	                        <div class="progress_title">Basic Bar</div>
	                        <div class="progress_label"><span data-from="0" data-to="90" class="gr-number-counter">90</span>%</div>
	                  </div>
	            </div>
	      </div>
	</div>
			

CSS - shortcodes.css

	@-webkit-keyframes animationProgressBar {
	      0% {
	            width: 0;
	      }
	      100% {
	            width: 100%;
	      }
	}
	@keyframes animationProgressBar {
	      0% {
	            width: 0;
	      }
	      100% {
	            width: 100%;
	      }
	}
	.gr-progress-bar .progress {
	      position: relative;
	      overflow: visible;
	      background-image: none;
	      -webkit-border-radius: 4px;
	      border-radius: 4px;
	      margin-bottom: 40px;
	      -webkit-box-shadow: none;
	      box-shadow: none;
	}
			

JAVASCRIPT – main.js

(Similarly as Counter)

Progress Bar

HTML

	<div class="gr-progress-circle-style-1">
	      <div role="progressbar" data-goal="88" aria-valuemin="0" aria-valuemax="100" data-barcolor="#ffffff" data-trackcolor="rgba(0, 0, 0, 0.0)" data-fillcolor="#f0e797" data-barsize="2" data-easing="ease" data-speed="40" class="gr-progress-circle">
	            <div class="gr-progress-circle-number">0%</div>
	            <div class="circle-overflow bg-copy"></div>
	      </div>
	</div>
	<!-- .gr-progress-circle-style-1-->
			

CSS - shortcodes.css

	.gr-progress-circle {
	      width: 200px;
	      position: relative;
	      text-align: center;
	      -webkit-transform-style: preserve-3d;
	      transform-style: preserve-3d;
	}
	.gr-progress-circle svg {
	      margin: 0 auto;
	}
			

JAVASCRIPT – main.js

	(function($) {
	      if (!$(".gr-progress-circle").length) return;
	 
	      $(".gr-progress-circle").asPieProgress({
	            namespace: 'gr-progress-circle',
	 
	            classes: {
	                  svg: 'gr-progress-circle-svg',
	                  element: 'gr-progress-circle',
	                  number: 'gr-progress-circle-number'
	            }
	      });
	 
	      $(".gr-progress-circle").appear(); // require jquery-appear
	 
	      $(document.body).on("appear", ".gr-progress-circle", function() {
	            $(this).asPieProgress('start');
	      });
	 
	      $(document.body).on("disappear", ".gr-progress-circle", function() {
	            $(this).asPieProgress('reset');
	      });
	})(jQuery);
			

You need to declare libraries script below:

	<script type="text/javascript" src="libs/jquery-appear/jquery.appear.js"></script>
	<script type="text/javascript" src="libs/as-pie-progress/jquery-asPieProgress.min.js"></script>
			

Icon

You can place Font Awesome icons just about anywhere using the CSS Prefix fa and the icon's name. Font Awesome is designed to be used with inline elements (we like the <i> tag for brevity, but using a <span>  is more semantically correct).

HTML

	<i class="fa fa-camera-retro"></i> fa-camera-retro
			

You need to declare stylesheets below:

	<link rel="stylesheet" href="libs/font-awesome/css/font-awesome.min.css">
			

integrated fully with Font Awesome Icon set to give you numerous choice. You can use font-awesome icons for Icon boxes, Service boxes and at any place you want. For more detailed documentation on how to use Font-Awesome,
Follow up the link here: Font-Awesome
Check out the full list of icons you can use in this theme:

Button

• Button 3D

  HTML

  <button type="button" class="btn btn-3d">BUTTON</button>

  CSS - shortcodes.css

  .btn.btn-3d {       -webkit-box-shadow: inset 0 -4px rgba(0, 0, 0, 0.12);       box-shadow: inset 0 -4px rgba(0, 0, 0, 0.12); }

• Button Metro

  HTML

  <button type="button" class="btn metro"> BUTTON</button>

  CSS - shortcodes.css

  .btn.metro {       border: none;       -webkit-box-shadow: none;       box-shadow: none; }

• Button square

  HTML

  <button type="button" class="btn btn- square">BUTTON</button>

  CSS - shortcodes.css

  .btn.square {       -webkit-border-radius: 0;       border-radius: 0; }

• Button Round

  HTML

  <button type="button" class="btn btn-round">BUTTON</button>

  CSS - shortcodes.css

  .btn.rounded {       -webkit-border-radius: 0.225em;       border-radius: 0.225em; }

Button Pill

HTML

<button type="button" class="btn btn-pill">BUTTON</button>

CSS - shortcodes.css

.btn.pill {       -webkit-border-radius: 100em;       border-radius: 100em; }

Press effect Button

HTML

<button type="button" class="btn btn-pressable">BUTTON</button>

CSS - shortcodes.css

.btn.pressable {       text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);       border-color: rgba(255, 255, 255, 0.1); } .btn.pressable:active {       -webkit-transform: translate(0, 0.2em);       -ms-transform: translate(0, 0.2em);       transform: translate(0, 0.2em); }

Responsive Slider

• Fade Animation Slider

  HTML

  <div id="fade-animation-slider" class="gr-caroufredsel">       <ul class="gr-slider-wrapper">             <li class="gr-slider-item"><img src="images/other/shortcodes_slider_1.jpg" alt="shortcodes_slider_1" class="gr-slider-img" /></li>             <li class="gr-slider-item"><img src="images/other/shortcodes_slider_2.jpg" alt="shortcodes_slider_2" class="gr-slider-img" /></li>             <li class="gr-slider-item"><img src="images/other/shortcodes_slider_3.jpg" alt="shortcodes_slider_3" class="gr-slider-img" /></li>       </ul>                <button id="fade-animation-slider-prev" type="button" class="gr-slider-control-btn prev gr-btn gr-btn-style-15"><span class="icon fa fa-angle-left"></span></button>       <button id="fade-animation-slider-next" type="button" class="gr-slider-control-btn next gr-btn gr-btn-style-15"><span class="icon fa fa-angle-right"></span></button>       <div id="fade-animation-slider-indicators" class="gr-slider-indicators center-bottom gr-btn gr-btn-style-16"></div> </div> <!-- #fade-animation-slider-->

  JAVASCRIPT – main.js

  $("#fade-animation-slider .gr-slider-wrapper").carouFredSel({       infinite: true,       circular: true,       responsive: true,       debug: false,         scroll: {             items: 1,             duration: 600,             pauseOnHover: "resume",             fx: "fade"       },         auto: {             timeoutDuration: 6000,             play: true       },         swipe: {             onTouch: true,             onMouse: true       },         pagination: {             container: "#fade-animation-slider-indicators"       },         prev: {             button: "#fade-animation-slider-prev"       },         next: {             button: "#fade-animation-slider-next"       } });

• Auto Animation Slider

  HTML

  <div id="auto-animation-slider" class="gr-caroufredsel">       <ul class="gr-slider-wrapper">             <li class="gr-slider-item"><img src="images/other/shortcodes_slider_1.jpg" alt="shortcodes_slider_1" class="gr-slider-img" /></li>             <li class="gr-slider-item"><img src="images/other/shortcodes_slider_2.jpg" alt="shortcodes_slider_2" class="gr-slider-img" /></li>             <li class="gr-slider-item"><img src="images/other/shortcodes_slider_3.jpg" alt="shortcodes_slider_3" class="gr-slider-img" /></li>       </ul> </div> <!-- #auto-animation-slider-->

  JAVASCRIPT – main.js

  $("#auto-animation-slider .gr-slider-wrapper").carouFredSel({       infinite: true,       circular: true,       responsive: true,       debug: false,         scroll: {             items: 1,             duration: 600,             pauseOnHover: "resume",             fx: "scroll"       },         auto: {             timeoutDuration: 6000,             play: true       },         swipe: {             onTouch: true,             onMouse: true       }, });

• Random Slider With Timer

  HTML

  <div id="random-slider-with-timer" class="gr-caroufredsel">       <ul class="gr-slider-wrapper">             <li class="gr-slider-item"><img src="images/other/shortcodes_slider_1.jpg" alt="shortcodes_slider_1" class="gr-slider-img" /></li>             <li class="gr-slider-item"><img src="images/other/shortcodes_slider_2.jpg" alt="shortcodes_slider_2" class="gr-slider-img" /></li>             <li class="gr-slider-item"><img src="images/other/shortcodes_slider_3.jpg" alt="shortcodes_slider_3" class="gr-slider-img" /></li>       </ul>       <div id="random-slider-with-timer-indicators" class="gr-slider-indicators right-top gr-btn gr-btn-style-16"></div>       <div id="random-slider-with-timer-timer" class="gr-slider-timer top"></div> </div> <!-- #random-slider-with-timer-->

  JAVASCRIPT – main.js

  $("#random-slider-with-timer .gr-slider-wrapper").carouFredSel({       infinite: true,       circular: true,       responsive: true,       debug: false,         items: {             start: "random"       },         scroll: {             items: 1,             duration: 600,             pauseOnHover: "resume",             fx: "scroll"       },         auto: {             timeoutDuration: 6000,             play: true,             progress: {                   bar: "#random-slider-with-timer-timer"             }       },         swipe: {             onTouch: true,             onMouse: true       },         pagination: {             container: "#random-slider-with-timer-indicators"       } });

SOCIAL ICON

• Social Icon Style 1

  HTML

  <div class="gr-social-list-style-1">      <ul class="clearfix">             <li>                   <a href="#" target="_blank">                         <span class="icon"><i class="fa fa-twitter"></i></span>                         <span class="gr-btn gr-btn-style-5">twitter</span>                   </a>             </li>             <li>                   <a href="#" target="_blank">                         <span class="icon"><i class="fa fa-facebook"></i></span>                         <span class="gr-btn gr-btn-style-5">facebook</span>                   </a>             </li>             <li>                   <a href="#" target="_blank">                         <span class="icon"><i class="fa fa-youtube"></i></span>                         <span class="gr-btn gr-btn-style-5">youtube</span>                   </a>             </li>             <li>                   <a href="#" target="_blank">                         <span class="icon"><i class="fa fa-tumblr"></i></span>                         <span class="gr-btn gr-btn-style-5">tumblr</span>                   </a>             </li>             <li>                   <a href="#" target="_blank">                         <span class="icon"><i class="fa fa-dribbble"></i></span>                         <span class="gr-btn gr-btn-style-5">dribbble</span>                   </a>             </li>       </ul> </div> <!-- .gr-social-list-style-1-->

  CSS - main.css

  [class*="gr-social-list-"]:before, [class*="gr-social-list-"]:after {       content: " ";       clear: both;       display: table; } [class*="gr-social-list-"] ul > li {       float: left;       text-align: center;       margin-right: 10px; } [class*="gr-social-list-"] ul > li:last-child {       margin-right: 0; } [class*="gr-social-list-"] a {       display: block; } .gr-social-list-style-1 ul > li:hover .icon {       color: #02cdb3; }

• Social Icon Style 2

  HTML

  <div class="gr-social-list-style-2">       <ul class="clearfix">             <li>                   <a href="#" target="_blank">                         <i class="fa fa-twitter"></i>                         <span class="text">twitter</span>                   </a>             </li>             <li>                   <a href="#" target="_blank">                         <i class="fa fa-facebook"></i>                         <span class="text">facebook</span>                   </a>             </li>             <li>                   <a href="#" target="_blank">                         <i class="fa fa-youtube"></i>                         <span class="text">youtube</span>                   </a>             </li>             <li>                   <a href="#" target="_blank">                         <i class="fa fa-tumblr"></i>                         <span class="text">tumblr</span>                   </a>             </li>       </ul> </div> <!-- .gr-social-list-style-2-->

  CSS - main.css

  .gr-social-list-style-2 ul > li {       margin-right: 20px; } .gr-social-list-style-2 ul > li:last-child {       margin-right: 0; }

• Social Icon Style 3

  HTML

  <div class="gr-social-list-style-3">       <ul class="clearfix">             <li>                   <a href="#" target="_blank">                         <i class="fa fa-facebook"></i>                   </a>             </li>                <li>                   <a href="#" target="_blank">                         <i class="fa fa-twitter"></i>                   </a>             </li>             <li>                   <a href="#" target="_blank">                         <i class="fa fa-google-plus"></i>                   </a>             </li>             <li>                   <a href="#" target="_blank">                         <i class="fa fa-instagram"></i>                   </a>             </li>             <li>                   <a href="#" target="_blank">                         <i class="fa fa-rss"></i>                   </a>             </li>       </ul> </div> <!-- .gr-social-list-style-3-->

  CSS - main.css

  .gr-social-list-style-3 ul > li {       margin-right: 32px; } .gr-social-list-style-3 ul > li:last-child {       margin-right: 0; } .gr-social-list-style-3 a {       width: 20px;       font-size: 18px;       color: #374456; } .gr-social-list-style-3 a:hover {       color: #02cdb3; }

• Social Icon Style 4

  HTML

  <div class="gr-social-list-style-4">   <ul class="clearfix">     <li>       <a href="#" target="_blank">         <i class="icon fa fa-twitter"></i>       </a>     </li>     <li>       <a href="#" target="_blank">         <i class="icon fa fa-facebook"></i>       </a>     </li>     <li>       <a href="#" target="_blank">         <i class="icon fa fa-youtube"></i>       </a>     </li>     <li>       <a href="#" target="_blank">         <i class="icon fa fa-tumblr"></i>       </a>     </li>   </ul> </div> <!-- .gr-social-list-style-4-->

  CSS - main.css

  .gr-social-list-style-4 ul > li {       margin-right: 15px; } .gr-social-list-style-4 ul > li:last-child {       margin-right: 0; } .gr-social-list-style-4 a {       display: block;       position: relative;       width: 30px;       height: 30px;       border: 2px solid transparent;       -webkit-transform: rotate(45deg);       -ms-transform: rotate(45deg);       transform: rotate(45deg);       -webkit-transform-origin: center center;       -ms-transform-origin: center center;       transform-origin: center center; }

• Social Icon Style 5

  HTML

  <div class="gr-social-list-style-5">       <ul class="clearfix">             <li>                   <a href="#" target="_blank">                         <i class="fa fa-facebook"></i>                   </a>             </li>             <li>                   <a href="#" target="_blank">                         <i class="fa fa-twitter"></i>                   </a>             </li>             <li>                   <a href="#" target="_blank">                         <i class="fa fa-google-plus"></i>                   </a>             </li>             <li>                   <a href="#" target="_blank">                         <i class="fa fa-instagram"></i>                   </a>             </li>             <li>                   <a href="#" target="_blank">                         <i class="fa fa-rss"></i>                   </a>             </li>       </ul> </div> <!-- .gr-social-list-style-5-->

  CSS - main.css

  .gr-social-list-style-5 ul > li {       margin-right: 32px; } .gr-social-list-style-5 ul > li:last-child {       margin-right: 0; } .gr-social-list-style-5 a {       width: 20px;       font-size: 18px;       color: #fff; }