1. Start
  2. Folder Structure
  3. Installation Guide
  4. Templates Files and Structure
  5. HTML Structure
  6. Extensions Guide
  7. JavaScript
  8. Sources and Credits

Flatbuild

Joomla Construction Business Theme


Thank you for purchasing our Template. If you have any questions that are beyond the scope of this help file, Thank you very much!

Introduction

Flatbuild is Joomla Business Construction template and works fine in all major browsers and IE from version 9. It's powered by jQuery and you'll find nice and discreet interactivity. The code is clearly written and you will find comments for each section parts.

It has 2 homepage layouts. This template suits for any type of portfolio, personal website, business, corporate, design studio etc. This Template has different color schemes.

You can change it from Template Options. Continue reading the documentation guide to uncover all the features provided.

1) K2 support for Blog
2) 100% Responsive, Fits every screen
3) Build on Bootstrap 3
4) 2 Home Pages
5) Valid HTML5 & CSS3
6) Retina Ready Icons Included
7) Multiple Theme colors
8) Easy portfolio customization
9) RTL + Multiple languages
10) Revolution Slider
11) Google map with marker and address
12) FREE HTML Files Included
13) Quick Start & Easy Documentation
14) Free Support from skype 24 * 7

This user guide covers all options that the template provides. Please read the documentation carefully as it probably contains answers to most of questions that may arise. In case if you feel some aspect is not covered or have some questions, contact us via e-mail iamthemesqueen@gmail.com We will do our best to answer you in shortest of time.

Updates

The updates will be published every time a reasonable amount of any bug fixes and improvements is available. Please feel free to contact us if you would like to see any new feature implemented with the upcoming updates. The more specific and demanded requests we get the higher are the chances the new feature will be included on next update.

Requirement

Joomla templates have the least requirements to hardware resources. Any server with any configuration is sufficient. Just unzip the files and transfer to your server using any FTP software.

Installation Guide

For Updated template Documentation Guide check Documentation guide


Lets take a closer look at the Installation, Extensions Guide, structure of Template, JavaScript...

Folder Structure


When you unpack downloaded archive from ThemeForest.net you'll get folder containing 7 folders.

Here they are:

  1. Database - It includes sample_data.sql
  2. Documentation - Documentation for install flatbuild theme
  3. Extensions - All Extensions zip files
  4. Html - Flatbuild Html files
  5. Licensing - License detail
  6. Quick_start - Easy Installation Quick start files
  7. Theme - It include flatbuild.zip

Installation Guide


You can setup Flatbuild theme by using following 2 ways:

  1. Flatbuild - Quick_start Installation
  2. Flatbuild template installation for Existing joomla setup.
  1. Quickstart Installation using ZIP File


    Quickstart Installation is full backup of demo site, so it contain joomla installation, extensions, template, and content. This type of installation is very recommended for the new site.

    There are 2 method to upload your site:

    1. The most healthy for you, upload the all in one zip file, using ftp client software and extract it on file manager in your hosting panel like cpanel or directadmin. or you can use akeeba kickstart, please watch the manual here
    2. If your hosting panel can not extract the zip file and you don't want to use akeeba kickstart, you should extract it first on your PC and upload the extracted files using the ftp client software.

    Then you can create your database name, username, and password, after that do the installation, see the images below and follow the steps  :


    1. Please make sure all Pre-installation Check are marked Yes
      There are some hosting don't set Magic Quotes GPC Off, please read this http://docs.joomla.org/How_to_turn_off_magic_quotes_gpc_for_Joomla_3
      If you use shared hosting and cannot found php.ini file, please create .user.ini file on the root of joomla folder and write this code inside
      magic_quotes_gpc = Off
      magic_quotes_runtime = Off
      magic_quotes_sybase = Off

    2. This is the place where you set your database.

    3. After database installation is complete, please click on "Next Step" button.

    4. Now it's time to set your site data, Site Parameters and Super User Setting.

    5. You should click "Remove the Insalation Directory" button.

    6. Please click "Visit your site's front-end" button.
    7. Please enjoy.
  2. Steps for Flatbuild template installation for Existing joomla setup
      Step : 1
    1. Download Joomla latest Version From http://www.joomla.org/download.html and Install it.
    2. Step : 2
    3. Unzip the Flatbuild_Package.zip file and find the flatbuild.zip in Theme Folder
    4. Step : 3
    5. Login into your joomla administrator panel
    6. Step : 4
    7. install flatbuild.zip file from Extensions->Extension Manager
    8.  

      installtheme

       

      Step : 5
    9. Make flatbuild theme as a default template from Extensions-> Template Manager
    10.  

      makedefault

       

      Step : 6
    11. Open Flatbuild - Default Theme. Change Template Options as per your requirement
    12.  

      themeoptions

       

      Step : 7
    13. View site You will find blank page because there is no extensions and sample data installed in your site.
    14. Note : You have no sample data installed so install quick start in local and copy articles and custom Html and save it to position according to quick start
    15.  

      Step : 8
    16. Install all Extensions from Extensions Folder.
    17. After Install Extension set position according to Step : 9 and Click here for more detail of Extension with screenshots Click Here
    18.  

      Step : 9
    19. Set Extensions According to following positions.
      1. Extra Extensions
        • com_jce.zip : JCE Editor to create joomla articles used in Custom Html
        • pkg_jblibrary.zip : JB Library is a free system plugin that can be used to load jQuery on your Joomla site. It can also be used to remove Mootools from loading on your Joomla site as well as neatly load other scripts on the page.
        • plg_system_sl_scrolltotop.zip : This plugin is used to set bottom to top button
      2. Home Page Settings
        • mod_jspagetop.zip : Page top module in position js-pagetop in All page

          Note : output comes from ROOT\modules\mod_jspagetop\helper.php

           

        • pkg_falang.zip : Language Filter module in position js-language in All page

          Note : output comes from ROOT\modules\mod_falang\tmpl\default.php

           

        • mod_jsmenu.zip : Menu module in position js-menu in All page

          Note : output comes from ROOT\modules\mod_jsmenu\helper.php

           

        • mod_home1_js-slideshow.zip : Slideshow module in position home1_js-slideshow in Home Version 1 page

          Note : output comes from ROOT\modules\mod_home1_js-slideshow\tmpl\default.php

           

        • Breadcrumbs : Breadcrumbs joomla module in position js-breadcrumbs in inner pages

          Note : output comes from ROOT\templates\flatbuild\html\mod_breadcrumbs\default.php

           

        • Banner Section : Banner Section Custom HTML in position js-bannersection in Home page
        • Services Offer Section : Services Offer Section Custom HTML in position js-servicesoffersection in Home page
        • mod_sp_portfolio.zip (Our - Latest Projects) : mod_sp_portfolio module in position js-projectssection in Home page

          Note : output comes from ROOT\templates\flatbuild\html\mod_sp_portfolio\projects.php

           

        • About Section : About Section Custom HTML in position js-aboutsection in Home page
        • Testimonial Section : Testimonial Section Custom HTML in position js-testimonialsection in Home page
        • k2.zip (Our - Latest News) : k2 module in position js-newssection in Home page

          k2 Latest News Category in Our - Latest News

          Note : output comes from ROOT\templates\flatbuild\html\mod_k2_content\Latestnews\default.php

           

        • Clients Section : Clients Section Custom HTML in position js-clientssection in Home page
        •  

          home1

           

          Home 2 [Home 2]

           

        • mod_home2_js-slideshow.zip : Slideshow module in position home2_js-slideshow in Home Version 2 page

          Note : output comes from ROOT\modules\mod_home2_js-slideshow\tmpl\default.php

           

        • Home2 About Section : Home2 About Section Custom HTML in position home2_js-aboutsection in Home 2 page
        • k2.zip : k2 module in position home2_js-servicesoffersection in Home 2 page

          k2 Services Offers Category in Home 2 page

          Note : output comes from ROOT\templates\flatbuild\html\mod_k2_content\Servicesoffers\default.php

           

        •  

          home2

           

      3. Projects page Settings
        • Projects : Projects 3 Columns article loadposition js-project3columns in Projects page

          Note : output comes from ROOT\templates\flatbuild\html\mod_sp_portfolio\projects3columns.php

           

        • Projects 2 Columns : Projects 2 Columns article loadposition js-project2columns in Projects 2 Columns page

          Note : output comes from ROOT\templates\flatbuild\html\mod_sp_portfolio\projects2columns.php

           

        • Projects 3 Columns : Projects 3 Columns article loadposition js-project3columns in Projects 3 Columns page

          Note : output comes from ROOT\templates\flatbuild\html\mod_sp_portfolio\projects3columns.php

           

        • Single Project : Single Project article in Single Project page
      4. Features Page Settings
        • Features : About article in Features page
        • About : About article in About page
        • Team Section : Team Section Custom HTML in position js-teamsection in Features and About page
        • Tables : Tables article in Tables page
        • 404-Error : 404-Error article in 404-Error page
      5. Our Services Page Settings
        • K2.zip : K2 Component used for Services in Our Services page
        • Our Services : k2 Our Services Category in Our Services page

          Note : output comes from ROOT\templates\flatbuild\html\com_k2\templates\ourservices\category.php

           

        • Construction : Construction article in Construction page
        • Building : Building article in Building page
        • Isolation : Isolation article in Isolation page
        • Electricity : Electricity article in Electricity page
        • Painting : Painting article in Painting page
        • Projecting : Projecting article in Projecting page
        • Menu (Services) : Menu joomla module in position js-left in Our Services pages

          Module class suffix : side-navigation-list

           

      6. Blog Page Settings
        • K2.zip : K2 Component used for Blogs in Blog page
        • Blog : k2 Blogs Category in Blog page

          Note : output comes from ROOT\templates\flatbuild\html\com_k2\templates\blogs\category.php

           

        • Categories : K2 Tools k2 module in position js-right in Blog page

          Note : output comes from ROOT\templates\flatbuild\html\mod_k2_tools\categories.php

          Module class suffix : category-widget widget

           

        • Text Widget : Text Widget Custom HTML in position js-right in Blog page

          Module class suffix : text-widget widget

           

        • Archives : K2 Tools k2 module in position js-right in Blog page

          Note : output comes from ROOT\templates\flatbuild\html\mod_k2_tools\archive.php

          Module class suffix : archieve-widget widget

           

        • Tag Widget : K2 Tools k2 module in position js-right in Blog page

          Note : output comes from ROOT\templates\flatbuild\html\mod_k2_tools\tags.php

          Module class suffix : tags-widget widget

           

        •  

          blog

           

      7. Contact Page Settings
        • Contact Form : Contact joomla Component in Contact page
        • mod_bt_googlemaps.zip : BT Google Maps module in position js-map in Contact 2 page
      8. Footer Page Settings
        • About Us : About Us Custom HTML in position js-footer in All pages

          Module class suffix : col-md-3 footer-widget

           

        • Tags : K2 Tools k2 module in position js-footer in All pages

          Note : output comes from ROOT\templates\flatbuild\html\mod_k2_tools\tags.php

          Module class suffix : col-md-3 footer-widget

           

        • pkg_jblibrary.zip : Liberary that support flickr
        • mod_jflickr.zip (Flickr widget) : Flickr module in position js-footer in All pages

          Note : output comes from ROOT\templates\flatbuild\html\mod_jflickr\default.php

          Module class suffix : col-md-3 footer-widget

           

        • Info : Info Custom HTML in position js-footer in All pages

          Module class suffix : col-md-3 footer-widget info-widget

           

        •  

          contactpage

           


      NOTE: After installation don't forget to Enable them

       

      NOTE : How to set Extensions Click Here.

Templates Files and Structure


Template Structure


structure

Description

CSS Files and Structure


In folder "css" you will find following CSS files

  1. bootstrap.min.css
  2. animate.css
  3. jquery.bxslider.css
  4. font-awesome.css
  5. settings.css
  6. style.css
  7. admin.css : for admin layout
  8. condition.css : for home page only
  9. style_rtl.css : for Rtl Layout
  10. bootstrap.min_rtl.css : for Rtl Layout

Description:

  1. In style.css which is main style sheet for "Flatbuild" site template. This file contains all of the specific stylings for the page.

    To edit a specific part of the page, simply scroll down, every section is well commented and you can find easy the appropriate style that needs to be edited. In example:




  2. bootstrap.min.css - grid structure based on Bootstrap Framework.

  3. Styles for bxslider. i have used this slider in testimonials section

  4. Also we have a unique file animate.css for animation during scroll, we have not included any animation but if you want to make with animation it's really simple you have just to include animation clases in tags you want to animate. if you are not familiar with this we can send you further instruction, how to make animation during scroll.

  5. Also we have a unique file settings.css for revolution slider

  6. Also we have a file for font awesome font-awesome.css . If you want to know more about the awesome fonts you can read more here

  7. RTL : We have style_rtl.css and bootstrap.min_rtl.css for rtl layout



Less files

we have included also two files in folder less

  1. variables.less
  2. style.less


if you want to use less files first you should install less (see here how to install), or you have the second option to use less.js script

If you use less.js you have to work in localhost or in your server and after that you should replace style.css with style.less




In variables.less file you have all commands well commented where you can place your color scheme, font-family etc





HTML Structure


Body part of the Html file contains a main div tag container, and this is divided in other main sections and each of these sections is further divided into smaller parts:

  1. CONTAINER

    Main building blocks of Container looks like in the photo


  2. Header

    Header is based align in left side with logo in the top and navigation under the logo at the bottom are two buttons for pdf download guides




  3. CONTENT Sections
    • Different section
    • we have included different sections, such as banner section, about section, projects section service, testimonial section, clients section etc.



  4. Footer

    Different widgets, and copyright line





Grid:

Based on Bootstrap, a sleek, intuitive, and powerful front-end framework.

Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.

The default Bootstrap grid system utilizes 12 columns, the grid adapts to be 724px and 1170px wide depending on your viewport. Below 767px viewports, the columns stack Flatbuildly.

For a simple two column layout, create a .row and add the appropriate number of .col-md-* columns. As this is a 12-column grid, each .col-md-* spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent).




Given this example, we have two div tags with class .col-md-6, making for 12 total columns and a complete row.

Move columns to the right using .col-md-offset-* classes. Each class increases the left margin of a column by a whole column. For example, .col-md-offset-4 moves .col-md-4 over four columns.

Extension Guide


     

    Extra Extensions

     

  1. com_jce.zip
  2. pkg_jblibrary.zip
  3. plg_system_sl_scrolltotop.zip
  4.  

    Home Page Extensions

     

  5. mod_jspagetop.zip
  6. pkg_falang.zip
  7. mod_jsmenu.zip
  8. mod_home1_js-slideshow.zip
  9. mod_home2_js-slideshow.zip
  10.  

    Projects page Extensions

     

  11. mod_sp_portfolio.zip
  12.  

    K2 Component Settings

     

  13. k2.zip
  14.  

    Contact Page Extensions

     

  15. mod_bt_googlemaps.zip
  16. mod_jdcontact.zip
  17.  

    Footer Page Extensions

     

  18. mod_jflickr.zip

1) com_jce.zip

An award-winning, configurable WYSIWYG editor for Joomla! based on Moxiecode's TinyMCE.

Includes advanced Image/Media, File and Link handling, plugin support, and an Administration interface for editor configuration.

You must have to select Default Editor : JCE Editor from Global Configuration

You can find com_jce.zip in Extensions Folder


 

Go to Components -> JCE Editor

 

jceeditor

 

check this link : http://joomlahosting.com/extensions/jce-bootstrap-stopping-i-to-em-replacements/


You can see JCE editor while creating article


jceeditor

Click Here To Download : Download

 

 

2) pkg_jblibrary.zip

JB Library is a free system plugin that can be used to load jQuery on your Joomla site. It can also be used to remove Mootools from loading on your Joomla site as well as neatly load other scripts on the page.

You can find pkg_jblibrary.zip in Extensions Folder

 

Go to Plugin Manager and find System - JB Library

 

jbliberary

 

Click Here To Download : Download

 

 

3) plg_system_sl_scrolltotop.zip

Skyline Scroll to Top is a system plugin of Joomla 2.5+. It adds a 'Scroll to Top' link which appears when the user scrolls down, and disappears when users reach the top of the page into your website..

You can find plg_system_sl_scrolltotop.zip in Extensions Folder

 

Go to Plugin Manager and find System - Skyline Scroll To Top

 

scrolltotop

 

You can see in demo


scrolltotop_out

 

Click Here To Download : Download

 

 

4) mod_jspagetop.zip

It is used to display your contact informations and social links.

You can find mod_jspagetop.zip in Extensions Folder

 

Go to Module Manager and find Pagetop Information in position js-pagetop

 

You can chage content of this module in Template Options.

 

jspagetop

 

Select position : js-pagetop


 

Note : output comes from ROOT\modules\mod_jspagetop\helper.php

 

You can change details from template options

 

pagetoptemp

 

You can see topbar in demo


jspagetop_out

 

 

5) pkg_falang.zip

Your site in multiple languages in the easiest way. The Falang component allows you to manage all your content translations, even the content of all your components/modules, on your web site.

You can find pkg_falang.zip in Extensions Folder

 

Go to Module Manager and find FaLang Language Switcher in position js-language

 

pkg_falang

 

Select position : js-language


 

Go to Components -> Falang for change site language

 

com_falang

 

You can see Home page in demo


pkg_falang_out

 

Click Here To Download : Download

 

 

6) mod_jsmenu.zip

JS menu is responsive joomla module which fits well in web, tablets and mobiles without any additional options and Nth level dropdown.

You can find mod_jsmenu.zip in Extensions Folder

 

Go to Module Manager and find JS-Menu in position js-menu

 

jsmenu

 

Select position : js-menu


 

Note : output comes from ROOT\modules\mod_jsmenu\helper.php

 

You can see Home page in demo


jsmenu_out

 

 

7) mod_home1_js-slideshow.zip

You can find mod_home1_js-slideshow.zip in Extensions Folder

 

Go to Module Manager and find home1_js-slideshow in position home1_js-slideshow

 

slideshow

 

Select position : home1_js-slideshow


 

Note : output comes from ROOT\modules\mod_home1_js-slideshow\tmpl\default.php

 

You can see Home Default page in demo


slideshow_out

 

 

8) mod_home2_js-slideshow.zip

You can find mod_home2_js-slideshow.zip in Extensions Folder

 

Go to Module Manager and find home2_js-slideshow in position home2_js-slideshow

 

slideshow

 

Select position : home2_js-slideshow


 

Note : output comes from ROOT\modules\mod_home2_js-slideshow\tmpl\default.php

 

You can see Home 2 page in demo


slideshow_out

 

 

9) mod_sp_portfolio.zip (position : js-portfolio)

SP Portfolio is an extension for Joomla! that helps users create a portfolio easily.

There are lots of parameters and you can set them easily. This awesome module is responsive and seo optimized.


You can find mod_sp_portfolio.zip in Extensions Folder

 

First you have to create category to set portfolio


category

Then you have to create articles in category


article

 

Home Page

 

Go to Module Manager and find Projects Section in position js-projectssection

 

portfolio

Select position : js-projectssection


You can see Home page in demo


portfolio_out

 

Note : Dynamic file generation code and output comes from ROOT\templates\flatbuild\html\mod_sp_portfolio\projects.php

 

 

Projects 2 Columns Page

 

Go to Module Manager and find Projects 2 Columns in position js-project2columns

 

project2col

Select position : js-project2columns


You can see Projects 2 Columns page in demo


project2col_out

 

Note : Dynamic file generation code and output comes from ROOT\templates\flatbuild\html\mod_sp_portfolio\projects2columns.php

 

Projects 3 Columns Page

 

Go to Module Manager and find Projects 3 Columns in position js-project3columns

 

project3col

Select position : js-project3columns


You can see Projects 3 Columns page in demo


project3col_out

 

Note : Dynamic file generation code and output comes from ROOT\templates\flatbuild\html\mod_sp_portfolio\projects3columns.php

 

Click Here To Download : Download

 

 

10) k2.zip

K2 provides an out-of-the box integrated solution featuring rich content forms for items (think of Joomla articles with additional fields for article images, videos, image galleries and attachments), nested-level categories, tags, comments, a system to extend the item base form with additional fields

You can find k2.zip in Extensions Folder

 

Go to Components -> k2

 

k2

 

 

k2

 

Our - Latest News [k2 Content]

 

Go to Module Manager and find Latest News in position js-newssection

 

news

Select position : js-newssection


You can see Home page in demo


k2news_out

 

k2 Latest News Category for Our - Latest News

Note : output comes from ROOT\templates\flatbuild\html\mod_k2_content\Latestnews\default.php

 

Services Offers Section [k2 Content]

 

Go to Module Manager and find Services Offer Section in position home2_js-servicesoffersection

 

servicesoffers

Select position : home2_js-servicesoffersection


You can see Home 2 page in demo


servicesoffers_out

 

k2 Services Offers Category for Services Offers

Note : output comes from ROOT\templates\flatbuild\html\mod_k2_content\Servicesoffers\default.php

 

Categories [k2 tools -> Categories List]

 

Go to Module Manager and find Categories in position js-right

 

k2categories

Select position : js-right


module class suffix : category-widget widget


You can see Blog page in demo


k2categories_out

 

Note : output comes from ROOT\templates\flatbuild\html\mod_k2_tools\categories.php

 

Archives [k2 tools -> Archive]

 

Go to Module Manager and find archives in position js-right

 

k2archive

Select position : js-right


module class suffix : archieve-widget widget


You can see Blog page in demo


k2archive_out

 

Note : output comes from ROOT\templates\flatbuild\html\mod_k2_tools\archive.php

 

TAG Widget [k2 tools -> Tag Cloud]

 

Go to Module Manager and find TAG Widget in position js-right

 

k2blogtags

Select position : js-right


module class suffix : tags-widget widget


You can see Blog page in demo


k2blogtags_out

 

Note : output comes from ROOT\templates\flatbuild\html\mod_k2_tools\tags.php

 

Tags [k2 tools -> Tag Cloud]

 

Go to Module Manager and find Tags in position js-footer

 

k2tags

Select position : js-footer


module class suffix : col-md-3 footer-widget


You can see Footer in demo


k2tags_out

 

Note : output comes from ROOT\templates\flatbuild\html\mod_k2_tools\tags.php

 

Click Here To Download : Download

 

 

11) mod_bt_googlemaps.zip

BT Google Map support you input both Address and Coordinate, create your custom marker with title, images, description

You can find mod_bt_googlemaps.zip in Extensions Folder

 

Go to Module Manager and find BT Google Maps in position js-map

 

map

Select position : js-map


You can see on demo in contact 2 page


map

Click Here To Download : Download

 

 

12) mod_jdcontact.zip

JD Contact is an ajax contact us module where data send to admin and user without page refresh. Backend has option to customize the front-end view. There is option to set different email address for different department. This module also has option to send a copy of the mail to yourself.

You can find mod_jdcontact.zip in Extensions Folder

 

Go to Module Manager and find J DContact in position js-quoteform

 

mod_jdcontact

Select position : js-quoteform


You can see Home page in demo


mod_jdcontact_out

 

Note : output comes from ROOT\templates\flatbuild\html\mod_jdcontact\default.php

 

Note : For change Button text go to ROOT -> language -> your current language -> mod_jdcontact.ini

 

Click Here To Download : Download

 

 

13) mod_jflickr.zip

You can give your photos and videos a "tag", which is like a keyword or category label. Tags help you find photos and videos which have something in common.

Click here to get API key

You can find mod_jflickr.zip in Extensions Folder

 

Go to Module Manager and find Flickr widget in position js-footer

 

Captcha

Select position : js-footer


Module Class Suffix : col-md-3 footer-widget

You can see demo in Footer


flickerlist

 

Click Here To Download : Download

JavaScript


In folder js you will find 13 javascript files, but all adjustments are in just one file: "script.js".

All JavaScript files:

Description:

Sources and Credits


I've used the following images, icons or other files as listed.


Once again, thank you for purchasing this Template. As mentioned at the beginning of this documentation, we would be glad to help you if you have any questions related to this Template. Here is to be honest a simple documentation because we think there is no problem to implement your elements in this template because the code is clean and well commented. For more general question related to this Template on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

If you are satisfied with "Flatbuild - Joomla Construction Business Theme" please go to your downloads section on ThemeForest.net and rate Flatbuild with 5 stars.

Hope that you will enjoy Flatbuild as much as I've enjoyed designing this template.

Kind Regards,
Nunforest Team