johnsamj
/
DBSRCNN


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530
							<!DOCTYPE html>
<!--[if IE 9]> <html class="ie9"> <![endif]-->
<!--[if !IE]><!--> <html> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <title>Documentation | Boss - Multipurpose Templeate</title>
        <meta name="description" content="Responsive modern ecommerce Html5 Template">
        <!--[if IE]> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <![endif]-->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <link rel="stylesheet" href="css/style.css">
        
        <!-- Favicon and Apple Icons -->
        <link rel="shortcut icon" href="images/favicon.png">
        <link rel="apple-touch-icon" sizes="57x57" href="images/faviconx57.png">
        <link rel="apple-touch-icon" sizes="72x72" href="images/faviconx72.png">
        
        <!--- jQuery -->
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="js/jquery-1.11.0.min.js"><\/script>')</script>
    </head>

    <body>
        <header id="header">
            <h1 id="logo-container">
                <a id="logo" href="#" title="Boss - Multipurpose Template"><img src="images/logo.png" alt="Boss - Multipurpose Templeate"></a>
            </h1>
            <div class="sm-margin"></div>
            <div id="header-inner">
                <ul id="menu">
                    <li><a href="#home">Getting Started</a></li>
                    <li><a href="#" class="open">Html Codes </a><span class="open-menu">&plus;</span>
                        <ul><li><a href="#general-html">General</a></li></ul>
                    </li>
                    <li><a href="#" class="open">Css (Style) Codes </a><span class="open-menu">&plus;</span>
                        <ul>
                            <li><a href="#general-css">General</a></li>
                            <li><a href="#revslider-css">Revslider Folder</a></li>
                            <li><a href="#colors-css">Colors Folder</a></li>
                            <li><a href="#skins-css">Skins Folder</a></li>
                        </ul>
                    </li>
                    <li><a href="#" class="open">Javascript (jQuery) </a><span class="open-menu">&plus;</span>
                        <ul>
                            <li><a href="#general-js">General </a></li>
                            <li><a href="#google-map">Google Map</a></li>
                            <li><a href="#twitter-feed">Twitter feed</a></li>
                            <li><a href="#flickr-feed">Flicker feed</a></li>
                            <li><a href="#contact-form">Contact Form</a></li>
                        </ul>
                    </li>
                    <li><a href="#credits">Credits</a></li>
                    <li><a href="#updates">Updates</a></li>
                    <li><a href="#faqs">FaQs</a></li>
                </ul>
            </div>

            <div id="header-bottom-text">
                <p><a href="//wrapbootstrap.com/user/eony" target="_blank">eonyThemes</a><br>All rights reserved! &copy; </p>
            </div>
        </header>

        <section id="content">
            <div class="container clearfix">
                <div class="one-full">
                <h1 class="title">Boss - Multipurpose Template's <br>Documentation</h1>
                <hr class="big">
                <div id="home">
                    <h2 class="sub-title">1 - Getting Started</h2>
                <p>Thank you for purchasing Boss Template. If you have any questions that are beyond the scope of this documentation file, please feel free to contact me via my user page contact form <a href="//wrapbootstrap.com/user/eony">here</a>.</p>
                <p>This is Boss's documentation file. Please read this file carefully before contacting with us for support.</p>
                <div class="lg-margin"></div>
                <h3 class="sub-title">1.1 - Inclueded Files</h3>
                <p>After downloading Boss template and un-zip it, you will find the following files.</p>
                <ol class="include-list">
                    <li><img src="images/folder.png" alt="folder">Boss
                    </li>   
                    <li><img src="images/folder.png" alt="folder">Documentation</li>
					<li><img src="images/folder.png" alt="folder">Psds</li>
					<li><img src="images/folder.png" alt="folder">Revolution slider documentation</li>
                </ol>
                <div class="lg-margin"></div>
                <h3>1.2 - Boss Homepages</h3>
                <p>Boss comes with 35+ homepage variants and some other homepages to show you how flexiable can Boss be.. I added some menu variants, some portfolio variants. </p>

                <div class="xlg-margin"></div>
                <h3>1.3 - Support</h3>
                <p>If you have a problem or found a bug or want to ask something about template, please feel free to contact me from my <a href="mailto:#">puffde@gmail.com</a> address.</p>
                </div>
                <hr class="sections">
                <div id="general-html">
                    <h2 class="sub-title">2 - Html</h2>
                    <p>Boss is based on the Bootstrap framework. All html codes are valid, commented and well coded for your best interest. This files are coded with Html5 new features/tags. (like header,footer, nav etc..) All html markups coded for best seo practices. </p>Comment example:
<pre><code>&lt;section id="content"&gt;
    &lt;p&gt;This is content&lt;p/&gt;
&lt;/section&gt;&lt;!-- End #content -->&gt;
</code></pre>
<div class="md-margin"></div>
                </div>
                <hr class="sections">
                <div id="css">

                    <h2 class="sub-title">3 - Css</h2>
                    <p>This is the part where Css files are explained.</p>

                    <div class="lg-margin"></div>
                    <div id="general-css">
                        <h3>3.1 - General</h3>
                        <p> All css files are tested, commented and well-coded. Style.css file is the main css file of the Boss. Other files are listed below...</p>
                        <ul>
                            <li><strong>bootstrap.min.css</strong> - Bootstrap Framework css file</li>
                            <li><strong>fontawesome.min.css</strong> - Fontawesome font icon's css file</li>
                            <li><strong>simple-line-icons.css</strong> - Simple line font icons</li>
                            <li><strong>bootstrap-switch.css</strong> - Bootstrap switch css file</li>
                            <li><strong>style.css</strong> - Main css file</li>
                            <li><strong>jquery.selectbox.css</strong> - For custom selects (jquery plugin styles)</li>
                            <li><strong>animate.css</strong> - Awesome css animate css file</li>
                            <li><strong>fonts.css</strong> - Fonts css file</li>
                            <li><strong>bootstrap-datetimepicker.css</strong> - Bootstrap Datetimepicker plugin</li>
                            <li><strong>YTPlayer.css</strong> - For Youtube video background (jquery plugin styles) </li>
                            <li><strong>magnific-popup.css</strong> - Lightbox plugin Css file</li>
                            <li><strong>vspacing.css</strong> - This is a helper css file to make vertical spacing easier</li>
                            <li><strong>mediaelementplayer.css</strong> </li>
                            <li><strong>revslider.css</strong> - Premium Revolution slider's css file</li>
                            <li><strong>jquery.kwicks.css</strong> - Jquery Plugin (used for index16.html home section)</li>
                            <li><strong>Revslider Folder</strong> - All revolutions slider css files in here.</li>
                            <li>Skins folder - For now this folder has just 1 css file to make fonts lighter.</li>
                        </ul>
                        <div class="xlg-margin"></div>
                    </div>

                    <div id="revslider-css">
                        <h3>3.2 - Revslider (Folder) Css Files</h3>
                        <p> This folder contains all revolutions sliders related css files. All homepages and about pages slider stylesheets are placed in this folder.</p>
                        <ol>
                        <li><strong>Example:</strong>revslider-index2.css file used in index2.html (main slider)</li>
                        <li><strong>Example:</strong>revslider-aboutme.css file used in aboutme4.html (main slider)</li>
                    </ol>
                        <div class="xlg-margin"></div>
                    </div>

                    <div id="colors-css">
                        <h3>3.3 - Colors (Folder) Css Files</h3>
                        <p> This folder contains all color schemes related css files. There are total 12 prdefined color schemes. You can easly copy on of them and change color hex values to create your own color schemes.</p>
                        <h5>List of Predefined Color Stylesheets: <small>(You can find hex values of colors at the top of the css file.)</small></h5>
                        <ul>
                            <li><strong>green.css</strong> - This is the main color scheme</li>
                            <li><strong>blue.css</strong></li>
                            <li><strong>brown.css</strong></li>
                            <li><strong>brown2.css</strong></li>
                            <li><strong>gold.css</strong></li>
                            <li><strong>green2.css</strong></li>
                            <li><strong>lightblue.css</strong></li>
                            <li><strong>darkblue.css</strong></li>
                            <li><strong>purple.css</strong></li>
                            <li><strong>samon.css</strong></li>
                            <li><strong>seagreen.css</strong></li>
                            <li><strong>violetred.css</strong></li>
                        </ul>
                        <div class="sm-margin"></div>
                        <h5>How to change color scheme css file:</h5>
<pre>
--- Open html file with you text editor and find the line below and change green.css name with the new one
&lt;link rel="stylesheet" id="color-scheme" href="css/colors/green.css&gt;
</pre>
                        <div class="xlg-margin"></div>
                    </div>

                    <div id="skins-css">
                        <h3>3.4 - Skins (Folder) Css Files</h3>
                        <p> There is just one file in this folder for now. With the updates I will add more skins. This file is lightfonts.css. Basically, this file makes bold fonts lighters. Just add this file after style.css file. And see the differances.</p>
                        <p><strong>Example:</strong> This file used in index8.html file.</p>

                        <div class="md-margin"></div>
                    </div>
                </div>
                <hr class="sections">


                <div id="js">
                    <h2 class="sub-title">4 - Javascript </h2>
                    <p>This is the part where javascript files are explained.</p>
                    <p>To make template faster i concated all plugins in plugins.js file. So you can find all plugins in this file.</p>

                    <div class="lg-margin"></div>
                    
                    <div id="general-js">
                        <h3>4.1 - General Javascript </h3>
                        <p>All codes are commented and well coded. Id you want to change something, please be careful. If you are not sure what you are doing please contact me. So that i can help you.Other than home pages sliders and some others, all javascript/jquery codes are placed at the main.js file.</p>
                        <hr>
                        <p><strong>Caution:</strong> For the homepages, home section related js codes are placed at the bottom of the page. Not in the main.js file. For example; you can find call for revolution slider at the bottom of the index.html file.</p>
<pre>
    /* index27.html -  Popular Products */
    $('.owl-carousel.shop-popular-carousel').owlCarousel({
        loop:false,
        margin:20,
        responsiveClass:true,
        nav:true,
        dots: false,
        autoplay: true,
        autoplayTimeout: 10000,
        responsive:{
            0:{
                items:1
            },
            480: {
                items:2
            },
            768: {
                items:3
            },
            992: {
                items:4
            },
            1200: {
                items:5
            }
        }
    });
</pre>
<div class="md-margin"></div>


                    </div>

                    <div class="xlg-margin"></div>

                    <div id="google-map">
                        <h3>4.2 - Google Map</h3>
                        <p>
                            You can find google maps related javascript coe at the bottom of the page. Just the change informations with yours. (coordinates, addresses)
                        </p>
                        <img src="images/map.jpg" alt="Google map description">
                        <div class="md-margin"></div>

                    </div>
                    <div class="xlg-margin"></div>
                    <div id="twitter-feed">
                        <h3>4.3 - Twitter Feed</h3>
                        <ul>
            <li><strong>Step 1: </strong> Go to <a href="https://dev.twitter.com/apps" target="_blank">Twitter Dev Page</a>. ( You must sign in)</li>
            <li><strong>Step 2: </strong> Click to the Create a new application button.</li>
            <li><strong>Step 3: </strong> Fill the inputs and then click to the Create your Twitter application button.</li>
            <li><strong>Step 4: </strong> Now you will see a page like this.
                <div class="md-margin"></div>
            <img src="images/tw-1.png" alt="Twitter your application page">
            <div class="md-margin"></div>
            </li>
            <li><strong>Step 5: </strong> Scroll down and Click to the Create my access token button. ( Click couple of times until you see created information box )</li>
            <li><strong>Step 6: </strong> Now you will see a page like this.
                <div class="md-margin"></div>
            <img src="images/tw-2.png" alt="Twitter your application page">
            <div class="md-margin"></div>
            </li>
            <li><strong>Step 7: </strong>Open Boss Template folder, open js folder and then twitter folder. Open index.php file with any text editor. And Scroll down find these variables. Starts about 25. lines... And change its values with your new created keys.
            <div class="md-margin"></div>
<pre>
    // Your Twitter App Consumer Key
    private $consumer_key = '<strong>CONSUMER_KEY</strong>';

    // Your Twitter App Consumer Secret
    private $consumer_secret = '<strong>CONSUMER_SECRET</strong>';

    // Your Twitter App Access Token
    private $user_token = '<strong>ACCESS_TOKEN</strong>';

    // Your Twitter App Access Token Secret
    private $user_secret = '<strong>ACCESS_TOKEN_SECRET</strong>';
</pre>
<div class="md-margin"></div>
            <img src="images/tw-3.png" alt="Twitter your application page">
            <div class="md-margin"></div>
            </li>
            <li><strong>Step 8:</strong> After changing keys. Go back to js folder. And open main.js file with your text editor.</li>
            <li><strong>Step 9:</strong> Find Twitter Feed Plugin section and  change query with whatever you want search from Twitter.</li>
            <li><strong>Step 10: </strong>Done... Refresh your page enjoy :)</li>
        </ul>
                    </div>
                    <div class="xlg-margin"></div>
                    <div id="flickr-feed">
                        <h3>4.4 - Flickr Feed</h3>
                        <p>Go to <a href="//idgettr.com/">Flickridgtrr</a>. And get your Flickr id number. Go to js folder and open main.js file.  Find Flickr feed section. And change id with your new id.</p>

<pre>
    $('ul.flickr-feed-list').jflickrfeed({
            limit: 6,
            qstrings: {
                id: 'xxxxxxxxxxxx'  -- <strong> Change xxxxxxxxxxxx with your new id</strong>
            }
        }
</pre>
                    </div>
                    <div class="xlg-margin"></div>
                    <div id="contact-form">
                        <h3>4.5 - Contact Form (v1.0.5)</h3>
                        
                        <h4>How to use conract form?</h4>
                        <p>You need a server to make it work, it should work even on a local server. How to make it work: First you need to open php/mail.php file with your text editor. And change placeholder informations with your informations. Plese see image below to learn how.</p>
                        <img src="images/mailphp.png" alt="mail" class="img-responsive">
                        <div class="sm-margin"></div>
                        <p>If you want to use a gmail smtp server like i do, you just need to change Username and password with your gmail username and password.</p>
                        <p><strong>Caution:</strong>If you have a problem with gmail settings, please make sure to go <a href="https://support.google.com/mail/answer/78754" target="_blank"><strong>this page</strong></a>  and find out what you need to change. </p>

                        <div class="lg-margin"></div>
                        <h4>How to change error messages or translate?</h4>
                        <p>To change error messages you need to open js/contact.js file with your text editor and make the changes you want.</p>
                        <img src="images/contactjs.png" alt="mail" class="img-responsive">
                        <div class="sm-margin"></div>
                        <p>name - subject - email - message inputs are required. lastname input and checkbox are not. If you want to change required inputs please visit jquery.validate plugins documentation on their website. It is really easy to understand and change. You just need to change some variables in contact.js file</p>
                        <p>If you have any problem, please feel free to contact me.</p>

                    </div>

                </div>
                <hr class="sections">
                <div id="credits">
                    <h2 class="sub-title">5 - Credits</h2>
                    <p>Some resources that used in Boss Template.</p>
                    <ul class="credits-list">
                        <li> <a href="//pixabay.com/" target="_blank">Pixabay</a> </li>
                        <li> <a href="//pixeden.com/" target="_blank">Pixeden</a> </li>
                        <li> <a href="//www.freepik.com/" target="_blank">Freepik</a> </li>
                        <li> <a href="//www.flaticon.com/" target="_blank">Flat icon</a> </li>
                        <li> <a href="//jquery.com/" target="_blank">jQuery</a></li>
                        <li> <a href="//getbootstrap.com/" target="_blank">Bootstrap Framework</a></li>
                        <li> <a href="//github.com/Prinzhorn/skrollr">Skrollr Plugin<small>(For parallax background)</small></a> </li>
                        <li> <a href="//www.freepik.com/" target="_blank">Freepik</a> </li>
                        <li> <a href="//thesabbir.github.io/simple-line-icons/" target="_blank">Simple Line Icons</a></li>
                        <li> <a href="//www.malot.fr/bootstrap-datetimepicker/" target="_blank">Bootstrap Date Time picker</a> </li>
                        <li> <a href="//github.com/desandro/imagesloaded" target="_blank">Imagesloaded Plugin</a></li>
                        <li><a href="//www.bootstrap-switch.org/" target="_blank">Bootstrap Switch</a></li>
                        <li><a href="//srobbin.com/jquery-plugins/backstretch/" target="_blank">Jquery Backstretch plugin</a></li>
                        <li><a href="//anthonyterrien.com/knob/" target="_blank">Jquery Knob plugin</a></li>
                        <li> <a href="//pupunzi.open-lab.com/mb-jquery-components/jquery-mb-ytplayer/" target="_blank">Ytplayer jquery plugin</a></li>
                        <li> <a href="//buildinternet.com/project/supersized/" target="_blank">Supersized Plugin</a></li>
                        <li><a href="http://dimsemenov.com/plugins/magnific-popup/">Magnific Popup</a> <small>(Plugin for lightbox)</small> </li>
                        <li><a href="//codecanyon.net/item/slider-revolution-responsive-jquery-plugin/2580848" target="_blank">Revolution Slider <small>(Buyed 1 extended license - Save $14)</small></a></li>
                        <li><a href="//owlcarousel.owlgraphic.com/" target="_blank">Owl Carousel 2</a> </li>
                        <li><a href="//www.bulgaria-web-developers.com/projects/javascript/selectbox/">Selectbox Plugin</a> <small>(Plugin for custom selectbox)</small> </li>
                        <li><a href="//isotope.metafizzy.co/" target="_blank">Isotope Plugin</a> <small>(Portfolio filter/sort - magical layouts plugin - Developer License $25)</small></li>
                        <li><a href="//retinajs.com/" target="_blank">Retina.js</a> <small>(RDR)</small></li>
                        <li> <a href="//imakewebthings.com/jquery-waypoints//" target="_blank">Waypoint Plugin</a></li>
                        <li><a href="//github.com/louisremi/jquery-smartresize" target="_blank">Smart Resize</a></li>
                        <li><a href="//modernizr.com/" target="_blank">Modernizr</a> <small>(Custom download - Some plugins required Modernizr)</small> </li>
                        <li><a href="//www.newmediacampaigns.com/blog/a-jquery-flickr-feed-plugin" target="_blank">jflickrfeed</a> <small>(Flickr Feed Plugin)</small> </li>
                        <li><a href="//github.com/StanScates/Tweet.js-Mod" target="_blank">Tweet.js</a> <small>(Twitter Feed Plugin)</small></li>
                        <li> <a href="//www.google.com/fonts" target="_blank">Google Fonts</a></li>
                        <li><a href="//mynameismatthieu.com/WOW/" target="_blank">Wow.js</a></li>
                        <li><a href="//github.com/Gaya/QueryLoader2" target="_blank">Query loader plugin</a></li>
                        <li><a href="//github.com/mattboldt/typed.js/" target="_blank">Typed Js</a></li>
                        <li><a href="//splitshire.com/" target="_blank">Preview Images <small>(Not inclueded within the download file)</small></a></li>
                        <li><a href="//unsplash.com/" target="_blank">Preview Images <small>(Not inclueded within the download file)</small></a></li>
                        <li><a href="//subtlepatterns.com/" target="_blank">Subtle Patterns <small>(Awesome background patterns)</small></a></li>
                        <li><a href="//snazzymaps.com" target="_blank">Subtle Google Map <small>(Awesome styled google maps)</small></a></li>
                        <li><a href="//flexslider.woothemes.com/" target="_blank">Flexslider 2</a></li>
                        <li><a href="//devsmash.com/projects/kwicks" target="_blank">Jquery Kwicks Plugin</a></li>
                        <li><a href="//jqvmap.com//" target="_blank">Jquery Vmap</a></li>
                        <li><a href="//jqueryvalidation.org/" target="_blank">jquery validate plugin</a></li>
                        <li><a href="//github.com/PHPMailer/PHPMailer" target="_blank">PhpMailer</a></li>
                    </ul>
                </div>
                <hr class="sections">
                <div id="updates">
                    <h2 class="sub-title">6 - Updates</h2>

<pre>
Date :  <strong>[ Soon ]</strong>
<strong>- 1.1 - Update</strong>
See item description for new features
Also SASS(SCSS) + gulp files will be added
Let me know if you request a new feature. Thanks.
</pre>
<pre>
Date :  <strong>[ 20.01.2016 ]</strong>
<strong>- 1.0.6 - Update</strong>
+ Updated Bootstrap 3.3.6
+ Updated Font awesome 4.5.0
+ Updated Twitter feed plugin (js/twitter folder - activated cache)
+ Updated Jquery 2.2.0
+ Updated Revolution Slider 4.6.7
+ Removed role="search" attribute to fix validation error
+ Added google fonts at html header tag instead of using import at style.css
</pre>

<pre>
Date :  <strong>[ 05.10.2015 ]</strong>
<strong>- 1.0.5 - Update</strong>
+ Added functional ajax contact form

<strong>Change Log</strong>
-- Added php folder(4 php files)
-- Added jquery.validate.min.js and contact.js in js folder
-- Addded 3 new styling to css file (line 11623 - 11637)
-- Changed html files --
** (Just changed contact forms and contact-form widgets(footer) and included jquery.validate.js and contact .js) **
index.html
footer5.html
footer6.html
index2.html-footer
index5.html - footer
index6.html -done
index10.html - footer
index11.html - footer
index19.html - footer
index22.html - footer
index23.html - footer
index26.html - footer
index29 -35.html
contact1-10.html
aboutme4.html - footer 
testimonials.html - footer
testimonials2.html 
team2.html footer  
</pre>
<br>
<pre>
Date :  <strong>[ 17.09.2015 ]</strong>
<strong>- 1.0.4 - Update</strong>
+ Fixed Tablet Menu problem
+ Fixed Small Css Problems
</pre>
<br>
<pre>
Date :  <strong>[ 14.09.2015 ]</strong>
<strong>- 1.0.3 - Update</strong>
+ Small fixes
</pre>
<br>
<pre>
Date :  <strong>[ 8.09.2015 ]</strong>
<strong>- 1.0.2 - Update</strong>
+ Updated Style.css file - Fixed google font loading error for directory path. (added http: for google fonts)
</pre>
<br>
<pre>
Date :  <strong>[ 31.08.2015 ]</strong>
<strong>- 1.0.1 - Update</strong>
+ Added 11 new color schemes
+ Updated Documentation
- Fixed Small Css bugs
</pre>

<br>

<pre>
Date :  <strong>[ 25.07.2015 ]</strong>
<strong>- 1.0 - Release</strong>
</pre>

<br>
<p><small>** If you find a bug, please feel free to contact us so that I can provide better products for you.</small></p>
                </div>

                <hr class="sections">
                <div id="faqs">
                    <h2 class="sub-title">7 - FaQs</h2>
                    
                    <h3 class="faq-title">Q : Customization..</h3>
                    <p>A : Sorry to say this but I do not provide customization for free. I try to help you as much as I can for small changes. Otherwise you should consider for hiring me or another developer to make the changes you want.</p>
                    <hr>
                    <h3 class="faq-title">Q : Wordpress - Style.css missing error..</h3>
                    <p>A : This is not a wordpress theme. This is a 'Html template'! You can not upload this file to wordpress and expect it to work as it is. It will not work.</p>
                    <hr>
                    <h3 class="faq-title">Q : How to Change Layout to Boxed?</h3>
                    <p>A : Open html files with your text editor search for wrapper id. And add class "boxed" or "boxed-long" to make layout boxed.</p>
<pre>
// Find wrapper id and add class boxed or boxed-long like below
&lt;div id="wrapper" class="boxed"&gt;
or
&lt;div id="wrapper" class="boxed-long"&gt;
</pre>
<div class="md-margin"></div>
<h4>If you want to make it via javascript: <small>(This way you don't have to edit all html files)</small></h4>
<pre>
// Open main.js file scroll bottom of the code and add the code below
$(function() {
    $('#wrapper').addClass('boxed'); // boxed or boxed-layout
});
</pre>
                    <hr>

                    <h3 class="faq-title">Q : How to change background color or add a pattern?</h3>
                    <p>A : To add pattern to your background or to change background color. You need to use one of the boxed layouts. Open css folder and find style.css file. If you want to change background colour. Find body element than change backgrond-color.</p>
                    <p>To add pattern. You change open html files and add pre-defined classes ( patter1-pattern30 ) to the body element. Or you can open style.css file and copy pattern classes' background to the body's background.</p>
                    <img src="images/bg.jpg" alt="bg">
                    <br>
                    <p>Or you can use these codes to change backgrounds. Open main.js file and use these codes below.</p>
<pre>
// background color
$('body').css('background-color', 'YOUR_COLOR_HERE'); // Just change YOUR_COLOR_HERE with any color - green, yellow,white or color code #fff, rgba(255, 255, 255) -- like so.

or
/* You can coose classes from pattern1 to pattern30, There are predefined 30 classes for pattern background */
$('body').addClass('pattern10'); // Copy this code to main.js file
</pre>
                    
                </div>
                <hr class="sections">

                <footer id="footer" class="text-center">
                    <p>Once again, thank you for purchasing Boss. If you have a problem, I'd be glad to help you to find a solution. <br> Please use <a href="//wrapbootstrap.com/user/eony" target="_blank">my profile page</a> or <a href="mailto:puffde@gmail.com">my email</a> to contact me. <br> <a href="//www.eonythemes.com" target="_blank">eonythemes</a> &copy; - 2015</p>
                </footer>
                <!-- end -->
            </div>
            </div>  
        </section>
        <script>
            $(function() {
                // Menu
                $('#menu').find('a').on('click', function(e) {
                    var $this = $(this),
                        targetSec = $(this).attr('href'),
                        jtarget = $(targetSec);
                
                    if( $this.hasClass('open')) {
                        $this.siblings('ul').slideToggle(400);
                    } else {
                        var topDistancejtarget = jtarget.offset().top;
                        $('html, body').animate({'scrollTop': (topDistancejtarget - 40)}, 600);
                    }

                    e.preventDefault();
                });

            });
        </script>
    </body>
</html>