ZER0 Documentation

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!

Zero Slider
Creative side menu
Video background header
Parallax background sections
Awesome Fancybox
Awards counter
Newsletter section
HTML5 - CSS3
Based on Bootstrap 3.x
Responsive design
Clean & Commented html
Retina ready
Simple specific work detail page
404 & 500 error pages are included
Cross browsers support
Adapted with unlimited colors.
Amazing portfolio features.
Perfect typography
Easy to edit GOOGLE MAPS api
Awesome BX carousel
Google fonts
More than 100+ font icons
Free quick life-time support

This theme is a builted on bootstrap framework with four columns. All of the information within the main content area is nested within a 'section'.

General Markup

The general template structure is the same throughout the template. Here is the general structure.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ZERO</title>
<meta name="author" content="Themezinho">
<meta name="description" content="ZER0 - HTML5 digital creative agency template">
<meta name="keywords" content="html, template, carousel, theme, zinho, agency, html5, look, fancy, premium">

<!-- SOCIAL MEDIA META -->
<meta property="og:description" content="ZER0 - HTML5 digital creative agency template">
<meta property="og:image" content="http://www.acrocapoeira.com/zero/preview.png">
<meta property="og:site_name" content="Zero">
<meta property="og:title" content="Zero">
<meta property="og:type" content="website">
<meta property="og:url" content="http://www.acrocapoeira.com/zero">

<!-- TWITTER META -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@themezinho">
<meta name="twitter:creator" content="@themezinho">
<meta name="twitter:title" content="Zer0">
<meta name="twitter:description" content="ZER0 - HTML5 digital creative agency template">
<meta name="twitter:image" content="http://www.acrocapoeira.com/zero/preview.png">

<!-- CSS Files -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/ionicons.min.css" rel="stylesheet">
<link href="css/outline.css" rel="stylesheet">
<link href="css/jquery.bxslider.css" rel="stylesheet">
<link href="css/animate.css" rel="stylesheet">
<link href="css/owl.carousel.css" rel="stylesheet">
<link href="css/odometer.css" rel="stylesheet" type="text/css" media="all"/>
<link href="css/base.css" rel="stylesheet"/>
<link href="css/jquery.fancybox.css" rel="stylesheet"/>
<link href="css/outline.css" rel="stylesheet" type="text/css">
<link href="css/component.css" rel="stylesheet" type="text/css">
<link href="css/style.css" rel="stylesheet">

<!-- 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="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>

You can start to put your content here.

</body>
</html>

How to edit ZER0 link color and hover

It is very easy to change main color of ghost link

/* Buttons */
.btn-zero{ padding:8px 20px; font-size:18px; font-weight:700; font-family:Montserrat; border:1px solid #1ECD97; color:#1ECD97;}

.btn-zero:hover{ background:#1ECD97; border:1px solid #1ECD97; color:#fff; text-decoration:none;}

Change Main Title

Here is the css style for site general title typography.

/* Main title */
.main-title{ width:100%; display:inline-block; margin-top:0; margin-bottom:60px; position:relative; font-size:40px;}

.main-title:before{content:''; width:320px; height:1px; float:left; background:#e2e2e3; position:absolute; left:50%; margin-left:-160px; bottom:-28px;}

.main-title:after{content:''; width:48px; height:16px; background:url(../images/triangles.jpg) bottom no-repeat; position:absolute; left:50%; bottom:-35px; margin-left:-24px;}

.sub-title{ font-size:24px; margin-bottom:60px; line-height:28px; color:#666; font-weight:normal; font-family:'Vollkorn', serif;}

Stylesheets

Here's a list of the stylesheet files I'm using with this template, you can find more information opening each file:

File Name	Description
`animate.css`	Wow animation effect
`base.css`	Side menu
`flipclock.css`	Coming soon flick clock css
`bootstrap.css`	Bootstrap main css
`component.css`	Portfolio grid css
`ionicons.min.css`	ION icon font file
`jquery.bxslider.css`	Bx slider - carousel
`jquery.fancybox.css`	Fancybox css fle
`owl.carousel.css`	OWL Slider css file
`ionicons.min.css`	ION icon font file
`odometer.css`	Counter for awards
`outline.css`	Icon fonts file
`style.css`	Zero main css file

The second file contains all of the specific stylings for the page. The file is separated into sections using:

	1. Body
		1.1 Headlines
		1.2 Tools Elements
		1.3 Spacing Elements
		1.4 Form Elements 
		1.5 Main Sections // header, footer, section
		1.6 Loader // .loader
		1.7 Buttons // .btn-zero
		1.8 Main title // .main-title, sub-title
		1.9 Overlay // .overlay, .overlay-video
		
	2. Header Menu
		2.1 Navbar // .navbar-default
		2.2 Logo // .logo
		2.3 Toogle // .navbar-toggle
		
	3. Side Menu
		3.1 Side menu // .navbar-collapse
		
	4. Header
		4.1 Header // header
		4.2 Header elements 
		4.3 Header Video BG // video-bg 
		
		
	5. Icon Features
		5.1 Icon features elements
		
	6. Content Carousel
		6.1 Content Carousel elements
		6.2 Carousel // .bx-viewport
		6.3 Button // .btn-zero
		
		
	7. About Us
		7.1 About Us elements
		7.2 Talents // .talents
		7.3 Services List // .services-list
		
	8. Progress steps
		8.1 Progress steps elements
		
	9. Clients
		9.1 Clients elements
		9.2 Client Description // .work .desc
		
	10. Recent Works
		10.1 Recent Works elements
		10.2 Button // .btn-zero
		10.3 Works Grids // .grid
		10.4 Works Description // figcaption
		
	11. Works Detail
		11.1 Works Detail elements
		11.2 Carousel // .bx-viewport
		11.3 Carousel Pagers // .bx-pager
		
	12. Latest News
		11.1 Lates News elements
		11.2 Carousel // .bx-viewport
		11.3 Carousel Pagers // .bx-pager
		11.4 Related News // .related-news
		11.5 Pagement // .pagement
		11.6 Side Bar // .side-bar
		11.7 Search Box // .search-box
		11.8 Related News // .related-news
		11.9 Archives // .archives
		11.10 Tags // .tags
		
	13. Home quote
		13.1 Home quote elements
		
	14. Process
		14.1 Process elements
		14.2 Circles // .circles
		
	15. Team
		15.1 Team elements
		
	16. Awards
		16.1 Awards elements
		16.2 Video // video
		16.3 Pattern // .pattern
		16.4 Icon Border // .icon-border
		16.5 Counter // .odometer
		
	17. Logos ( client.html )
		17.1 Logos elements
		17.2 Logo description // .work .desc
	
	18. Contact
		18.1 Contact elements
		18.2 Footer social media // .social-media
		18.3 Newsletter // form
		
	19. Footer
		19.1 Footer elements
		19.2 Footer social media // .social-media
		19.3 Newsletter // form
		
	20. Shorcodes
		20.1 Tab // .nav-tabs
		20.2 Alerts // .alert
		20.3 Acordeon // .panel-group
		
	21. Loader animation
		21.1 Loader elements
		
	22. Mobile Fixes
		22.1 Elements for mobile fixes

JavaScript Files

This is the list of all the jquery files are we used for our theme.

Tag	Description
`bootstrap.min.js`	Bootstrap jquery framework
`classie.js`	Help functions for portfolio
`flipclock.js`	Flip Clock for coming soon js
`jquery.stellar.js`	Parallax background effect
`colorfinder-1.1.js`	Another functions for portfolio
`gridScrollFx.js`	Portfolio main jquery
`imagesloaded.pkgd.min.js`	Function for image loads (for portfolio)
`jPushMenu.js`	Side menu jquery
`jquery.bxslider.min.js`	Bx carousel jquery file
`jquery.fancybox.js`	Most famous litebox jquery
`jquery.min.js`	Latest version of jquery library
`masonry.pkgd.min.js`	Masonry jquery
`owl.carousel.js`	OWL Slider main jquery
`modernizr.custom.js`	Necessary functions jquery
`odometer.js`	Counter jquery for awards
`wow.js`	Scrolling animation jquery
`zero.js`	All the jquery parameters

Carousel effect

It's so easy to edit bx carousel paramaters, open up the file scripts.js and change the following code:

$('.our-talents').bxSlider(
        {
			auto:true,
           controls: false,
			moveSlides: 1,
           pager: true,
				
        });
		
		
		$('.works-detail-carousel').bxSlider(
        {
			auto:true,
           controls: false,
			moveSlides: 1,
           pager: true,
				
        });

There is no PSD file in this theme

I've used the following images, icons or other files as listed.

JavaScript

Images

http://thestocks.im/ — Some of images we used from here
http://www.shutterstock.com/ — Some of images we used from here

Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. I'll do my best to assist you. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

ZER0 Documentation

Markup Markup customization and highlights

General Markup

How to edit ZER0 link color and hover

Change Main Title

Styles Styles customization and highlights

Stylesheets

Table of contents

JavaScript JavaScript customization and highlights

JavaScript Files

Carousel effect

Photoshop Files Photoshop customization and highlights

Credits Files Some of your credits and sources

JavaScript

Images