156 lines
8.0 KiB
HTML
156 lines
8.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Abrillix HTML Documentation</title>
|
|
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
|
|
<style>
|
|
.container{
|
|
max-width:900px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h3 align="center"><em><small>"Abrillix" Documentation by "Purithemes"</small></em></h3>
|
|
<hr />
|
|
<h2 align="center">"Abrillix - HTML Template"</h2>
|
|
<hr />
|
|
<div class="row clearfix">
|
|
<div class="col-md-3">
|
|
<p align="justify">
|
|
Created : <br />
|
|
By : <a href="http://themeforest.net/user/puriwp/portfolio">Purithemes</a><br />
|
|
Email : <a href="mailto:support@puriwp.com">Email Me</a><br /> </p>
|
|
</div>
|
|
<div class="col-md-9">
|
|
<p align="justify">
|
|
Thank you for purchasing this item, supporting our work. Please do not forget to rate our product.
|
|
We would be happy to see your comments and stars.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<hr />
|
|
<h4 id="tbl-content"><em>Table Of Contents</em></h4>
|
|
<ol type="A" start="A">
|
|
<li>
|
|
<a href="#html-structure">HTML Structure</a>
|
|
</li>
|
|
<li>
|
|
<a href="#css-structure">CSS Structure</a>
|
|
</li>
|
|
<li>
|
|
<a href="#java">Javascript</a>
|
|
</li>
|
|
<li>
|
|
<a href="#uploading">Uploading Templates</a>
|
|
</li>
|
|
<li>
|
|
<a href="#credit">Credits</a>
|
|
</li>
|
|
</ol>
|
|
<hr />
|
|
<h3 id="html-structure">A. HTML Structure</h3>
|
|
<p>
|
|
Abrillix is XHTML Strict template. It's made with Twitter Bootstrap CSS framework. Almost every layout styling is covered by Bootstrap unless some layout that generally Bootstrap can't do. This theme is a fluid layout with two columns. The general template structure is the same throughout the template. Here is the general structure. </p>
|
|
<h4>Header</h4>
|
|
<p>
|
|
Header contains Top section where is containing Logo, and you can easily change the link and name according to your needs.<br /> <br /> <img src="img/1-header.png" alt="" class="img-responsive"> <br /> <br />
|
|
and then the site logo. Editing the logo you can easily change the home link and the logo image just find this code below.<br /> <br /> <img src="img/2-logo.png" alt="" class="img-responsive"> <br /> <br /> </p>
|
|
<h4>Navigation</h4>
|
|
<p>
|
|
Site navigation is found in preview code below. To create or modify main menu items, just find this code on template package and change menu link and menu name according to your needs .
|
|
</p>
|
|
<br />
|
|
<br />
|
|
<img src="img/3-menu.png" alt="" class="img-responsive">
|
|
<br />
|
|
<br />
|
|
<h4>Dropdown menu</h4>
|
|
<p>To add a Simple Dropdown mneu item, create list item with class "dropdown". and inline the list item create list with class "dropdown-menu"
|
|
here is the example :</p>
|
|
<br />
|
|
<br />
|
|
<img src="img/4-dropdown.png" alt="" class="img-responsive">
|
|
<br />
|
|
<br />
|
|
<h4>Slider</h4>
|
|
<p>
|
|
In The silder section you can change the image and the description with your own.
|
|
<br /> <br /> <img src="img/5-slider.png" alt="" class="img-responsive"> <br /> <br /> </p>
|
|
<hr />
|
|
<h3 id="css-structure">B. CSS Structure</h3>
|
|
<p>
|
|
The following css files are used in every template html files. They can be found in the HEAD section of the page. Style.css is the template css file, the others are twitter bootstrap and the styles require for each template feature.
|
|
</p>
|
|
<br />
|
|
<br />
|
|
<img src="img/6-stylecss.png" alt="" class="img-responsive">
|
|
<br />
|
|
<br />
|
|
<ul>
|
|
<li>
|
|
<b>style.css</b> - Main CSS for template, all main styles are here.
|
|
</li>
|
|
<li>CSS
|
|
<ul>
|
|
<li>
|
|
<b>bootstrap.css</b> - Default styling for all basic HTML elements by Twitter Bootstrap and Default styling to control HTML elements in various screen width by Twitter Bootstrap
|
|
</li>
|
|
<li>
|
|
<b>slick.css</b> - Default styling for Main Slider, and Page Slider
|
|
</li>
|
|
<li>
|
|
<b>animate.css</b> - Default styling for paralax effect
|
|
</li>
|
|
<li>
|
|
<b>prettyPhoto.css</b> - Default styling for lightbox
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
<hr />
|
|
<h3 id="java">C. Javascript</h3>
|
|
<p>
|
|
This template requires the following javascript files. You should place them in every template html files. at the bottom after tag "<code><!-- Footer --></code>" or at the top before "<code><!-- /head --></code>" tag.
|
|
<br /> <br /> <img src="img/7-scriptjs.png" alt="" class="img-responsive"> <br /> <br /> </p>
|
|
<hr />
|
|
<h3 id="uploading">D. Uploading Templates</h3>
|
|
<p>
|
|
Best way to upload template is if you use FTP program. I strongly recomment you to use <a href="http://filezilla-project.org/">Filezilla</a>.
|
|
Filezilla is available for PC and Mac and it's easy to use. We assume that you already have hosting, so open filezilla, login and find "public_html" folder. On some servers it is called "www" folder...that's folder where you need to upload all files.
|
|
</p>
|
|
<h3 id="credit">E. Credits & Source</h3>
|
|
<p>
|
|
During template development i used those javascript and graphic files:
|
|
<ul>
|
|
<li>
|
|
<a href="http://getbootstrap.com/">Twitter Bootstrap</a>
|
|
</li>
|
|
<li>
|
|
<a href="http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/">Prettyphoto</a>
|
|
</li>
|
|
<li>
|
|
<a href="http://fortawesome.github.io/Font-Awesome/">Font Awesome</a>
|
|
</li>
|
|
<li>
|
|
<a href="http://kenwheeler.github.io/slick/">Slick slider</a>
|
|
</li>
|
|
<li>
|
|
<a href="http://mynameismatthieu.com/WOW/">WOW js</a>
|
|
</li>
|
|
<li>
|
|
<a href="http://imagesloaded.desandro.com/">Images load js</a>
|
|
</li>
|
|
<li>
|
|
<a href="http://masonry.desandro.com">Masonry js</a>
|
|
</li>
|
|
</ul> </p>
|
|
<br />
|
|
<br />
|
|
<br />
|
|
<br />
|
|
</div>
|
|
</body>
|
|
</html> |