Photolane | Photography, Portfolio, Gallery, Modern HTML Template

HTML Structure

The template includes 21 html files. This theme is a flexible layout with max 4 column. All of the information within the main content area is nested within a div with a class of "Photolane_fl_wrapper_all". You have to open index page in order to change it.

If you would like to edit the color, font, or style of any elements in this template, you could do by using "Inspect Element" on Chrome, Safari, Mozilla and Opera(press right click on browser ).  It is really powerful tool to work with html and css codes

 

CSS Files and Structure

I'm using 9 CSS files in this theme. The first file (style.css) contains all of the specific stylings for the page. The file is separated into sections.

 

If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.

Other CSS files:

  • fontello.css - includes ICONS styles
  • base.css - includes common styles
  • skeleton.css - includes column styles
  • flexslider.css - for flexsible slider
  • animation.css - for animation of elements
  • carousel.css - for team and project carousel
  • circlepie.css - for circle charts
  • magnific-popup.css - for lightbox

 

JavaScripts

All call actions are run in init.js

Attention : If you romove any of javascripts, please don't forget to remove js code call action that belongs to removed js from init.js . Otherwise your site works inproperly

Other JavaScript files:

  • init.js - includes call actions
  • modernizr.custom.js - used for IE in order to support HTML5 elements
  • jquery.js - javascript library
  • flexslider.js - used for Slide animation
  • plugins.js - includes all jquery plugins
  • carousel.js - used for Team carouel
  • ie8.js - used for Disable Webpage content for ie browser's old versions.

 

Sources and Credits

I've used the following images, icons or other files as listed.

  • Icons - These Icons by fontello.com. Free for Commercial Use. flaticon.com
  • Images - pexels.com images.
  • Font - Free Google Font "Rubik"

 

Contact Form

Contact form works only in hosting environment. If you want to use them, please contact with us via our profile page contact form: http://themeforest.net/user/frenify/#contact . We will send you a .php file (contact.php) and you have to put it in "Photolane/modal" folder.

 

Important: In order to get messages from your website contact form, you should open contact.html file and change receiver email inside hidden input

Tutorial for Using Special Blocks

Vertical Navigation Settings
<div class="Photolane_fl_vertical_menu" data-bg-color="noBg" data-bg-color2="light"></div>

Vertical navigation supports two background skins:
Initial: data-bg-color=""
After Scroll: data-bg-color2=""

Button Settings
<a href="#" class="Photolane_fl_btn" data-position="" data-size="medium" data-text-color="#fff" data-bg-color="transparent" data-border-color="#3651ff" >Hire Me</a>
Full Width Container Settings
<div class="Photolane_fl_full_width_container" data-padding-top="" data-padding-bottom="500px" >
    <div class="content_holder" data-text-color="">
        <p>Vestibulum ante ipsum primis in faucibus orci luctus et dignissim nibh nulla ultricies dapibus eget id est.</p>
        <img src="img/about/sign.png" alt="" />
        <h3>John Doe</h3>
        <span>Photographer</span>
    </div>
    <div class="background_holder">
        <div class="bg_img" data-speed="" style="background-image: url(img/about/forestbg.jpg)"></div>
        <div class="bg_video" data-speed=""></div>
        <div class="bg_color" data-color="" data-opacity=""></div>
    </div>
</div>
Other Blocks' Settings
<a class="all_projects" data-text-color="white" href="project1.html">All Projects<i class="xcon-angle-right"></i></a>


<!--
data-text-color="white"            // values: all colors in hex or name of color. Ex: #000 (black), darkblue (darkblue)
-->


<div class="section_q" data-img-pos="left">
    <div class="customer"></div>
    <div class="project_img_list"></div>
</div>


<!--
data-img-pos="left"                // values: left, right
-->


<div class="project_img_list" data-cols="one"></div>


<!--
data-cols="one"                    // values: one, two, three
-->


<div class="progress_bar_wrap">
    <div class="progress_bar" data-size-percent="85" data-bg-theme="black" data-bg-color="" data-bg-color2=""></div>
</div>


<!--
data-size-percent="85"            // values: from 0 to 100
data-bg-theme="black"            // values: dark, red, blue

//these datas would work if data-bg-theme=""
data-bg-color=""                // values: all colors in hex or name of color. Ex: #000 (black), darkblue (darkblue)
data-bg-color2=""                // values: all colors in hex or name of color. Ex: #000 (black), darkblue (darkblue)
-->


<div class="section_short_g">
    <div class="section_short_g_in" data-img-pos="left"></div>
</div>


<!--
data-img-pos="left"                // values: left, right
-->


<div class="pie_progress--countdown" role="progressbar" data-time-second="120"></div>


<!--
data-time-second="120"                // values: all values in seconds: Ex: for 2 minutes (2 minutes = 2 * 60 = 120 seconds) -> 120

for all data's information of pie_progress you can see also https://github.com/amazingSurge/jquery-asPieProgress
-->


<div class="Photolane_fl_tabs" data-skin="light" data-x-pos="left"></div>


<!--
data-skin="light"                    // values: light, dark
data-x-pos="left"                    // values: left, right
-->


<div class="twentytwenty-container" data-orientation="vertical" data-before="Original" data-after="Retouch"></div>