Flux Documentation

Compatible with Joomla 2.5 / Joomla 3+ and uses the T3 framework .

Please note: This template uses the T3 framework. You can download the latest release of the T3 plugin directly from the T3 GitHub repository.

Need help getting started?

The following links may be helpful if you are new to Joomla, T3 or our templates.

Need more help?
Support Forum
Create a ticket

Useful T3 documentation

If you are new to T3 please read through the following resources to better acquaint your self with how T3 works.

Template Settings

Theme: Determines the theme to use for this template. Theme

theme

Logo Type: Determines whether to use the image, text or no logo at all.

Logo Text: The text used to render the logo.

Enable Tagline: If set to yes a tagline will be displayed below the logo.

enable-tagline

Tagline Text: The text to use for the tagline.

tagline-text

Logo Alignment: Choose whether to align the logo to the left. center or right of the logo div

Logo Tag: The class applied to the logo text eg h1, h2, h3, h4 etc

Logo Font Family: Select a built in font stack or select the google font to load a font from google.

Google Font - Logo: If google is selected in the option above enter the text for the google font you want to use. More info about using fonts here.

Logo Width: Determines the number of columns out of 12 to apply to the logo area. if you want to force the logo to take up the entire row then set this value to 12.

Menu Alignment: Determines the alignment of the menu in the main navigation container - left, center or right

Menu Width: Determines the width of the menu. This is the number of columns out of a total number of 12.

Body Image: This setting determines the image used underneath the pixel image. If this option is blank then the background colour setting in Theme Magic determines the colour for the body background.

body-image

bodyimage

Pixel Overlay: When enabled a transparent pixel image is overlayed on top of the background image.

With Pixel Overlay

Without Pixel Overlay

top-image

Top Image: This setting determines the image used underneath the menu and banner.

topimage

Starting with Flux from a fresh installation.

The following steps outline the process involved for setting this template up in a new or existing Joomla installation. Please note: We recommend users use our quickstart packages if they have the opportunity to start completely from scratch.

Elements to install

Install the Flux template and make it the default - Download
Install and enable the T3 Framework plugin - Download
Install JB Type - required for typography and font icons - Download
Install Zentools - slideshows, banners, grids etc - Download

Elements to modify

Change the position of the "Main menu" module to the "menu" position.
Set the "Show Title" setting of the main menu to Hide.
Remove the module and menu classes nav_pills and _menu in the advanced parameters for the menu module.
Change the position of the breadcrumb module to the "breadcrumbs" position.
Ensure that the module title for the breadcrumb module is also set to hide.
Depending on your needs you may like to set this module to not appear on the front page via the menu assignment settings in the module.

What's next?

At this stage you will have a very basic looking template ready for you to customise, add your content and start setting up the other modules you can see on the demo for the Flux template.

For more information on replicating the front page layout or other extensions used on this site please read the information provided on the frontpage and extensions tab.

Available module positions

Template colour schemes

The following colours are the primary and secondary colours used in the flux template styles.

bluegreen

blueorange

bright

orangegreen

plum

retro

steelgreen

Module Classes

About module class suffixes

Module classes are a core Joomla functionality that allow the user to specify how a specific module will appear. The class itself is added to the module in the module parameters.

Combining module classes:

Module classes can be combined to take advantage of multiple complementary styles. An example of a module class suffix using a combination of classes: "hot primary1 top50".

Structural classes

Structural classes can be used to change the general layout or structure of a module.

nopadding - this class removes all padding that may be set by default by the template.
The following classes are micro adjustment classes that allow you to adjust the top offset of a module in increments of 25px. They start at 25 and move through to 500px offsets in 25px increments.
top25
top50
top75
top100
top125
top150
top175
top200
top225
top250
top275
top300
top325
top350
top375
top400
top425
top450
top475
top500

Appearance classes

Our themes use a combination of two colours to determine the colour scheme for each template style. In general the colours are determined by the following formula:

primary1 - uses the base primary colour
primary2 - uses a colour 15% darker than the default primary colour.
primary3 - uses a colour 15% lighter than the default primary colour.
secondary1 - uses the base secondary colour.
secondary2 - uses a colour 15% darker than the default secondary colour.
secondary3 - uses a colour 15% lighter than the default secondary colour.
dark
light
inset
shadow
shadow2
border
corner
hot
new
icon icon-[icon name]

Mobile classes

Module classes for mobile viewing (mediaqueries classes).

Class	Mobile max-767px	Tablets 768px to 979px	Desktop min-980px
`.visible-phone`	Visible	Hidden	Hidden
`.visible-tablet`	Hidden	Visible	Hidden
`.visible-desktop`	Hidden	Hidden	Visible
`.hidden-phone`	Hidden	Visible	Visible
`.hidden-tablet`	Visible	Hidden	Visible
`.hidden-desktop`	Visible	Visible	Hidden

Frontpage Overview

Description

The top menu (shown on sub page) is published to the top4 position and uses a standard Joomla! menu module
The logo is controlled via the template and is published to the left position
The tagline is also controlled via the template settings. The left and top offsets can be adjusted via the Theme magic settings.
The menu is published to the menu position
The search module is published to the search position.
The background blurry image is controlled in the template parameters under the theme settings.
The pixel overlay on the background image can be toggled on or off in the theme settings in the template admin.
The image of the desktop underneath the logo, menu etc is also set in the template admin under the theme settings.
The text that says a "Beautiful.Apps.Seriously" is a custom html module published to the banner position..
The text "Built with the latest technology" is a custom html module published ot the grid1 position. The image has a class called "featured" applied to it which allows it to sit right on the edge of the site container.
The text "Mobile friendly construction" is a custom html module published ot the grid5 position. The image has a class called "featuredleft" applied to it which allows it to sit right on the edge of the site container.
The text "Classic composition utilisation" is a custom html module published to the grid13 position. The image has a class called "featured" applied to it which allows it to sit right on the edge of the site container.
The "We have an awesoem team module" is the Zentools carousel module published to the grid17 position. The carousel uses the boxed layout which is set in the zentools parameters.
The locations, services, about us modules are custom html modules published to the bottom1, bottom2,bottom3 position.
The Our Social Network is a a combination of custom html module olus the zen social module published to the bottom4 position.
The menu at the bottom of the page is a core Joomla menu module published ot the footer position.

Extensions used on the demo site

Zentools - Used to create slideshows, grids, carousels etc.
Demo / Documentation / Download
JB Type - Typography and style plugin.
Features / Download

Knowledgebase

Joomlabamboo template and extension documentation