WeMusic HTML Documentation

Created: 11/10/2015
Latest Update: 11/10/2015
By: TK Themes
Email: tktheme2015@gmail.com

Fistly we would love to send our great thanks to you for purchasing Yogi HTML. This documentation covers almost everything to guide you step by step from the start to have your site on air. We encourage you to read throroughly all section before you go on. Thanks again and enjoy building your website with Yogi

This template includes following pages:

album.html
album-detail.html
archive-event.html
blog.html
blog-detail.html
blog-masonry.html
cart.html
cart-empty.html
contact.html
event.html
event-detail.html
event-photo.html
index.html
index-parallax.html
index-revolution.html
index-video.html
members.html
my-account.html
shop.html
shop-detail.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 containsd:

<header class="noo-header" id="noo-header"></header> - top header, navbar toggle, main navigation

<div class=" noo-page-heading"></div> - page title

<div class=" container-wrap"></div> - all the content

<footer class=" colophon site-info"></footer> - footer colophon, footer navigation, footer-copyright

</div>

HTML

<!--PRELOADER-->
<div id="loading">
    <div id="loading-center">
        <div id="loading-center-absolute">
            <div class="object"></div>
            <div class="object"></div>
            <div class="object"></div>
            <div class="object"></div>
            <div class="object"></div>
            <div class="object"></div>
            <div class="object"></div>
            <div class="object"></div>
            <div class="object"></div>
            <div class="object"></div>
        </div>
    </div> 
</div>
<!--end preloader-->

<!-- START SITE -->

<div class="site">

<!-- START HEADER -->

<header class="noo-header" id="noo-header">

<!-- START MAIN NAVIGATION WRAP -->

<div class="navbar-wrapper">

                        {{MAIN NAVIGATION WRAP CONTENT}}

</div>

<!-- END MAIN NAVIGATION WRAP -->

</header>

<!-- END HEADER -->


<!-- START PAGE TITLE -->

<div class="noo-page-heading">

                {{ PAGE TITLE}}

</div>

<!-- END PAGE TITLE -->


<!-- START MAIN CONTENT WRAPPER -->

<div class="container-wrap">

                {{ WRAPPER CONTENT}}

</div>

<!-- END MAIN CONTENT WRAPPER -->


<!-- START FOOTER -->

<footer class="colophon site-info">

{{FOOTER CONTENT}}

</footer>

<!-- END FOOTER -->

</div>

<!-- END SITE -->

2.2. 12 ColumnGrid

HTML

<!-- START SECTION -->

<div class="container-wrap">

<!-- START CONTAINER -->

<div class="row">

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

                                {{ 9/12 COLUMN PAGE CONTENT }}

</div>

<div class="noo-sidebar col-md-3">

                                {{ 3/12 COLUMN PAGE CONTENT }}

</div>

</div>

<!-- END CONTAINER -->

</div>

<!-- END  SECTION -->

2.3. General structure of Homepage

HTML

<body class="page-menu-transparent">

<!--PRELOADER-->
<div id="loading">
    <div id="loading-center">
        <div id="loading-center-absolute">
            <div class="object"></div>
            <div class="object"></div>
            <div class="object"></div>
            <div class="object"></div>
            <div class="object"></div>
            <div class="object"></div>
            <div class="object"></div>
            <div class="object"></div>
            <div class="object"></div>
            <div class="object"></div>
        </div>
    </div> 
</div>
<!--end preloader-->

<!-- START SITE -->

<div class="site">

<!-- START HEADER -->

<header class="noo-header" id="noo-header">

{{HEADER CONTENT}}

</header>

<!-- END HEADER -->


<!-- START MAIN WRAPPER -->

<div class="container-wrap">

<!—START MAIN CONTENT -->

{{MAIN CONTENT}}

<!-- END MAIN CONTENT -->

</div>

<!-- END MAIN WRAPPER -->




<!-- START FOOTER -->

<footer class="colophon site-info">

{{FOOTER CONTENT}}

</footer>

<!-- END FOOTER -->

</div>

<!-- END SITE -->

</body>

2.4. General structure of Default Page

HTML

<body>

<!--PRELOADER-->
<div id="loading">
    <div id="loading-center">
        <div id="loading-center-absolute">
            <div class="object"></div>
            <div class="object"></div>
            <div class="object"></div>
            <div class="object"></div>
            <div class="object"></div>
            <div class="object"></div>
            <div class="object"></div>
            <div class="object"></div>
            <div class="object"></div>
            <div class="object"></div>
        </div>
    </div> 
</div>
<!--end preloader-->

<!-- START SITE -->

<div class="site">

<!-- START HEADER -->

<header class="noo-header" id="noo-header">

{{HEADER CONTENT}}

</header>

<!-- END HEADER -->




<!-- START HEADER PAGE -->

<header class="noo-page-heading">

             {{HEADER PAGE }}

</header>

<!-- END HEADER PAGE -->


<!-- START MAIN WRAPPER -->

<div class="container-wrap">

<!-- START MAINBODY -->

<div class="row">

<!--START MAIN CONTENT -->

<div class=" noo-main col-md-12">

                {{MAIN CONTENT}}

</div>

<!-- END MAIN CONTENT -->

</div>

<!-- END MAINBODY -->

</div>

<!-- END MAIN WRAPPER -->


<!-- START FOOTER -->

<footer class="colophon site-info">

{{FOOTER CONTENT}}

</footer>

<!-- END FOOTER -->

</div>

<!-- END SITE -->

</body>

2.5. General structure of Page with Right Sidebar

HTML

<body>

<!--PRELOADER-->
<div id="loading">
    <div id="loading-center">
        <div id="loading-center-absolute">
            <div class="object"></div>
            <div class="object"></div>
            <div class="object"></div>
            <div class="object"></div>
            <div class="object"></div>
            <div class="object"></div>
            <div class="object"></div>
            <div class="object"></div>
            <div class="object"></div>
            <div class="object"></div>
        </div>
    </div> 
</div>
<!--end preloader-->

<!-- START SITE -->

<div class="site">

<!-- START HEADER -->

<header class="noo-header" id="noo-header">

{{HEADER CONTENT}}

</header>

<!-- END HEADER -->

<!-- START HEADER PAGE -->

<header class="noo-page-heading">

             {{HEADER PAGE }}

</header>

<!-- END HEADER PAGE -->


<!-- START MAIN WRAPPER -->

<div class="container-wrap">

<!-- START MAINBODY -->

<div class="row">

<!--START MAIN CONTENT -->

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

       {{MAIN CONTENT}}

</div>

<!-- END MAIN CONTENT -->


<!-- START SIDEBAR -->

<div class="noo-sidebar col-md-3">

{{SIDEBAR CONTENT}}

</div>

<!-- END SIDEBAR -->

</div>

<!-- END MAINBODY -->

</div>

<!-- END MAIN WRAPPER -->


<!-- START FOOTER -->

<footer class="colophon site-info">

          {{FOOTER CONTENT}}

</footer>

<!-- END FOOTER -->

</div>

<!-- END SITE -->

</body>

You can change position of sidebar to left sidebar by adding corresponding class col-sm-push-3, col-sm-pull-9,…

HTML

<body>

<!--PRELOADER-->
<div id="loading">
    <div id="loading-center">
        <div id="loading-center-absolute">
            <div class="object"></div>
            <div class="object"></div>
            <div class="object"></div>
            <div class="object"></div>
            <div class="object"></div>
            <div class="object"></div>
            <div class="object"></div>
            <div class="object"></div>
            <div class="object"></div>
            <div class="object"></div>
        </div>
    </div> 
</div>
<!--end preloader-->

<!-- START SITE -->

<div class="site">

<!-- START HEADER -->

<header class="noo-header" id="noo-header">

           {{HEADER CONTENT}}

</header>

<!-- END HEADER -->

<!-- START HEADER PAGE -->

<header class="noo-page-heading">

             {{HEADER PAGE }}

</header>

<!-- END HEADER PAGE -->


<!-- START MAIN WRAPPER -->

<div class="container-wrap">

<!-- START MAINBODY -->

<div class="row ">

<!--START MAIN CONTENT -->

<div class="noo-main col-md-9 col-sm-push-3">

       {{MAIN CONTENT}}

</div>

<!-- END MAIN CONTENT -->


<!-- START SIDEBAR -->

<div class="noo-sidebar col-md-3 col-sm-pull-9">

{{SIDEBAR CONTENT}}

</div>

<!-- END SIDEBAR -->

</div>

<!-- END MAINBODY -->

</div>

<!-- END MAIN WRAPPER -->


<!-- START FOOTER -->

<footer class="colophon site-info">

          {{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:

font-awesome.min.css – FontAwesome.
bootstrap.min.css – CSS Boostrap.
commerce.css – CSS Shop Commerce.
datepicker.css
jquery.mb.YTPlayer.css – CSS Video Fullscreen.
layout.css – Section Style.
mediaelementplayer.css – Media Player.
nivo-default.css – Nivo Lightbox Plugin.
nivo-lightbox.css – Nivo Lightbox Plugin.
owl.carousel.css – Owl Carousel Plugin.
owl.theme.css – Owl Carousel Plugin.
prettyPhoto.css – Pretty Photo Plugin.
settings.css – Revolution Slider.
style.css – CSS Main Content.
tribe-events.css – CSS Event Pages.
tribe-events-pro-theme.css – CSS Event Pages.
widget-calendar-full.css – Popup Calendar.

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

3.2. MAIN.css Includes:

GLOBAL STYLING
HEADER
FOOTER
BACK TO TOP
MAINBODY
BLOG
BLOG SINGLE
EVENT
MEMBERS
ALBUMS
OTHER PAGES
SIDEBAR

3.4. SETTINGS.css Includes:

REVOLUTION SLIDERS

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

1.1. Plugins

bootstrap.min.js –jQuery Bootstrap.
bootstrap-datepicker.js
EasePack.min.js
effect.js
hoverIntent-r7.min.js.
imagesloaded.pkgd.min.js.
jquery.carouFredSel-6.2.1.js.
jquery.countdown.min.js.
jquery.isotope.min.js.
jquery.mb.YTPlayer.js.
jquery.parallax.js.
jquery.plugin.min.js.
jquery.prettyPhoto.js.
jquery.themepunch.revolution.min.js.
jquery.themepunch.tools.min.js.
jquery.touchSwipe.js.
jquery-migrate.min.js.
main.js.
mediaelement-and-player.js.
modernizr-2.7.1.min.js.
rAF.js.
nivo-lightbox.min.js.
owl.carousel.min.js.
player.js.
superfish-1.7.4.min.js.
TweenLite.min.js.

Note: jquery.js, bootstrap.min.js, hoverIntent-r7.min.js, superfish-1.7.4.min.js must declare on all pages of Yogi theme.

There are two skin : DARK and LIGHT

Default version is DARK
Add theme-light into class attribute of body tag to switch to LIGHT VERSION

HTML

<body class="theme-light">

HTML

<div class=" noo-social">

<span class="footer-social"><span class="social-name">Follow on facebook</span><a href="#" class="fa fa-facebook"></a></span>

<span class="footer-social"><span class="social-name">Follow on google-plus</span><a href="#" class="fa fa-google-plus"></a></span>

<span class="footer-social"><span class="social-name">Follow on twitter</span><a href="#" class="fa fa-twitter"></a></span>

<span class="footer-social"><span class="social-name">Follow on youtube</span><a href="#" class="fa fa-youtube"></a></span>

<span class="footer-social"><span class="social-name">Follow on skype</span><a href="#" class="fa fa-skype"></a></span>

<span class="footer-social"><span class="social-name">Follow on linkedin</span><a href="#" class="fa fa-linkedin"></a></span>

</div>

CSS

.wigetized .noo-footer-bottom .widget .footer-social {
  display: inline-block;
  position: relative;
  padding: 40px 0 0;
  margin: 0 23px;
}
.wigetized .noo-footer-bottom .widget .footer-social:hover .social-name {
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transform: translate(-50%, 0px);
  -ms-transform: translate(-50%, 0px);
  -o-transform: translate(-50%, 0px);
  transform: translate(-50%, 0px);
  -webkit-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
}
.wigetized .noo-footer-bottom .widget .footer-social .social-name {
  left: 50%;
  -webkit-transform: translate(-50%, -20px);
  -ms-transform: translate(-50%, -20px);
  -o-transform: translate(-50%, -20px);
  transform: translate(-50%, -20px);
  position: absolute;
  width: 220px;
  font-size: 0.875em;
  top: 0;
  display: block;
  text-align: center;
  opacity: 0;
  filter: alpha(opacity=0);
}
.wigetized .noo-footer-bottom .widget .footer-social a {
  font-size: 36px;
  display: block;
  position: static;
  padding-bottom: 20px;
  border-bottom: 1px solid transparent;
}
.wigetized .noo-footer-bottom .widget .footer-social a.fa-facebook:hover {
  color: #4b6ea8;
  border-color: #4b6ea8;
}
.wigetized .noo-footer-bottom .widget .footer-social a.fa-google-plus:hover {
  color: #dd553b;
  border-color: #dd553b;
}
.wigetized .noo-footer-bottom .widget .footer-social a.fa-twitter:hover {
  color: #29aae2;
  border-color: #29aae2;
}
.wigetized .noo-footer-bottom .widget .footer-social a.fa-youtube:hover {
  color: #d84939;
  border-color: #d84939;
}
.wigetized .noo-footer-bottom .widget .footer-social a.fa-skype:hover {
  color: #00bbf0;
  border-color: #00bbf0;
}
.wigetized .noo-footer-bottom .widget .footer-social a.fa-linkedin:hover {
  color: #038ac4;
  border-color: #038ac4;
}
.wigetized .noo-footer-bottom .widget .footer-social a.fa-dribbble:hover {
  color: #f2689c;
  border-color: #f2689c;
}
.wigetized .noo-footer-bottom .widget .footer-social a.fa-pinterest:hover {
  color: #d83633;
  border-color: #d83633;
}
.wigetized .noo-footer-bottom .widget .footer-social a.fa-flickr:hover {
  color: #3a88d0;
  border-color: #3a88d0;
}

WeMusic HTML Documentation

GENERAL INFORMATION

HTML STRUCTURE

2.1. Basic Structure

2.2. 12 ColumnGrid

2.3. General structure of Homepage

2.4. General structure of Default Page

2.5. General structure of Page with Right Sidebar

STYLESHEETS

3.1. Files

3.2. MAIN.css Includes:

3.4. SETTINGS.css Includes:

JAVASCRIPT

1.1. Plugins

SKIN

SOCIAL ICON