Index Ethic
Index Ethic
Start
2. Getting Statred
3. Package Contents
4. Features
5. Template Structure
6. HTML file Structure
7. CSS Styling
8. JS Structure
9. Credits
Copyright Templaza 2013
Ethic
Documentation 1.0
By: TemPlaza
Email: [email protected]
Thank you for purchasing our Template and supporting us. If you have any questions that
are beyond the scope of this help file, please feel free to post it on our forum here. Thanks
so much! This documentation was made only with the Documenter (except the images)
Getting Started
To install this HTML template, you will need to upload all files and folders using an FTP
client. We recommend you to use FileZillaFTP client. To upload your template, it is
necessary for you to have:
Domain
FTP Username
FTP Password
Once connected, make sure to upload All files and folders within the "ETHIC" folder of
your download package.
Package Contents
After downloading the Template package, you will find the following structures:
css
fonts
images
js
Video
And file html
style.css
style_ie8.css
Features
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
Template Structure
HTML FILES
Below you will find the HTML files in groups:
Home Page
home-01.html
home-02.html
home-03.html
home-04.html
home-05.html
home-06.html
home-07.html
Blog Pages
Blog-01-Column.html
Blog-02-Column.html
Blog-03-Column.html
Blog-04-Column.html
Blog-LeftSideBar.html
Blog-RightSideBar.html
Blog-TimeLine.html
Courses Pages
Courses-Grid.html
Courses-ListClass.html
Courses-ListInTable.html
Courses-Register.html
Courses-Single.html
Event Pages
Events-Grid.html
Events-List.html
Events-Single-Page.html
Features Pages
Feature-Color-01.html
Feature-Color-02.html
Feature-Color-03.html
Feature-Color-04.html
Feature-Color-05.html
Feature-Forum.html
Feature-RTLLayout.html
Feature-SortCodes.html
Feature-Typography.html
Header Pages
Header-01.html
Header-02.html
Header-03.html
Header-04.html
Header-05.html
Header-06.html
Header-07.html
JoomlaBage Pages
JoomlaBase-404Page.html
JoomlaBase-NewFeed.html
JoomlaBase-NewLink.html
JoomlaBase-Page-Login.html
JoomlaBase-Page-Profile-User.html
JoomlaBase-Page-Remind-UserName.html
JoomlaBase-Page-Reset-Pass.html
JoomlaBase-Page-Resgister.html
MegaMenu Pages
Mega-Menu-Style-01.html
Mega-Menu-Style-02.html
Mega-Menu-Style-03.html
Mega-Menu-Style-04.html
Social Pages
Social-Activity.html
Social-Groups.html
Social-Login.html
Social-Members.html
Social-SingleGroup.html
Social-SingleMember.html
Contact.html
CanvasMenu.html
About.html
Css Files
You can easily create HTML pages, or whatever just by using this easy and clean
Template. Code is clearly written and commented for each considerable part. When you
open any HTML file, you will see that they are all have the same headers and footers;
thus, they have the same HTML code and we'll explain both as follows:
<body>
<!-- Begin section search form -->
<div class="tz-content-search">
<form action="#" method="get">
<i class="fa fa-times tz-formclose"></i>
<input type="text" class="tzsearch-input" id="tz-search-input" name="search"
placeholder="Search...">
</form>
</div>
<!-- End form search -->
<!-- Logo, global navigation menu and
button search start -->
<header class="tz-header tz-header1">
<div class="container">
<div class="tz-header-content">
<h3 class="tz-logo pull-left">
<a href="#"><img
src="images/logo-header-1.png" alt="Images Logo"></a>
</h3>
<button data-target=".navcollapse" class="tz-button-toggle btn-navbar pull-right"
type="button">
<i class="fa fa-bars"></i>
</button>
<button class="tz-search pullright"><i class="fa fa-search"></i></button>
<nav class="nav-collapse pullright">
<ul>
<li>
<!--[if IE 8]>
<link href="style_ie8.css" rel="stylesheet"
type="text/css" />
<![endif]-->
<!-- HTML5 Shim and Respond.js IE8 support
of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if
you view the page via file:// -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
<link href="css/bootstrap.min.css"
rel="stylesheet" />
<link href="fonts/awesome/css/fontawesome.min.css" rel="stylesheet" />
<link href='http://fonts.googleapis.com/
css?family=Varela' rel='stylesheet' type='text/css'>
<link href="style.css" rel="stylesheet" />
</head>
Logo And Global Menu Navigation
<!-- Begin Header -->
<header class="tz-header tz-header-1">
<div class="container">
<div class="tz-header-content">
<h3 class="tz-logo pull-left">
<a href="#"><img
src="images/logo-header-1.png" alt="Images Logo"></a>
</h3>
<button data-target=".navcollapse" class="tz-button-toggle btn-navbar pull-right"
type="button">
<i class="fa fa-bars"></i>
</button>
<button class="tz-search pullright"><i class="fa fa-search"></i></button>
<nav class="nav-collapse pullright">
<ul class="tz-menu">
<li><a
href="index.html">HOME</a></li>
<li><a
href="index.html">EVENTS</a></li>
<li>
<a
href="index.html">COURSES</a>
</li>
<li>
<a
href="index.html">FEATURE</a>
</li>
<li>
<a
href="index.html">PAGES</a>
</li>
<li>
<a
href="index.html">BLOG</a>
</li>
<li><a
href="index.html">FORUM</a></li>
</ul>
</nav>
</div>
</div><!-- End Content Main Header -->
</header>
<!-- End Header -->
Change Header
<li><a
href="#">Undergraduate Studies</a></li>
<li><a
href="#">Graduate Studies</a></li>
<li><a
href="#">Part-Time and Non-Degree</a></li>
<li><a
href="#">Summer</a></li>
<li><a
href="#">Distance Education</a></li>
<li><a
href="#">Catalogs</a></li>
</ul>
</div>
</li>
<li>
<div class="tz-footercontent-main">
<img src="images/
remove-header1.png" alt="Images remove footer">
<h4>RESEARCH</h4>
<ul>
<li><a
href="#">Applied Physics Laboratory</a></li>
<li><a
href="#">Research Projects</a></li>
<li><a
href="#">Administration</a></li>
<li><a
href="#">Funding Opportunities</a></li>
<li><a
href="#">Undergraduate Research</a></li>
<li><a
href="#">Resources</a></li>
<li><a>Health &
Medicine</a></li>
</ul>
</div>
</li>
<li>
<div class="tz-footercontent-main">
<img src="images/
remove-header1.png" alt="Images remove footer">
<h4>EVENTS</h4>
<ul>
<li><a
href="#">Calendar of Events</a></li>
<li><a
href="#">Student Life</a></li>
<li><a
href="#">Campus Services</a></li>
<li><a
href="#">Athletic Facilities</a></li>
<li><a
href="#">Arts and Culture</a></li>
<li><a href="#">For
Students</a></li>
<li><a href="#">For
Parents</a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
<div class="tz-footer-address-site">
<address>University Address, GK-120 678
Warsaw, Poland | Phone: +48 0045356723</address>
</div>
</footer>
<!-- End Footer -->
CSS Styling
The style.css file is the responsible for the Template styling as below:
Table of Contents
/**
*
*
*
*
*
*
*
*
*
*
*
*
Table
1.0 2.0 3.0 4.0 4.1
of Contents:
Reset
Off canvas
Isotope
Content
- Header
4.1.b - SubMenu
4.2 - Slider
4.3 - Introduce
4.4 - Portfolio
4.5 - Courses
4.6 - Student Life
*
4.7 - Lastest Event
*
4.8 - Contact Form
*
4.9 - Our Leader
*
4.10 - Lastest Articles
*
4.11 - Services
*
4.12 - Information
*
4.13 - Video
*
4.14 - Blog-Page
*
4.15 - Events-Page
*
4.16 - About-Page
*
4.17 - Contact-Page
*
4.18 - Feature-Page
*
4.19 - Courses-Page
*
4.20 - JoomlaBase-Page
*
4.21 - Social- Page
*
4.22 - Style for Google Chrome
* 5.0 - Footer
* 6.0 - Responsive
*
6.1.a Extra small devices (phones, less
than 481px)
*
Js Structure
All js used in homepage are stored in custom.js file. You can find some js as following:
Method for Header
var $width_Windows = jQuery(this).width();
/* Method for scroll Header 01 */
if(jQuery(this).scrollTop() > 0){
jQuery('.tz-header-1').addClass('tz-header-
eff');
}else{
jQuery('.tz-header-1').removeClass('tzheader-eff');
}
/* Method for scroll Header Home01 */
var $affixTopBanner01 = jQuery('.tz-banner .tzitems').height();
var $heightHeaderHome01 = jQuery('.tz-headerhome-1').height();
if(jQuery('.tz-header-home-1').length > 0){
if(jQuery(this).scrollTop() >
($affixTopBanner01 - $heightHeaderHome01)){
jQuery('.tz-headerhome-1').addClass('affix-eff');
jQuery('.tz-banner-style1').css('zindex','99999');
if(jQuery('.affix-top').length > 0) {
jQuery('.affix-top').affix({
offset: { top:
$affixTopBanner01}
});
}
}
else{
jQuery('.tz-headerhome-1').removeClass('affix-eff');
jQuery('.tz-banner-style1').css('zindex','1');
}
}
/* Method for scroll Header Home-02 */
var $height_Tz_Sign_In = jQuery('.tz-signin').height();
if(jQuery('.tz-header-2').length > 0){
if(jQuery(this).scrollTop() >=
($height_Tz_Sign_In + 30)){
jQuery('.tz-header-2').addClass('tzheader-2-eff')
jQuery('.tz-banner-style2').css('zindex','99999');
}
else{
jQuery('.tz-header-2').removeClass('tzheader-2-eff')
jQuery('.tz-banner-style2').css('zindex','1');
}
}
/* Method for scroll Header Home-03 */
if(jQuery('.tz-header-3').length > 0){
if(jQuery(this).scrollTop() >
($height_Tz_Sign_In + 30)){
jQuery('.tz-banner').css('zindex','99999');
jQuery('.tz-header-3').addClass('tzheader-3-eff');
}
else{
jQuery('.tz-banner').css('zindex','1');
jQuery('.tz-header-3').removeClass('tzheader-3-eff');
}
}
/*
jQuery('.tz-banner').css('zindex','99999');
}else{
jQuery('.tz-header-5').removeClass('tzheader-5-eff');
jQuery('.tz-banner').css('zindex','1');
}
}
/*
<div class="container">
# menu item repeating here #
</div>
</div>
</header>
Method for Search
/* Method for button search */
jQuery('.tz-search').click(function(){
jQuery('.tz-content-search').addClass('tzcontent-search-eff');
jQuery('.tz-search-input').focus();
});
jQuery('.tz-form-close').click(function(){
jQuery('.tz-contentsearch').removeClass('tz-content-search-eff');
});
HTML
<!-- Begin section search form -->
<div class="tz-content-search">
<form action="#" method="get">
<i class="fa fa-times tz-formclose"></i>
<input type="text" class="tz-searchinput" id="tz-search-input" name="search"
placeholder="Search...">
</form><!-- End form search -->
</div>
<!-- End section search form -->
JS Carousel
jQuery('.tz-gallery-wrapper').owlCarousel({
items : 1,
itemsDesktop : [1199,1],
itemsDesktopSmall : [979,1],
itemsTablet: [768, 1],
itemsMobile: [479, 1],
slideSpeed:500,
paginationSpeed:800,
rewindSpeed:1000,
autoPlay:true,
stopOnHover: false,
singleItem:false,
rewindNav:false,
pagination:false,
paginationNumbers:false,
itemsScaleUp:false
});
jQuery('.tz-cources-prev').click(function(){
jQuery(".tz-gallerywrapper").trigger('owl.prev');
}) ;
jQuery(".tz-cources-next").click(function(){
jQuery(".tz-gallerywrapper").trigger('owl.next');
}) ;
HTML (EX: html used in Event-Single-Page)
<div class="tz-gallery-images">
<button class="tz-cources-prev">
<i class="fa fa-angle-left"</i>
</button>
<button class="tz-cources-next">
<i class="fa fa-angle-right"></i>
</button>
<ul class="tz-gallery-wrapper">
<li>
<a href="#">
<img src="http://placehold.it/
870x328" alt="Images">
</a>
</li>
<li>
<a href="#">
<img src="http://placehold.it/
870x328" alt="Images">
</a>
</li>
<li>
<a href="#">
<img src="http://placehold.it/
870x328" alt="Images">
</a>
</li>
</ul>
</div>
JS Video
if (myVideo.play)
myVideo.pause();
});
HTML
<!-- Begin section tz-video -->
<section class="tz-video">
<div class="tz-video-content">
<button class="tzautoplay"><i class="fa
fa-video-camera"></i></button>
<button class="tzpause"><i class="fa
fa-pause"></i></button>
<h3>Enjoy your
best student life </h3>
<small>ETHIC UNIVERSITY</small>
<span class="tz-under-line"></span>
</div>
<div class="bg-video"></div>
<video class="videoID">
<source type="video/mp4" src="video/
video.mp4" />
<source type="video/ogg" src="video/
video.ogv" />
<source type="video/webm" src="video/
video.webm" />
</video>
</section>
<!--End section tz-video-->
Find Courses
/* Method click event for module Find Cources in
Home4,... */
jQuery('#tz-sidemenu a').on('click', function(e){
e.preventDefault();
if($(this).hasClass('tz-open')) {
// do nothing because the link is already open
} else {
var oldcontent = $('#tz-sidemenu a.tzopen').attr('href');
var newcontent = $(this).attr('href');
$(oldcontent).fadeOut('fast', function(){
$(newcontent).fadeIn().removeClass('tzhidden');
$(oldcontent).addClass('tz-hidden');
});
$('#tz-sidemenu a').removeClass('tz-open');
$(this).addClass('tz-open');
}
});
HTML-Example
<!-- Begin class tz-cources-table -->
<div class="tz-course-table">
<div class="container">
<div class="row">
<div class="col-md-4">
<ul id="tz-sidemenu" class="tzcources-content-left tz-cource-option">
<li>
<div>
<a href="#tz-fine-arts"
class="tz-open">
# content item
repeating here #
</a>
</div>
</li>
</ul>
</div>
<div class="col-md-8">
<div id="tz-fine-arts" class="tzcontent-right">
<div class="tz-tab-slider-img">
# content item repeating
here #
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End class tz-cources-table -->
JS PreLoading
/* Method for Pre-Loading */
"use strict";
jQuery('.loading-page').remove();
HTML-Example
<!-- Begin class loading-page -->
<div class="loading-page">
<img src="images/image-preload.gif"
alt="Images-loading">
</div>
<!-- End class loading-page -->
Off Canvas Menu
/* Method for menu offcavas-menu for page CanvansMenu */
var $true = true;
jQuery('.tz-button-togglecanvans').click(function(){
if ( $true == true ){
jQuery('.tz-offcavans-menu').animate({
right : '0'
},300) ;
jQuery('.tzscrollable').addClass('tzoffcavans-menu-eff');
$true = false;
}else{
jQuery('.tz-offcavans-menu').animate({
right : '-20em'
},150,function(){
jQuery('.tzscrollable').removeClass('tz-offcavans-menueff');
}) ;
$true = true;
}
});
jQuery('.tz-offcanvas-close').click(function(){
jQuery('.tz-offcavans-menu').animate({
right : '-20em'
},150,function(){
jQuery('.tzscrollable').removeClass('tzoffcavans-menu-eff');
}) ;
$true = true
});
HTML-Example in CanvasMenu.html page
<img src="images/check.png"
alt="Images">
<i class="fa fa-arrowsalt"></i>
<strong>Reset Pass</strong>
</a>
</li>
<li>
<a href="#">
<img src="images/check.png"
alt="Images">
<i class="fa fa-arrowsalt"></i>
<strong>Edit User Profile</
strong>
</a>
</li>
</ul>
</nav>
</div>
</aside>
<!-- End class tz-offcavans-menu -->
Credits
jQuery
jQuery Owl Carousel slider plugin
HTML5 Shiv
Font Awesome Icons
Bootstrap
jQuery Loader Plugin
jquery isotope
Say Thanks
Thanks for using our product. If you need any helps, you can send your questions to this
email [email protected]
We're are TemPlaza
content