Vicky


SiteSao

This template includes following pages:

The core stylesheets (CSS) of this template are placed in /css/ folder.

All Images are in /images/ folder.

All Javascripts files are in /js/ folder.

2.1. Basic Structure

The Basic Structure contains:

<div id="wrapper" class="wide-wrap">

<header class="header-container header-type-below header-navbar-below"></header> - main navigation(responsive)

<div class="heading-container"></div>- page title, breadcrumb section

<div class="content-container"></div>- all the content
<div class="footer-widget"></div>- footer contact information

<footer id="footer" class="footer"></footer> - footer info, footer navigation, footer-copyright...

</div>
There are 3 types of header. Each type corresponds to each profile in source folder

HTML

<!-- START SITE -->

<div id="wrapper" class="wide-wrap">

<!-- START HEADER -->

<header class="header-container header-type-below header-navbar-below">

<!-- START TOP HEADER -->

<div class="navbar-header">

      {{TOP HEADER CONTENT}}

</div>

<!-- END TOP HEADER -->

<!-- START MAIN NAVIGATION -->

<div class="navbar-container">

   <!-- START MAIN MENU -->
    <nav class="navbar navbar-default navbar-scroll-fixed">

           {{MAIN MENU CONTENT}}

    </nav>
    <!-- END MAIN MENU -->

</div>

<!-- END TOP MAIN NAVIGATION -->

</header>

<!-- END HEADER -->


<!-- START PAGE TITLE SECTION -->

<div class="heading-container">

                {{PAGE TITLE CONTENT}}

</div>

<!-- END PAGE TITLE SECTION -->


<!-- START MAIN CONTENT -->

<div class="content-container">

                {{MAIN CONTENT}}

</div>

<!-- END MAIN CONTENT -->



<!-- START FOOTER WIDGET -->

<div class="footer-widget">

          {{FOOTER WIDGET}}

</div>

<!-- END FOOTER WIDGET -->


<!-- START FOOTER -->

<footer id="footer" class="footer">

        {{FOOTER}}

</footer>

<!-- END FOOTER -->

</div>

<!-- END SITE -->

 

2.2. 12 ColumnGrid

HTML

<!-- START CONTAINER -->

<div class="content-container">

<div class="container">

<div class="row">

<div class="col-md-9">

       {{ 9/12 COLUMN PAGE CONTENT }}

</div>

<aside class="col-md-3">

       {{ 3/12 COLUMN PAGE CONTENT }}

</aside>

</div>

</div>

</div>

<!-- END CONTAINER -->

 

2.3. General structure of Homepage

HTML

<body>

<!-- START SITE WRAPPER -->

<div id="wrapper" class="wide-wrap">

<!-- START HEADER -->

<header id="header" class="header-container header-type-below header-navbar-below">

              {{HEADER CONTENT}}

</header>

<!-- END HEADER -->

<!-- MAIN CONTENT SECTION -->

<div class="content-container no-padding">

         {{HOMEPAGE CONTENT SECTIONS}}

</div>

<!-- END MAIN CONTENT SECTION -->

<!-- START FOOTER WIDGET -->

<div class="footer-widget">

         {{FOOTER WIDGET CONTENT}}

</footer>

<!-- END FOOTER WIDGET -->

<!-- START FOOTER -->

<footer id="footer" class="footer">

             {{FOOTER CONTENT}}

</footer>

<!-- END FOOTER -->

</div>

<!-- END SITE -->

</body>

 

2.4. General structure of NO SIDEBAR Page

HTML

<body>

<!-- START SITE -->

<div id="wrapper" class="wide-wrap">

<!-- START HEADER -->

<header class="header-container header-type-below header-navbar-below">

            {{HEADER CONTENT}}

</header>

<!-- END HEADER -->




<!—START PAGE TITLE SECTION -->

<div class="heading-container">

       {{PAGE TITLE CONTENT}}

</div>

<!-- END PAGE TITLE SECTION -->

<!-- MAIN CONTENT SECTION -->


<div class="content-container">

         <div class="container">
                <div class="row">
                       <div class="col-md-12">
                              
                              {{MAIN CONTENT SECTIONS}}

                       </div>
                </div>
         </div>

</div>

<!-- END MAIN CONTENT SECTION -->

<!-- START FOOTER WIDGET -->

<div class="footer-widget">

         {{FOOTER WIDGET CONTENT}}

</div>

<!-- END FOOTER WIDGET -->

<!-- START FOOTER -->

<footer id="footer" class="footer">

           {{FOOTER CONTENT}}

</footer>

<!-- END FOOTER -->

</div>

<!-- END SITE -->

</body>

 

2.5. Generalstructure of Page with Right Sidebar

HTML

<body>

<!-- START SITE -->

<div id="wrapper" class="wide-wrap">

<!-- START HEADER -->

<header class="header-container header-type-below header-navbar-below">

            {{HEADER CONTENT}}

</header>

<!-- END HEADER -->

<!—START PAGE TITLE SECTION -->

<div class="heading-container">

       {{PAGE TITLE CONTENT}}

</div>

<!-- END PAGE TITLE SECTION -->


<!-- START MAIN CONTENT -->

<div class="content-container">

<div class="container">

<div class="row">

<div class="col-md-9">

              {{ 9/12 COLUMN PAGE CONTENT }}

</div>

<aside class="col-md-3">

              {{ 3/12 COLUMN PAGE CONTENT }}

</aside>

</div>

</div>

</div>

<!-- END MAIN CONTENT -->


<!-- START FOOTER WIDGET -->

<div class="footer-widget">

         {{FOOTER WIDGET CONTENT}}

</div>

<!-- END FOOTER WIDGET -->

<!-- START FOOTER -->

<footer id="footer" class="footer">

           {{FOOTER CONTENT}}

</footer>

<!-- END FOOTER -->

</div>

<!-- END SITE -->

</body>

 

2.6. Generalstructure of Page with LEFT Sidebar

HTML

<body>

<!-- START SITE -->

<div id="wrapper" class="wide-wrap">

<!-- START HEADER -->

<header class="header-container header-type-below header-navbar-below">

            {{HEADER CONTENT}}

</header>

<!-- END HEADER -->

<!—START PAGE TITLE SECTION -->

<div class="heading-container">

       {{PAGE TITLE CONTENT}}

</div>

<!-- END PAGE TITLE SECTION -->


<!-- START MAIN CONTENT -->

<div class="content-container">

<div class="container">

<div class="row">

<aside class="col-md-3">

              {{ 3/12 COLUMN PAGE CONTENT }}

</aside>

<div class="col-md-9">

              {{ 9/12 COLUMN PAGE CONTENT }}

</div>

</div>

</div>

</div>

<!-- END MAIN CONTENT -->


<!-- START FOOTER WIDGET -->

<div class="footer-widget">

         {{FOOTER WIDGET CONTENT}}

</div>

<!-- END FOOTER WIDGET -->

<!-- START FOOTER -->

<footer id="footer" class="footer">

           {{FOOTER CONTENT}}

</footer>

<!-- END FOOTER -->

</div>

<!-- END SITE -->

</body>

 

3.1. Files

All CSS are located in the "css" folder of the template. Each CSS File is well commented and easy to use and customize to your own needs. Here's the list of the CSS files:

  1. bootstrap.min.css
  2. commerce.css
  3. custom.css
  4. elegant-icon.css
  5. font-awesome.min.css
  6. form.css
  7. jquery.datetimepicker.css
  8. jquery.selectBox.css
  9. magnific-popup.css
  10. settings.css
  11. style.css

Note: style.css, font-awesome.min.css, preloader.css must declare on all pages of Vicky.

All JavaScript / jQuery plugins are located in the /js/ folder of the template. You do not need to edit these items.

4. Plugins

  1. bootstrap.min.js
  2. core.min.js
  3. easing.min.js
  4. imagesloaded.pkgd.min.js
  5. isotope.pkgd.min.js
  6. jquery.appear.min.js
  7. jquery.blockUI.min.js
  8. jquery.carouFredSel.min.js
  9. jquery.countdown.min.js
  10. jquery.countTo.min.js
  11. jquery.datetimepicker.js
  12. jquery.magnific-popup.min.js
  13. jquery.parallax.js
  14. jquery.stellar.min.js
  15. jquery.themepunch.tools.min.js
  16. jquery.themepunch.revolution.min.js
  17. preloader.min.js
  18. jquery.touchSwipe.min.js
  19. jquery.validate.min.js
  20. jquery-migrate.min.js
  21. jquery-ui-touch-punch.min.js
  22. mouse.min.js
  23. price-slider.js
  24. ProgressCircle.min.js
  25. script.js
  26. slider.min.js
  27. superfish-1.7.4.min.js
  28. widget.min.js

Note: bootstrap.min.js, superfish-1.7.4.min.js, script.js must declare on all pages of Vicky.

5.1. Wide Layout
 

Wide layout is default layout.

 

5.2. Boxed Layout

You need to add class boxed-wrap in <div id="wrapper"> tag.

HTML

<div id="wrapper" class="boxed-wrap">

      {{BODY CONTENT}}

</body>

CSS – STYLE.CSS


.boxed-wrap {

    background: #fff;

    background-attachment: scroll;

    background-position: center center;

    background-repeat: repeat;

    -webkit-box-shadow: 0 0 15px rgba(0,0,0,0.15);

    box-shadow: 0 0 15px rgba(0,0,0,0.15);

    margin: 0 auto;

    position: relative;

    z-index: 1;

}


@media (min-width:768px) {

    .boxed-wrap {

        width: 750px;

    };

}


@media (min-width:992px) {

    .boxed-wrap {

        width: 970px;

    };

}


@media (min-width:1200px) {

    .boxed-wrap {

        width: 1200px;

    };

}


@media (min-width:768px) {

    .boxed-wrap .container {

        width: 720px;

    };

}


@media (min-width:992px) {

    .boxed-wrap .container {

        width: 940px;

    };

}


@media (min-width:1200px) {

    .boxed-wrap .container {

        width: 1170px;

    };

}


.boxed-wrap .header-container .container {

    padding-left: 30px;

    padding-right: 30px;

}


@media (min-width:768px) {

    .boxed-wrap .header-container .container {

        width: 750px;

    };

}


@media (min-width:992px) {

    .boxed-wrap .header-container .container {

        width: 970px;

    };

}


@media (min-width:1200px) {

    .boxed-wrap .header-container .container {

        width: 1200px;

    };

}

.boxed-wrap .navbar-fixed-top {

    left: auto;

    right: auto;

}

.boxed-wrap:before, .boxed-wrap:after {

    content: " ";

    display: table;

}

You can find the files, whose names are listed below

6.1 Accordions (accordions.html)

6.2 Blockquote (blockquote.html)

6.3 Button (button.html)

6.4 Call to Action (call-to-action.html)

6.5 Carousel (carousel-contents.html)

6.6 Client (client.html)

6.7 Counter (counter.html)

6.8 Google Map (google-maps.html)

6.9 Icon Box (icon-box.html)

6.10 Latest News (latest-news.html)

6.11 Message Boxes (message-box.html)

6.12 Modal (modal.html)

6.13 Pie Chart (pie-chart.html)

6.14 Pricing Table (pricing-table.html)

6.15 Progress Bar (progress-bar.html)

6.16 Responsive Video (responsive-video.html)

6.17 Tabs (tabs.html)

6.18 Team Members (team-member.html)

6.19 Testimonial Slider (testimonial.html)

6.20 Timelines (timeline.html)

6.21 Tooltip / Popover (tooltip.html)

7.1 Shop (shop.html)

7.2 Shop Masonry (shop-masonry.html)

7.3 Shop Detail (shop-detail.html)

You can place Font Awesome icons just about anywhere using the CSS Prefix fa and the icon's name. Font Awesome is designed to be used with inline elements (we like the <i> tag for brevity, but using a <span> is more semantically correct).

HTML

<i class="fa fa-camera-retro"></i> fa-camera-retro

CSS

<link rel="stylesheet" href="css/font-awesome.min.css">

Vicky is integrated fully with Font Awesome Icon set to give you numerous choice.

You can use font-awesome icons for Icon boxes, Service boxes and at any place you want. For more detailed documentation on how to use Font-Awesome, Follow up the link here: Font-Awesome

There are 3 header styles. Each type corresponds to each profile in source folder