Hello! First of all we would like to thank you for purchasing our template! :) If you have any questions that are beyond the scope of this help file, please feel free to send your question on support@anpsthemes.com.
This file will teach you how to set up and use our theme.
This file is really extensive so you might think the theme is hard to use, actually its not, you probably just might jump in the code and explore everything yourself, this file is more of a reference work if you do not know what to do.
Have fun using our template!
Best regards,
AnpsThemes
Template root folder - contains 2 folders and all of the HTML files:
<header class="site-header">
<div class="site-search">
<div class="container">
<!-- Site search -->
</div>
</div>
<div class="top-bar">
<div class="container">
<!-- Top bar content goes here -->
</div>
</div>
<div class="nav-wrap">
<div class="container">
<div class="site-logo retina"><!-- Logo goes here --></div>
<!-- Search icon next to menu -->
<button class="fa fa-search"></button>
<!-- Used for mobile menu -->
<button class="navbar-toggle" type="button">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<nav class="site-navigation"><!-- Site navigation goes here --></nav>
</div>
</div>
</header>To create the site header, you need to create an element with the class .site-header, then you need to create 3 child elements: .site-search (used for the site search area), .top-bar (used for top bar widgets - useful for showing social icons, telephone number, text and email) and .nav-wrap (which contains the logo and site navigation).
<div class="site-search">
<div class="container">
<!-- Site search -->
<input type="text" placeholder="type and press ‘enter’">
<span class="close">×</span>
</div>
</div><div class="top-bar">
<div class="container">
<div class="left"><!-- Left top bar content goes here --></div>
<div class="right"><!-- Right top bar content goes here --></div>
</div>
<!-- Close button -->
<span class="close fa fa-chevron-down"></span>
</div>You can add the widgets on either on the left or right side of the top bar area. A social widget looks like:
<div class="widget">
<ul class="social">
<li><a href="#" class="fa fa-facebook"></a></li>
<li><a href="#" class="fa fa-twitter"></a></li>
</ul>
</div><nav class="site-navigation">
<ul>
<li class="menu-item-has-children current_page_item">
<a href="index.html">Home</a>
<ul class="sub-menu">
<li><a href="index.html">Home view 1</a></li>
<li><a href="index-v2.html">Home view 2</a></li>
<li><a href="index-v3.html">Home view 3</a></li>
</ul>
</li>
</ul>
</nav>The above code represents a menu with a drop down that contains 3 elements. You can nest the drop down menus 3 levels deep. The class current_page_item specifies the currently visited page and need to be added to the LI element.
To add the sticky menu, just simply add .sticky to the .site-header element, like so:
<header class="site-header sticky"></header>
<footer class="site-footer">
<div class="container">
<div class="row">
<!-- First footer area -->
<div class="col-md-3">
<img src="images/footer_logo.png" alt="Footer logo">
</div>
<!-- Second footer area -->
<div class="col-md-3">
<h3 class="widget-title">Recent posts</h3>
<ul class="recent-posts">
<li>
<a href="#">Bootstrap related post</a>
<span class="post-date">March 12, 2014</span>
</li>
</ul>
</div>
<!-- Third footer area -->
<div class="col-md-3">
<h3 class="widget-title">Navigation</h3>
<ul class="menu">
<li><a href="index.html">Home</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
</ul>
</div>
<!-- Fourth footer area -->
<div class="col-md-3">
<h3 class="widget-title">Tags</h3>
<div class="tagcloud">
<a href="#">web</a>
<a href="#">design</a>
</div>
</div>
</div>
</div>
<div class="copyright-footer text-center">
<div class="container">
<div class="row">
copyright 2013 © anpsthemes.com
</div>
</div>
</div>
</footer>
Above code shows a site footer with 4 columns (you can use different bootstrap column classes to fit your layout). You need to use .widget-title to specify a title.
Copyright footer needs to be placed inside .site-footer. It can hold any contnent you want, just do not forget to wrap it with .container.
<article class="post">
<header>
<a href="blog-single.html"><img src="images/demo/blog-1.jpg" alt="Blog 1"></a>
<div class="post-meta">
<ul>
<li><button><i class="fa fa-calendar"></i></button><div class="meta-content"><span>15.11.2013</span></div></li>
<li><button><i class="fa fa-comment"></i></button><div class="meta-content"><span>3 comments</span></div></li>
<li><button><i class="fa fa-folder-open"></i></button><div class="meta-content"><span>Carrer, Photography, Post</span></div></li>
<li><button><i class="fa fa-user"></i></button><div class="meta-content"><span>posted by Admin</span></div></li>
</ul>
</div>
</header>
<a href="blog-single.html"><h1>Awesome blog post</h1></a>
<div class="post-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur quis diam mauris. Nam suscipit massa nec pretium ultrices. Quisque ante enim, fermentum sed euismod non, blandit sed erat. Nunc rhoncus porttitor elit nec eleifend. In fermentum, tortor vitae commodo euismod, metus leo vehicula velit, sit amet dignissim dui lorem et elit.</p>
</div>
<a class="btn btn-md" href="blog-single.html">Read more</a>
</article><article class="post style-2">
<header>
<span>15.11.2013</span>
<a href="blog-single.html"><h1>Awesome blog post</h1></a>
<div class="post-meta">
<ul>
<li><i class="fa fa-comment"></i>3 comments</li>
<li><i class="fa fa-folder-open"></i>Carrer, Photography, Post</li>
<li><i class="fa fa-user"></i>posted by Admin</li>
</ul>
</div>
</header>
<div class="post-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur quis diam mauris. Nam suscipit massa nec pretium ultrices. Quisque ante enim, fermentum sed euismod non, blandit sed erat. Nunc rhoncus porttitor elit nec eleifend. In fermentum, tortor vitae commodo euismod, metus leo vehicula velit, sit amet dignissim dui lorem et elit.
</p>
</div>
<a class="btn btn-md" href="blog-single.html">Read more</a>
</article><article class="post style-3">
<header>
<a href="blog-single.html"><img src="images/demo/blog-grid-2.jpg" alt="Blog 2"></a>
<div class="post-meta">
<ul>
<li><button><i class="fa fa-calendar"></i></button><div class="meta-content"><span>15.11.2013</span></div></li>
<li><button><i class="fa fa-comment"></i></button><div class="meta-content"><span>3 comments</span></div></li>
<li><button><i class="fa fa-folder-open"></i></button><div class="meta-content"><span>Carrer, Photography, Post</span></div></li>
<li><button><i class="fa fa-user"></i></button><div class="meta-content"><span>posted by Admin</span></div></li>
</ul>
</div>
</header>
<a href="blog-single.html"><h1>Awesome blog post</h1></a>
<div class="post-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur quis diam mauris.</p>
</div>
</article><div class="col-md-12 blog-masonry">
<article class="post col-sm-4">
<header>
<a class="masonry-hover" href="blog-single.html"><img src="images/demo/blog-masonry-1.jpg" alt="Blog masonry 1"></a>
<a href="blog-single.html"><h1>Awesome blog post, get it now on Altus</h1></a>
<span>15.11.2013</span> / <span>3 comments</span>
</header>
<div class="post-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pellentesque arcu eget magna vulputate, in pharetra nulla ultricies. Proin bibendum ligula risus, sit amet facilisis mi commodo id.</p>
</div>
</article>
</div>You need to have the isotope plugin activated in order for this view to work. You can also change the size of the posts to a different Bootstrap content class.
<a href="#" class="btn btn-lg"><span class="fa fa-arrow-circle-o-down"></span> Buy now</a>Button element require the class .btn and then class that specifies its size (.btn-sm/.btn-md/.btn-lg).
You can also assign either .style-2 or .style-3 classes that will alter the button styling.
<span class="dropcaps">Etiam placerat odio nec quam aliquet, vel consectetur neque varius.</span>This element will style the first letter. By default the letter will be the same color as the text, but you can use .style-2 to make it the color of the theme.
<div class="map" id="map"></div>The above code serves as placeholder for the map.
$("#map").gmap3({
map:{
options:{
zoom: 14,
}
},
getlatlng:{
address: "2 Elizabeth St, Melbourne",
callback: function(results) {
if ( !results ) return;
$(this).gmap3('get').setCenter(new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng()));
$(this).gmap3({
marker:{
latLng:results[0].geometry.location,
options:{
icon: 'images/demo/map-pin.png'
}
}
});
}
}
});In the above code you need to change
Our them uses gmap3 to add Google Maps. You can find many tutorials on their site, if you would like to add functionality, which is not shown in this theme.
<h2 class="heading"><span>Show your work like a pro</span></h2>You can add class .heading to any heading tags (H1, H2, H3, H4 or H5), which makes the heading text center align. You need to wrap the text inside the heading with a span element, to add a border at the bottom of the element.
The icon element uses Font Awesome, which currently has 369 icons. The full list can be found here: http://fortawesome.github.io/Font-Awesome/icons/.
<div class="icon">
<a href="#">
<span class="fa fa-bolt"></span>
<h2>Strikingly Stylish</h2>
<h3 class="style-2">wake your emotions with ampere</h3>
</a>
<p>Lorem ipsum dolor sit amet, <a href="#">consectetur adiping</a> elit. Etiam placerat odio nec quam aliquet, velsa consectetur neque varius.</p>
</div>The icon element requires an element with the class .icon, which then contains a span element with the required class .fa and a specific Font Awesome class that tells which icon to display (in the above example the class name is .fa-bolt). You can then use H2 and H3 classes to add a title and a subtitle (note that you can assign class .style-2 to either of the headings, that adds a lighter color). If you desire the icon to have a link, then you need to wrap all of the above elements inside an anchor tag - like we have done in the above example. The final element you can add is a paragraph, which contains an icon description.
The icon wrapper element (.icon), can also have the class .style-2 that changes icon element styling (the icon does not have a box around it). If you use .style-2, then you can also add .icon-left/.icon-right classes to make the icons show on either side of the icon headings.
<ul class="list">
<li>1170px full width beautiful view</li>
<li>Adapting to mobile phones</li>
<li>Adapting to pads</li>
</ul>Besides using the default HTML lists (circle, disc, square, etc.), we have also added our custom list, which you can access by adding the class .list and one of .circle-arrow / .triangle / .hand / .square / .arrow / .circle / .circle-check to the parent UL tag.
<ul class="logos logos-5">
<li><a href="#"><img src="images/demo/envato.png" alt="Envato logo"><span class="hover"><img src="images/demo/envato-hover.png" alt="Envato logo hover"></span></a></li>
<li><a href="#"><img src="images/demo/dribble.png" alt="Dribble logo"><span class="hover"><img src="images/demo/dribble-hover.png" alt="Dribble logo hover"></span></a></li>
<li><a href="#"><img src="images/demo/facebook.png" alt="Facebook logo"><span class="hover"><img src="images/demo/facebook-hover.png" alt="Facebook logo hover"></span></a></li>
<li><a href="#"><img src="images/demo/twitter.png" alt="Twitter logo"><span class="hover"><img src="images/demo/twitter-hover.png" alt="Twitter logo hover"></span></a></li>
<li><a href="#"><img src="images/demo/behance.png" alt="Behance logo"><span class="hover"><img src="images/demo/behance-hover.png" alt="Behance logo hover"></span></a></li>
</ul>The above example shows how to show 5 logos. The links around the images are not required, but the span with the class .hover is required for the second image (this image will only show once you hover over an image).
<span class="mark">Etiam placerat odio nec quam aliquet, vel consectetur neque varius.</span>This element will change the background of any text. You can also use style-2 to change the background to a black color.
<div class="pricing-table">
<header>
<h2>Second plan</h2>
<span class="currency">$</span><span class="price">20</span>
<div class="date">monthly</div>
</header>
<ul>
<li>1 GB Bandwidth</li>
<li>24/h support</li>
<li class="btn btn-md">Get it now</li>
</ul>
</div>In the header of the pricing table you need to assing a name using a H2 tag, then adding the .currency, price and date (use a block element, so it is placed under the price and currency elements).
Then using an unordered list add the pricing table contnet, including the button to add a link.
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100" style="width: 65%;"></div>
</div>The progress bar element consists of a wrapper tag with a required class .progress and 2 optional classes: .progress-striped (adds stripes over the progress bar) and .active (animates the stripes - only works when stripes are added over the progress bar).
Inside of the progress bar element, you need to add a div with the class .progress-bar and a class that will color the progress bar (.progress-bar-success/.progress-bar-info/.progress-bar-warning/.progress-bar-danger). The using inline styling, you need to specify the progress bar size (in the above example we set it to 65%).
Best practices for accessibility also recommends adding the ARIA (Accessible Rich Internet Applications) labels - see our progress bar example on how Bootstrap has added them.
To add the boxed layout, just need to add .boxed to the body element. Then you also need to add a class to specify which pattern to display: .pattern-1 - .pattern-10 (the first pattern will display the image that is located in assets/css/boxed/image.jpg and has the background size set to coever), like so:
<body class="boxed pattern-1"></body>The official documentation can be found both online - here or within the documentation folder of our theme, just open the documentation.html in your browser.
This theme has been built using Twitter Bootstrap. We did not use every aspect of it, but only include parts of it. For example, we have removed the default Glyphicons font icons and include Font Awesome instead.
If you want to use a feature of Bootstrap that we did not include, then go to assets/sass/bootstrap.scss and uncomment the import functions.
Many elements used in this theme are almost identical to Bootstrap components, so you check their documentation if you need extra help or check if they have extra functionality that is outside the scope of our theme.
Our theme has been build using Sass(Syntactically Awesome Style Sheets) and the sass version of Bootstrap. This means you can quite easily add your own markup and change the theme to fit your project.