Flatbuild

Joomla Construction Business Theme

• Updated: March 2019
• Email: iamthemesqueen@gmail.com

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

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

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

Templates Files and Structure

Template Structure

Description

• css Folder

  Contains css files for template's native styles

• html Folder

  Contains overwrite files for extensions

• images Folder

  The folder includes pattern and Slideshow images

• js Folder

  All javascript plugins as well as custom developed scripts reside in this folder

• language Folder

  The folder include 14 langauges which will changes Template parameter option

• less Folder

  The folder include less files

• preset Folder

  The folder include php files for different versions

• upload Folder

  images used in theme

• error.php

  Redirect url when 404 error

• favicon.ico

  You can change favicon icon for your site. It must be 16px*16px with name favicon.ico

• index.php

  It is main template file which run first and you can see all position positions.

• template_preview.png

  Your site Preview image of site.

• template_thumbnail.png

  Your site Thumbnail image of site.

• templateDetails.xml

  Template options Configuration file.

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

 

Home Page Extensions

 

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

 

Projects page Extensions

 

9. mod_sp_portfolio.zip

 

K2 Component Settings

 

10. k2.zip

 

Contact Page Extensions

 

11. mod_bt_googlemaps.zip
12. mod_jdcontact.zip

 

Footer Page Extensions

 

13. 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

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

You can see JCE editor while creating article

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

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

You can see in demo

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.

Select position : js-pagetop

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

You can change details from template options

You can see topbar in demo

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

Select position : js-language

Go to Components -> Falang for change site language

You can see Home page in demo

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

Select position : js-menu

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

You can see Home page in demo

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

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

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

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

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

Then you have to create articles in category

Home Page

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

Select position : js-projectssection

You can see Home page in demo

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

Select position : js-project2columns

You can see Projects 2 Columns page in demo

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

Select position : js-project3columns

You can see Projects 3 Columns page in demo

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

Our - Latest News [k2 Content]

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

Select position : js-newssection

You can see Home page in demo

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

Select position : home2_js-servicesoffersection

You can see Home 2 page in demo

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

Select position : js-right

module class suffix : category-widget widget

You can see Blog page in demo

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

Select position : js-right

module class suffix : archieve-widget widget

You can see Blog page in demo

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

Select position : js-right

module class suffix : tags-widget widget

You can see Blog page in demo

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

Select position : js-footer

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

You can see Footer in demo

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

Select position : js-map

You can see on demo in contact 2 page

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

Select position : js-quoteform

You can see Home page in demo

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

Select position : js-footer

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

You can see demo in Footer

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:

• jQuery - jquery.min.js - its the last version of jquery (v1.10.2)
• Bootstrap - bootstrap.min.js
• Jquery Migrate - jquery.migrate.js
• Bxslider - jquery.bxslider.min.js
• Revolution slider - jquery.themepunch.revolution.min.js
• Revolution slider plugins - jquery.themepunch.tools.min.js
• Images Loading - jquery.imagesloaded.min.js
• Isotope - jquery.isotope.min.js
• Retina - retina-1.1.0.min.js
• Smooth Scroll for Chrome - plugin-scroll.js
• Less - less.js
• Jquery code added here - script.js

Description:

• jQuery is a Javascript library that greatly reduces the amount of code that you must write.
• Bootstrap part Bootstrap Framework.
• Jquery migrate is additional jquery file with some sintaks of older version of jquery, it must be included.
• JS for Google Map in Contact section. Google Map data enter in "script.js".
• Most of the settings you can adjust in "script.js". Every part is commented so you can have a clue for what is used.
  
  
  
  
• ("jquery.bxslider.min.js") is use for testimonial slider posts
• ("jquery.imagesloaded.min.js") and ("jquery.isotope.min.js") are used for ordering posts in portfolio, etc.
• Two themepunch files are used for slider in home page. If you need more about this slider send us a message we will send the documentation of slider.
• ("retina-1.1.0.min.js") is used for making images retina on small devices
• plugins scroll is used for scrolling more easy on chrome with smooth animation
• ("less.js") is used for less stylesheet (you don't have to include it if you dont use less files, it's alternative only).

Sources and Credits

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

• jQuery - JavaScript Library
• Bootstrap - Bootstrap by Twitter
• Google Maps v3 - Google Map on contact page.
• PixEden.com - Responsive showcase presentation
• Documenter - Last but not least. Used for writing documentation. Thanks a lot revaxarts.
• Others.

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