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!
Below is the general HTML structure of the landing page.
You can change content, heading and link color in the color.css
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>
The home page slider powered by jQuery Flexslider. The slider code is placed after the navigation.
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>
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>
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>
These are the css files:
This theme 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.
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