Bonus Framework - Full Guide

The Bonus Framework is a free joomla plugin designed to offer an unprecedented level of control on select BonusThemes Joomla templates. With the Bonus Framework you can manipulate the most important aspects of your template's appearance and functionality, from a single location. On this guide we will show, in full detail, how you can use the Bonus Framework to shape your compatible Joomla template exactly as you want to.

Compatible templates

The Bonus Framework plugin requires one of the following BonusThemes templates:

bonusframework image 1

For this guide we will be using the Master Joomla template, which you can download for free.

Bonus Framework Access

To gain access to the advanced settings for the Bonus Framework plugin, first log into your website's back end as an administrator.

bonusframework image 2

Click on “Extensions” on the top menu and select “Template Manager”.

bonusframework image 3

You will be presented with the list of Joomla templates installed on your website. Click on your Bonus Framework enabled template (in the example bt_master).

bonusframework image 4

On the template's properties screen, click on the “Advanced” tab.

bonusframework image 5
Complete Bonus Framework Functionality

In this section we will go through all the possible options provided by the Bonus Framework, and describe the ways they will affect your website.

For any changes to be saved and applied to the live website, you need to click on “Save”.

bonusframework image 5a
Version Check

The Bonus Framework Plugin checks with the BonusThemes server to make sure your template is up to date.

bonusframework image 6

If the installed version of the template isn't the latest, you will be informed and you will be given the option to go to the Download Area and download the latest version.

bonusframework image 7
Clean Cache

Bonus Framework enabled templates include a caching functionality, to speed up your website.

If however you made manual changes to the Template's files or CSS files, you can use the Clean Cache section to erase the cached versions and replace them with the up to date files.

bonusframework image 8

You just need to click on the “Clean Template's Cache and delete the Cached CSS files” link, and in a few seconds the cache will have been purged.

bonusframework image 9
Style Options

This section controls the visual style of the template, without affecting the functionality.

Enable Style Switcher
bonusframework image 9a

The Style Switcher gives every website visitor the option to modify the website's appearance to their own personal taste.

bonusframework image 10

By clicking on the Style Switcher, the visitors can choose different website layouts, color schemes and background patterns for a personalized view of your website. The customized settings are saved on their web browser in the form of a cookie.

bonusframework image 11

The default setting for the Style Switcher is to be “Yes”. If you don't wish for this functionality on your website, and want to set a default appearance for all visitors, you can change it to “No”.

bonusframework image 12

This will completely remove the Style Switcher functionality on the website, and enable the rest of the Styling Options.

bonusframework image 13
Background layout Type

Style Switcher must be set to “No” for this setting to affect the website.

bonusframework image 14

This setting chooses between the default Wide layout type, which will stretch the website for the whole width of the browser ...

bonusframework image 15

... or the Boxed layout type, that keeps the website centered on the screen.

bonusframework image 16

The default Background Layout Type is “Wide”.

Color Skin

Style Switcher must be set to “No” for this setting to work.

Depending on the template, you can choose between a variety of different skin colors.

bonusframework image 17

Changing the color scheme will drastically change the appearance of your website.

bonusframework image 18

The default Color Skin is skin1

Background Pattern

Style Switcher must be set to “No” and the Background Layout Type set to “Boxed” for this setting to work.

When the Background Layout Type is set as “Boxed”, instead of a plain white background beyond the borders of the website, you can choose between 10 different patterns.

bonusframework image 19

These patterns range from simple vertical stripes ...

bonusframework image 20

... to a woodwork background ...

bonusframework image 21

... to a tiled dark background.

bonusframework image 22

The default setting is “No Pattern”.

Background Image

Style Switcher must be set to “No” and the Background Layout Type set to “Boxed” for this setting to work.

Instead of a repeating pattern, you can also use a specific background image beyond the borders of your website on “boxed” layout.

bonusframework image 23

You can select between light colored pictures ...

bonusframework image 24

... or more colorful selections.

bonusframework image 25

It is not possible at this time to upload your own pictures to use as background pictures through the Bonus Framework plugin. You must choose one of the available pictures.

Template Features

This section includes functional options for the template.

Mainbody on frontpage
bonusframework image 26

By default, the mainbody posts aren't displayed on the front page of the website.

bonusframework image 27

By changing this option to “Yes”, now the front page includes a number of the mainbody posts.

bonusframework image 28
Compress CSS / Compress JS
bonusframework image 29

By default, the CSS and JavaScript code on the Bonus Framework templates is compressed, removing unnecessary spaces and line braks, for a faster website and less bandwidth consumption.

bonusframework image 30

However, this compression makes the code hard to read, should you want to make any manual changes. So, disabling the compression gives you a more readable code.

bonusframework image 31
Language Type
bonusframework image 32

The default setting is for pages written in a language read from left to right, as are most Western languages.

If however your website is written in a language that is read from right to left, you can change this option, and all the templates design will shift to accommodate best the direction of the language.

bonusframework image 33
Sticky Menu
bonusframework image 34

By default, when a visitor scrolls down the page, the top menu remains constantly visible.

bonusframework image 35

With this option disabled, the top menu will only be visible on the top of the page, and it will be hidden when scrolling down.

bonusframework image 36
Sticky Position

Except the top menu, which is on the “Header” part of the Bonus Framework template, with the Sticky Position options we can make “sticky” a number of other parts of the template, so they are constantly visible to the visitors.

bonusframework image 37

For example, selecting “Top” will make the top part of the page visible at all times while scrolling.

bonusframework image 38
bonusframework image 39

The Favicon is the tiny icon that shows on the browser tabs.

bonusframework image 40

From this setting, you can upload from your computer a Favicon specially made for your website.

For best results, select a 16x16 icon, in .ico or .png format.

Google Features
Google Fonts
bonusframework image 41

By default, the Bonus Framework templates use Google Open Sans font.

If we want to use another of the hundreds of Google fonts, we can select it from the drop-down list.

bonusframework image 42

The Secondary font will only be used for users that their browser can't display the Primary font properly. So, you should choose a different Google font.

Finally, if you have bought a different font that you want to use on your website, you can disable Google fonts altogether.

Google Analytics

Google Analytics is one of the best tools on the internet to keep track of your website traffic and your visitors' behavior.

After you have signed up at instead of copying and pasting the full code, it's enough to just copy the unique UA- code …

bonusframework image 43

… and paste it in the Google Analytics field.

bonusframework image 44

Now your website is fully connected with Google Analytics.


The Bonus Framework compatible templates can be shaped to match exactly your creative vision regarding your website.

Every part of the Bonus Framework template – Header, Main, News, Bottom etc – is based on a twelve-part grid system.

bonusframework image 45

Through the Bonus Framework settings, we can arrange the modules and the content of the website, choosing the number of columns ...

bonusframework image 46

... and how much space each column will occupy, on the twelve-part grid system.

bonusframework image 47

For example, the Features part of the Template ...

bonusframework image 48

... is arranged in 4 columns, equal in size – although only 3 modules are set by default.

bonusframework image 49

If you changed the Layout to a 2 column layout, with a 6 | 6 grid system,

bonusframework image 50

... it would show only two modules and hide the third.

bonusframework image 51

You could also make one column significantly larger than the other, using the grid system ...

bonusframework image 52

... and it would affect the content view accordingly.

bonusframework image 53

Likewise, the default layout for the FooterUp ...

bonusframework image 54

is four columns, equal to each other.

bonusframework image 55

If you wish, for example, for the two central columns to be bigger, you can choose an appropriate grid system, such as 2 | 4 | 4 | 2

bonusframework image 56

and it will have the desired result.

bonusframework image 57

By choosing the number of columns and the relative column sizes, you can shape any different part of the template to your wishes.

Custom Code

If specific plugins or web services request that you manually add code to your website, you don't have to mess with FTP and manually changing files.

bonusframework image 58

Just paste the appropriate code on the proper field, and it will instantly be included within the header or the mainbody of your website.

Just make sure the code you will be adding comes from a legitimate source.

Template Tools
Footer Layout

The default footer layout includes a copyright Icon, a Copyright Message and a “Go Top” icon which scrolls the page to the top.

bonusframework image 59

From the Footer Layout options, you can choose different combination of those elements ...

bonusframework image 60

... and also change their relative size, from the default 2 | 8 | 2

bonusframework image 61
Copyright Icon

Here you can choose whether the copyright icon is displayed or not, regardless of the chosen Footer Layout.

bonusframework image 62

You can also upload a custom Copyright icon from your computer, and you can also fill in a URL to load once the copyright icon is clicked.

Scroll to TOP

This setting can disable the Scroll to Top icon.

bonusframework image 63

You can also choose whether the Scroll to Top appears automatically on scrolling ...

bonusframework image 64

... or if it only shows on a fixed position within the footer.

bonusframework image 65
Copyright Message

From this field you can disable the copyright message, or change it to a message appropriate for your website.

bonusframework image 66

For the message formatting, standard HTML rules apply.

New update for Joomla! 2.5.20, 3.3.0 and Virtuemar...
bonusthemes logo

Copyright © 2007-2019 Bonus Themes. All rights reserved. is not affiliated with or endorsed by the Joomla Project or Open Source Matters.
The Joomla logo is used under a limited license granted by Open Source Matters the trademark holder in the United States and other countries.