Version: 1.0 | Dated: 9th Septembar 2016

construction

Follow the few steps below to get started with your Site Template:

  1. Open the Construction/HTML 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 your required file.
  3. Make sure you upload the required files/folders listed below in HTML:
    • HTML/assets/css - Stylesheets Folder
    • HTML/assets/fonts - Required Font Awesome Icon Folder
    • HTML/assets/images - Images Folder
    • HTML/assets/js - Javacripts Folder
    • HTML/mail - Required PHP Functions Folder
    • HTML/assets/plugin/rs-plugin - Required Revolution Slider
    • HTML/index.html - Index File/Default Homepage
    The other files can be used according to your needs.
  4. You are done now go..! Start adding your Content and showcase your Brand New Elegant Webpages.

HTML Structure

Piko Construction follows a simple coding structure. bellow the sample code:

                    <!DOCTYPE html>
                    <html class="no-js" lang="en-US">
                        <head>

                            <!-- Your Stylesheets, Scripts & Title here -->
                            ...

                        </head>
                        <body class="piko-layout-header-fixed" >

                            <!-- Header menu -->
                            <header class="piko-layout-header" >

                                ...

                            </header>


                                <!-- start revolution slider -->
                                <section class="container">

                                    ...

                                </section>

                                <!-- start our service -->
                                <section class="container">

                                ...

                                </section>



                                <!-- Footer 02 -->
                                <section class="footer2-bg" >

                                        <div class="container">

                                                ...

                                        </div>
                                </section>


                                <!-- Copyrights -->
                                <footer>
                                        <div class="container">

                                        ...

                                        </div>

                                </footer>


                        </body>
                    </html>

Logo Settings

The Logo Container can be found in the Header Container - header

<div class="piko-brand">
    <a href="index.html" class="piko-logo">
        <img src="images/logo/logo.png" alt="construction" class="piko-desktop-logo">                     <!-- Normal Logo -->
        <img src="images/logo/logo-inverse.png" alt="construction" class="piko-desktop-logo-inverse">     <!-- inverse Logo -->
        <img src="images/logo/logo-inverse.png" alt="construction" class="piko-mobile-logo">              <!-- mobile Logo -->
    </a>

...

Note The Logo Image's maximum height can be 40px normal logo. The inverse logo & mobile logo same Image's maximum height can be 35px Dark light version However, it is optional.

if needs increase logo size: need to change 2 line style.css file

1.first: normal menu(decrease the value 28px)then logo size increase. hopefully line number: 450

.piko-layout-header .piko-brand { margin-top: 28px;}

2. when sticky menu:(decrease the value 15px)then logo size increase. hopefully line number: 509

.piko-page-on-scroll.piko-layout-header-fixed .piko-layout-header .piko-brand {margin-top: 15px;}

Retina Logo

If you wish to use a Retina Logo, make sure that you use double the size of your Standard Logo. With add extention standard logo like this:

Note The Retina Logo Image's Should be exist same path the standard logo

Color Schemes

You can change your Website's Color Scheme in an instant. You simply need to change the HEX Color Code in the css/color.css file & you are done to go. Follow quick steps what you change:

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

  2. Now simply change the HEX Codes according to your requirements.
<head>

	...
        ...
        ...


	<!-- Here goes your color.css (NB: here @import main style.css) -->
	<link rel="stylesheet" href="assts/css/skin/color.css" type="text/css" />
	

</head>

The best way changing color:

location file: assets/css/skin/color.css

Pre defined 5 color: color-red, color-orange, color-yellow, color-light-green & green green default use: css style name color.css

if you use predefined color: Just rename: color-red.css to color.css NB:default color.css first delete

if you use custom color: Just open color.css any editor: find the hex color code #45bf55 (green) then replace your own hex color code

Changing Fonts

Change your Fonts. we have included css/style.css file to manage the custom fonts you include with ease. By default, Piko Construciton use 1 Fonts normally: Raleway from the Google Fonts Library. You just @import the font the css/style.css file

@import url(http://fonts.googleapis.com/css?family=Raleway:400,500,600,700,800,900);

In order to change the Fonts, You will needs to remove the @import link. If you plan to use a Self Hosted font. Here is an Example for using Self Hosted Fonts.

You can now be able to change the Font Names in the css/style.css File, under the body{font-family:'Raleway', serif;}

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 fact Optimization Techniques available which will definitely affect your Website's Performance in a Positive Way & we want to share a few of them with Piko Construction:

  • 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. The reason gzip works so well in a web environment is because CSS files and HTML files use a lot of repeated text and have loads of whitespace. Since gzip compresses common strings, this can reduce the size of pages and style sheets by up to 70%! . 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 faster.

    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. already use .htaccess file the root folder

  • 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. for the affect your images quality is same but size lower for the reason your websites fast loading
    • Image Formats: There are three common file types that are used for web images which are JPEG, GIF, & PNG
    • 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 Fact 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 Require.

  • 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 6 Types of headers while creating your Pages. Simply adding the Header Type CSS class to the Header Element will activate the Header Type variation. The list of Header Type Classes & its descriptions are provided below for your reference:

Type Class Features Code Example
.piko-layout-header-04 piko-layout-header-04 Header with a White Background & Gray text. 
<header Class="piko-layout-header-04">
    ...
    ...
</header>
.piko-layout-header-fixed sticky Header Set the all menu if you use normal just remove the class <body > Tag. 
<body class="piko-layout-header-fixed">
    <header>
        ....
        ....
    </header>
.piko-layout-header-03 piko-layout-header-03 Header with a White Background & Gray text 
<header class="piko-layout-header-03">
    ...
    ...
</header>
.piko-layout-header-03 piko-layout-header-04 Header with a White Background & Gray text center align just remove the class piko-navbar-fluid 
<header class="piko-layout-header-03 piko-navbar-fluid">
    ...
    ...
</header>
.piko-layout-header-04 piko-layout-header-04 Header with a transparent Background & Gray text Full screen menu just add the class .container-fluid 
<header class="piko-layout-header-04">
<div class="piko-topbar">
<div class="container-fluid">
    ...
    ...
</div>
</div>
</header>
.piko-layout-header-03 piko-layout-header-03 Header with a black Background for front & white text menu just add the class .black 
<header class="piko-layout-header-03">
<div class="piko-topbar">
<div class="black">
    ...
    ...
</div>
</div>
</header>
.piko-layout-header-dark-02 piko-layout-header-dark-02 Header with a black Background & white text 
<header class="piko-layout-header-dark-02">
    ...
    ...
</header>
.piko-hover01, .piko-hover02 Available hover two style just add the class <header> Tag 
<header class="piko-hover01">
    ...
    ...
</header>

Note All Mega menu sticky available just remove the class .piko-layout-header-fixed the <body> Tag. Now the menu is normal

Mega Menu

Mega menu style with code sample

                    <ul>
                        <li>
                            <ul>
                                <li>
                                    <ul>
                                        <li>mega menu</li>   <!-- Mega menu Column 1  -->
                                        <li></li>
                                    </ul>
                                </li>
                                <li>
                                    <ul>
                                        <li>mega menu </li>   <!-- Mega menu Column 2  -->
                                        <li> </li>
                                    </ul>
                                </li>
                                <li>
                                    <ul>
                                        <li>mega menu</li>   <!-- Mega menu Column 3  -->
                                        <li></li>
                                    </ul>
                                </li>
                                <li>
                                    <ul>
                                        <li>mega menu</li>  <!-- Mega menu Column 4  -->
                                        <li></li>
                                    </ul>
                               </li>
                            </ul>
                        </li>
                        <li>
                            <ul>
                                <li>Dropdwon</li>                <!-- Drop Down  -->
                                <li></li>
                                <li>
                                    <ul>
                                        <li>Dropdwon submenu</li>  <!-- Drop Down sub menu  -->
                                        <li></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <ul>
                                <li>Dropdwon</li>               <!-- Drop Down  -->
                           </ul>
                        </li>
                    </ul>

Top Menu

Top menu total 3 style available with code sample

                    <div>
                        
                          <nav class="piko-top-menu piko-lang piko-pull-left">    <!-- Language  -->
                              <ul>
                                  <li>
                                      <ul>
                                         <li>  </li>
                                          <li>  </li>
                                      </ul>
                                  </li>
                              </ul>
                          </nav>
                        
                         <nav class="piko-top-menu piko-pull-left">               <!-- Social Icon  -->
                            <ul>
                                <li> </li>
                                <li>  </li>
                            </ul>
                        </nav >
                        
                        <nav class="piko-top-menu piko-pull-right">               <!-- Contact numbers  -->
                            <ul>
                                <li> </li>
                                <li>  </li>
                            </ul>
                        </nav>

                </div>

Page Sub Menus

Page Sub Menu 1

There are two style available with code sample

                <div class=list-group>
                    <a href="" class="list-group-item"> </a>
                    <a href="" class="list-group-item"> </a>
                    <a href="" class="list-group-item"> </a>
                </div>

Page Sub Menu 2 Toggle

Toggle style The sub menu 2 here is sample code 

<div id="sub-menu">
        <div class="list-group custom-list">
        <a href="#" class="list-group-item">Pricing Table </a> <!-- Single link menu  -->
           <a class="list-group-item drop active" data-toggle="collapse" data-target="#drop-sub" data-parent="#sub-menu">About </a>
            <div id="drop-sub" class="sublink collapse in">
               <a href="#" class="list-group-item">Company History </a>   <!-- Dropdown menu  -->
               <a href="#" class="list-group-item">Core Value </a>
            </div>
        </div>
    </div>

Helper Classes

Use these handy Helper Classes with the Headers according to your needs

Helper Class Description
.piko-layout-header-fixed if need NO sticky Remove the class the .piko-layout-header-fixed from the body tag. right now Construction menu is normal
.black Use a class flowing the sample code then you get gets Dark.

<header>
<div class="piko-topbar">
<div class="black">
    ...
    ...
</div>
</div>
</header>

Page Titles

Class Description Example
Default Default Page Title style with Text aligned Left & Breadcrumbs Right. 
    <section  class="margin-t150">

	<div class="container page-banner">
	<div class="col-sm-6 col-md-6">
            <h1>Blog</h1>
        </div>
        <div class="col-sm-6 col-md-6">
		<ol class="breadcrumb pull-right">
			<li><a href="#">Home</a></li>
			<li><a href="#">blog</a></li>
			<li class="active">Single page</li>
		</ol>
	</div>

    </section>

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:

Margin and Padding

  • .margin-o-auto Margin 0 Auto
  • .margin-t0 Margin Top 0 pixel
  • .margin-15 Margin 15 pixel for all side
  • Then.margin-5, .margin-10
  • .margin-t5 Margin Top 5 pixel
  • Then .margin-t10, .margin-t15, .margin-t20, .margin-t25, .margin-t30, .margin-t40, .margin-t50, .margin-t60, .margin-t70, .margin-t80, .margin-t100, .margin-t120, .margin-t150 pixel the top margin
  • .margin-b10 Margin Bottom 10 pixel
  • Then .margin-b15, .margin-b20, .margin-b25, .margin-b30, .margin-b40, .margin-b50, .margin-b60, .margin-b80, .margin-b100, .margin-b120, .margin-b150 pixel the Bottom margin
  • .margin-tb50 Margin Top and Bottom 50 pixel
  • Then.margin-tb70, .margin-tb100
  • .padding-5, .padding-10 Padding 5 & 10 pixel all side
  • .padding-lr15, .padding-lr50 Padding 15 & 50 pixel left side and right side
  • .padding-tb50, .padding-tb100 Padding 50 & 100 pixel Top side and Bottom side
  • .padding-t5 Padding Top 5 pixel
  • Then.padding-t10, .padding-t15, .padding-t20, .padding-t25, .padding-t30, .padding-t50, .padding-t60, .padding-t70, .padding-t100, Padding Top 5 pixel
  • .padding-b10 Padding bottom 10 pixel
  • Then.padding-b30, .padding-b50, .padding-b70, .padding-b100, .padding-b150 Padding Top 5 pixel

Font size and Weight

  • .font-10 Font size 10 px
  • Then11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 25, 30, 35, 40, 45, 50, 60, 70, 80, 90, 100, 110, 120 the class name same as .font- put the value last
  • .font-thin Font weight 300.
  • .font-slim Font weight 400.
  • .font-sbold Font weight 500.
  • .font-bold Font weight 600.

Align text and <div>

  • .text-left text-align Left
  • .text-center text-align Center
  • .text-right text-align Right
  • .pull-left div align left
  • .pull-right div align Right
  • .margin-o-auto div align center
  • .screen-middle div screen align center

Bootstrap Grid padding changing

Helper Class Description
no-gutter its effect the column/grid spacing only padding 2px 
<div class="row no-gutter">
    <div class="col-sm-6 col-md-3">
    ...
    </div>
    <div class="col-sm-6 col-md-3">
    ...
    </div>
    <div class="col-sm-6 col-md-3">
    ...
    </div>
    <div class="col-sm-6 col-md-3">
    ...
    </div>

</div>
.no-gutter1 its effect the column .col-md-6 spacing padding left side 0px and right side 0px 
<div class="row no-gutter1">
    <div class="col-md-6">
    ...
    </div>

</div>
.no-gutter2 its effect the column .col-md-12 spacing padding left side 1px and right side 1px 
<div class="row no-gutter4">
    <div class="col-md-12">
    ...
    </div>

</div>
.no-gutter3 its effect the column .col-md-4 spacing padding left side 0px and right side 0px 
<div class="row no-gutter4">
    <div class="col-md-3">
    ...
    </div>

</div>
.no-gutter4 its effect the column .col-md-12 spacing padding left side 1px and right side 1px 
<div class="row no-gutter4">
    <div class="col-md-12">
    ...
    </div>

</div>
.no-gutter4 its effect the column .col-md-4 spacing padding left side 2px and right side 2px 
<div class="row no-gutter4">
    <div class="col-md-4">
    ...
    </div>

</div>
.no-gutter5 its effect the column .col-md-4 spacing padding left side 0px and right side 2px 
<div class="row no-gutter4">
    <div class="col-md-4">
    ...
    </div>

</div>

Slider Types & their Documentation

Piko Construction includes 3 Unique Sliders for you to be used on any Page with lots of Options. The List of all the Sliders included:

  • Revolution Slider
  • Owl Slider

Revolution Slider

You can find the Revolution Slider related Documentation here.

Revolution Slider Docs

owl Slider

You can find the owl Slider related Documentation here.

Owl Carousel Docs

Multiple item configure

< div class="owl-carousel owl-nav-show-hover wow slideInUp" data-wow-duration = "2s" data-wow-delay = ".35s"
                    data-autoplay="false" 
                    data-margin="30" 
                    data-smartspeed="250" 
                    data-loop="false" 
                    data-autoheight="false" 
                    data-nav="false" 
                    data-dots="false" 
                    data-responsive="{"0":{"items":1},"768":{"items":2},"992":{"items":3},"1200":{"items":4}}">
					  
    <img src="name.jpg" alt="title"/>
	<img src="name.jpg" alt="title"/>
	<img src="name.jpg" alt="title"/>
    
    

</div>

Single item configure


< div class="owl-carousel margin-t30 slideInuP"

                        data-autoplay="true" 
                        data-margin="30" 
                        data-smartspeed="250" 
                        data-loop="true" 
                        data-autoheight="false" 
                        data-nav="true" 
                        data-dots="true" 
                        data-items="1">
					  
    <img src="name.jpg" alt="title"/>
	<img src="name.jpg" alt="title"/>
	<img src="name.jpg" alt="title"/>   
    

</div>

Nav Text align class:

.owl-nav-show-hover, .owl-nav-show, .owl-nav-show-inner

Single slide animation class:

.slideInuP, .fadeiN, .slidedowN.bounceRighT, .zoomiN, .zoomin_2, .slidedowN.zoomInDowN, .fadeInLefT, .fadeInuP, .slideInuP

Blog Setup

Single Posts Simple Markup below the code:

...
...
<div class="caption">
    <h3>Leeds the join Piko Construction </h3>     <!-- post heading -->


        <ul class="piko-li">          <!-- date, author, tag icon -->
            <li></li>
            <li></li>
            <li></li>
        </ul>


        <!-- post content -->
        <p>Lorem ipsum dolor sit amet, conse ctetur adipis cing elit. Donec posuere in odionec feugiat.Inte ger non vestibulum erat. Nulla volutpat justo in metus congue laoreet. </p>
        <p>Lorem ipsum dolor sit amet, conse ctetur adipis cing elit. Donec posuere in odionec feugiat.Inte ger non vestibulum erat. Nulla volutpat justo in metus congue laoreet. </p>

    <div class="blog-view margin-t40">
        <h4 style="float:left; padding-right: 10px"> Share this post:</h4>   <!-- shear butoon title -->
        <div class="social-share">
            <ul class="piko-li">
                <li></li>
                <li></li>
                <li></li>
            </ul>
    </div>
</div>
...
...

Post Types

You can use different types of Single Post:

  • Image
  • Embedded Video
  • Slider Gallery
  • Gallery Thumbs
  • Blockquotes

Comment Types

You can use a 4 different types of Comments System on Post Single Pages:

  • Default
  • Facebook
  • Twitter
  • Disqus
Name Description & code sample
Default You can use static flow the code blog single post
Facebook 1. Include the JavaScript SDK on your page once, ideally right after the opening <body>tag. 

<div id="fb-root"></div>
<script>(function (d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id))
        return;
    js = d.createElement(s);
    js.id = id;
    js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5&appId=140302716001981";       <!-- your-app-id like this [140302716001981] -->
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk')); & lt; /script>

2. Place the code for your plugin wherever you want the plugin to appear on your page.


<div class="fb-comments" data-href="http://developers.facebook.com/docs/plugins/comments/" data-numposts="5"></div>

Read More Facebook
Twitter Place the code for your plugin wherever you want the plugin to appear on your page.


<a class="twitter-timeline" href="https://twitter.com/themepiko"
 data-widget-id="655717323777511424">Tweets by @themepiko</a> <!-- your twitter id [655717323777511424] -->

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],
p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id))
{js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

Note you should be login the create the widget

Read More Twitter
Disqus Place the code for your plugin wherever you want the plugin to appear on your page.


	<!-- Disqus Comments -->
	<div id="disqus_thread"></div>
	<script type="text/javascript">
		/* ==== CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE ===== */
		var disqus_shortname = 'your-disqus-shortname'; // required: replace the  [you-disques-shortname] instant your disques name

		/* * * DON'T EDIT BELOW THIS LINE * * */
		(function() {
			var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
			dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
			(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
		})();
	</script>
	<!-- Disqus Comments end -->

Read More Disqus

Portfolio Setup

Piko Construction provides a very elegant way to showcase your work. Setting up Portfolio is simple. Blow the sample code:

Setting up Portfolio Filter:

<ul "media-boxes-filter" id="filter">

    <li><a class="selected" href="#" data-filter="*"><i class="fa fa-filter"></i> All</a></li>
    <li><a href="#" data-filter=".category1">Construction</a></li>
    <li><a href="#" data-filter=".category2">Isolation</a></li>
    <li><a href="#" data-filter=".category3, .category4">Interior Design</a></li>
    <li><a href="#" data-filter=".category4">Tiling</a></li>
    <li><a href="#" data-filter=".category5">Plumbing</a></li>

</ul>

Setting up Portfolio Items:

<div class="media-box category2">
    <div class="media-box-image">
        <div data-width="240" data-height="151" data-thumbnail="images/portfolio/thumbnails/thumb-4.jpg" ></div>            <!-- Thumbnail image -->
        <div data-popup="images/portfolio/img-4.jpg"></div>         <!-- your big image -->

        <div class="thumbnail-overlay">
            <i class="fa fa-eye mb-open-popup"></i>
            <a href="project-details1.html"><i class="fa fa-external-link"></i></a>
        </div>>
    </div>
</div>

Introduction

Piko Construction 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 Piko Construction:

  • Carousel Elements
  • Toggles
  • Tab Elements
  • Tooltips & Popovers
  • Progress Bars
  • Counters
  • Buttons
  • Fonts Icons
  • Heading Title
  • Section Divider
  • Typography
  • Table Elements
  • Animations
  • Alert Elements
  • Charts
  • Image Frame
  • Pricing Tables
  • Under Construction
  • Error 404
  • Maps
  • Media Embeds
  • Modal Boxes
  • Paginations
  • Social Icons
  • Construction process
  • Cost Calculating
  • Testimonials
  • Team Members
  • Team Profile
  • Thumbnails
  • magnific-popup Lightboxs

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.

Accordion Toggle

Helper Class Description
#accordion There are 3 style available the piko construction see the shortcode accordion.html Pages More info, here the sample code


 <div class="panel-group top-margin2" id="accordion">
    <div class="panel panel-info">
         <div class="panel-heading" data-toggle="collapse" data-parent="#accordion" data-target="#collapseOne">
             <h3 class="panel-title accordion-toggle">
                title
             </h3>
         </div>
         <div id="collapseOne" class="panel-collapse collapse">
             <div class="panel-body">
                <p>.... </p>
                <p>.... </p>

             </div>
         </div>
    </div>
</div>

Counters

There are many option available contour piko construction

Helper Class Description
block Use a class flowing the sample code then you get counter box icon & also you can use custom image

<div class="block">
    <div class="count-icon-box"><i class="fa fa-building-o font0">></i></div>
    <div class="count-box black count">2000</div>
    <div class="count-text">PROJECTS DONE</div>
</div>
color white .black show the counter body border color black and text color Orrange
white .white show the counter body border color white and text color white
counter1 Use a class flowing the sample code then you get just count top and title text bottom

<div class="counter1">

<div class="col-md-3 col-sm-3 col-xs-6">
    <div class=""> <span class="count">100</span> <h4>Projects</h4> </div>
</div>

<div class="counter1">
counter2 This class give you background gray color with top icon middle count and title text bottom/
counter3 This class give you left icon, right count and bottom text/td>
counter3 Find the class .one then add the class.two, .three, .four give you different effect
counter3 Find the class .one then add the class.two, .three, .four give you different effect
.counter7 The class give you another two color normal orange if you add class .two after the .counter7get white color

Font icon Style

Use fontAwesome font icon with lot of style and effect

Helper Class Description
.font1 Use a class flowing the sample code then you get icon with style.

<i class="fa fa-heart font1"></i>

class available .font1, font2, ......continue..... .font19
Icon effect Piko construction give you lot of icon effect here is sample code

<div class="feature-icon">

<div class="icon-wrap icon-effect-1 icon-effect-1a">
   <a href="#" class="icon fa-facebook">facebook</a>
    <a href="#" class="icon fa-twitter">twitter</a>
</div>

</div>
.icon-effect-2 Two effect available .icon-effect-2a, .icon-effect-2b,
.icon-effect-3 Two effect available .icon-effect-3a, .icon-effect-3b,
.icon-effect-5 Two effect available .icon-effect-5a, .icon-effect-5b, .icon-effect-5c,
.icon-effect-6 .icon-effect-6
.icon-effect-7 Two effect available .icon-effect-7a, .icon-effect-7b,
.icon-effect-8 .icon-effect-8
.icon-effect-9 Two effect available .icon-effect-9a, .icon-effect-9b,

Heading Title

There are lot of heading include the piko construction

Helper Class Description
.piko-title1 use this class you get title and line right side, bellow the sample code

<div class="piko-title1">
    <h3> <span class="line"></span><span class="text">Piko Construction</span></h3>
</div>
.piko-title2 use this class then use span class .line2 you get two line right side
.piko-title3 use this class then use span class .line you get pattern right side
.piko-title4 use this class then use span class .line you get heading title bottom blod line
.piko-title5 use this class then use span class .line2 you get heading title bottom blod line and middle single line gray color
.piko-title6 use this class then h2 tag you get heading title bottom center blod line and middle single line gray color
.piko-title9 use this class then h2 tag you get heading title bottom center blod
more style .piko-title7, .piko-title8, .piko-subtitle1, .piko-subtitle2, .piko-title10

Note You can find more heading style shortcode heading.html you find this class

Heading Title

There are lot of divider include the piko construction

Helper Class Description
.piko-divider5 Use a class flowing the sample code you get icon with divider

<div class="piko-divider5"> <span><i class="fa fa-truck"></i></span></div>
More divider .piko-divider0, .piko-divider1, .piko-divider2, .piko-divider3, .piko-divider4, .piko-divider5, .piko-divider6, .piko-divider7, .piko-divider8, .piko-divider9, .piko-divider10, .piko-divider11, .piko-divider12,

this class use 100px top and button then use class .two get 50px top and button. or .three get 25px top and bottom, or use the class.nomget 0px top and bottom.

Typography

Here are some sample code typography

Helper Class Description
h1-h6 All tag the same effect but font size different flow the main style.css assets/css/style.css flow the title Typhography & font face
mark Use the mark change background color orange

<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<mark>h1. Piko constructiong <mark>      <!-- get orange color bankground font color white -->
ul, li, ol, li Use the mark change background color orange

<ul class="circle">
    <li>Lorem ipsum dolor sit amet</li>
</ul>
style Available class .square, .disc, decimal, .lower-alpha, .roman

Table Element

You can find more option the table element Bootstrap Go bootstrap Table

Animations

Piko construction attach animations.js and wow.js both feature give elegant feature you website here is sample effect name

<div class="wow slideInUp"></div>

You can also use delays for your Animations:

<div class="wowslideInUp" data-wow-duration="2s" data-wow-delay=".25s"></div>

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

Charts

Piko construction add 3 diffent chart

  • Pie chart2 full feature of construciton company
More information shortcode charts.html pages

Pricing Tables

There are 5+ Pricing Tables include the piko construction

Helper Class Description
.pricing-box Pricing box here teh sample code

<div class="pricing-box">
    <div><h4>Business</h4></div>
    <hr>
    <div class="price">
        <p>$150/mo</p>
    </div>
    <hr>
    <ul class="pricing">>
        <li>Electricity</li>
        <li>Electricity</li>
        <li>Electricity</li>

    </ul>
    <hr>
   <a class="btn-s1" href="#">SIGN UP</a>
</div>
More box .pricing-box2, .pricing-box3, .pricing-box4,

Maintenance

its so elegant page build you piko construction flow the code maintenance.html pages

Error 404 pages

There are two 404 pages added the piko construction flow the code 404.html, 404-2.html pages

Parallax

Parallax background and scroll background add piko construction, here the sample code. preferably 1920x1080 or above.

                        <section class="row fixed-bg bg-img2">
                           <div class="row bg-opa-black2 "></div>
                        </section>

if add the class.scroll after class.fixed-bg its scrall the background image
Available option bg-img1 to bg-img-6 you add your own image form style.css section 12
Available opacity .bg-opa-black1, .bg-opa-black2, .bg-opa-black3, .bg-opa-black4, .bg-opa-white, .bg-opa-yellow you add your own opacity form style.css section 12

Setting up HTML5 Video Sections:

You'll need an HD .mp4 & .webm videos.

Widgets Setup

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

<div class="row footer2">
    <div class="footer2-box">
        <div class="piko-title4 widget">
            <h3><span class="line"></span><span class="text"><strong>Our Service</strong></span></h3>
        ...
        ...
        ...

       </div>
    </div>
</div>

List of Included Widgets:

  • Links
  • Raw Text/HTML
  • Flickr Photostream
  • Tags
  • Posts List
  • Twitter Feed
  • Tabbed Widgets
  • Carousel
  • Subscribers

Info: Most widgets are easy to use & understand you can easily setup sidebar page, while some are explained below.

Flickr Widgets

More info visit Flickr widgets

<a href="images/body/blog03.jpg">
   <img src="images/body/blog03.jpg" alt="construciton"  height="60" width="75">
</a>

Contact Forms & Subscriptions Ajax form Submission

You can setup Contact Forms & Subscriptions anywhere on your Website by simply Copy/Pasting the Sample Code present in the HTML Files contact1.html, contact2.html, contact3.html.

Contact Forms

Just change your Email Address in the mail/action-contact.php and mail/action-subs.php file to start receiving Form Responses.

$toemail = 'youremail@yourwebsite.com'; // Your Email Address
$toname = 'Your Name'; // Your Name

Not receiving Form Emails?

If you are not receiving Emails from your Forms then chances are that your Server Configuration doesn't support PHP mail() function. But you can use SMTP Authentication. Just find the following line of code:

$mail = new PHPMailer();

Add this after the above line:

$mail->IsSMTP();
$mail->Host = "mail.yourdomain.com";
$mail->SMTPDebug = 2;
$mail->SMTPAuth = true;
$mail->Host = "mail.yourdomain.com";
$mail->Port = 26;
$mail->Username = "yourname@yourdomain.com";
$mail->Password = "yourpassword";

Images

Collection stock photo here the some link. also include the custom image only on piko construction

Mockups

jQuery

Css, Font

Piko construction take help this resources

Icon & pattern also include custom pattern

PHP

Piko construction use the Php mailer for mail system

INSTALLATION SERVICE

Themepiko Service:

  • Complete theme installation
  • Exact look feel as the live pikocon
  • Full suite of Bean WordPress Plugins

Themepiko Deliverables:

  • Domain name
  • FTP information
  • WordPress admin credentials
  • Theme files or purchase code

Details

Our in-house team of professional developers will install the theme, upload the pikocon XML file, and setup your website exactly like the live pikocon.

Complete your purchase of the Premium Installation service by clicking the button above and send us your deliverables.

Email: forhad.ferouz@gmail.com

SUPPORT & CONTACT

Support & contact with us ❤

You can contact us in ways. It depends on what you exactly need.

Thank you very much for choosing our theme. We truly appreciate and really hope that you'll enjoy our theme!

Changelog

Version 1.0 -2016/09/20

- Initial Release