Raven HTML Documentation


Fistly we would love to send our great thanks to you for purchasing Raven 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 Raven

This template includes 76 files:

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="loader-wrapper"></div> - preloader

<div id=" cms-page" class="cms-wide"> - all the content

<header id="cms-masthead" class="site-header header-ontop clearfix" ></header> - header

<div id=" main"></div> - main content

<footer id="cms-footer" class="no-margin-top"></footer> - footer

</div>

 

HTML


<!-- START PRELOADER -->

<div id="loader-wrapper"></div>

<!-- END PRELOADER -->

<!-- START SITE -->

<div id="cms-page" class="cms-wide">

<!-- START HEADER -->

<header id="cms-masthead" class="site-header header-ontop clearfix">

	{{MAIN HEADER CONTENT}}

</header>

<!-- END HEADER -->


<!-- START MAIN CONTENT WRAPPER -->

<div id="main">

                {{ MAIN CONTENT}}

</div>

<!-- END MAIN CONTENT WRAPPER -->


<!-- START FOOTER -->

<footer id="cms-footer" class="no-margin-top">

{{FOOTER CONTENT}}

</footer>

<!-- END FOOTER -->

</div>

<!-- END SITE -->

 

2.2. 12 ColumnGrid

HTML

<!-- START SECTION -->

<div id="main">

<!-- START CONTAINER -->

<div class="container">

<div class="row">

<div class="col-xs-12 col-sm-9 col-md-9 col-lg-9">

        {{ 9/12 COLUMN PAGE CONTENT }}

</div>

<div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">

        {{ 3/12 COLUMN PAGE CONTENT }}

</div>

</div>

</div>

<!-- END CONTAINER -->

</div>

<!-- END  SECTION -->

 

2.3. General structure of Homepage

HTML

<body>

<!-- START PRELOADER -->

<div id="loader-wrapper"></div>

<!-- END PRELOADER -->

<!-- START SITE -->

<div id="cms-page" class="cms-wide">

<!-- START HEADER -->

<header id="cms-masthead" class="site-header header-ontop clearfix">

	{{MAIN HEADER CONTENT}}

</header>

<!-- END HEADER -->


<!-- START MAIN CONTENT -->

<div id="main">

       {{ MAIN CONTENT}}

</div>

<!-- END MAIN CONTENT -->


<!-- START FOOTER -->

<footer id="cms-footer" class="no-margin-top">

{{FOOTER CONTENT}}

</footer>

<!-- END FOOTER -->

</div>

<!-- END SITE -->

</body>

 

2.4. General structure of Default Page

HTML

<body>

<!-- START PRELOADER -->

<div id="loader-wrapper"></div>

<!-- END PRELOADER -->

<!-- START SITE -->

<div id="cms-page" class="cms-wide">

<!-- START HEADER -->

<header id="cms-masthead" class="site-header header-ontop clearfix">

	{{MAIN HEADER CONTENT}}

</header>

<!-- END HEADER -->


<!-- START MAIN CONTENT -->

<div id="main">

       {{ MAIN CONTENT}}

</div>

<!-- END MAIN CONTENT -->


<!-- START FOOTER -->

<footer id="cms-footer" class="no-margin-top">

{{FOOTER CONTENT}}

</footer>

<!-- END FOOTER -->

</div>

<!-- END SITE -->

</body>

 

2.5. General structure of Page with Right Sidebar

HTML

<body>

<!-- START PRELOADER -->

<div id="loader-wrapper"></div>

<!-- END PRELOADER -->

<!-- START SITE -->

<div id="cms-page" class="cms-wide">

<!-- START HEADER -->

<header id="cms-masthead" class="site-header header-ontop clearfix">

	{{MAIN HEADER CONTENT}}

</header>

<!-- END HEADER -->


<!-- START MAIN CONTENT -->

<div id="main">

<div class="col-xs-12 col-sm-9 col-md-9 col-lg-9">

        {{ MAIN CONTENT }}

</div>

<div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">

        {{ SIDEBAR CONTENT }}

</div>

</div>

<!-- END MAIN CONTENT -->


<!-- START FOOTER -->

<footer id="cms-footer" class="no-margin-top">

{{FOOTER CONTENT}}

</footer>

<!-- END FOOTER -->

</div>

<!-- END SITE -->

</body>

 

2.6. General structure of Page with Left Sidebar

HTML

<body>

<!-- START PRELOADER -->

<div id="loader-wrapper"></div>

<!-- END PRELOADER -->

<!-- START SITE -->

<div id="cms-page" class="cms-wide">

<!-- START HEADER -->

<header id="cms-masthead" class="site-header header-ontop clearfix">

	{{MAIN HEADER CONTENT}}

</header>

<!-- END HEADER -->


<!-- START MAIN CONTENT -->

<div id="main">

<div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">

        {{ SIDEBAR CONTENT }}

</div>

<div class="col-xs-12 col-sm-9 col-md-9 col-lg-9">

        {{ MAIN CONTENT }}

</div>

</div>

<!-- END MAIN CONTENT -->


<!-- START FOOTER -->

<footer id="cms-footer" class="no-margin-top">

{{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. animate.min.css
  2. bootstrap.min.css
  3. custom.css
  4. font-awesome.min.css
  5. style.css - Main CSS file of website
  6. owl.carousel.css
  7. pe-icon-7-stroke.css
  8. prettyPhoto.css
  9. settings.css
  10. ionicons.css
  11. mislider.css

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

 

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

4.1. Files

  1.  bootstrap.min.js –jQuery Bootstrap
  2.  bootstrap-progressbar.min.js
  3.  core.min.js
  4.  fullPageScroll.min.js
  5.  imagesloaded.pkgd.min
  6.  jquery.countTo.js
  7.  jquery.equalheights.min.js
  8.  jquery.fitvids.js
  9.  jquery.fullscreen-popup.js
  10.  jquery.isotope.init.js
  11.  jquery.isotope.min.js
  12.  jquery.min.js
  13.  jquery.parallax-1.1.3.js
  14.  jquery.prettyPhoto.js
  15.  jquery.themepunch.revolution.min.js
  16.  jquery.themepunch.tools.min.js
  17.  jquery.ui.touch-punch.js
  18.  jquery-migrate.min.js
  19.  main.js
  20.  menu.js
  21.  mislider.js
  22.  mouse.min.js
  23.  owl.carousel.min.js
  24.  pagination.js
  25.  price-slider.js
  26.  slider.min.js
  27.  progressbar.min.js
  28.  waypoints.min.js
  29.  widget.min.js
  30.  wow.min.js

Note: jquery.min.js, bootstrap.min.js, main.js, menu.js must declare on all pages of Raven theme.

5.1. Wide Layout

Wide layout is default layout.

 

5.2. Boxed Layout

You need to replace class cms-wide by cms-boxed.

HTML

<div id="cms-page" class="cms-boxed">

{{BODY CONTENT}}

</div>