Thank you for purchasing our Template. If you have any questions that are beyond the scope of this help file, Thank you very much!
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.
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.
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.
For Updated template Documentation Guide check Documentation guide
When you unpack downloaded archive from ThemeForest.net you'll get folder containing 7 folders.
Here they are:
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:
Then you can create your database name, username, and password, after that do the installation, see the images below and follow the steps :
magic_quotes_gpc = Off magic_quotes_runtime = Off magic_quotes_sybase = Off
Step : 5
Step : 6
Step : 7
Step : 8
Step : 9
Note : output comes from ROOT\modules\mod_jspagetop\helper.php
Note : output comes from ROOT\modules\mod_falang\tmpl\default.php
Note : output comes from ROOT\modules\mod_jsmenu\helper.php
Note : output comes from ROOT\modules\mod_home1_js-slideshow\tmpl\default.php
Note : output comes from ROOT\templates\flatbuild\html\mod_breadcrumbs\default.php
Note : output comes from ROOT\templates\flatbuild\html\mod_sp_portfolio\projects.php
k2 Latest News Category in Our - Latest News
Note : output comes from ROOT\templates\flatbuild\html\mod_k2_content\Latestnews\default.php
Home 2 [Home 2]
Note : output comes from ROOT\modules\mod_home2_js-slideshow\tmpl\default.php
k2 Services Offers Category in Home 2 page
Note : output comes from ROOT\templates\flatbuild\html\mod_k2_content\Servicesoffers\default.php
Note : output comes from ROOT\templates\flatbuild\html\mod_sp_portfolio\projects3columns.php
Note : output comes from ROOT\templates\flatbuild\html\mod_sp_portfolio\projects2columns.php
Note : output comes from ROOT\templates\flatbuild\html\mod_sp_portfolio\projects3columns.php
Note : output comes from ROOT\templates\flatbuild\html\com_k2\templates\ourservices\category.php
Module class suffix : side-navigation-list
Note : output comes from ROOT\templates\flatbuild\html\com_k2\templates\blogs\category.php
Note : output comes from ROOT\templates\flatbuild\html\mod_k2_tools\categories.php
Module class suffix : category-widget widget
Module class suffix : text-widget widget
Note : output comes from ROOT\templates\flatbuild\html\mod_k2_tools\archive.php
Module class suffix : archieve-widget widget
Note : output comes from ROOT\templates\flatbuild\html\mod_k2_tools\tags.php
Module class suffix : tags-widget widget
Module class suffix : col-md-3 footer-widget
Note : output comes from ROOT\templates\flatbuild\html\mod_k2_tools\tags.php
Module class suffix : col-md-3 footer-widget
Note : output comes from ROOT\templates\flatbuild\html\mod_jflickr\default.php
Module class suffix : col-md-3 footer-widget
Module class suffix : col-md-3 footer-widget info-widget
NOTE: After installation don't forget to Enable them
NOTE : How to set Extensions Click Here.
Contains css files for template's native styles
Contains overwrite files for extensions
The folder includes pattern and Slideshow images
All javascript plugins as well as custom developed scripts reside in this folder
The folder include 14 langauges which will changes Template parameter option
The folder include less files
The folder include php files for different versions
images used in theme
Redirect url when 404 error
You can change favicon icon for your site. It must be 16px*16px with name favicon.ico
It is main template file which run first and you can see all position positions.
Your site Preview image of site.
Your site Thumbnail image of site.
Template options Configuration file.
In folder "css" you will find following CSS files
Description:
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:
bootstrap.min.css - grid structure based on Bootstrap Framework.
Styles for bxslider. i have used this slider in testimonials section
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.
Also we have a unique file settings.css for revolution slider
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
RTL : We have style_rtl.css and bootstrap.min_rtl.css for rtl layout
we have included also two files in folder 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
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:
Main building blocks of Container looks like in the photo
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
we have included different sections, such as banner section, about section, projects section service, testimonial section, clients section etc.
Different widgets, and copyright line
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.
Extra Extensions
Home Page Extensions
Projects page Extensions
K2 Component Settings
Contact Page Extensions
Footer Page Extensions
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
In folder js you will find 13 javascript files, but all adjustments are in just one file: "script.js".
All JavaScript files:
Description:
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