“Flip” Documentation by “Novaro Studio” v1.0


“Flip”

Created:11/25/2012
By: Novaro Studio


Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to contact us via our email novaro.studio@gmail.com. Thanks so much!


Table of Contents

  1. HTML Structure
  2. Template Components
  3. CSS Files and Structure
  4. JavaScript
  5. Sources and Credits
  6. PHP Code Explanation (If your theme uses PHP)
  7. Flash (If your theme uses Flash)
  8. API Usage (If your theme uses an API)
  9. Any additional unique features that need an overview

A) HTML Structure - top

Below is the general HTML structure of the landing page.

0) Change Color - top

You can change content, heading and link color in the color.css

1) One Page HTML Structure - top

The front page's layout consist of top that show the logo and main menu, slider that show slider, maincontent that show content, footersidebar that show footer widget, footer that show copyright information.

<!DOCTYPE html>
<html lang="en">
<head>

 <!-- Basic Page Needs
  ================================================== -->
  <meta charset="utf-8" />
  <title>[..page title..]</title>
  <meta name="robots" content="index, follow" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <meta name="author" content="" />
  
 <!-- CSS
  ================================================== -->
  <!-- Link Stylesheet Here -->
  
  
  <!-- Favicons
  ================================================== -->
  <!-- Link to Favicon Here -->
  
</head>

<body>
	
<div id="subbody">
    <div id="outercontainer">
    
    <!-- HEADER -->
    <header id="outerheader">
        <div class="topcontainer container">
            <div class="row">
                <div class="logo columns"> 
                    <div class="logoimg">
                        [.. contains an anchor tag for the logo link  ..]
                    </div>
                </div>
                <section class="navigation">
                    <a class="nav-toggle fa fa-bars"></a>
                    <nav>
                        <ul class="topnav sf-menu">
                            [.. containes all menu's list items and sub lists ..]
                        </ul> 
                    </nav><!-- nav --> 
                <div class="clearfix"></div>
                </section>
                <div class="clearfix"></div>
            </div>
        </div>
    </header>
    <!-- END HEADER -->
    
    <!-- SLIDER -->
    <div id="outerslider">
        <div id="slidercontainer">
            <section id="slider">
                <div id="slideritems" class="flexslider preloader">
                    [.. contains the slider items ..]
                </div>
                <div class="clearfix"></div>
            </section>
            <div class="clearfix"></div>
        </div>
    </div>
    <!-- END SLIDER -->
    
    <!-- MIDDLE -->
	<div id="outermiddle">

	<!-- MAIN CONTENT -->
    <div id="outermain">
		<div class="bb-custom-wrapper">
			<div id="bb-bookblock" class="bb-bookblock">
				
                <div id="home" class="sectioncontainer bb-item sectionno-1">
					<section id="content-home" class="section slider parallax light-menu">
                    [.. contains the slider ..]
					</section>
                </div>
                
				<div id="about-us" class="sectioncontainer bb-item sectionno-2">
					<section id="content-about-us" class="section default  dark-menu">
                    [.. contains the content information..]
					</section>
                </div>
                
                <div id="testimonial" class="sectioncontainer bb-item sectionno-3">
					<section id="content-testimonial" class="section default  light-menu">
                    [.. contains the content information..]
					</section>
                </div>
                
                <div id="our-works" class="sectioncontainer bb-item sectionno-4">
					<section id="content-our-works" class="section default  dark-menu">
                    [.. contains the content information..]
					</section>
                </div>
                
                <div id="our-services" class="sectioncontainer bb-item sectionno-5">
					<section id="content-our-services" class="section default  light-menu">
                    [.. contains the content information..]
					</section>
                </div>
                
                <div id="our-team" class="sectioncontainer bb-item sectionno-6">
					<section id="content-our-team" class="section default  dark-menu">
                    [.. contains the content information..]
					</section>
                </div>
                
                <div id="pricing-info" class="sectioncontainer bb-item sectionno-7">
					<section id="content-pricing-info" class="section default  dark-menu">
                    [.. contains the content information..]
					</section>
                </div>
                
                <div id="contact-us" class="sectioncontainer bb-item sectionno-8">
					<section id="content-contact-us" class="section default  dark-menu">
                    [.. contains the content information..]
					</section>
                </div>


                <div class="clearfix"></div><!-- clear float -->
			</div>
        </div>
    </div>
    <!-- END MAIN CONTENT -->

	</div>
	<!-- END MIDDLE -->
    
    
    <div id="footerwrapper">
    	<div id="togglefoterwrapper" class="fa fa-angle-up"></div>

        <!-- FOOTER SIDEBAR -->
        <div id="outerfootersidebar">
            <div class="container">
                <div id="footersidebarcontainer" class="row"> 
                    <footer id="footersidebar">
                        <div id="footcol1" class="three columns alpha">
                            [.. contains footer1 widget ..]
                        </div>
                        <div id="footcol2" class="three columns">
                            [.. contains footer2 widget ..]
                        </div>
                        <div id="footcol3" class="three columns">
                            [.. contains footer3 widget ..]
                        </div>
                        <div id="footcol4" class="three columns">
                            [.. contains footer4 widget ..]
                        </div>
                        <div class="clearfix"></div>
                    </footer>
                    <div class="clearfix"></div>
                </div>
            </div>
        </div>
    	<!-- END FOOTER SIDEBAR -->
    
        <!-- FOOTER -->
        <div id="outerfooter">
            <div class="container">
                <div id="footercontainer" class="row">
                <footer id="footer" class="twelve columns">
                    <div class="copyrightcontainer">
                        <div class="copyright">
                            [.. contains footer copyright ..]
                        </div>
                        <nav id="footericon">
                            <div class="topicon">
                                <ul class="sn">
                                    [.. contains footer icon ..]
                                </ul>
                            </div>
                        </nav><!-- nav --> 
                        <div class="clearfix"></div>
                    </div>
                </footer>
                </div>
            </div>
        </div>
        <!-- END FOOTER -->

    </div>
    
    </div><!-- end outercontainer -->
</div>

<!-- Javascript
================================================== -->
<!-- Javascript Code here -->

</body>
</html>

        

B) Template Components - top

1) Slider - top

The home page slider powered by jQuery Flexslider. The slider code is placed after the navigation.

jQuery Slider

Replace the [.. the slider items ..] with the slider items

    <div class="slidercontainer">
    	<div class="slideritems flexslider preloader">
        	<ul class="slides">
            	[.. the slider items ..]
       		</ul>
      	</div>
   		<div class="clearfix"></div>

    </div>

the slider items

<li style="background-image:url([.. full url to the slide image ..]);">
    	<img src="[.. full url to the slide image ..]" alt="" />
		<div class="flex-caption">
            <div class="text-caption top">
                <div class="caption-content">
					<h4>[.. Slider Subtitle ..]</h4>
                    <h2>[.. Slider Title ..]</h2>
                    <div>[.. Slider Text ..]</div>
					<div class="borderslider"></div>
                    <a class="sliderbutton" href="[.. Slider link url ..]"><span>[.. Slider link ..]</span></a>
                </div>
            <div class="clearfix"></div>
        </div>
    </div>
</li>


2) Portfolio - top

Portfolio Filter

The portfolio image for thumb must be 349px x 260px. Please stick to the original size otherwise it may result in layout errors.

Replace the [.. Portfolio Items ..] with the portfolio content

    <ul id="filters" class="option-set clearfix " data-option-key="filter">
        <li class="alpha selected"><a href="#filter" data-option-value="*">All Categories</a></li>
        li><a href="#filter" data-option-value="portfolio-category">Portfolio Category</a></li>
    </ul>

    <div class="nvr-pf-container">
        <ul id="nvr-pf-filter" class="nvr-pf-col-4 isotope">
            [.. Portfolio Items ..]
			<li class="pf-clear"></li>
        </ul>
	</div><!-- end #nvr-portfolio -->
    <div class="clearfix"></div>

Portfolio Columns

The portfolio image for thumb 547px x 340px( for 2 columns), 349px x 260px ( for 3 columns ), and 251px x 191px ( for 4 columns ). Please stick to the original size otherwise it may result in layout errors.

Replace the [.. Portfolio Items ..] with the gallery one content
Replace the [.. number of columns ..] with number of column that you want. maximum = 4 minimum = 2

<div class="nvr-pf-container">
    <ul class="nvr-pf-col-[.. number of columns ..]">
        	[.. Portfolio Items ..]
			<li class="pf-clear"></li>
    </ul>
    <div class="clearfix"></div>
</div>

Portfolio content

<li class="three columns [.. enter 'last' at the last li in one row ..]">
	<div class="nvr-pf-box">
        <div class="nvr-pf-img">
            <div class="rollover"></div>
            <a class="image gotopost" href="[.. Portfolio link detail ..]" title="Thinkprint"></a>
            <a class="image zoom" href="[.. full path to image popup, size you want ..]"  data-rel="prettyPhoto[.. image name ..]" title="Thinkprint"></a>
            <img src="[.. full path to image thumbnail ..]" alt="Thinkprint"/>
        </div>
        <div class="nvr-pf-text">
            <h2 class="nvr-pf-title"><a href="[.. Portfolio link detail ..]" title="Thinkprint">.. portfolio title ..]</a></h2>
			<div class="nvr-pf-cat">[.. Portfolio Categories ..]</div>
			<div class="nvr-pf-separator"></div>
            <div class="nvr-pf-content">[.. portfolio description ..]</div>
        </div>
        <div class="nvr-pf-clear"></div>
	</div>
</li>

 


C) CSS Files and Structure - top

These are the css files:

  1. main.css (used for all pages, this is the general css file.)
  2. color.css (The css is used for styling the color)
  3. layout.css (The css is used for styling the responsive layout)
  4. 1140.css (The css is used for styling the responsive framework)
  5. prettyPhoto.css (The css is used for styling the prettyPhoto lightbox. )
  6. flexslider.css (The css is used for styling jquery flexslider )
  7. normalize.css (The css is used for discern what a browser can and cannot do)
  8. reset.css (The css is used for reset stylesheet is to reduce browser inconsistencies in things)
  9. bookblock.css (The css is used to make a flip book effect)
  10. content.css (The css is used for specific page style)
  11. font-awesome.min.css (The css is used for showing the icon font from fontawesome)
  12. perfect-scrollbar.min.css (The css is used for showing the custom scroll bar)

 


D) JavaScript - top

This theme use these Javascript files:

  1. jQuery
    jQuery is a Javascript library that greatly reduces the amount of code that you must write. jQuery use these javascript files:
    appear.js
    custom.js
    hoverintent.js
    html5shiv.js
    imagesloaded.pkgd.min.js
    jquery.bookblock.min.js
    jquery.color.js
    jquery.cookie.js
    jquery.countTo.js
    jquery.easing.js
    jquery.flexslider-min.js
    jquery.infinitescroll.js
    jquery.isotope.min.js
    jquery.parallax-1.1.3.js
    jquery.prettyPhoto.js
    jquery-1.11.1.js
    jquery-migrate-1.2.1.min.js
    jquerypp.custom.js
    modernizr.js
    perfect-scrollbar.with-mousewheel.min.js
    retina.min.js
    
    superfish.js
    
    supersubs.js
    
    - You can edit the contact.js files. for setting contact form.


E) Sources and Credits - top


F) PHP Code Explanation - top

There are only one php code for contact page which is sendemail.php, open this file and change the email and subject on line 2 and line 6. No need to edit other code unless you really want to.


Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

Interfeis

Go To Table of Contents