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 open a support ticket at Anps support
This file will teach you how to set up and use our HTML template.
This file is really extensive so you might think the theme is hard to use, actually it is 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
Folder Structure
Template root folder - contains all of the HTML files and folders:
css - theme stylesheets, both normal and minified versions
fonts - Font Awesome
js - contains both normal and minified versions of the scripts and all the included libraries
scss - here you can change the theme styling to fit your project. We recommend that you create a new file that will contains all your custom styles (for example _custom_styles.scss) and importing it in the core.scss file, so you won't have any issues updating the theme.
images - contains all theme icons and demo images
php - contains the contact form php files.
revolution - revolution slider files.
Server
Certain features of our template require a server to function. This means you cannot access the HTML files directly (using file:// protocol), to fully use our template.
Features that require a server:
Contact form
Revolution slider
We recommend that you install a local server like MAMP (OS X) or WAMP (Windows). Another option is to upload the template to your online server and work on it there.
Top bar
Top bar is optional on the page, inside the top bar, different elements can be added, like contact info and social icons:
Site header must have a class .site-header, inside there must be a class called .header-wrap.
In the header wrap you can find logo and site-navigation. Please refere to code example below.
Site navigation
In the example below there are three things you can notice:
site-search, optional above navigation bar and the main menu.
There are two classes you can use in the header to change its styling:
.site-header.transparent
.site-header.classic
The main difference is the positioning of the header. Transparent option floats on top and it is convinient to use on a page with a slider or a hero image. Classic header on the other hand is positioned normally and it is supposed to be used on all other pages.
Sticky menu
To enable sticky menu, a class .stickyheader should be added to the body element.
Above navigation bar
Above navigation bar is optional. It offers a possibility to add additional elements above main navigation. Unlike the top-bar, this elements will stay visible also in a sticky version of the menu. Another difference is that it is positioned right from the logo, not full width as the tob bar.
Main menu
Conserning the main menu, just make sure the nested ul has class .sub-menu. And the li, that contains the nested ul, has class .menu-item-has-children
Page content
Below the header there the main content starts. The class used for main content is .site-main.
The following elements can be placed inside:
Page header
breadcrumbs
page content or different sections
sidebar
Page header
This element is used to display the page title with an optional video or image background. It also has two size versions: small and large. The large version can be useful, if you want the transparent menu version, as it will be position on top of the page header element.
In the examples we use a H1 element, but you can change to H2, H3, etc.
A page content usually resides in a row with a container. These are bootstrap classes, please refer to bootstrap documentation for more information on them.
Page content can be either full-width or if needed a sidebar can be added.
Depending on this, you can add bootstrap classes as .col-md-12 or col-md-9 to the page-content.
If the layout of the page is more complex (think: front page), where some of the section are fullwidth and other reside in a container, than we can use another aproach to build the page layout - with sections.
There are various different sections used on our demos, including:
Features
Jumbotron
Recent-news
Projects
When a section is limited in width on desktops, its content is nested within container and row, than it is additionaly structured with using bootstrap classes (as col-md-6 or col-md-12). Within the sections, different elements are used (reffer to "ellements").
Sidebar
There are basicly two sidebars possible, a right sidebar or a left sidebar.
The classes for the sidebars are .sidebar-left and .sidebar-right.
In sidebars various widgets can be placed. The basic structure looks like this:
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam efficitur rutrum diam, ut commodo ipsum elementum ac. Duis quis iaculis purus, eget mattis urna. Quisque consectetur odio ac ante fermentum malesuada. Nullam eget
lectus euismod, rutrum quam quis, venenatis ligula. Integer egestas elit ipsum. Vivamus nec egestas turpis, et semper neque.</p>
</blockquote>
Above is shown an example for style 1 of the blockquote element. Use .blockquote-style-2 class on the blockquote element to use the secondary style version.
Button element requires the .btn class and a class that specifies its size (.btn-sm / .btn-md / .btn-lg).
Design classes:
.btn-normal - default button version
.btn-gradient - gradient overlay
.btn-shadow - shadow begin the button
.btn-dark - dark version with a light hover
.btn-light - light version with a dark hover style
.btn-minimal - a text only version (no background)
.btn-gradient and .btn-shadow can be added to other design classes. This means you can have a light button with a shadow. The only exception is the minimal buttons, which cannot have a shadow or gradient.
Recent news makes use of a Owl Carousel. Please refer to owl carousel documentation for more in-depth carousel documentation.
Contact Form
To make the contact form send informations to the correct email, please go to /php/email.php and set your email settings. Both mail function and SMTP are supported. To turn on SMTP, set $useSMTP to "true".
When creating tabs, have in mind, that tabs navigation and tabs panes are coded separately.
Tabs can be either horizontal as the default example above, or vertical. To use different styles, modify the classes on "tabs" element. You can choose between these settings:
.tabs-default
.tabs-side .tabs-side-left
.tabs-side tabs-side-right
.tabs-minimal
Table
Table example
There are three styles of tables provided within the template. To switch them, add the following classes to the table element:
.table
.table .table-bordered
.table .table-striped
To make them responsive on mobile devices, wrap the table in the div with class table-responsive
Progress bars
Progress bars example
A standard progress bar HTML looks like this:
There are three styles provided and they come in different colors. Without specifying the colors, the progress bars will be grey. You can add stripped style by adding a class .progress-bar-striped. Colors can be defined with following classes:
In the figure there is a big version of selected image displayed.
A div with class gallery-fs-nav represents the gallery navigation.
A div with class gallery-fs-thumbnails are the thumbnails of this images.
Grid version
Grid version
A typical code for the grid gallery looks like this:
In the demo there are two classes used: embed-responsiveembed-responsive-16by9.
Each video wrapper should have the embed-responsive class.
Google maps
HTML (one marker)
<div class="map"
id="map-1"
data-type="ROADMAP"
data-scroll="false"
data-zoom="14"
data-address="Howard University Middle School of Mathematics and Science"
data-icon="images/marker.png"
data-styles='[{"featureType":"landscape","stylers":[{"saturation":-100},{"lightness":65},{"visibility":"on"}]},{"featureType":"poi","stylers":[{"saturation":-100},{"lightness":51},{"visibility":"simplified"}]},{"featureType":"road.highway","stylers":[{"saturation":-100},{"visibility":"simplified"}]},{"featureType":"road.arterial","stylers":[{"saturation":-100},{"lightness":30},{"visibility":"on"}]},{"featureType":"road.local","stylers":[{"saturation":-100},{"lightness":40},{"visibility":"on"}]},{"featureType":"transit","stylers":[{"saturation":-100},{"visibility":"simplified"}]},{"featureType":"administrative.province","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"labels","stylers":[{"visibility":"on"},{"lightness":-25},{"saturation":-100}]},{"featureType":"water","elementType":"geometry","stylers":[{"hue":"#ffff00"},{"lightness":-25},{"saturation":-97}]}]'
style="height: 450px;">
</div>
HTML (multiple markers)
<div class="map"
id="map-1"
data-type="ROADMAP"
data-scroll="false"
data-zoom="14"
data-markers='[{"address": "Howard University Middle School of Mathematics and Science", "center": "true"},
{"address": "Woodley Park"},
{"address": "Langdon, Washington, D.C."}]'
data-icon="images/marker.png"
data-styles='[{"featureType":"landscape","stylers":[{"saturation":-100},{"lightness":65},{"visibility":"on"}]},{"featureType":"poi","stylers":[{"saturation":-100},{"lightness":51},{"visibility":"simplified"}]},{"featureType":"road.highway","stylers":[{"saturation":-100},{"visibility":"simplified"}]},{"featureType":"road.arterial","stylers":[{"saturation":-100},{"lightness":30},{"visibility":"on"}]},{"featureType":"road.local","stylers":[{"saturation":-100},{"lightness":40},{"visibility":"on"}]},{"featureType":"transit","stylers":[{"saturation":-100},{"visibility":"simplified"}]},{"featureType":"administrative.province","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"labels","stylers":[{"visibility":"on"},{"lightness":-25},{"saturation":-100}]},{"featureType":"water","elementType":"geometry","stylers":[{"hue":"#ffff00"},{"lightness":-25},{"saturation":-97}]}]'
style="height: 450px;">
</div>
Parameters
data-type The following map types are available:
ROADMAP displays the default road map view. This is the default map type
SATELLITE displays Google Earth satellite images
HYBRID displays a mixture of normal and satellite views
TERRAIN displays a physical map based on terrain information
data-scroll - can be set to true or false. If set to true, the user will be able to use the mouse scroll wheel to zoom in
data-zoom - a number that sets the zoom level. Can be between 0 (the lowest zoom level, in which the entire world can be seen on one map) and 21+ (down to streets and individual buildings)
data-markers - this options allows you to add multiple markers. If you want to only set one marker, then use the data-address option instead. Use a JSON structure to define the markers: address to type a location or coordinate and set center to true on the marker you want to have centered. If no center attribute is defined, the center location will be calculated as the middle point of all the markers.
data-icon - an URL to the marker image
data-styles - change the maps style. Additional styles for Google maps can be found on Snazzy maps
data-address - address or coordination. The map will be centered at this location with marker
Error at loading Slider Revolution 5.0 Extrensions
The error will show, if you access the template directly. Revolution slider and other features require a server to function. See our Server section for more details.
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.
