Version: 2.1 | Dated: 04th DEC 2016

Fekra Documentation

introduction

Before setting up the theme, it is imperative to realize it's capabilities, scope and potential usage.

While developing this theme our main focus was to make it user friendly and easy to use for non-technical users requiring their less input or otherwise minimal expertise.

This theme is 100% (highly) customizable, each block is portable and can be moved to another page hence producing a new design/layout.

Also by simply adding classes in code, user can get variations in styles.

We have optimized the code for load speed and extensively used CSS for effects etc.

The code is 100% bug free and follows W3C standards.

We have used latest tools for development e.g., HTML5/CSS3, BootStrap, SCSS that will give you powerful and innovative experience for your projects. The theme is fully responsive and retina ready, compatible with all browsers and mobile-devices.

It has passed highest standards of Quality Assurance, giving you freedom and enjoyment of a well-managed, error free code that you can use in any project.

Fekra is a multipupose Template that has following feature

Home Pages
  • 66 + Demo
  • 310 + Pages
  • 26 + Multipurpose Pages
  • 22 + One Page Parallax
  • 3 Landing Page
  • 5 Portfolio HomePages
  • 4 Blog HomePages
Some Extra Feature
  • 19 Header
  • 19 Footer
  • Alot of Short Codes
Fekra Use Scss

To make Styles even more customizeable and easy to use. We divide SCSS into pages so you can remove unneccessry CSS and make you Website more optimized,

Further more useing SCSS gives you more control over your Template and you can add css chnages in secondes here is the example that help you to understand how you have more control over your Template.

Let supose you want to change google Font Roboto and want add Open Sans just open _bootstrap-custom.scss and change value in repective variable and compile SCSS that's all.

Now you have Open Sans on yuor template instead of Roboto

Setting up Fekra Theme

Follow these guide lines below to get started with your Site:

  1. Open the Fekra/markup Folder to find all the Templates Files
  2. You will need to Upload these files to your Web Server using FTP in order to use it on your Website.
  3. Make sure you upload the required files/folders listed below:
    • markup/css - Required css files
    • markup/inc - Required PHP Functions Folder and AJAX files
    • markup/fonts - Required fonts files
    • markup/media - Required media files
    • markup/scss - Required scss files
    • markup/images - Required images files
    • markup/js - Required Javacripts files
    • markup/index.html - Index File/Homepage
    • The other files can be used according to your requirement.
  4. After adding all these folder on server you're now good to go..! just add your Content and you will have awesome Template.

HTML Structure

We have Developed Fekra with a simple coding structure. here is the sample:

<!DOCTYPE html>
<html>
<head>

	<!-- All Stylesheets, Scripts & Title here -->

</head>
<body>
	<!-- main container of all the page elements -->
	<div id="wrapper">
		<!-- header of the page -->
		<header id="header">
            ...
		</header>
		<!-- contain main informative part of the site -->
		<main id="main">
			<!-- history section -->
			<section class="history-section">
				<div class="container">
					...
				</div>
			</section>
		</main>
		<!-- footer of the page -->
		<footer id="footer">
			<!-- footer top -->
			<div class="footer-top">
					...
			</div>
			<!-- footer cent -->
			<div class="footer-cent">
					...
			</div>
			<!-- footer bottom -->
			<div class="footer-bottom">
					...
			</div>
		</footer>
	</div>
</body>
</html>

Layout Settings

Fekra Theme has Support both Boxed & Wide Layouts. Adding the class .boxed-v to the <body> will turn your website into a boxed Layout:

<body class="boxed-v">

Setting up RTL version

Fekra Theme has Support for RTL version. By adding rtl.css to the <head> section will turn your website right to left:

<head>
	<!-- set the encoding of your site -->
	<meta charset="utf-8">
	<!-- set the viewport width and initial-scale on mobile devices -->
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<!-- set the title of your site -->
	<title>Fekra</title>
	<!-- ========= Favicon Icons ========= -->
	<link rel="shortcut icon" href="images/favicon/favicon.ico">
	<!-- Standard iPhone Touch Icon-->
	<link rel="apple-touch-icon" sizes="57x57" href="images/favicon/apple-touch-icon-57x57.png">
	<!-- Retina iPhone Touch Icon-->
	<link rel="apple-touch-icon" sizes="114x114" href="images/favicon/apple-touch-icon-114x114.png">
	<!-- Standard iPad Touch Icon-->
	<link rel="apple-touch-icon" sizes="72x72" href="images/favicon/apple-touch-icon-72x72.png">
	<!-- Retina iPad Touch Icon-->
	<link rel="apple-touch-icon" sizes="144x144" href="images/favicon/apple-touch-icon-144x144.png">
	<!-- include Google fonts  -->
	<link href='https://fonts.googleapis.com/css?family=Lato:400,100,100italic,300,300italic,400italic,700,700italic,900,900italic%7CPlayfair+Display:400,400italic,700,700italic,900,900italic%7CRoboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900italic,900%7CRaleway:400,100,200,300,500,600,700,800,900%7CGreat+Vibes%7CPoppins:400,300,500,600,700' rel='stylesheet' type='text/css'>
	<!-- include the site stylesheet of bootstrap  -->
	<link rel="stylesheet" href="css/bootstrap.css">
	<!-- include the font awesome stylesheet  -->
	<link rel="stylesheet" href="css/font-awesome.min.css">
	<!-- include the stylesheets of headers and footer of the page  -->
	<link rel="stylesheet" type="text/css" href="css/page-assets.css">
	<!-- include the helping elements stylesheets of  the page  -->
	<link rel="stylesheet" type="text/css" href="css/helper-elements.css">
	<!-- include the site stylesheet  -->
	<link rel="stylesheet" type="text/css" href="style.css">


	<!-- include the RTl stylesheet  -->
	<link rel="stylesheet" type="text/css" href="css/rtl.css">


	<!-- include the site color stylesheet  -->
	<link rel="stylesheet" type="text/css" href="css/color/color.css">
    <!-- include the site animation stylesheet  -->
    <link rel="stylesheet" href="css/animate.css" type="text/css" />
</head>

Page Loading Transitions

You can show Interactive loaders to your Visitors while the Pages of you Website loads in the background & then Reveal your Pages with CSS3 Transitions. Page Loading Transitions are enabled by default. To disable the Transition, you can simply add .no-transition Class to the <body> Tag.

<body class="no-transition">

Color Schemes

You can change your Website's Color Scheme in an instant. for your convenience Fekra has two methodes.

  1. Changeing path of Color CSS Stylesheets in HTML
  2. Changeing just HEX value in scss/color/color.scss

Methode 1

Make sure you add the css/color/color.css stylesheet in your head after the css/all.css stylesheet.

<head>
	...
	<link rel="stylesheet" href="css/all.css" type="text/css" />

	<!-- include the site color stylesheet -->
	<link rel="stylesheet" href="css/color/color.css" type="text/css" />
	...
</head>

Methode 2

To make even more easy for you we have added color.scss file that include with color variable just use any scss compiler and change you color with the color in variable and compiler one time and that's all you good to go.

Step 1:

You can simply change the HEX Codes according to your requirements.

<!-- main color variable -->
$main-color:							#e74c3c;
just change main color variable value
#header{
	.opener-icons:hover{......}
	.header-top a:hover{......}
	.head-social a{......}
	.cart-box{
		.opener-icons{......}
		.cart-drop {......}
		.cart-list {......}
	}
	.lang-drop{......}
	.leng-opener:hover{......}
}
#nav{......}
.search-popup{......}
.side-widget{......}
.sidemenu-photo{.....}

Step 2:

image description

in result you will have a complete color css with you color

Dark Scheme

You can also completely change the Contrast of the Website to Dark, simply by adding class .dark on body tag.

<body class="dark">
	...
	...
</body>

Fekra has a great option regarding Dark Version. You can apply dark styling to individual block's to. For that you need to wrap that block with a extra DIV with a class of dark 

<section class="section">
	...
	...
</section>

To apply dark version on this block wrap it with on extra CLass

<div class="dark">
	...
    <section class="section">
	  </section>
	...
</div>

Changing Fonts

Changing Fonts in Fekra is very easy.By default, Fekra uses 5 Fonts namely: Poppins, Lato, Roboto, Playfair Display & Great Vibes from the Google Fonts Library. You can find the Linking to the Font Files in the head.


<!-- include Google fonts  -->
<link href='https://fonts.googleapis.com/css?family=Lato:400,100,100italic,300,300italic,400italic,700,700italic,900,900italic% 
7CPlayfair+Display:400,400italic,700,700italic,900,900italic%7CRoboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,
900italic,900%7CRaleway:400,100,200,300,500,600,700,800,900%7CGreat+Vibes%7CPoppins:400,300,500,600,700' rel='stylesheet' type='text/css'>

In order to change the Fonts, you will need to Edit the Above url with your Custom Font if you plan to use a Google Font.

Changing Fonts useing Scss is even more esay. Simply open _bootstrap-custom.scss and change variable here 

$font-playfair:							'Playfair Display', "Helvetica Neue", Helvetica, Arial, sans-serif;
$font-family-base:						'Lato', Georgia, "Times New Roman", Times, serif;
$font-great-wibes:						'Great Vibes', "Helvetica Neue", Helvetica, Arial, sans-serif;
$font-family-serif:						'Raleway', Georgia, "Times New Roman", Times, serif !default;
$font-family-sans-serif:				        'Poppins', "Helvetica Neue", Helvetica, Arial, sans-serif;

Setting up SCSS


Note: SCSS will work perfectly fine after compiling, but it can still be extended more. If you have any Suggestions to Improve or Requests to Add New Features to the SCSS Files, then please Contact Us from Here.

Website Optimization Tips

A Fast & Optimized Website has several factors which needs to be implemented in order to achieve the desired results. There are several Optimization Techniques available which will definitely affect your Website's Performance in a Positive Way & we want to share a few of them with you:

What Special is in Fekra for you.

In Fekra You have complete control over CSS and Javascript. If you don't need some Javascript feature or CSS styling, you can remove it from your page.

Comment Unnecessary CSS

This Techniques is very important in increasing your Website's Loading Speed. Comment unnecessary CSS. It comments unnecessary CSS styling that you don't need. You can do it in 2 easy steps.

Step 1:

image description

Step 2:

image description

Comment Unnecessary Javascript

This Techniques is very important in increasing your Website's Loading Speed. Comment unnecessary Javascript. It comments unnecessary Javascript functions. you can do it in just a single step.

image description

  • gZip Compression & Browser Caching

    This is probably one of the Most Important Techniques you should definitely implement in order to bump up your Website's Loading Speed. gZip Compression is used to compress the Files that are delivered when loading a Website. It covers HTML, CSS, Javascript & Font Files along with other miscellaneous text files. Where as Browser Caching also covers Images & Videos apart from including the above files. This is used to saves the Static Data in your Browser itself so that when you open the Next Pages on the Same Website, the content does not gets Downloaded again, loading the Website fast.

    gZip Compression & Browser Caching can be enabled using the .htaccess File on an Apache Web Server. You can use the Codes from here: https://github.com/h5bp/html5-boilerplate/blob/master/dist/.htaccess to enable these modules on your server.

  • Image Compression & Optimization

    We tend to use Lots of Images on our Websites but we often do not make efforts to Compress & Optimize them. Remember, the Larger the Image, the more time it takes to download and therefore this slows your website loading times affecting User Experience. Your customer will leave your website if it does not load within 3-5 Seconds which adversely affects your Sales. Therefore, it is important to Resize, Optimize & Compress your Images before using it on your Website. Here are some Tips which might come handy in optimizing images:

    • Resize your Images: Resize your Images before using it on your Website. Do not just Download an Image & place it as it is in your Website's <img> Tag without resizing it. The size/resolution of the Image matters since it is not recommended to use an Image size of 1200px x 800px in a Content Size of 300px x 200px as this is unnecessary. Resize it to 300px x 200px
    • Image Formats: There are three common file types that are used for web images which are JPEG, GIF, & PNG. For images with a Flat Background use JPEG images, for images with a Transparent background use PNG images and for images with Animations use GIF images.
    • Compressing Images: Images Compression is important as it considerably reduces the size without losing the quality. There are several FREE Image Optimization Tools available to Download.
      For MAC use ImageOptim
      For Windows use Riot for compressing JPEG Images & PNG Gauntlet for PNG Images.

  • CSS & jQuery Minifications

    It is also recommended that you Combine & Minify all your CSS Files to a single CSS File & all Javascript Files to a single JS File since Minification reduces the size of the File and Combining the files helps in reducing the number of HTTP requests made to the server. This is also an Important Factor in increasing the speed of your website. There are several tools available online to Minify your CSS & JS Files. Our recommendations are:
    For CSS use CSS Minifier and For Javascript use Javascript Minifier.

  • Content Delivery Network

    You can use a CDN to further speed up your website. You can use the CDN to deliver static files of your website like CSS, JS, Images & Font Files. There are several CDN Hosting Providers available on the Internet but we would recommend MaxCDN or CloudFlare. Note: CDN setup requires Extra monthly Fees to setup, so it is completely optional & according to your needs.

  • Fast Web Hosting Servers

    A lot depends on your Web Hosting Servers, so it is recommended that you choose a Hosting Company/Server that provides a Reliable & a Fast Hosting Service. You can check out some recommended Hosting Services here: http://themeforest.net/get_hosting.

Header Types

You can choose between 19 Types of headers while creating your Pages. you need to add Header Html on your page. Here is the Exapmle to activate the Header Type.

<header id="header">
	....
</header> 

<!-- header of the page with 2nd style -->
<header id="header" class="style2">
	....
</header>

Mega Menu

You can start using the Mega Menu in 4 Columns. Try using the Following code:

<nav id="nav">
	<div class="nav-holder">
		<ul class="list-inline nav-top">
			<li><a href="index.html">Home</a></li>
			<li classhas-mega-drop"><a href="index.html">Mega Menu</a>
				<div class="mega-drop">
					<div class="mega-drop">
						<ul>
							...
						</ul>
						<ul>
							...
						</ul>
						<ul>
							...
						</ul>
						<ul>
							...
						</ul>
					</div>
				</div>
			</div>
		</li>
	</ul>
</nav>

Page Titles

Fekra has more then 25 different styles of page titles.

This template has following base HTML structure for page title remaining styles you can have by adding class

<header class="page-banner">
  <div class="container">
    <div class="row">
      <div class="col-xs-12">
        <div class="holder">
          <h1 class="heading">Page Title</h1>
          <p>A Short Page Title Tagline</p>
        </div>
        <ul class="breadcrumbs list-inline">
          <li><a href="#">HOME</a></li>
          <li><a href="#">Shortcodes</a></li>
          <li class="active">Page Titles</li>
        </ul>
      </div>
    </div>
  </div>
  <div class="stretch">
    <img src="images/inner/img01.jpg" alt="image description">
  </div>
</header>

Now if you need another style just add .samll class and you will have a different style

<header class="page-banner samll">
  <div class="container">
    <div class="row">
      <div class="col-xs-12">
        <div class="holder">
          <h1 class="heading">Page Title</h1>
        </div>
        <ul class="breadcrumbs list-inline">
          <li><a href="#">HOME</a></li>
          <li><a href="#">Shortcodes</a></li>
          <li class="active">Page Titles</li>
        </ul>
      </div>
    </div>
  </div>
  <div class="stretch">
    <img src="images/inner/img01.jpg" alt="image description">
  </div>
</header>

Note: You need to remove paragraph in order to have more wonderful page title

If you need another style just add .style2 class and you will have a different style

<header class="page-banner style2">
  <div class="container">
    <div class="row">
      <div class="col-xs-12">
        <div class="holder">
          <h1 class="heading">Page Title</h1>
          <p>A Short Page Title Tagline</p>
        </div>
        <ul class="breadcrumbs list-inline">
          <li><a href="#">HOME</a></li>
          <li><a href="#">Shortcodes</a></li>
          <li class="active">Page Titles</li>
        </ul>
      </div>
    </div>
  </div>
  <div class="stretch">
    <img src="images/inner/img01.jpg" alt="image description">
  </div>
</header>

Here are other helpful classes to achieve other page titles styles

  • .grey to have grey background
  • .dark to have dark background
  • .rightalign to have right align page title
  • .center to have center align page title
  • .pattern to have pattern background

If you need Video in background. Just add video at bottom like following example

<header class="page-banner style2">
  <div class="container">
    <div class="row">
      <div class="col-xs-12">
        <div class="holder">
          <h1 class="heading">Page Title</h1>
          <p>A Short Page Title Tagline</p>
        </div>
        <ul class="breadcrumbs list-inline">
          <li><a href="#">HOME</a></li>
          <li><a href="#">Shortcodes</a></li>
          <li class="active">Page Titles</li>
        </ul>
      </div>
    </div>
  </div>
  <div class="video-area mute">
      <video width="100%" height="100%"  autoplay loop muted>
          <source src="media/explore.mp4" type="video/mp4">
          <source src="media/explore.ogv" type="video/ogv">
          <source src="media/explore.webm" type="video/webm">
      </video>
  </div>
</header>

Columns & Grid

Bootstrap Grid

.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-2
.col-md-2
.col-md-2
.col-md-2
.col-md-2
.col-md-2
.col-md-3
.col-md-3
.col-md-3
.col-md-3
.col-md-4
.col-md-4
.col-md-4
.col-md-5
.col-md-5
.col-md-2
.col-md-6
.col-md-6
.col-md-1
.col-md-11
.col-md-2
.col-md-10
.col-md-3
.col-md-9
.col-md-4
.col-md-8
.col-md-5
.col-md-7

Helper Classes

We have created some really useful helper classes for you. Here are a few of them:

  • .allmargin - Margin of 50px on all sides.
  • .margin-zero - Margin of 0px on all sides.
  • .padding-zero - padding of 0px on all sides.
  • .margin-t-zero - Margin of 0px on top side.
  • .margin-b-zero - Margin of 0px on bottom side.
  • .margin-top-30 - Margin of 30px on the top side.
  • .margin-top-60 - Margin of 60px on the top side.
  • .margin-top-90 - Margin of 90px on the top side.
  • .margin-top-100 - Margin of 100 on the top side.
  • .margin-bottom-30 - Margin of 30px on the bottom side.
  • .margin-bottom-60 - Margin of 60px on the bottom side.
  • .margin-bottom-90 - Margin of 90px on the bottom side.
  • .margin-bottom-100 - Margin of 100 on the bottom side.
  • .padding-top-zero - padding of 0px on top side.
  • .padding-b-zero - padding of 0px on bottom side.
  • .padding-top-30 - padding of 30px on the top side.
  • .padding-top-60 - padding of 60px on the top side.
  • .padding-top-90 - padding of 90px on the top side.
  • .padding-top-100 - padding of 100 on the top side.
  • .padding-bottom-30 - padding of 30px on the bottom side.
  • .padding-bottom-60 - padding of 60px on the bottom side.
  • .padding-bottom-90 - padding of 90px on the bottom side.
  • .padding-bottom-100 - Margin of 100 on the bottom side.
  • .bg-white - Add white Background#fff
  • .bg-grey - Add grey Background#f8f8f8
  • .bg-shark - Add shark Background#2a2a2a
  • .bg-dark-jungle - Add dark Background#222
  • .no-bg - Removea all Background

Useful Snippets

We have created some really useful functionality which surely going to make your Website more interactive. Here are a few of them:

Smooth Scrolling to Same Page Sections

With Fekra you can turn pretty-much any Page into a One Page Website, which defines Smart Functionality. You can Point any Link on a Page to an Element ID which on Clicking scrolls to that Element.

You can use this functionality by adding class="smoothanchor" class to a Link. Simply use the following Sample Code to use this functionality:

<a href="#header" class="button smoothanchor">Scroll to Header</a>

Note: You should have a Valid & Unique Element ID on the Page where you are planning to use the ScrollTo Functionality.

Slider Types & their Options

Fekra includes 9 Unique Sliders & 20+ Pre-Built Slider Templates for you to be used on any Page with 100s of Options. The List of all the Sliders included are mentioned as follows:

  • Revolution Slider
  • Slick Slider
  • Flex Slider
  • Owl Slider
  • Camera Slider
  • Elastic Slider
  • Nivo Slider


Revolution Slider

You can find the Revolution Slider related Documentation here.

Read Revolution Slider Docs



Slider Captions

You can Add Captions to your Slides using a no. of Classes described below:

Caption Class Description Works on
.flex-caption Creates a Caption on Flex Slider, Owl Slider & Camera Slider Flex Slider
Owl Slider
Camera Slider with .camera-caption
.nivo-caption Creates a Caption on the Nivo Slider Nivo Slider
.ei-title Creates a Caption on the Elastic Slider Elastic Slider
.slider-caption-top-left Positions the Caption to the Top Left on Flex Slider & Owl Slider Flex Slider
Owl Slider
.slider-caption-top-right Positions the Caption to the Top Right on Flex Slider & Owl Slider Flex Slider
Owl Slider
.slider-caption-bottom-right Positions the Caption to the Bottom Right on Flex Slider & Owl Slider Flex Slider
Owl Slider
.slider-caption-bg Provides a Dark background for the Caption on Flex Slider, Owl Slider & Camera Slider Flex Slider
Owl Slider
Camera Slider with .camera-caption
.slider-caption-bg
.slider-caption-bg-light		 Provides a Light background for the Caption on Flex Slider, Owl Slider & Camera Slider Flex Slider
Owl Slider
Camera Slider with .camera-caption

Blog Setup

Fekra has 4 different type of Blog Posts. Use the Code Sample below:

Blog post 1

<article class="blog-post-v1">
    <!-- Post Image -->
    <div class="img-box">
        <a href="#"><img src="image.jpg" alt="Standard Post with Image"></a>
    </div>
    <!-- Blog Text -->
    <div class="blog-txt">
        <h2><a href="blog.html">Why Does Music Feel So Good?</a></h2>
        <!-- Post Meta -->
        <ul class="meta list-inline">
            <li><i class="fa fa-user"></i> By <a href="blog-single-slider.html">Admin name</a></li>
            <li><i class="fa fa-tags"></i> <a href="blog-single-slider.html">Music</a>,  <a href="blog-single-slider.html">Technologies</a>,  <a href="blog-single-slider.html">People</a></li>
            <li><i class="fa fa-heart"></i> <a href="blog-single-slider.html">14</a></li>
            <li><i class="fa fa-comments"></i> <a href="blog-single-slider.html">320</a></li>
        </ul>
        <p>blog text goes here, blog text goes here, blog text goes here, blog text goes here, blog text goes here, blog text goes here, </p>
        <a href="blog-single-slider.html" class="more">[ CONTINUE READING ]</a>
        <div class="box-holder">
          <span class="icon"><i class="fa fa-picture-o"></span>
          <time datetime="2015-02-18"><span class="add">18</span> jan</time>
        </div>
    </div>
</article>

Blog post 2

<article class="blog-post-v2">
    <!-- Post Image -->
    <div class="img-box">
        <a href="#"><img src="image.jpg" alt="Standard Post with Image"></a>
    </div>
    <!-- Blog Text -->
    <div class="blog-txt">
        <h2><a href="blog.html">Why Does Music Feel So Good?</a></h2>
        <!-- Post Meta -->
        <ul class="meta list-inline">
            <li><i class="fa fa-user"></i> By <a href="blog-single-slider.html">Admin name</a></li>
            <li><i class="fa fa-tags"></i> <a href="blog-single-slider.html">Music</a>,  <a href="blog-single-slider.html">Technologies</a>,  <a href="blog-single-slider.html">People</a></li>
            <li><i class="fa fa-heart"></i> <a href="blog-single-slider.html">14</a></li>
            <li><i class="fa fa-comments"></i> <a href="blog-single-slider.html">320</a></li>
        </ul>
        <p>blog text goes here, blog text goes here, blog text goes here, blog text goes here, blog text goes here, blog text goes here, </p>
        <a href="blog-single-slider.html" class="more">[ CONTINUE READING ]</a>
        <div class="box">
          <span class="icon"><i class="fa fa-picture-o"></span>
          <time datetime="2015-02-18"><span class="add">18</span> jan</time>
        </div>
    </div>
</article>

Blog post 3 (Timeline)

<div class="row-holder">
    <!-- box -->
    <div class="box">
       <a href="#"><img src="image.jpg" alt="Standard Post with Image"></a>
       <!-- text box -->
       <div class="text-box">
       <h3><a href="blog.html">Why Does Music Feel So Good?</a></h3>
       <p>blog text goes here, blog text goes here, blog text goes here, blog text goes here, blog text goes here, blog text goes here, </p>
       <a href="blog-single-slider.html" class="more">[ CONTINUE READING ]</a>
    </div>
    <!-- Date -->
    <time datetime="2015-02-18"><span class="add">18</span> jan</time>
    <!-- box -->
    <div class="box">
       <a href="#"><img src="image.jpg" alt="Standard Post with Image"></a>
       <!-- text box -->
       <div class="text-box">
       <h3><a href="blog.html">Why Does Music Feel So Good?</a></h3>
       <p>blog text goes here, blog text goes here, blog text goes here, blog text goes here, blog text goes here, blog text goes here, </p>
    </div>
</div>

Blog post 4 (Timeline with icon)

<div class="p-holder">
    <!-- box -->
    <div class="box">
      <div class="img-box">
       <a href="#"><img src="image.jpg" alt="Standard Post with Image"></a>
      </div>
      <h2><a href="blog.html">Why Does Music Feel So Good?</a></h2>
      <p>blog text goes here, blog text goes here, blog text goes here, blog text goes here, blog text goes here, blog text goes here, </p>
    </div>
    <!-- icon -->
    <span class="icon hidden-xs"><i class="fa fa-calendar"></i></span>
    <!-- Date -->
    <time class="hidden-xs" datetime="2015-02-18"><span class="add">18</span> jan</time>
</div>

Post Types

You can use a 14 different types of Post Types:

  • Image
  • image full width
  • 3 column
  • blockquote
  • lEFT SIDEBAR
  • right SIDEBAR
  • both sidebar
  • slider
  • audio
  • sound cloud
  • vimeo
  • youtube
  • html5 video
  • dialymotion

Portfolio Setup


Fekra provides a very elegant way to showcase your work. Setting up Portfolio is simple. Please use the following codes:


Setting up Portfolio Filter:

We have 4 different portfolio filter style. to make easy for you, we have style them globally you just need to chnage class name and you are good to go.

Filter type 1

<ul id="work-filter" class="list-inline isotop-controls">
	<li class="active"><a href="#" >Show All</a></li>
	<li><a href="#" data-filter=".work-design">design</a></li>
	<li><a href="#" data-filter=".work-fashion">fashion</a></li>
	<li><a href="#" data-filter=".work-illustration">illustration</a></li>
	<li><a href="#" data-filter=".work-products">products</a></li>gt;
</ul>

Filter type 2

<ul id="work-filter" class="list-inline isotop-controls2">
	<li class="active"><a href="#" >Show All</a></li>
	<li><a href="#" data-filter=".work-design">design</a></li>
	<li><a href="#" data-filter=".work-fashion">fashion</a></li>
	<li><a href="#" data-filter=".work-illustration">illustration</a></li>
	<li><a href="#" data-filter=".work-products">products</a></li>gt;
</ul>

Filter type 3

<ul id="work-filter" class="list-inline isotop-controls3">
	<li class="active"><a href="#" >Show All</a></li>
	<li><a href="#" data-filter=".work-design">design</a></li>
	<li><a href="#" data-filter=".work-fashion">fashion</a></li>
	<li><a href="#" data-filter=".work-illustration">illustration</a></li>
	<li><a href="#" data-filter=".work-products">products</a></li>gt;
</ul>

Filter type 4

This Filter type has a little different HTML structure

<nav class="isotop-controls4">
	<ul id="work-filter" class="list-inline">
		<li class="active"><a href="#" >Show All</a></li>
		<li><a href="#" data-filter=".work-design">design</a></li>
		<li><a href="#" data-filter=".work-fashion">fashion</a></li>
		<li><a href="#" data-filter=".work-illustration">illustration</a></li>
		<li><a href="#" data-filter=".work-products">products</a></li>gt;
	</ul>
	<a class="view-all" href="portfolio-5columns.html">VIEW ALL</a>
</nav>

Setting up Portfolio Items:


<!-- portfolio block nospace -->
<div class="portfolio-block nospace">
	<!-- box -->
	<div class="box">
		<a href="portfolio-single-image.html" class="over">
			<div class="holder">
				<div class="frame">
					<div class="over-frame">
						<span class="plus">+</span>
						<strong class="title">The Have</strong>
						<p>Design</p>
					</div>
				</div>
			</div>
		</a>
		<!-- Portfolio Image -->
		<img src="images.jpg" alt="Portfolio Title" class="img-responsive">
	</div>
</div>

Useful classes to change style of portfolio block

  • .style2 To change portfolio block styles
  • .style3 To change portfolio block styles
  • .style4 To change portfolio block styles
  • .style5 To change portfolio block styles
  • .style6 To change portfolio block styles
  • .style2 To change portfolio block styles
  • .style2 To change portfolio block styles
  • .nospace by default every block hase 30px right and bottom margin to remove it add class nospace

In Page AJAX

You can load Portfolio Details on the same Page using AJAX Technique which makes the User Experience more Interactive.



Setting up AJAX Portfolio Wrapper:

<!-- Main AJAX Wrapper -->
<div class="ajax-area">
	<div class="ajax-holder">
		<!-- Portfolio block goes here -->
	</div>
<!-- Portfolio AJAX loader here -->
<a class="btn btn-load" href="inc/items01.html">LOAD MORE</a>
</div>

Note: Use code like this. on click of .btn-load Portfolio block will load



Setting up AJAX Portfolio Items

<div class="container-fluid blogs-block">
	<div id="work" class="icotop-holder">
		<!-- portfolio block nospace -->
		<div class="portfolio-block nospace">
			<!-- box -->
			<div class="box">
				<a href="portfolio-single-image.html" class="over">
					<div class="holder">
						<div class="frame">
							<div class="over-frame">
								<span class="plus">+</span>
								<strong class="title">The Have</strong>
								<p>Design</p>
							</div>
						</div>
					</div>
				</a>
				<!-- Portfolio Image -->
				<img src="images.jpg" alt="Portfolio Title" class="img-responsive">
			</div>
		</div>
	</div>
</div>

The codes for the AJAX Item Details can be found in the file: PACKAGE/HTML/inc/item04

Introduction

Fekra boasts of a huge number of handy Shortcodes which are quite powerful, flexible, functional & easy to use. Setting up shortcodes is very easy & Self Explanatory. Here is the List of Shortcodes included with Fekra:

  • ALERT BOXES
  • ANIMATION
  • BLOCQUOTE
  • BUTTONS
  • CAROUSAL
  • CLIENTS
  • CLOUMNS
  • COUNTERS
  • DIVIDERS
  • GALLERIES
  • HEADING STYLES
  • ICON BOXES
  • ICON LISTS
  • LABELS
  • LIGHTBOX
  • LIST PANELS
  • MAPS
  • MEDIA EMBDED
  • MODAL BOXES
  • NAVIGATIONS
  • PAGINATIONS
  • PIES SKILLS
  • PRICING BOXES
  • PROCESS STEPS
  • PROMO BOXES
  • RESPONSIVE
  • SECTIONS
  • SOCIAL ICONS
  • TABLES
  • TABS
  • THUMBNAILS
  • TOGGLE
  • Animations
  • Buttons
  • Tables
  • Tabs
  • Toggles
  • Blockquotes
  • Carousels
  • Charts
  • Clients
  • Columns
  • Testimonials
  • Thumbnails
  • Counters
  • Dividers
  • Alert Boxes
  • Styled Icons
  • Icon Boxes
  • Pies & Skills
  • Responsive
  • Galleries
  • Pricing Boxes
  • Heading Styles
  • Icon Lists
  • Labels
  • Lightboxs
  • Lists & Panels
  • Maps
  • Media Embeds
  • Modal Boxes
  • Navigations
  • Paginations
  • Process Steps
  • Promo Boxes
  • Sections
  • Social Icons

Each of the above mentioned Shortcodes are easily extendable, flexible & easy to use. You can find the sample codes in their respective files. We are explaining a few of them for your Reference.

Animations

Scroll to reveal Animations are latest in the Trends. You can do them too with Fekra. You can use animations on any element you want. Here is the Sample Code:

<div data-animate="fadeInLeft"></div>

You can also use delays for your Animations:

<div data-animate="fadeInLeft" data-delay="500"></div>

Note: Delay Duration is in milliseconds.

Here is the list of the Animation Types you can use:

  • bounce
  • flash
  • pulse
  • rubberBand
  • shake
  • swing
  • tada
  • wobble
  • bounceIn
  • bounceInDown
  • bounceInLeft
  • bounceInRight
  • bounceInUp
  • bounceOut
  • bounceOutDown
  • bounceOutLeft
  • bounceOutRight
  • bounceOutUp
  • fadeIn
  • fadeInDown
  • fadeInDownBig
  • fadeInLeft
  • fadeInLeftBig
  • fadeInRight
  • fadeInRightBig
  • fadeInUp
  • fadeInUpBig
  • fadeOut
  • fadeOutDown
  • fadeOutDownBig
  • fadeOutLeft
  • fadeOutLeftBig
  • fadeOutRight
  • fadeOutRightBig
  • fadeOutUp
  • fadeOutUpBig
  • flip
  • flipInX
  • flipInY
  • flipOutX
  • flipOutY
  • lightSpeedIn
  • lightSpeedOut
  • rotateIn
  • rotateInDownLeft
  • rotateInDownRight
  • rotateInUpLeft
  • rotateInUpRight
  • rotateOut
  • rotateOutDownLeft
  • rotateOutDownRight
  • rotateOutUpLeft
  • rotateOutUpRight
  • hinge
  • rollIn
  • rollOut
  • zoomIn
  • zoomInDown
  • zoomInLeft
  • zoomInRight
  • zoomInUp
  • zoomOut
  • zoomOutDown
  • zoomOutLeft
  • zoomOutRight
  • zoomOutUp

Sections & Parallax

Setup content you want to stand out. You can use Light & Dark Sections, Parallax Images or HTML5 Videos as Sections.

Setting up Sections:

Setup your Sections outside the .container element.

Light Section:

<section class="section">
	<div class="container">
		<div class="row">
			<div class="col-xs-12">
				...
			</div>
		</div>
	</div>
</section>

Dark Section:

<section class="section dark">
	<div class="container">
		<div class="row">
			<div class="col-xs-12">
				...
			</div>
		</div>
	</div>
</section>

Setting up Parallax Sections:

Make sure your Parallax Images are of enough Width & Height, preferably 1920x1080 or above.

<section class="section dark">
	<div class="container">
		<div class="row">
			<div class="col-xs-12">
				...
			</div>
		</div>
	</div>
	<div class="parallax-holder">
		<div class="parallax-frame">
			<img src="images/img05.jpg" height="1280" width="1920" alt="image description">
		</div>
	</div>
</section>

Setting up HTML5 Video Sections:

You will require HD .mp4 .ogv & .webm videos.

<section class="section" style="height: 550px;">
	<div class="container">
		<div class="row">
			<div class="col-xs-12">
				...
			</div>
		</div>
	</div>
	<div class="video-area">
		<video width="100%" height="100%"  autoplay loop>
			<source src="media/video1.mp4" type="video/mp4">
			<source src="media/video1.ogv" type="video/ogv">
			<source src="media/video1.webm" type="video/webm">
		</video>
		<div class="video-overlay"></div>
	</div>
</section>

Setting up Youtube Background Video Sections:

You can now simply Add Youtube Video as Background Sections similar to the HTML5 Video Sections.

<div class="section style="height: 600px;">
	<div class="container">
		<div class="row">
			<div class="col-xs-12">
				...
			</div>
		</div>
	</div>
	<div class="youtube_bg_video has_overlay" data-property="{videoURL:'https://www.youtube.com/watch?v=mSLAF_DjiDU',containment:'self',startAt:0,mute:true,autoPlay:false,loop:false,opacity:1,showYTLogo:false, realfullscreen:false, quality:'small'}"></div>
</div>

Tabs, Toggles & Accordions

You can use Tabs, Toggles & Accordions in Various Styles and with Different Options to display Below the Fold content.

Tabs

Use this code to display Tabs:

<div class="tabs-section">
	<ul class="tabset">
		<li><a href="#tab-1">Tab 1</a></li>
		<li><a href="#tab-2">Tab 2</a></li>
		<li><a href="#tab-3">Tab 3</a></li>
	</ul>
	<div class="tab-content">
		<div id="tab-1">
			This is Tab 1 Content
		</div>
		<div id="tab-2">
			This is Tab 2 Content
		</div>
		<div id="tab-3">
			This is Tab 3 Content
		</div>
	</div>
</div>

Note: Make sure you add unique IDs for each Tab Container and Tab Items.

Accordions

You can add an Accordion using the Code below:

<ul class="beans-accordion">

	<a class="opener" href="#"><i class="fa"></i>  Accordion Title/opener  </a>
	<div class="beans-slide">Accordion Content Goes Here</div>

	<a class="opener" href="#"><i class="fa"></i>  Accordion Title/opener  </a>
	<div class="beans-slide">Accordion Content Goes Here</div>

	<a class="opener" href="#"><i class="fa"></i>  Accordion Title/opener  </a>
	<div class="beans-slide">Accordion Content Goes Here</div>

</ul>

Lightbox

Setting up Lightboxes:

Adding a .lightbox class to any Link or Button will turn it into a Lightbox Element. You can use different Types of Lightbox with an Easy Setup:

Single Image:
<a href="link-to-lightbox-image.jpg" class="lightbox" alt="Lightbox Image"></a>
Iframe:
<a href="http://yourwebsite.com" class="lightbox" data-lightbox="iframe">Your Website in a Lightbox</a>
Video:
<a href="http://www.youtube.com/watch?v=kuceVNBTJio" class="lightbox" data-lightbox="iframe">Lightbox Video</a>

Note: It is recommended that you use only this Format http://www.youtube.com/watch?v=kuceVNBTJio for Youtube Videos.

Gallery:
<div data-lightbox="gallery">
	<a href="link-to-lightbox-image.jpg" rel="lightbox[gallery1]" class="lightbox"><img src="link-to-small-thumb.jpg" alt="Lightbox Image"></a>
	<a href="link-to-lightbox-image.jpg" rel="lightbox[gallery1]" class="lightbox"><img src="link-to-small-thumb.jpg" alt="Lightbox Image"></a>
	<a href="link-to-lightbox-image.jpg" rel="lightbox[gallery1]" class="lightbox"><img src="link-to-small-thumb.jpg" alt="Lightbox Image"></a>
	<a href="link-to-lightbox-image.jpg" rel="lightbox[gallery1]" class="lightbox"><img src="link-to-small-thumb.jpg" alt="Lightbox Image"></a>
	<a href="link-to-lightbox-image.jpg" rel="lightbox[gallery1]" class="lightbox"><img src="link-to-small-thumb.jpg" alt="Lightbox Image"></a>
</div>

Google Maps

You can add Embedded Google Maps to any Page using the following setup:

  • Step 1:

    Add the Google Maps Specific Scripts before closing <body> Tag below the js/plugins.js script linking:

    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>

  • Step 2:

    Add a section which will contain your Google Map:

    <section data-lat="31.5497" data-lng="74.3436" data-zoom="8" style="height: 250px;" class="map">
	<div class="map-info">
		<h2>Fekra</h2>
		<p>Lorem ipsum dolor sit amet...</p>
	</div>
</section>

Countdown

You can add a Countdown Timer to any Page using the following setup:

<div id="countdown-example"></div>
<script>
	jQuery(document).ready( function($){
		var newDate = new Date(2015, 20, 10);
		$('#countdown-example').countdown({until: newDate});
	});
</script>

Also, the date is in Javascript Format: (YYYY, M, DD) and in Javascript, the Month is:

  • 0 as January
  • 1 as February
  • 2 as March
  • 3 as April
  • 4 as May
  • 5 as June
  • 6 as July
  • 7 as August
  • 8 as September
  • 9 as October
  • 10 as November
  • 11 as December

So if you want your Countdown Date to be setup on 15th June, 2015 then your Countdown Date in Javascript Format will be Date(2015, 20, 10).

Widgets Setup

Widgets are simple & easy to setup, completely flexible & can be used anywhere on a page. Here's a sample code:

<section class="widget">
	<h2>Widget Title</h2>
	...
</section>

List of Included Widgets:

  • Links
  • Flickr Photostream
  • Instagram Feed
  • Tabbed Widgets
  • Carousel
  • Social Icons
  • Video Embeds
  • Raw Text/HTML

Info: Most widgets are easy to use & understand and can be checked on the Sidebar Pages, while some tricky ones are explained below.

Flickr Widget

You can show your Flickr Photos from a Username or Group anywhere on your website, simply by writing a Single Line of Code. Some of the important attributes you'll require while setting up this widget are listed below:

  • data-id - The ID of your Username/Group. Can be obtained from here. Example: 44802888@N04
  • data-count - No. of Images you want to be retrieved. Example: 12
  • data-type - Type of the ID you have entered. Example: group/user

Code Sample:

<div class="flickr-feed widget" data-id="44802888@N04" data-count="8" data-lightbox="gallery"></div>

Version 2.1

Released on 04 DEC 2016

  • jQuery V1.12.3 jQuery Version updated

Note jQuery File name is changed now from jquery-1.11.3.min.js to jquery.js. So Change if you want to update

Version 2.0

Released on 26 Aug 2016

  • Dentist Demo Dentist Demo Added / MultiPurpose
  • Cleaner Demo Cleaner Demo Added / MultiPurpose

Version 1.9

Released on 05 May 2016

  • ShopV3 Demo ShopV3 Demo Added / MultiPurpose
  • Bakery Demo Bakery Demo Added / MultiPurpose
  • popup issue solved popup responsive issue solved

Version 1.8

Released on 29th March 2016

  • ShopV2 Demo ShopV2 Demo Added / MultiPurpose
  • Decoration Demo Decoration Demo Added / MultiPurpose
  • popup issue solved popup responsive issue solved

Version 1.7

Released on 11th Jan 2016

  • finance Demo finance Demo Added / One Page and MultiPurpose
  • logistics Demo logistics Demo Added / One Page and MultiPurpose
  • Beans SLider Beans Slider Js change with Slick SLider

In V 1.7 Slider on All page will effect we have changed JS to decrease Load time of this template and Also Slick slider Support RTl version

Version 1.6

Released on 26th Dec 2015

  • Events Demo Events Demo Added / One Page and MultiPurpose
  • Hotel Demo Hotel Demo Added / One Page and MultiPurpose
  • JS Fix Main slider fixed, mobile nav Fixed
  • style.css Fix Fixed samll issues in Header. Main content part
  • rtl.css Fix RTL issues fixed

Version 1.5

Released on 24th Dec 2015

  • fitness Demo fitness Demo Added / One Page and MultiPurpose
  • 2K fonts icon now we have 2000 different fonts you can check hese files for that shortcode-icon-7stroke.html shortcode-icon-ei-fonts.html shortcode-icon-icomoon.html shortcode-icon-typicons.html

Version 1.4

Released on 18th Dec 2015

  • christmas 4 christmas Version created
  • christmas Email Template 1 christmas Email template added

Version 1.3

Released on 16th Dec 2015

  • medical medical Version created
  • medical onepage medical onepage Version created
  • 404 404 Version created
  • Coming Soon Coming Soon Version created
  • About Us About Us Version created
  • Contact US Contact US Version created
  • services services Version created
  • Email Templates 2 new Email Templates created

Version 1.2

Released on 11th Dec 2015

  • RTL Version RTL Version created
  • Fixed Js issues Fixed
  • CSS Changes
    We have used a new approach by dividing CSS into 3 parts style.css , page-assets.css , helper-elements.css
  • style.css it contains all major styles of the page
  • page-assets.css it contains page assets of the page like header , footer
  • helper-elements.css it contains all helper elements styles of the page. Like form's and buttons

Version 1.1

Released on 6th Dec 2015

  • Email Templates 4 New Email Templates added
  • Fixed Js issues Fixed

Initial Release V1.0

Released on 5th Dec 2015