Vicky

SiteSao

This template includes following pages:

about-us.html
accordion.html
blockquote.html
blog-center.html
blog-default.html
blog-grid.html
blog-image-detail.html
blog-video-detail.html
blog-masonry.html
blog-medium.html
blog-timeline.html
blog-zigzag.html
button.html
call-to-action.html
carousel-content.html
cart.html
empty-cart.html
client.html
comming-soon.html
contact-us.html
counter.html
gallery.html
gallery-detail.html
google-map.html
icon-box.html
index.html
index-coffee.html
index-wine.html
index-parallax.html
latest-news.html
message-box.html
modal.html
my-account.html
our-menu.html
pie-chart.html
pricing-table.html
progress-bar.html
reservation.html
responsive-video.html
shop.html
shop-detail.html
shop-masonry.html
tabs.html
team-member.html
testimonial.html
timeline.html
tooltip.html

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:

bootstrap.min.css
commerce.css
custom.css
elegant-icon.css
font-awesome.min.css
form.css
jquery.datetimepicker.css
jquery.selectBox.css
magnific-popup.css
settings.css
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

bootstrap.min.js
core.min.js
easing.min.js
imagesloaded.pkgd.min.js
isotope.pkgd.min.js
jquery.appear.min.js
jquery.blockUI.min.js
jquery.carouFredSel.min.js
jquery.countdown.min.js
jquery.countTo.min.js
jquery.datetimepicker.js
jquery.magnific-popup.min.js
jquery.parallax.js
jquery.stellar.min.js
jquery.themepunch.tools.min.js
jquery.themepunch.revolution.min.js
preloader.min.js
jquery.touchSwipe.min.js
jquery.validate.min.js
jquery-migrate.min.js
jquery-ui-touch-punch.min.js
mouse.min.js
price-slider.js
ProgressCircle.min.js
script.js
slider.min.js
superfish-1.7.4.min.js
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

Vicky

SiteSao

GENERAL INFORMATION

HTML STRUCTURE

2.1. Basic Structure

2.2. 12 ColumnGrid

2.3. General structure of Homepage

2.4. General structure of NO SIDEBAR Page

2.5. Generalstructure of Page with Right Sidebar

2.6. Generalstructure of Page with LEFT Sidebar

STYLESHEETS

3.1. Files

JAVASCRIPT

4. Plugins

SITE LAYOUT

5.1. Wide Layout

5.2. Boxed Layout

SHORTCODES

PRODUCTS

ICONS

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