Increase Site Template Help
HTML5
- Created: 05/31/2013
- By: cmsmasters
- increase-html.cmsmasters.net/
- Email: cmsmstrs@googlemail.com
Thank you for purchasing our template Increase. If you have any questions that are beyond the scope of this help file, please feel free to email via this form.
HTML Structure
This zip archive contains 42 html files (2 page with slider, different content pages, many pages with shortcodes and typography, left/right sidebar, full width page, sitemap, 404 error page, sortable portfolio pages, 2 blog pages, contact page, etc.
Main navigation and logo are located in the upper zone - header tag with id "header":
<!-- __________________________________________________ Start Header -->
<header id="header">
<div class="header_inner">
<div class="social_block">
<ul>
<li>
<a href="#" target="_blank">
<img alt="twitter" src="images/socicons/twitter.png">
</a>
</li>
...
</ul>
<a class="social_toggle" href="#"><span></span></a>
</div>
<a class="logo" href="index.html"><img src="images/logo.png" width="190" height="69" alt="" /></a>
<a class="resp_navigation" href="javascript:void(0);"><span></span></a>
<div class="cl"></div>
<nav>
<ul id="navigation">
<li class="current_page_item drop"><a href="javascript:void(0);"><span>Home</span></a>
<ul>
<li class="current_page_item"><a href="index.html"><span>Revolution Slider</span></a></li>
<li><a href="index-1.html"><span>Layer Slider</span></a></li>
</ul>
</li>
<li class="drop"><a href="javascript:void(0);"><span>Features</span></a>
<ul>
<li class="drop"><a href="javascript:void(0);"><span>Shortcodes</span></a>
<ul>
<li><a href="buttons.html"><span>Buttons</span></a></li>
<li><a href="boxes.html"><span>Information Boxes</span></a></li>
...
</ul>
<div class="cl"></div>
</nav>
<div class="cl"></div>
</div>
</header>
<!-- __________________________________________________ Finish Header -->
Slider on main page is in "section" tag with id "top" (each slider requires it’s special HTML code - see the page examples):
<!-- __________________________________________________ Start Top -->
<section id="top">
<div class="top_inner">
<div class="wrap_rev_slider">
...
</div>
</div>
</section>
<!-- __________________________________________________ Finish Top -->
You can add Top Sidebar in the section with id "top_sidebar":
<!-- __________________________________________________ Start Top Sidebar --> <section id="top_sidebar"> <div class="one_third"> <div class="aligncenter"> <h2>It’s Wise.</h2> <img src="images/img/top_sidebar_1.png" alt="" /> <p>Ut placerat nisi quis magna rutrum congue cursus eros dictum. Mauris luctus ultrices dui sed molestie.Nulla dolor urna, semper sit amet bibendum</p> <a href="#" class="button"><span><span>Learn More</span></span></a> </div> </div> <div class="one_third"> ... </div> <div class="one_third"> ... </div> </section> <!-- __________________________________________________ Finish Top Sidebar -->
Also you can add a page title in the "div" with class "headline":
<!-- __________________________________________________ Start Page -->
<section id="page">
<a href="#" id="slide_top"></a>
<!-- __________________________________________________ Start Header -->
<header id="header">
...
</header>
<!-- __________________________________________________ Finish Header -->
<div class="wrap_headline">
<div class="headline">
...
</div>
</div>
All information inside of main content area is contained in "section" with id "middle":
<!-- __________________________________________________ Start Page -->
<section id="page">
<a href="#" id="slide_top"></a>
<!-- __________________________________________________ Start Header -->
<header id="header">
...
</header>
<!-- __________________________________________________ Finish Header -->
<div class="container">
<!-- __________________________________________________ Start Top -->
<section id="top">
...
</section>
<!-- __________________________________________________ Finish Top -->
<!-- __________________________________________________ Start Middle -->
<section id="middle">
<div class="middle_inner">
<!-- __________________________________________________ Start Content -->
<section id="middle_content">
<div class="entry">
...
</div>
</section>
<!-- __________________________________________________ Finish Content -->
</div>
</section>
</div>
</section>
Extra navigation (Breadcrumbs) is in - "div" with class "cont_nav":
<div class="wrap_cont_nav">
<div class="cont_nav">
<a href="index.html">Home</a> / <a href="shortcodes.html">Features</a> / <a href="heading.html">Heading Templates</a> / Standard Heading
</div>
</div>
Middle sidebar on main pages is in "section" with class "middle_sidebar":
<!-- __________________________________________________ Start Middle Sidebar --> <section class="middle_sidebar"> <div class="one_third"> <aside class="widget widget_text"> <h4>Who we are?</h4> <figure><img class="fullwidth" src="images/img/msidebar_1.jpg" alt="" /></figure> <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque tristique volutpat nunc, id rhoncus augue tristique sed.</p> <a href="#" class="button"><span><span>Learn More</span></span></a> </aside> </div> <div class="one_third"> <aside class="widget widget_custom_comments_entries"> ... </aside> </div> <div class="one_third last"> <aside class="widget widget_custom_recent_entries"> ... </aside> </div> </section> <!-- __________________________________________________ Finish Middle Sidebar -->
"Section" with id "bottom" includes bottom widgets. You’ll find this zone in the bottom of the page:
<!-- __________________________________________________ Start Bottom -->
<section id="bottom">
<div class="bottom_inner">
<div class="one_fourth">
<aside class="widget widget_custom_portfolio_entries">...</aside>
</div>
<div class="one_fourth">
<aside id="custom-twitter-4" class="widget widget_custom_twitter_entries">...</aside>
</div>
...
</div>
</section>
<!-- __________________________________________________ Finish Bottom -->
You may specify copyright and add links to your pages or other text in the footer - "div" tag with id "footer":
<!-- __________________________________________________ Start Footer -->
<footer id="footer">
<div class="footer_inner">
<span>Increase © 2013 All rights reserved</span>
<div class="fr">
<ul id="footer_nav" class="footer_nav">
<li><a href="#">Home</a></li>
<li><a href="#">Features</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contacts</a></li>
</ul>
</div>
</div>
</footer>
<!-- __________________________________________________ Finish Footer -->
CSS Files & Structure
The Increase template includes 9 css files.
<head>
<meta content="text/html;charset=utf-8" http-equiv="content-type" />
<meta name="description" content="cmsmasters responsive html5 website template" />
<meta name="keywords" content="html5, css3, template, responsive, adaptive" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<link rel="shortcut icon" href="images/favicon.png" type="image/x-icon" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/styles/fonts.css" type="text/css" media="screen" />
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Droid+Sans:400,700" type="text/css" />
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Oxygen:400,300,700" type="text/css" />
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Headland+One" type="text/css" />
<link rel="stylesheet" href="css/styles/jackbox.css" type="text/css" media="screen" />
<link rel="stylesheet" type="text/css" href="revolution/css/captions-original.css" media="screen" />
<link rel="stylesheet" type="text/css" href="revolution/css/captions.css" media="screen" />
<link rel="stylesheet" type="text/css" href="revolution/css/settings.css" media="screen" />
<link rel="stylesheet" href="css/styles/jquery.jPlayer.css" type="text/css" media="screen" />
<!--[if lt IE 9]>
<link rel="stylesheet" href="css/styles/ie.css" type="text/css" />
<link rel="stylesheet" href="css/styles/ie_css3.css" type="text/css" media="screen" />
<![endif]-->
<title>Increase - Responsive HTML5 Site Template</title>
</head>
General css files
are style.css and fonts.css, which contain parameters for all html-pages.
style.css is divided into zones with html-files' id's.: "header", "top", "middle", "portfolio", "content", "sidebar", "bottom", "footer", "widgets", "Responsive Content Slider".
/* ---------------------------------- Header ----------------------------------------------*/ ... /* ---------------------------------- Top ----------------------------------------------*/ ... /* ---------------------------------- Middle ----------------------------------------------*/ ... /* ---------------------------------- Portfolio ----------------------------------------------*/ ... /* ---------------------------------- Content ----------------------------------------------*/ ... /* ---------------------------------- Sidebar ----------------------------------------------*/ ... /* ---------------------------------- Bottom ----------------------------------------------*/ ... /* ---------------------------------- Footer ----------------------------------------------*/ ... /* ---------------------------------- Widgets ----------------------------------------------*/ ... /* ---------------------------------- Responsive Content Slider ----------------------------------------------*/ ... /* ---------------------------------- Media Queries ----------------------------------------------*/ ... /* ---------------------------------- Retina ----------------------------------------------*/ ...
fonts.css contains main fonts and colors and you can easily change them.
Also there are following secondary css-files:
ie.css - configuration file of Internet Explorer special settings.
ieCss3.css - configuration file of Internet Explorer special settings.
jquery.jPlayer.css - special configuration file for jQuery JPlayer.
jquery.isotope.css - special configuration file for isotope animation.
jquery.revolution.css - special configuration file for Revolution slider.
JavaScript Files & Structure
Increase template contains 16 JavaScript files.
1. jquery.min.js
2. jackbox.js
3. respond.min.js
4. jackbox-lib.js
5. jquery.gMap.js
6. jquery.script.js
7. jquery.easing.js
8. jquery.flickrfeed.min
9. jquery.isotope.min
10. jquery.validationEngine-lang.js
11. jquery.validationEngine.js
12. modernizr.custom.all.js
13. jquery.jPlayer.min.js
14. jquery.jPlayer.playlist.min.js
15. jquery.isotope.run.js
16. jquery.jtweetsanywhere
17. jquery.themepunch.revolution.js
18. jquery.themepunch.revolution.min.js
19. jquery.themepunch.plugins.min.js
1. JQuery is a JavaScript Framework, which significantly reduces the amount of code that user has to write himself, version 1.7.2.
2. JQuery-plugin is responsible for JackBox lightboxes.
3. JQuery-plugin for css3 media queries
4. JQuery lightbox plugin libraries.
5. JQuery-plugin of Google Maps. It has following parameters:
jQuery(document).ready(function($){
jQuery('#google_map_1').gMap({ // used id
zoom:7, // zoom parameter (1 - 19)
markers:[{
address:'', // address parameter
latitude:51.486782, // latitude paramrter
longitude:-0.143242, // longitude parameter
html:'London, United Kingdom', // html text of the speechcloud
popup:true // allows to open/close speechcloud
}],
maptype:google.maps.MapTypeId.ROADMAP // map type
mapTypeControl:true, // allows to enable/disable type control
zoomControl:true, // allows to enable/disable zoom control
panControl:true, // allows to enable/disable pan control
scaleControl:true, // allows to enable/disable scale control
streetViewControl:true, // allows to enable/disable street view control
scrollwheel:true // allows to enable/disable scrollwheel
});
});
6. JQuery libraries and user interface scripts include:
- Social Sharing JQuery-plugin - used in sharing
- Plus some other scripts.
8. JQuery plugin for flickr widget
10. Form validation languages.
11. File for form validation.
12. Modernizr is a small JavaScript library that detects the availability of native implementations for next-generation web technologies.
13. File for form JPlayer.
14. File for form JPlayer.
15. File for sortable portfolio.
16. JQuery plugin for twitter widget.
17. JQuery Revolution slider plugin.
18. JQuery Revolution slider file.
Structure of Responsive version
1. Images with class fullwidth are adaptive to your screen.
2. Please pay attention that there are different recommended image proportions for various website elements:
Post Type Shortcode, Person Block Shortcode, a 3 or 4 - Columns Portfolio - 1x1 resolution (square-shaped);
2 Columns Portfolio - 14x9 resolution;
1 Columns Portfolio and other parts of content - 16x9 resolution.
3. Re-sizable images (with class "fullwidth") should have at least 440x250 aspect ratio.
4. In the head you need to connect respond.min.js file for media queries.
5. You can edit styles for different screens in style.css section Media Queries.
6. You can edit styles for retina screens in style.css section Retina.
Responsive Slider Settings
Here you can see Responsive Slider html structure:
<section class="post_type_shortcode four_blocks">
<h3 class="cms_title">Latest Works</h3>
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery('.post_type_list').cmsmsResponsiveContentSlider( {
sliderWidth : '100%',
sliderHeight : 'auto',
animationSpeed : 500,
animationEffect : 'slide',
animationEasing : 'easeInOutExpo',
pauseTime : 0,
activeSlide : 1,
touchControls : true,
pauseOnHover : false,
arrowNavigation : true,
slidesNavigation : false
} );
} );
</script>
<ul class="post_type_list responsiveContentSlider">
<li class="latest_item">
<article class="portfolio format-album">
<div class="portfolio_inner">
...
</div>
</article>
...
</li>
<li class="latest_item">
<article class="portfolio format-slider">
<div class="portfolio_inner">
...
</div>
</article>
<article class="portfolio format-album">
<div class="portfolio_inner">
...
</div>
</article>
...
</li>
</ul>
</section>
Cmsmasters Responsive Content Slider has such parameters (by default):
jQuery(document).ready(function () {
jQuery('.post_type_list').cmsmsResponsiveContentSlider( {
sliderWidth : '100%',
sliderHeight : 'auto',
animationSpeed : 500,
animationEffect : 'slide',
animationEasing : 'easeInOutExpo',
pauseTime : 0,
activeSlide : 1,
touchControls : true,
pauseOnHover : false,
arrowNavigation : true,
slidesNavigation : false
} );
} );
Revolution Slider
Revolution Slider Structure:
<!-- START REVOLUTION SLIDER 2.3.1 -->
<div id="rev_slider_wrapper" class="rev_slider_wrapper fullwidthbanner-container">
<div id="rev_slider" class="rev_slider fullwidthabanner" style="display:none; max-height:479px; height:479;">
<ul>
<li data-transition="random" data-slotamount="7" data-masterspeed="300" >
<img alt="" src="images/revolution/bg-1.jpg" />
<div data-linktoslide="4" data-easing="easeOutExpo" data-start="2900" data-speed="1000" data-y="283" data-x="671" class="caption sft tp-caption start">
<img alt="" src="images/revolution/img-2.jpg" />
</div>
<div class="caption randomrotate tp-caption start" data-easing="easeOutExpo" data-start="2200" data-speed="700" data-y="283" data-x="883">
<img alt="" src="images/revolution/img-3.jpg" />
</div>
<div data-easing="easeOutBack" data-start="2000" data-speed="800" data-y="64" data-x="671" class="caption lfb tp-caption start">
<img alt="" src="images/revolution/img-1.jpg" />
</div>
</li>
<li data-transition="random" data-slotamount="7" >
...
</li>
...
</ul>
</div>
</div>
Revolution Slider Settings:
1. The Default parameters of the Plugin- delay - time of displaying the slide in Milliseconds (Default: 9000),
- startheight - basic Height of the Slider in the desktop resolution in pixel, other screen sizes will be calculated from this (Default: 490). The banner won't be heigher than this value.
- startwidth - basic Width of the Slider in the desktop resolution in pixel, other screen sizes will be calculated from this (Default: 890).
- hideThumbs - time before the Thumbs will be hidden (Default: 200),
- touchenabled - enable Swipe Function on touch devices (Default: "on")
Options:
on
off - onHoverStop - stop Timer when hovering the slider
Options:
on
off
<li> - Every item list represents a new banner/slider item.
Transition effects and a possible slide link are defined here:
- data-transition - the slide's transition type
Options:
boxslide
boxfade
slotzoom-horizontal
slotslide-horizontal
slotfade-horizontal
slotzoom-vertical
slotslide-vertical
slotfade-vertical
curtain-1
curtain-2
curtain-3
slideleft
slideright
slideup
slidedown
fade - data-slotamount - the number of slots or boxes the slide is divided into. If you use boxfade, over 7 slots should not be used.
- data-link - the entire slide link
- data-delay - a new delay value for the Slide. If no delay is defined per slide, the delay defined via Options will be used.
Each item list should include:
- an image
as Background Image
OR - a colored background image AND a colored bg caption which has full width/height.
<img src="images/slides/coloredbg.png"> <div class="caption coloredbg fade" data-x="0" data-y="0" data-speed="10" data-start="0" style="background-color:#ff9118; width:100%;height:100%"></div>
Each List item can include:
some <div>s containing captions (class="caption"), this could contain embedded video iframes also
<li data-transition="boxslide" data-slotamount="7" data-link="http://www.google.de"> <img src="images/slides/image1.jpg"> <div class="caption sft" data-x="400" data-y="100" data-speed="700" data-start="1700" data-easing="easeOutBack">KICKSTART YOUR WEBSITE</div> <div class="caption sfb" data-x="400" data-y="142" data-speed="500" data-start="1900" data-easing="easeOutBack">WITH SLIDER REVOLUTION!</div> <div class="caption lfr" data-x="510" data-y="210" data-speed="300" data-start="2000">UNLIMITED TRANSITIONS</div> </li>
3. Captions
Captions are Containers which can be customized via CSS, classes for the start animation and some data options.
The CSS for the caption added in the jquery.revolution.css file because it depends strongly on the responsive Sizing.
The options are:
- animation class
Options:
sft - Short from Top
sfb - Short from Bottom
sfr - Short from Right
sfl - Short from Left
lft - Long from Top
lfb - Long from Bottom
lfr - Long from Right
lfl - Long from Left
fade - fading
- data-x - the horizontal position in the standard (startwidth option defined) screen size (other screen sizes will be calculated)
- data-y - vertical position in the standard (startheight option defined) screen size (other screen sizes will be calculated)
- data-speed - duration of the animation in milliseconds
- data-start - caption delay in milliseconds(time before caption will be shown)
- data-easing - special animation easing effect
Options:
easeOutBack
easeInQuad
easeOutQuad
easeInOutQuad
easeInCubic
easeOutCubic
easeInOutCubic
easeInQuart
easeOutQuart
easeInOutQuart
easeInQuint
easeOutQuint
easeInOutQuint
easeInSine
easeOutSine
easeInOutSine
easeInExpo
easeOutExpo
easeInOutExpo
easeInCirc
easeOutCirc
easeInOutCirc
easeInElastic
easeOutElastic
easeInOutElastic
easeInBack
easeOutBack
easeInOutBack
easeInBounce
easeOutBounce
easeInOutBounce
4. Videos
In order to embed videos in the slider you can embed videos via iframe of your favorite video site that allows this kind of embedding. An example with Vimeo:
<li data-transition="slideup" data-slotamount="20"> <img src="images/slides/image20.jpg" > <div class="caption lfb" data-x="70" data-y="120" data-speed="900" data-start="500" data-easing="easeOutBack"><iframe src="http://video-link" width="460" height="259"></iframe></div> <div class="caption lfb" data-x="550" data-y="258" data-speed="300" data-start="1600" data-easing="easeOutExpo">to your Slides</div> </li>
5. Banner Timer
In order to use a banner timer, you will need to add the markup within the banner or fullwidthbanner divs.
The markup should look like :
<div class="tp-bannertimer"></div>
To add this timer just write display:block; to this class tp-bannertimer in jquery.revolution.css
PSD Files
You’ll find also PSD folder in our template archive.
Note, that this is our working material and there can be some mismatch with design presented in html / php version. But basically you’ll find lots of styles and graphics to change Increase design or use them on your own.
PHP Files & Structure
Increase archive includes as well 1 PHP file.
sendmail.php - this file carries out sending mail via contact form. In this file you need to write your own E-mail instead of "yourmail@mail.com".
<?php
if (isset($_REQUEST['formtype']) && $_REQUEST['formtype'] == 'widget') {
if (isset($_REQUEST['formname'])) {
$formname = $_REQUEST['formname'];
$field_004 = $_REQUEST['field_004'];
$mailAddress = 'yourmail@mail.com'; // Write your email
$subject = 'Subject'; // Write subject of message
$msg = "Message $field_004";
$headers = "MIME-Version: 1.0\r\n Content-type: text/plain; charset=utf-8\r\n From: " . $_REQUEST[$result->slug] . "\r\n Reply-To: " . $_REQUEST[$result->slug] . "\r\n X-Mailer: PHP/" . phpversion();
mail($mailAddress, $subject, $msg, $headers);
}
} elseif (isset($_REQUEST['formtype']) && $_REQUEST['formtype'] == 'contactf') {
if (isset($_REQUEST['formname'])) {
$formname = $_REQUEST['formname'];
$contact_name = $_REQUEST['contact_name'];
$contact_email = $_REQUEST['contact_email'];
$contact_url = $_REQUEST['contact_url'];
$contact_subject = $_REQUEST['contact_subject'];
$contact_message = $_REQUEST['contact_message'];
$mailAddress = 'yourmail@mail.com'; // Write your email
$subject = 'Subject'; // Write subject of message
$msg = "$contact_name\r\n $contact_email\r\n $contact_url\r\n $contact_subject\r\n $contact_message";
$headers = "MIME-Version: 1.0\r\n Content-type: text/plain; charset=utf-8\r\n From: " . $_REQUEST[$result->slug] . "\r\n Reply-To: " . $_REQUEST[$result->slug] . "\r\n X-Mailer: PHP/" . phpversion();
mail($mailAddress, $subject, $msg, $headers);
}
}
Additional Information
For style settings customization, you should change the following parameters:
1. Content font - it’s "Droid Sans", Arial, Geneva, Helvetica, sans-serif; by default, but if you want to use another font you should change it in fonts.css
body {font:13px/18px "Droid Sans", Arial, Geneva, Helvetica, sans-serif; }
2. Headings Font colors - it’s #4e5c64 by default, but if you want to use another font color, you should change in fonts.css:
h1 {color:#4e5c64;}
h2 {color:#4e5c64;}
h3 {color:#4e5c64;}
h4 {color:#4e5c64;}
h5 {color:#4e5c64;}
h6 {color:#4e5c64;}
3. Color Scheme - if you want to use another color scheme for links - you must search this color: #33BEE5 in fonts.css and rewrite it to another one.
4. Headings Google Fonts - by default it "Crete Round" and "Open Sans", but if you want to use another google font you must add this code in all HTML files that you've been using:<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Oxygen:400,300,700" type="text/css" />5. Content Google Fonts - by default it "Crete Round" and "Open Sans", but if you want to use another google font you must add this code in all HTML files that you've been using:
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Droid+Sans:400,700" type="text/css" />
Changelog
May 31 2013 - Increase 1.0 Release