#1 - Unzip the quickstart package in the downloaded file.

#2 - Install it like the way you install joomla, check the install sample data in the last steps of installation to make your site look like the demo.

The quicskstart package include : joomla, extensions, plugin and template.

The logo BUSINESS is the default sample logo and you should replace it with your own.

Technically, logo is an image file called logo.png located in folder joomla_root_folder/images/sampledata/st_business/logo.png

Just replace it with your own logo.

ST BUSINESS provides 7 major color variations for you to choose from. Each color variation covers fills drop-down menu, links and some others. For each template color, you can pick a main background image to create your own unique look. (ST BUSINESS provide 17 background image for your choice)

Follow these steps bellow to configure template color :

#1 - Access the admin area >>> Extensions >>> Template Manager >>> st_business - Default

#2 - Open tab "Options" >>> open tab "Global" >>> Choose template color in parameter "Showcase" and background image in parameter "Select Background"

All available colors are described below.

Default color

Green

 

Brown

Cyan

 

Red

Grey

 

Dark

ST BUSINESS provides three menu styles to present your website navigation. The default Joomla! built-in menu module (mod_mainmenu) is utilized, so you don’t need to install any external menu modules.

Main menu default

To set up Main Menu please select the menu module you want to use and set up parameters as follows:

  • Title : Main menu (or any other you like)
  • Show Title : Hide
  • Position : top-right
  • Status : Published
  • Access : Public
  • Select Menu : Main Menu (you might want to use another menu source here)
  • Start Level : 1
  • End Level : All
  • Show Sub-menu Items : Yes
  • Menu Class Suffix : avatar-main-menu avatar-menu-icons white (Please only use “avatar-menu-icons white” if you want to display icons - white is icon's color)
  • Alternative Layout : Responsive

 

Main menu with icon

To set up icons, you need to go to menu item settings and take the following steps:

Add symbol combination icons-xxx to menu item’s parameter Link CSS Style, where xxx is the icon name.

 

Slide menu left

Side Menu is a unique vertical menu with slide-out panels. This menu is extremely efficient when you have complex navigation with a lot of menu items.

To set up Slide Menu left please select the menu module you want to use and set up parameters as following:

  • Title : Slide menu (or any other you like)
  • Show Title : Show
  • Position : left-top
  • Status : Published
  • Access : Public
  • Select Menu : Main Menu (you might want to use another menu source here)
  • Start Level : 1
  • End Level : All
  • Show Sub-menu Items : Yes
  • Menu Class Suffix : avatar-slide-menu-left avatar-menu-icons white (Please only use “avatar-menu-icons white” if you want to display icons - white is icon's color)

 

Slide menu right

To set up Slide Menu right, do the same config with Slide Menu left. In parameter Menu Class Suffix : avatar-slide-menu-right avatar-menu-icons white (Please only use “avatar-menu-icons white” if you want to display icons - white is icon's color)

 

Slide menu with icons

You can set up menu items to utilize icons just as you can with Main Menu.

 

Tree Menu

Tree Menu represents menu items in a clear tree-like hierarchy which is very appropriate for indexing menu. By default all sub-menu items are collapsed until you select the parent menu item.

To set up Tree Menu please select the menu module you want to use and set up parameters as following:

  • Title : Tree menu (or any other you like)
  • Show Title : Show
  • Position : left-top
  • Status : Published
  • Access : Public
  • Select Menu : Main Menu (you might want to use another menu source here)
  • Start Level : 1
  • End Level : All
  • Show Sub-menu Items : No
  • Menu Class Suffix : avatar-tree-menu avatar-menu-icons white (Please only use “avatar-menu-icons white” if you want to display icons - white is icon's color)

 

Tree Menu with icons

You can set up menu items to utilize icons just as you can with Main Menu.

ST BUSINESS comes with different module styles and icons. For each module you can combine it with 23 predefined icons for module title styling. Take a look around to see how module styles are applied.

Module Style

Module styles are configured by module's parameter Module Class Suffix with very simple syntax.

Module Style 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu arcu quis mauris consectetur pellentesque. Suspendisse in orci vitae sem vehicula venenatis.

st-module-1

Module Style 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu arcu quis mauris consectetur pellentesque. Suspendisse in orci vitae sem vehicula venenatis.

st-module-2

Module Style 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu arcu quis mauris consectetur pellentesque. Suspendisse in orci vitae sem vehicula venenatis.

st-module-3

Module Style 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu arcu quis mauris consectetur pellentesque. Suspendisse in orci vitae sem vehicula venenatis.

st-module-4

Module Style 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu arcu quis mauris consectetur pellentesque. Suspendisse in orci vitae sem vehicula venenatis.

st-module-5

Module Style 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu arcu quis mauris consectetur pellentesque. Suspendisse in orci vitae sem vehicula venenatis.

st-module-6

Module Style 7

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu arcu quis mauris consectetur pellentesque. Suspendisse in orci vitae sem vehicula venenatis.

st-module-7

Module Style 8

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu arcu quis mauris consectetur pellentesque. Suspendisse in orci vitae sem vehicula venenatis.

st-module-8

 

Module styles with icon

To set up icons, you need to add string "icons-xxx white" to module class suffix, where xxx is the icon name and white is icon color.

Module Style 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu arcu quis mauris consectetur pellentesque. Suspendisse in orci vitae sem vehicula venenatis.

st-module-5 icons-user

Module Style 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu arcu quis mauris consectetur pellentesque. Suspendisse in orci vitae sem vehicula venenatis.

st-module-6 icons-home

Module Style 7

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu arcu quis mauris consectetur pellentesque. Suspendisse in orci vitae sem vehicula venenatis.

st-module-7 icons-download white

Module Style 8

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu arcu quis mauris consectetur pellentesque. Suspendisse in orci vitae sem vehicula venenatis.

st-module-8 icons-calendar white

 

Icons style

ST Magazine provide 23 predefined icons with 2 colors : white and grey.

  • st icon article
  • st icon calendar
  • st icon cart
  • st icon comment
  • st icon display
  • st icon download
  • st icon folder
  • st icon help
  • st icon home
  • st icon image
  • st icon info
  • st icon mail
  • st icon online
  • st icon rss
  • st icon search
  • st icon selection
  • st icon settings
  • st icon star
  • st icon statistics
  • st icon user
  • st icon print
  • st icon location
  • st icon phone

 

ST icon style white

  • st icon article
  • st icon calendar
  • st icon cart
  • st icon comment
  • st icon display
  • st icon download
  • st icon folder
  • st icon help
  • st icon home
  • st icon image
  • st icon info
  • st icon mail
  • st icon online
  • st icon rss
  • st icon search
  • st icon selection
  • st icon settings
  • st icon star
  • st icon statistics
  • st icon user
  • st icon print
  • st icon location
  • st icon phone

 

Icon list style

  • st icon folder
  • st icon folder
  • st icon folder
  • st icon folder
  • st icon image
  • st icon image
  • st icon image
  • st icon image
  • st icon settings
  • st icon settings
  • st icon settings
  • st icon settings
  • st icon search
  • st icon search
  • st icon search
  • st icon search

ST BUSINESS provide 6 social icons for your choose

 

 

To use these icons, just create new custom module, click the "Toggle editor", add the HTML code :

<div class="st-socials">
<a href="#" class="social-facebook">facebook</a>
<a href="#" class="social-flick">flick</a>
<a href="#" class="social-pinterest">pinterest</a>
<a href="#" class="social-rss">rss</a>
<a href="#" class="social-twitter">twitter</a>
<a href="#" class="social-youtube">youtube</a>
<div>

Disable / Enable Setting Bar

#1 - Access the admin area >>> Extension Manager >>> Template Manager >>> st_business - Default

#2 - Open tab "Options" >>> open tab "Global" >>> Change value to "No" in parameter " Setting Bar"

 

Google Analytics

#1 - Access the admin area >>> Extension Manager >>> Template Manager >>> st_business - Default

#2 - Open tab "Options" >>> open tab "Global" >>> Enter Google Analytics Code in parameter "Google Analytics - Tracking ID"

Create new module "mod_st_content_showcase" and following these steps :

 

Tab "Module"

- Show Title : Show

- Position : full-2

- Module Class Suffix : separate

- Extension : wall

- Source : Image Folder

- Title : Yes

- Title Link : No

- Display Introtext : Yes

- IntroText Length : 0

- Image Intro : Yes

- Image Intro Link : Link to article

- Display Category : Yes

- Auto Find Image : Yes

- Seo Url : Yes

- jQuery : No

- Awesome Font : No

 

Tab "Image Folder Source"

- Sync Folder : No

- Image Folder : Choose your folder

- Add your image, then click button "Edit" >>> fill the image title and introtext

 

Tab "Showcase - wall piterest"

- Grid Columns : 4

- Grid Columns in 320px screen : 1

- Grid Columns in 480px screen : 2

- Grid Columns in 767px screen : 3

- Item Width : Fit Column

- Fit Row : No

- Category : No

- Style : st-bussiness-wall-style-3.css

- Load Offset : 0

Create new custom HTML module then following these steps :

- Show Title : Hide

- Position : full-1

- Module Class Suffix : separate st-ourteam-style-1

- Click the "toggle editor", add the sample HTML code bellow then edit to suit with your content.

<h3 class="lead content-center">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore, consectetuer adipiscing elit, sed diam
</h3>
<div class="row-fluid">
<div class="span3">
<div class="portfolio">
<img src="/demo/templates-joomla/st_business/images/sampledata/st_business/our-team/person-1.png" alt="" />
<div class="mask">
<h2>Lorem ipsum dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetur adip iscing elit. Sed rutrum posuere dui,</p>
<a class="info" href="#">Read More</a>
</div>
</div>
</div>
<div class="span3">
<div class="portfolio">
<img src="/demo/templates-joomla/st_business/images/sampledata/st_business/our-team/person-2.png" alt="" />
<div class="mask">
<h2>Lorem ipsum dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetur adip iscing elit. Sed rutrum posuere dui,</p>
<a class="info" href="#">Read More</a>
</div>
</div>
</div>
<div class="span3">
<div class="portfolio">
<img src="/demo/templates-joomla/st_business/images/sampledata/st_business/our-team/person-3.png" alt="" />
<div class="mask">
<h2>Lorem ipsum dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetur adip iscing elit. Sed rutrum posuere dui,</p>
<a class="info" href="#">Read More</a>
</div>
</div>
</div>
<div class="span3">
<div class="portfolio">
<img src="/demo/templates-joomla/st_business/images/sampledata/st_business/our-team/person-4.png" alt="" />
<div class="mask">
<h2>Lorem ipsum dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetur adip iscing elit. Sed rutrum posuere dui,</p>
<a class="info" href="#">Read More</a>
</div>
</div>
</div>
</div>

Create new st_content_showcase module and following these steps :

 

Tab "Module"

- Show Title : Show

- Position : right-top

- Module Class Suffix : st-module-7

- Extension : Wall

- Source : Image Folder

- Choose all value to “Yes”, Image Intro Link : “Link To Image”

 

Tab "Image Folder Source"

- Sync Folder : No

- Image Folders : Choose your folder

 

Open the tab "Showcase - wall piterest"

- Grid Columns : 2

- Grid Columns in 320px screen : 1

- Grid Columns in 480px screen : 2

- Grid Columns in 767px screen : 3

- Item Width : Fit Column

- Fit Row : No

- Category : No

- Style : st-business-wall-style-1.css

- Load Offset : 0

Create new category : Content >>> Category Manager >>> Add New Category named "Testimonials" or other that you want.

Add new article and following these steps :

Title : Client's name

Category : Choose category "testimonials"

Click "Toggle editor", add the sample HTML code as bellow then edit to suit with your content

<blockquote>
<p>Clean websites, great support. Unlimited faetures. Five stars. Keep the good work guys.</p>
<small>CEO, Company</small>
</blockquote>

Save your settings

 

Create new st_content_showcase module then follow these configs :

 

Tab "Module"

- Show Title : Show

- Position : footer-right

- Module Class Suffix : st-module-1 st-slider-content-style-1

- Extension : slider_content

- Source : article

- Title : No

- Title Link : No

- Display Introtext : Yes

- IntroText Length : 0

- Image Intro : No

- Image Intro Link : No

- Display Category : Yes

- Auto Find Image : Yes

- Seo Url : Yes

- jQuery : No

- Awesome Font : No

 

Tab "Article Source"

- Category : Testimonials

 

Tab "Showcase - Slider Content"

- Width : 100%

- Height : Not set

- Columns : 1

- Show Image : No

- Show Time Create : No

Showcases

Background Image

Header Color

:

Content Color

: