Image

ZER0 Documentation

ZER0 - HTML5 digital creative agency template build and designed on Bootstrap 3.x Framework. Clean and extremly modern html layout make your agency look fancy. ZER0 also has an amazing portfolio features.As always responsive and retina ready.

Image

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!

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

Table of contents

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

  1. Bootstrap
  2. Master Slider
  3. BX Slider
  4. Push menu
  5. Fancybox
  6. Odometer
  7. Wow effects

Images

  1. http://thestocks.im/ — Some of images we used from here
  2. 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.