Landingz: One Page Multi Purpose Html Theme

Visit Our Product Page

Overview

The LandingZ is fully focus for product or service landing page. This is built with modern technologies like HTML5, CSS3, jQuery, Bootstrap3.x, Font Awesome 4.x, LESS, Modernizer, CSS3 Animation and 100% responsive. LandingZ have many sections: OWL Slider, Special Feature, Extensions Display, All Feature, Pricing Table, Testimonials, Latest News, Blog Display & Contact. It also comes with ready made CSS3 Anitmation, Google Map, Working Contact Form, Paralax and more.

It is accepted that before you start modifying the HTML for your need at least you have basic knowledge in html and twitter Bootstrap3. If you need custom development as well as need to know any thing specific for this theme that doesn't cover in this documentation, you are always welcome to contact us.

How to Modify or Customize

This theme has only one html file called index.html . For any kind of changes please open this file. Also all line number in this documentation indicate index.html file line.

GENERAL

Site Header code starts from line 2 and ends at line 48. It Contains global settings for this settings.

Change Site title see line number 11 of index.html.

Change Site Stylesheet: Line-43. In this stylesheet has all global styles with default color. If you want to only change color then please find five stylesheet in css directory with suffix ...style.css , no matter the settings are changed in any styles switching. Because all stylesheets has same global styles with different pre defined color scheme.

If you want to add new stylesheet then add it to site head section and to add new javascript file please see bottom of the index file.

Custom JS file: Line- 1682. If you find custom js code the plese find cbscript.js from js directory.

Change branding name: Line number 67

                               
                            

Slider: The slider is very basic using OWL Carousel & Animation.css, To change the titles and images of the slider follow this. Each slide has title, sub title and image

Slider code starts from line 121 and ends at line 233

                               
                        

Presenting Our LandingZ

High Quality And Affordable

Morbi egestas sodales magna at tempor. Nulla id consequat odio. Sed tempus nisic in nisl scelerisque porttitor. Morbi elit elit, posuere vitae finibus in, egestas id nun. Aliquam consequat lorem vitae orci pellentesque, eu hendrerit turpis sodales.

Each slider code is like this

                                 
IMAGE

see the first item has class "active".

Title & Subtitle: to change title of first slide the lines 176 for title, and 177 for subtitle , the code is same as above:

images: as example to change the first slider item image see line 174 and the code is same as above

SPECIAL FEATURE

Special feature section starts from line 236 and end line 312

Title & Subtitle: to change title please go to the lines 243 for title, and 249 for subtitle , the code is like:

                                

Special Feature


Donec et viverra ipsum. Quisque vulputate ac ante ut laoreet. Feugiat eleifend, arcu orci fermentum molestie varius dolor.

To edit four single box. Plese find Single Box Code is like:

                                 

Feature Title Here

Sed pharetra ipsum sit amet semper euismod. Phasellus vitae nunc at diam rhoncus faucibus. Aenean fermentum magna egestas sem viverra feugiat.

Learn More

DOZENS OF EXTENSIONS

DOZENS OF EXTENSIONS section starts from line 316 and end line 564

Title & Subtitle: to change title please go to the lines 323 for title, and 329 for subtitle , the code is like:

                               

Dozens of Extensions


Donec et viverra ipsum. Quisque vulputate ac ante ut laoreet. Feugiat eleifend, arcu orci fermentum molestie varius dolor.

Single extension box colde:

                                
img16

Extension Title

Sed pharetra ipsum sit amet are semper eui smod. Phasellus vitae nunc at diam rhoncus.More

ALL FEATURE

ALL FEATURE section starts from line 568 and end line 659

Title & Subtitle: to change title please go to the lines 577 for title, and 579 for subtitle , the code is like:

                                 

All Feature


Donec et viverra ipsum. Quisque vulputate ac ante ut laoreet. Feugiat eleifend, arcu orci fermentum molestie varius dolor.

To edit single feature box item please find the Code is like

                                

Feature Title Here.

Sed pharetra ipsum sit amet semper euismod. Phasellus vitae nunc at diam rhoncus viverra feugiat. Pellentesque aliquet diam sit amet. More

PRICING

PRICING section starts from line 662 and end line 780

Title & Subtitle: to change title please go to the lines 671 for title, and 673 for subtitle , the code is like:

                                  

pricing


Donec et viverra ipsum. Quisque vulputate ac ante ut laoreet. Feugiat eleifend, arcu orci fermentum molestie varius dolor.

To edit single pricing table box. Please find Single table Box Code is like:

                                

Basic

$100

download

Latest News

Latest News section starts from line 784 and end line 908

Title & Subtitle: to change title please go to the lines 793 for title, and 795 for subtitle , the code is like:

                                    

Latest News


Donec et viverra ipsum. Quisque vulputate ac ante ut laoreet. Feugiat eleifend, arcu orci fermentum molestie varius dolor.

To edit featured news box. Please find featured Box Code is like:

                                

Latest News Title Here.

Cras eget magna in ante posueretempus nec vitae leo. Nullam risus ligula, con vallis eget molestie non, scelerisque vitae odio. Nullam risus ligula, arcu amet lorem molestie Maecenas venenatis.MORE INFO

Others item box Code is like:

                                  
                            

FREQUENTLY ASKED QUESTIONS

FREQUENTLY ASKED QUESTIONS section starts from line 913 and end line 1351

Title & Subtitle: to change title please go to the lines 922 for title, and 924 for subtitle , the code is like:

                                

Frequently Asked Questions


Donec et viverra ipsum. Quisque vulputate ac ante ut laoreet. Feugiat eleifend, arcu orci fermentum molestie varius dolor.

FAQ Accordion: The Accordion is very basic using twitter bootstrap. To change the titles and content of the Accordion folow this code. This is a code of a single full accordian.

                                 

Pre-Sales

Each single accordion item code is like this:>

                                

TESTIMONIAL

TESTIMONIAL section starts from line 1356 and end line 1461

Slider: The slider is very basic using twitter bootstrap. To change the name, images, company name and content of the testimonial slider folow this:

                                  

Jonathon2 Doe Company Name

Sed pharetra ipsum sit amet semper euismod.This Phasellus vitae nunc at diam rhoncus faucibus. Aenean fermentum magna egestas sem viverra feugiat. Pellentesque aliquet diam sit amet ligula pellentesque accumsan. Praesent sodales orci at hendrerit gravida. Nam sodales sollicitudin turpis is, egestasipsumsit amet semper euismod dictum pellentesque at.

CONTACT FORM

To configure email options then open contact.php file which you find from php directory from theme root. There we try to describe everything by comments.

Default Email configuration:

                                $admin_email_to         = 'sabuj@codeboxr.com'; // admin email who will get the contact email alert
                                $admin_email_to_name    = "Company Name"; // Admin Name/Company name who will get the email alert
                                $admin_email_from       = 'info@codeboxr.com';  // admin email from which email address email will be sent
                                $admin_email_from_name  = 'System'; //admin name from which email will be sent
                                $admin_send_subject     = 'Contact form alert'; //email subject what the admin will get as contact email alert
                                $user_send_subject      = 'Thanks for contact, your copy'; //email subject what the user will get if the user agreed or select "copy me"
                          

GOOGLE MAP

This is a javascript based plugin. So, for any type customization or modification need to open site custom javascript file which you find from js floder as cbscript.js

HTML code of goole map starting from as

                                

Confgigure Google map: To change latitude, longitude, tile and content, please open cbscript.js file from js directory and go to line number 312. The code is like:

                                // Show google Maps For Landigz Tempalte. You can customize from here
                                $('.map_canvas').CbMaps({
                                    mapOptions: {
                                        latitude: ['23.810637'],
                                        longitude: ['90.400615'],
                                        center: true,
                                        scrollwheel: false,
                                        zoom: 8,
                                        mapType: 'satellite', //google.maps.MapTypeId.ROADMAP
                                        icon: cbx_path + '/img/map-icon.png',
                                        infoWindow: [{
                                            title: 'Codeboxr',
                                            content: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias debitis delectus dolorum enim ex harum, natus quaerat voluptas? Est et labore molestiae molestias odio possimus quae quaerat quam reiciendis, sunt.'
                                        }]
                                    }
                                });

                            

Sometimes you need to change file path. Then you will find it from line 179 from cbscript.js

                                    /********************************************
                                     *** Simple Codeboxr Google Maps Plugin
                                     *********************************************/
                                    var cbx_path = window.location.protocol + '//' + window.location.host;
                                    var pathArray = window.location.pathname.split( '/' );
                                    for (i = 1; i < (pathArray.length - 1); i++) {
                                        cbx_path += '/';
                                        cbx_path += pathArray[i];

                                    }

                            

Left Menu

LEFT SIDEBAR section starts from line 1617 and end line 1640.

If you want to customize or add new menu item then you can do it easily by editing fwing code:

                                 
                            

If you want to edit footer section. Please go to line number 1591 of index.html file and edit.

1
2
3
4
5
6
7
8
9
10
11
12
         <ul class="list-inline animated infinite zoomInUp">
             <li><a href="#cbx-header">Home</a></li>
             <li><a href="#cbx-sfeature" class="gotome">Feature</a></li>
             <li><a href="#cbx-extension" class="gotome">Extensions</a></li>
             <li><a href="#cbx-pricing" class="gotome">Pricing</a></li>
             <li><a href="#cbx-latestnews" class="gotome">Blog</a></li>
             <li><a href="#cbx-blog" class="gotome">Blog</a></li>
             <li><a href="#cbx-faq" class="gotome">FAQ</a></li>
             <li><a href="#cbx-testimonial" class="gotome">Testimonials</a></li>
             <li><a href="#cbx-contact" class="gotome">Contact</a></li>
         </ul>
<p class="cbx-copy"><span><a href="#">LandingZ Web Service.</a></span> Copyright © 2014. Premium Html Theme.</p>