1. Start
  2. Files and folders structure
  3. Grid System
  4. Font Icons
  5. Color Scheme
  6. Images
  7. Boxed Layout
  8. Using Patterns
  9. Date/Time Picker
  10. Twitter Widget
  11. Contact Form

GreensKeeper

Gardening and Landscaping Responsive HTML5 Template

Thank you for purchasing 'GreensKeeper - Gardening and Landscaping Responsive HTML5 Template' If you have any questions that are beyond the scope of this help file, please feel free to submit a ticket at our Support Forum. Thanks so much!

"GreensKeeper" is a full functional HTML5 Template designed & developed for Gardening, Landscaping Business and comes handy for any Corporate Business Websites as well. It is fully responsive template based on Twitter Bootstrap 3.3.6 framework that makes it available for all screen sizes from the bigger ones to smartphones. Its not only responsive whereas it is retina ready also, now no blurry images on your HiDPI and retina devices.

How to use GreensKeeper Template?

"GreensKeeper" is very easy to update and modify, it will adapt your website and brand in no time. Steps for modification and updating are described step by step in this exclusive documentation.

Files and folders structure

Whole template is divided in to several folders and their content defines by the folder names easily.

Grid system

"GreensKeeper" is based upon Twitter Bootstrap css framework that is very easy to use and adapt. It follows the mobile first approach to make the website readily available for all devices and screen sizes. Bootstrap grid is based upon 12 columns that are well defined in the bootstrap.css file inside the css folder. You can get to know about the grid system in detail from this url http://getbootstrap.com/css/#grid

Icons font

Font Awesome

"GreensKeeper" use font awesome icon fonts for its icons requirement and no images has been used for any icon. A complete list of icons along with the class names can be found here: http://fontawesome.io/cheatsheet/

To use an icon on any page of the theme use the below code:

All icons class name will always start with the fa- . There are several sizes for icons are predefined in the fonts.css inside css folder. i.e. fa-lg, fa-2x, fa-3x

Changing color schemes

"GreensKeeper" comes with 12 predefined color schemes to use it handy. All premade themes can be found inside colors folder of the theme directory. A new color scheme can be defined very easily just copy any of the premade color css file and keep it inside colors folder and name it as you like then just replace the color hex code in the file to your liking. Afterwards you will have to replace the name of the css in the head of each page like below:

This line can be found in every .html page in the top head section

Changing image placeholders to real images

"GreensKeeper" doesn't come with images that you see in demo and in the downloaded files all images except the logo and some other graphics all images are replace with custom size place holders available from http://placehold.it/

You can easily replace these holders with your real images by just putting the same size image that you find in the link text of the placeholder "http://placehold.it/50x50&text=IMAGE+PLACEHOLDER" in the images folder. This example shows that this image will have to be 50px in width and 50px in height to look perfect on the website. So the real image url will be "images/YOUR IMAGE NAME.jpg/gif/png

How to use the boxed version

"GreensKeeper" template offers boxed layout to users, this can be done in two ways. one is to add the css on all html page templates or making a single change in style.css which will affect all pages at once:

Making changes to all html page templates

By this method just open html templates in any text editor of your choice and put class "boxed" to body tag of all pages.

Making changes to style.css to affect all pages at once

By this method just open style.css file in any text editor of your choice and remove all instances of .boxed from in front of body on line 1275, 1278, 1350 and that's it!

How to use pattrens background for boxed version

"GreensKeeper" template comes with 30 patterns images that are inside images folder of the template package. You can use al of the pattern as your pages body background while using boxed version. For this just put the below css at your custom.css

            		body{background-image:url(../images/patterns/pt1.png);
                         background-repeat:repeat;}

Now you can change the pattern image url with your choice of pattern

Configure Date Time Picker on Book a service page

Documentation for Time Picker

Documentation for Date Picker

Showing a latest tweets widget

You can place a twitter widget anywhere on any page by just using:

data-tweets-count attribute will define how many tweets you want to show in the widget, by default its 1

To enable the twitter widget you need to get some info from your twitter account and put it in the config.php file in nativechurch-theme > api folder as described there.

Here are the steps to get the details needed for this

Contact form receiver's address

There are several contact forms in this theme and all are sharing a common file for this that is contact.php inside mail folder of the theme. Just find $address = "info@imithemes.com"; in this .php file and put the email you to receive submission forms to inside the quotes