Package Contents
After downloading the Template package, you will find the following structures:
- css
- font
- images
- js
- Video
- And file html
- style.css
- style-inline.css
- vc_ie8.css
- Audio
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)
To install this HTML template, you will need to upload all files and folders using an FTP client. We recommend you to use FileZilla FTP client. To upload your template, it is necessary for you to have:
Once connected, make sure to upload All files and folders within the "Everline" folder of your download package.
After downloading the Template package, you will find the following structures:
Below you will find the HTML files in groups:
container font-awesome and font for woocommerce
contain logo images files
contain video files
contain html files
file css used for whole website
file css inline used for whole website
file css used in ie8 for whole website
contain audio 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 select color -->
<div class="livedemo">
# Select options color for page#
</div>
<!-- End section select color -->
<!-- Begin section images loading -->
<div id="tzloadding">
<img class="loadding_img" src="images/loadding.GIF" alt="Image">
</div>
<!-- End section images loading -->
<!-- Begin section everline_boxed -->
<div class="everline_boxed">
<div class="vc_row wpb_row vc_row-fluid">
<div class="nocontainer">
<div class="vc_col-sm-12 wpb_column vc_column_container ">
<div class="wpb_wrapper">
<header class="tz-header tz-header1">
<div class="wrapbox">
<div class="container">
<button data-target=".nav-collapse" class="btn-navbar tz_icon_menu" type="button">
<i class="fa fa-bars"></i>
</button>
<h3 class="tzlogo pull-left">
<a href="#" title="Everline">
<img src="images/Everline_logo.png" alt="Everline">
</a>
</h3>
<button class="tz-search pull-right"> <i class="fa fa-search"></i></button>
<nav class="pull-right tznav-menu">
<ul id="menu-primary" class="tz-menu nav-collapse themeple_megemenu">
<li>
# menu item repeating here #
</li>
</ul>
</nav>
</div>
</div>
</header>
<div class="tzform-search">
<img class="tzcontro_search" src="images/icon_search_delete.png" alt="icon search">
<form method="get" id="searchform" action="#">
<label class="icon-search"> </label>
<label for="s" class="assistive-text assistive-tzsearch">Search</label>
<input type="text" class="field Tzsearchform inputbox search-query" name="s" id="s" placeholder="Search..." />
<input type="submit" class="submit" name="submit" id="searchsubmit" value="Search" />
</for>
</div>
</div>
</div>
</div>
</div>
<div class="vc_row wpb_row vc_row-fluid">
<div class="nocontainer">
<div class="vc_col-sm-12 wpb_column vc_column_container ">
<div class="wpb_wrapper">
<div class="wpb_revslider_element wpb_content_element">
<!-- START REVOLUTION SLIDER 4.6.0 fullscreen mode -->
<div id="rev_slider_3_1_wrapper" class="rev_slider_wrapper fullscreen-container">
# Content of slider #
</div>
<!-- END REVOLUTION SLIDER -->
</div>
</div>
</div>
</div>
</div>
# Content main of page #
<footer class="tz-footer">
# Content of footer #
</footer><!-- End class container-->
</div> <!-- End section everline_boxed -->
</body>
The Head TAG ( All pages must have the following head tag ):
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="Just another WordPress site" />
<!-- 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]-->
<title>Everline | Just another WordPress site</title>
<link rel='stylesheet' id='contact-form-7-css' href='css/contact-form-7.css' type='text/css' media='all' />
<link rel='stylesheet' id='rs-plugin-settings-css' href='css/revslider.css' type='text/css' media='all' />
<link rel='stylesheet' id='woocommerce-layout-css' href='css/woocommerce-layout.css' type='text/css' media='all' />
<link rel='stylesheet' href='css/woocommerce-smallscreen.css' type='text/css' media='only screen and (max-width: 768px)' />
<link rel='stylesheet' id='woocommerce-general-css' href='css/woocommerce.css' type='text/css' media='all' />
<link rel='stylesheet' id='bootstrap-css-css' href='css/bootstrap.min.css' type='text/css' media='all' />
<link rel='stylesheet' id='awesome-css' href='font/css/font-awesome.min.css' type='text/css' media='all' />
<link rel='stylesheet' id='Varela-css' href='http://fonts.googleapis.com/css?family=Varela' type='text/css' media='all' />
<link rel='stylesheet' id='Rouge-css' href='http://fonts.googleapis.com/css?family=Rouge+Script' type='text/css' media='all' />
<link rel='stylesheet' id='owl.carousel-css' href='css/owl.carousel.css' type='text/css' media='all' />
<link rel='stylesheet' id='owl.theme-css' href='css/owl.theme.css' type='text/css' media='all' />
<link rel='stylesheet' id='flexslider-css' href='css/flexslider.css' type='text/css' media='screen' />
<link rel='stylesheet' id='style-css' href='style.css' type='text/css' media='all' />
<link rel='stylesheet' href='style-inline.css' type='text/css' media='all' />
<link rel='stylesheet' id='js_composer_front-css' href='css/js_composer_front.css' type='text/css' media='all' />
<script type='text/javascript' src='js/jquery/jquery.js'></script>
<script type='text/javascript' src='js/jquery/jquery-migrate.min.js'></script>
<script type='text/javascript' src='js/revslider/jquery.themepunch.tools.min.js'></script>
<script type='text/javascript' src='js/revslider/jquery.themepunch.revolution.min.js'></script>
<script type="text/javascript">
var themeprefix = 'plazart';
var imgpath = 'images/';
</script>
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="vc-ie8.css" media="screen">
<![endif]-->
</head>
<!-- Begin Header -->
<header class="tz-header tz-header1"<
<div class="wrapbox"<
<div class="container">
<button data-target=".nav-collapse" class="btn-navbar tz_icon_menu" type="button"<
<i class="fa fa-bars"></i>
</button>
<h3 class="tzlogo pull-left">
<a href="#" title="Everline">
<img src="images/Everline_logo.png" alt="Everline">
</a>
</h3>
<button class="tz-search pull-right">
<i class="fa fa-search"></i>
</button>
<nav class="pull-right tznav-menu">
<ul id="menu-primary" class="tz-menu nav-collapse themeple_megemenu">
<li id="menu-item-102" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item">
<a href="index.html">Home</a>
</li>
<li id="menu-item-397" class="menu-item menu-item-type-custom">
<a href="#">Features</a>
</li>
<li id="menu-item-183" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children">
<a href="blog.html">Blog</a>
</li>
<li id="menu-item-279" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children">
<a href="#">Portfolio</a>
</li>
<li id="menu-item-373" class="menu-item menu-item-type-taxonomy menu-item-object-tribe_events_cat menu-item-has-children">
<a href="event.html">Events</a>
</li>
<li id="menu-item-20" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children">
<a href="shop.html">Shop</a>
</li>
</ul>
</nav>
</div>
</div>
</header>
<!-- End Header -->
To change the style of header, just go to header-01.html, header-02.html, header-03.html, header-04.html, header-05.html and find the <header> tag, it has another html structure.
<!-- Begin Footer -->
<footer class="tz-footer">
<div class="container">
<div class="row">
<div class="col-md-4 footerattr">
<aside id="contact_info-2" class="widget_contact_info widget">
<h3 class="module-title title-widget"><span>LOCATION</span></h3>
<div class="tzwidget-contact">
<address> London, UK, 10, Friks Avenue </address>
<span> +0987 092 291 091 </span>
<span class="wemail">info@everline.com</span>
</div>
</aside>
</div>
<div class="col-md-4 footerattr">
<aside id="widget_logo-2" class="widget_widget_logo widget">
<div class="tz_logo_widget">
<a href="#">
<img src="images/EverlineTheme.png" alt="Everline">
</a>
<p>All right server. Copyright by TemPlaza.com</p>
</div>
</aside>
</div>
<div class="col-md-4 footerattr">
<aside id="tz_social-2" class="widget_tz_social widget">
<h3 class="module-title title-widget"><span>GET IN TOUCH</span></h3>
<div class="tz_social">
<a href="#" class="fa fa-facebook"></a>
<a href="#" class="fa fa-google-plus"></a>
<a href="#" class="fa fa-twitter"></a>
<a href="#" class="fa fa-youtube"></a>
</div>
</aside>
</div>
</div><!--end class row-->
</div><!--end class container-->
</footer>
<!-- End Footer -->
The style.css file is the responsible for the Template styling as below:
/*
Theme Name: Everline
Theme URI: http://templaza.com
Author: Templaza
Author URI: http://templaza.com
Version: 1.0
Description: Coming with elegant and modest appearance, Everline will be a meaningful WordPress theme for Wedding,
Engagement and other event purposes. Its stunning beauty, fashionable clean look and proper execution will help you to own an awesome wedding site for your happiest day.
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: one-column, two-columns, three-columns, four-columns, right-sidebar, theme-options
Text Domain: Everline
*/
/**
* Table of Contents:
* 1.0 - Reset
* 2.0 - Off canvas
* 3.0 - Isotope
* 4.0 - Content
* 4.1 - Typography
* 4.2 - Header
* 4.3 - Count Down
* 4.4 - Our Story
* 4.5 - Introduct
* 4.6 - Contact Form 7
* 4.7 - Video
* 4.8 - Element Blog
* 4.9 - Playlist
* 4.10 - Testimonials
* 4.11 - Image content
* 4.12 - Woocommerce
* 4.13 - Sidebar
* 4.14 - The event
* 4.15 - Blog post
* 4.16 - Single post
* 4.17 - Coming soon
* 4.18 - Portfolio
* 4.19 - Team members
* 4.20 - Contact info
* 4.21 - Coming soon
* 4.22 - Live Demo
* 4.23 - Page 404
* 4.24 - Loadding
* 5.0 - Footer
* 6.0 - Theme Style
* 6.1 - Color 1
* 6.2 - Theme rtl
* 7.0 - Responsive
* -----------------------------------------------------------------------------
*/
All js used in homepage are stored in custom.js file. You can find some js as following:
jQuery(window).scroll(function(){
// method header
var $_top = jQuery(window).scrollTop();
if ( $_top > 0 ){
jQuery('.tz-header1').addClass('headerAnimate');
jQuery('.tz-header5').addClass('headerAnimate2');
}else{
jQuery('.tz-header1').removeClass('headerAnimate');
jQuery('.tz-header5').removeClass('headerAnimate2');
}
// method for header 3
if ( $_top > $height_header3 ){
jQuery('.header3-fix').addClass('headerAnimate3');
jQuery('.headerAnimate3').css('margin-bottom',$nav3_height + 'px');
}
if ( $_top > $height_header3 + 10 ){
jQuery('.header3-fix').addClass('headerAnimate3_');
}else{
jQuery('.header3-fix').removeClass('headerAnimate3_');
}
if ( $_top <= $height_header3 ){
jQuery('.headerAnimate3').css('margin-bottom','0px');
jQuery('.header3-fix').removeClass('headerAnimate3');
}
});
// method header
var $_top = jQuery(window).scrollTop();
if ( $_top > 0 ){
jQuery('.tz-header1').addClass('headerAnimate');
jQuery('.tz-header5').addClass('headerAnimate2');
}else{
jQuery('.tz-header1').removeClass('headerAnimate');
jQuery('.tz-header5').removeClass('headerAnimate2');
}
});
HTML-Example
<header class="tz-header tz-header1">
<div class="wrapbox">
<div class="container">
# menu item repeating here #
</div>
</div>
</header>
// method search
jQuery('#searchform').css({
top: ( ($heightWindow / 2 )- 30 ) + 'px'
});
jQuery('.tz-search').on( "click", function() {
jQuery('.tzform-search').fadeIn(1);
jQuery('#searchform').addClass('searchform_aff');
});
jQuery('.tzcontro_search').on( "click", function() {
jQuery('.tzform-search').fadeOut();
jQuery('#searchform').removeClass('searchform_aff');
});
HTML
<!-- Begin section search form -->
<div class="tzform-search">
<img class="tzcontro_search" src="images/icon_search_delete.png" alt="icon search">
<form method="get" id="searchform" action="#">
<label class="icon-search"> </label>
<label for="s" class="assistive-text assistive-tzsearch">Search</label>
<input type="text" class="field Tzsearchform inputbox search-query" name="s" id="s" placeholder="Search..." />
<input type="submit" class="submit" name="submit" id="searchsubmit" value="Search" />
</form>
</div>
<!-- End section search form -->
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-gallery-wrapper").trigger('owl.prev');
}) ;
jQuery(".tz-cources-next").click(function(){
jQuery(".tz-gallery-wrapper").trigger('owl.next');
}) ;
HTML (EX: html used in Blog-Page)
<div class="tzblog-slider tzblog-format">
<button class="tz_slider_prev"><i class="fa fa-angle-left"></i</button>
<button class="tz_slider_next"><i class="fa fa-angle-right"></i></button>
<ul class="tzblog-slider-content">
<li>
<img src="images/blogdefaitl.jpg" alt="1">
</li>
<li>
<img src="images/bk_video.jpg" alt="2">
</li>
</ul>
</div>
/* Method for video */
jQuery('.tzautoplay').on( "click", function() {
var $_this = jQuery(this);
var myVideo = $_this.parents('.tz-video').find('.videoID')[0];
jQuery(this).hide();
$_this.parents('.tz-video').find('.tz-video-content h3').css('opacity',0);
$_this.parents('.tz-video').find('.tz-video-content p').css('opacity',0);
$_this.parents('.tz-video').find('.bg-video').hide();
$_this.parents('.tz-video').find('.tzpause').show().css('opacity',0);
if (myVideo.paused)
myVideo.play();
}) ;
jQuery('.tzpause').on( "click", function() {
jQuery(this).hide();
var $_this = jQuery(this);
var myVideo = $_this.parents('.tz-video').find('.videoID')[0];
$_this.parents('.tz-video').find('.tz-video-content h3').css('opacity',1);
$_this.parents('.tz-video').find('.tz-video-content p').css('opacity',1);
$_this.parents('.tz-video').find('.bg-video').show();
$_this.parents('.tz-video').find('.tzautoplay').show();
if (myVideo.play)
myVideo.pause();
});
HTML
<!-- Begin class tz-video -->
<div 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>“The Power of Love”</h3>
<p>JENNIFER AND JAMES WEDDING VIDEO</p>
</div>
<div class="bg-video bg-video-home-4"></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>
</div>
<!--End class tz-video-->
jQuery(document).ready(function(){
jQuery(".countdown").countdown({
date: "january 1 2016 23:23:23", // add the countdown's end date (i.e. 3 november 2012 12:00:00)
format: "on" // on (03:07:52) | off (3:7:52) - two_digits set to ON maintains layout consistency
});
});
HTML-Example
<!-- Begin class tzcountdown -->
<!div class="tzcountdown">
<!div class="container">
<!h3 class="tzcount_title">COUNTDOWN TO JENNY & MARK WEDDING CEREMONY<!/h3>
<!div class="countdown">
<!div class="row">
<!div class="col-md-3">
<!div class="tzcountdownitem">
<!span class="days">00<!/span>
<!/div>
<!p class="timeRefDays tzcount-ds">days<!/p>
<!/div>
<!div class="col-md-3">
<!div class="tzcountdownitem">
<!span class="hours">00<!/span>
<!/div>
<!p class="timeRefHours tzcount-ds">hours<!/p>
<!/div>
<!div class="col-md-3">
<!div class="tzcountdownitem">
<!span class="minutes tzcount-ds">00<!/span>
<!/div>
<!p class="timeRefMinutes tzcount-ds">minutes<!/p>
<!/div>
<!div class="col-md-3">
<!div class="tzcountdownitem">
<!span class="seconds">00<!/span>
<!/div>
<!p class="timeRefSeconds tzcount-ds">seconds<!/p>
<!/div>
<!/div>
<!/div>
<!/div>
<!/div>
<!-- End class tzcountdown -->
/* Method for Pre-Loading */
"use strict";
jQuery('#tzloadding').remove();
HTML-Example
<!-- Begin class loading-page -->
<div id="tzloadding">
<img class="loadding_img" src="images/loadding.GIF" alt="Image">
</div>
<!-- End class loading-page -->
/* Method for parallax */
if ( jQuery('.parallax').length ) {
jQuery('.parallax').each(function(){
jQuery(this).parallax("30%", 0.1);
});
}
HTML-Example in home-style.html page
<!-- Begin class parallax -->
<div class="parallax">
<div class="overlay_parallax"></div>
<div class="container">
<div class="row">
<div class="vc_col-sm-12 wpb_column vc_column_container ">
<div class="wpb_wrapper">
<div class="tz-testimonials">
<div class="container">
<ul class="tz-quote">
<li>
<i class="fa fa-heart-o icon_testimonials"></i>
<h3 class="title_testimonials">
<i class="fa fa-quote-left"></i>Better to have loved and lost, than to have never love
<i class="fa fa-quote-right"></i>
</h3>
<span class="author_testimonials">~ ST.AUGUSTINE ~</span>
</li>
<li>
<i class="fa fa-heart-o icon_testimonials"></i>
<h3 class="title_testimonials">
<i class="fa fa-quote-left"></i>Nulla facilisis vitae metus quis consequat
<i class="fa fa-quote-right"></i>
</h3>
<span class="author_testimonials">~ ST.AUGUSTINE ~</span>
</li>
<li>
<i class="fa fa-heart-o icon_testimonials"></i>
<h3 class="title_testimonials">
<i class="fa fa-quote-left"></i>Integer vulputate molestie ante, vel pellentesque
<i class="fa fa-quote-right"></i>
</h3>
<span class="author_testimonials">~ ST.AUGUSTINE ~</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End class parallax -->
/**
* Method For Show and hidden form create account and Quick view product
* -----------------------------------------------------------------------------
*/
jQuery('#createaccount').on( "click", function() {
if(jQuery(this).is(":checked"))
{
jQuery('.create-account').css('visibility','visible');
} else {
jQuery('.create-account').css('visibility','hidden');
}
});
jQuery('.tzquick-view').on( "click", function() {
jQuery('.tzquick-wrap').addClass('tzquick-wrap-eff');
});
jQuery('.tzdelete-quick').on( "click", function() {
jQuery('.tzquick-wrap').removeClass('tzquick-wrap-eff');
});
HTML-Example in home-style.html page
<!-- Begin class form-row form-row-wide -->
<p class="form-row form-row-wide">
<input class="input-checkbox" id="createaccount" type="checkbox" name="createaccount" value="1" />
<label for="createaccount" class="checkbox">Create an account?</label>
</p>
<!-- End class form-row form-row-wide -->
<!-- Begin class tzmeta-item -->
<div class="tzmeta-item">
<a href="#" rel="nofollow" data-product_id="366" data-product_sku="005" data-quantity="1" class="button add_to_cart_button product_type_simple">Add to cart</a>
<span data-option-id="366" class="tzquick-view">QUICK VIEW</span>
</div>
<!-- End class tzmeta-item -->
Thanks for using our product. If you need any helps, you can send your questions to this email support@templaza.com