A professional business theme.
Version 3.3.6-v1, documentation last updated febrero 2017
Thank you very much for purchasing Grove. This manual will help you use Grove and explain its functionality. If you have further questions or problems, please feel free to contact me at support@hackerthemes.com.
I hope you will enjoy using my theme.
Grove is a responsive business theme. It has a variety of page layouts that suits many use cases. It is built on the Bootstrap framework, therefore many Bootstrap features and elements are available in Grove as well.
Grove supports IE8+, Edge, Firefox, Chrome, Safari, Opera and Android/iOS mobile Browsers.
| Library | Version | URL |
|---|---|---|
| Bootstrap | 3.3.6 | http://getbootstrap.com/ |
| jQuery | 1.11.3 | http://jquery.com |
| Modernizr | 3.2.0 | http://modernizr.com/ |
| Product | Version | URL |
|---|---|---|
| Layerslider | 5.6.0 | http://kreaturamedia.com/ |
| Glyphicons Pro | 1.8 | http://glyphicons.com/ |
Version 3.3.6-v1
Version 2.2
Version 2.1
Version 2.0
Version 1.0
| Folder | Content |
|---|---|
| HTML | The root folder. Contains all HTML files. |
| HTML/css | Contains all style sheets. |
| HTML/img | Contains images like the logo, avatars, portfolio images, etc. |
| HTML/js | Contains JavaScript files |
| HTML/less | Contains the LESS sources for the CSS style sheets. |
| HTML/modules | Contains third party components not managed by npm |
| HTML/node_modules | Contains third party components managed by npm |
| Documentation | Contains a link to the online documentation, as well as documentation files for the Layerslider and the Glyphicons |
Since Grove is based on Bootstrap, you should be familiar with the concepts of Bootstrap. The most important one is how the grid system works. Have a look at the following part of the Bootstrap documentation , which explains the basics of the grid system used in Grove. This is essential, as you most likely want to create HTML pages with custom arrangements.
For your convenience, there is a starter page included in the package, called starter.html. This page is a very basic layout without any fancy extras, to help you get started. Let’s take a look at the HTML source code of the page.
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<title>Grove - Starter</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- Bootstrap styles -->
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<!-- Glyphicons -->
<link rel="stylesheet" href="modules/glyphicons/css/glyphicons.css">
<link rel="stylesheet" href="modules/glyphicons/css/filetypes.css">
<link rel="stylesheet" href="modules/glyphicons/css/halflings.css">
<link rel="stylesheet" href="modules/glyphicons/css/social.css">
<!-- Google Webfonts -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,600' rel='stylesheet' type='text/css'>
<!-- Grove Styles (switch for different color schemes, e.g. "styles-cleanblue.css") -->
<link rel="stylesheet" href="css/styles-blue.css" id="grove-styles">
<!--[if lt IE 9]>
<link rel="stylesheet" href="css/ie8.css">
<script src="modules/respond/html5-3.6-respond-1.1.0.min.js"></script>
<![endif]-->
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script>window.jQuery || document.write('<script src="node_modules/jquery/dist/jquery.min.js"><\/script>')</script>
</head>
This part includes the necessary scripts and styles, as well as some meta information, like title and meta description. You’ll probably want to change titles and descriptions here for your pages. Please note: The head might include additional scripts and style sheets for extra features, namely Layerslider (as seen on index.html), Product comparison (as seen on comparison.html) and Google Maps (as seen on about-us.html).
<body>
<header>
<nav class="navbar navbar-default grove-navbar" role="navigation">
<div class="container">
<div class="navbar-header">
<a href="#" class="grove-toggle" data-toggle="collapse" data-target=".grove-nav"> <i class="glyphicons show_lines"><i></i></i> </a>
<a href="index.html" class="navbar-brand"><img src="img/logo.png" alt="Grove"></a>
</div>
<div class="collapse navbar-collapse grove-nav">
<ul class="nav navbar-nav">
<li>
<a href="index.html">Home</a>
</li>
<li class="dropdown">
<a href="#" data-toggle="dropdown">Pages <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="about-us.html">About Us</a></li>
<li><a href="features.html">Features Page</a></li>
<li><a href="pricing.html">Pricing Tables</a></li>
<li><a href="comparison.html">Product Comparison</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="blog-inner.html">Blog Detail</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="portfolio-inner.html">Portfolio Detail</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="login.html">Login/Signup</a></li>
<li><a href="404.html">404</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" data-toggle="dropdown">Features <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="glyphicons.html">Glyphicons</a></li>
<li><a href="buttons.html">Buttons</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div>
</nav>
<div class="widewrapper pagetitle">
<div class="container">
<h1><span class="category">Grove</span>/ Starter</h1>
</div>
</div>
</header>
...
The <header> tag is the first part of the <body> and includes the top logo, as well as the navigation and the title banner. The navigation is another component of Bootstrap worth learning about. However, for our purposes, you can simply modify the current navigation. To learn more about navigations in Bootstrap, see this part of the Bootstrap documentation.
<!-- Main content starts here -->
<div class="widewrapper">
<div class="container content">
<div class="row">
<div class="col-sm-8">
<!-- This is the left column, which takes up the size of 8 Bootstrap columns -->
<h1>Grove Starter Page</h1>
<p>
Here is some text. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<aside class="col-sm-4 sidecolumn">
<!-- This is the right column, taking up 4 Bootstrap columns. The class "sidecolumn" is a Grove-specific class, giving some more padding on top -->
<div class="widget">
<h3>Aside Widget</h3>
<p>
Here might be an aside column with a widget. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</aside>
</div>
</div>
</div>
<!-- Main content ends here, footer below -->
Here’s where you’re going to include the bulk of your own content. Notice the first element: <div class="widewrapper">. The widewrapper is built to give different backgrounds to different sections, and spans acrosss the whole screen. Other options are <div class="widewrapper weak-highlight">, <div class="widewrapper strong-highlight">, as well as the specialized ones <footer class="widewrapper footer"> and <div class="widewrapper pagetitle">. The rest is pretty much standard Bootstrap markup, using the grid system to create a 8:4 ratio column layout, with the main content on the left side, and an aside on the right side. The Bootstrap grid system is explained in detail here.
<footer class="widewrapper footer">
<div class="container">
<div class="row footer">
<div class="col-sm-3">
<h4>About Grove</h4>
<p>Adalah menjadi satu fakta bahawa pembaca akan ter ganggu oleh text yang boleh difa hami apabila meli hi at susunan mukasurat.</p>
</div>
<div class="col-sm-3">
<div class="indent30">
<h4>Recent News</h4>
<ul class="grove-list">
<li><a href="#">Hello World Shatana</a></li>
<li><a href="#">Foobar in the sky flying so high</a></li>
<li><a href="#">Wild things happening, all around</a></li>
<li><a href="#">No time for that, no time for that</a></li>
</ul>
</div>
</div>
<div class="col-sm-3">
<h4>About Grove</h4>
<p>Adalah menjadi satu fakta bahawa pembaca akan ter ganggu oleh text yang boleh difa hami apabila meli hi at susunan mukasurat.</p>
</div>
<div class="col-sm-3">
<h4>Connect</h4>
<a href="#" class="social facebook"></a>
<a href="#" class="social twitter"></a>
<a href="#" class="social google_plus"></a>
<a href="#" class="social linked_in"></a>
</div>
</div>
</div>
<div class="container">
<div class="copyright">
<p>Designed by <a href="http://hackerthemes.com">HackerThemes</a></p>
</div>
</div>
</footer>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="modules/modernizr/modernizr-custom.js"></script>
</body>
</html>
The last part includes the footer of the page, which is again a simple widewrapper div with the according class, as well as standard Bootstrap markup. There is one fix here though, and that is <div class="indent30"> (line 9 of the above snippet). This gives a simple margin-left of 30px which is necessary for this list to look well adjusted between the two text widgets. Depending on your footer layout, this might be unnecessary.
At the bottom of the page, there are some more general scripts. Placing them at the bottom speeds up the loading time of your website, but you might as well include them in the <head> section if you wish.
Grove comes with various color schemes, which you probably have already seen when exploring the live demo. You can easily switch the color theme of you site by replacing the style sheet included in your <head> tag:
<link rel="stylesheet" href="css/styles-blue.css" id="grove-styles">
You have the following options:
| Scheme | CSS Path |
|---|---|
| Blue (Grove Standard) | css/styles-blue.css |
| Clean Blue | css/styles-cleanblue.css |
| Aqua | css/styles-aqua.css |
Basically, any file that follows the naming convention style-XYZ.css is a color scheme. Needless to say, if you know your way around CSS, you can further customize the colors of Grove. You could do this by including your own custom CSS file and overwriting styles you wish to change. This might be a good option if you are making very minor changes. However, there is one other way that allows you to easily create a whole new color scheme by simply changing color values in one central place, and that is by using the included LESS sources, which I’ll describe in the next section.
Grove comes with the LESS source files, which allow you to easily make changes and create whole new color schemes if you wish. LESS is a dynamic style sheet language which extends CSS with dynamic behavior such as variables, mixins, operations and functions. If you’re familiar with CSS, then LESS will feel very intuitive. However, to create a color scheme, you don’t really need to know about LESS, expect how to compile the sources into a CSS file.
You can find more info on LESS on their official website.
To compile the LESS sources into CSS files, you will need a little helper tool. I use autoless on Ubuntu. On Windows you can use WinLess. If you are a Mac user, then you can use Koala for example.
All you have to do is instruct your tool of choice to compile the file styles-blue.less (or another color scheme) and you can replace the style include in your <head> section with the compiled output file.
<link rel="stylesheet" href="css/styles-blue.css" id="grove-styles">
To create a new color scheme, all you have to do are three easy steps:
<head> section of your markupYou will find that the file styles-blue.less contains all color definitions used in Grove, grouped and named according to their purpose:
//
// Use this file to configure all colors used in Grove
//
// Standard body text
@text:#6f6f6f;
// Standard link colors (secondary may be used as hover for primary in some places)
@link-primary:#7694a7;
@link-secondary:#939393;
// Background colors for widewrapper boxes
@background: #ffffff;
@background-shadow:#d4d3d3;
@background-weak-highlight:#fafafa;
@background-weak-highlight-shadow:#cbcbcb;
@background-strong-highlight: #d0d5d9;
@background-strong-highlight-shadow:#abb1b4;
@strong-highlight-text:@text;
@background-pagetitle:@background-strong-highlight;
@background-pagetitle-shadow:#787b7e;
// Footer styles
@footer-background: #293540;
@footer-background-shadow: #202a32;
@footer-text:#ffffff;
@footer-link:@footer-text;
@footer-link-hover: #9db5c8;
@copyright-background:#1c242c;
@copyright-text:#4f5c68;
...
Along with an include that will include all other style definitions:
...
// Include the rest of the code
@import "includes.less";
The Glyphicons are used by using the <i> or <a> tag with the correct class applied, for example:
<i class="glyphicons glass"></i>
The above technique renders the Glyphicons using the font. This way has many advantages, as it lets you easily adjust colors and size of the icons via CSS. Should you prefer to render PNG/SVG based icons instead, use this markup:
<i class="glyphicons-icon dog"></i>
The image based icons are available both in black and in white. To render a white icon instead of a black one, simply add the class white to it:
<i class="glyphicons-icon dog white"></i>
For a full list of all available icons, please see the file /Documentation/glyphicons/Glyphicons_Icons.html in your package. Another great way of browsing the icons is glyphsearch.com, which has a search box and copies the class name on click.
Note: You may only use the Glyphicons in together with Grove. If you like them and want to use them for your own product (i.e. your own template, your iPhone app or another website) you will have to buy your own license. More info
Grove includes Glyphicons version 1.8. Unfortunately, due to license changes by Glyphicons themselves, I cannot include any higher version. Glyphicons explicitly forbids redistribution in themes from 1.9 onwards.
This update has seen some major changes to the folder structure. If you want to update, make sure to update all references to the following files:
All of those files can be found either in node_modules/ or modules/. Please see index.html for the exact path reference for each file.
If you’re using the Layerslider, you will probably be using grove-slider.js, or issue a jQuery call to layerSlider somewhere else with the argument
skinsPath : 'modules/layerslider/skins/',
Since the path to the Layerslider module has changed, you need to update this parameter to the above value.
With version 2.2 of Grove, a few things have changed due to the new version of the Glyphicons and Layerslider packages. If you are using the Layerslider, there is a dedicated migration guide in the Layerslider documentation under “Upgrading to version 5”. However, the Layerslider documentation states that version 5 should be backwards compatible in most cases. The current version of Grove contains updated markup for its Layerslider.
It is assumed that you replace all Grove resources such as CSS and JavaScript files. In addition, you’ll have to update your markup in a few places.
Some third party resources have been renamed or added. You’ll need to update your <header> accordingly.
Glyphicons:
<!-- Glyphicons -->
<link rel="stylesheet" href="css/vendor/glyphicons/glyphicons.css">
<link rel="stylesheet" href="css/vendor/glyphicons/filetypes.css">
<link rel="stylesheet" href="css/vendor/glyphicons/social.css">
Layerslider:
<!-- LayerSlider from Kreatura Media with Transitions -->
<script src="js/vendor/layerslider/greensock.js" type="text/javascript"></script>
<script src="js/vendor/layerslider/layerslider.transitions.js" type="text/javascript"></script>
<script src="js/vendor/layerslider/layerslider.kreaturamedia.jquery.js" type="text/javascript"></script>
<i></i>Glyphicons are now implemented without an empty <i></i> tag inside them. Example:
<i class="glyphicons conversation"></i>
Glyphicons are now separated into three packages. Namely the social icons are now using different markup.
<a href="#" class="social facebook"></a>
You see, there is a new class social that is used, whereas before it was glyphicons. If you are using the social icons on your site, make sure to update the markup and test if all the icons are working correctly.
Due to the general name of the Glyphicons social class, I had to rename one of Grove’s classes to avoid a naming conflict.
Before:
<div class="social">
New:
<div class="social-box">
If you are using the About Us page with social icons, you have to update this class in the markup.