T3 user guide

T3 FRAMEWORK USER GUIDE

My Joomla Template Powered by

Content compile from http://wiki.joomlart.com/wiki/JA_T3_Framework_2

Copyright http://rusmadi.com

2011

Overview

Contents :
1. Introduction
2. JA T3 Blank Template
3. Joomla! 1.6 version
4. What is new in T3 Framework 2.0
5. What is hot about T3 Framework
6. Template Framework Comparison
7. Download
8. Support
9. Changelog and Roadmap

1. Introduction

+
JA T3 Framework is the third generation template framework developed by JoomlArt for
Joomla! 1.5 and above and brings new improvements and features: a new structure, Layouts,
Mobile Ready, Right to Left Language Support and a powerful menu system called Mega Menu.
The framework itself is our five years experience providing templates for Joomla!, it was
developed to shorten the website development.
JA T3 Framework 2.0 is a new version template framework introducing new features: profiles,
plugins, themes.

The new framework also comes with a new structure: a light template, a plugin to hold the
default design and core scripts, a plugin to manage the template typography, but the plugin to
hold menu parameters for Mega Menu have been integrated into the core framework plugin to
make the updating easier.

2. JA T3 Blank Template
JA T3 Blank Template is a new clean template design powered by the new framework.
Benefits:

• Easy to start developing templates from a blank core template
• Easy to update the core while customizing the template layout design
• Multiple themes with theme mixing capability - this allows you to use multiple themes
simultaneously
• Template administration panel is now your best friend: it allows you to edit files, upload
your themes and customize settings like never before.
• Flexibility have never reached this level!

3. Joomla! 1.6 version
JA T3 Framework version for Joomla! 1.6 is released! Some important notes:
1. JA T3 Framework consists of JA T3 Framework Plugin & JA T3 Blank Template
2. To avoid compatibility issues, the plugin for Joomla! 1.6 and the one for Joomla! 1.5 will be

supplied separately as independent plugins.
3. The JA T3 Blank template and all JA T3 Framework based templates will be updated for
Joomla 1.6. When Joomla! 1.6 is released as Release Candidate, all JA T3 Framework templates
will be updated to work with the new version of the CMS, with very minor CSS/HTML
adjustments (why? read 4.)
4. The framework was developed with Joomla! 1.6 vision in mind (at the time of the JA T3
Framework 2.0 was developed, there was Joomla! 1.6 Alpha) so now we have a chance to see
how the framework would fit and make the most use of Joomla! 1.6.
Also, we develop the framework in a way that users wont have to make many changes to our
template when they upgrade their websites to Joomla! 1.6.
5. Our framework is based on semantic HTML/CSS skeleton which is used by both versions for
Joomla! 1.5 and for Joomla! 1.6.

4. What is new in T3 Framework 2.0
• Introducing Profiles - a new presets feature to control template design and other
template settings.
• The template administration panel comes with a new look, split into several sections
and is AJAX powered.
• Modular code makes the template light and fast but also powerful. Scripts that are not
used, are not loaded!
• New performance features: template cache and CSS&JS compression.
• Now the framework support advanced override features to develop a flexible front-end
design, user friendly!
• The new framework comes with a new structure - meet the new plugins to take over
the framework functions!
• Control Panel - front-end users can customize the look and feel of the website by
switching user tools values:
o font-size switcher - allows users to increase / decrease or reset font size;
o screen size switcher - allows users to select the template width;
o profiles switcher - allows users to switch profiles;
o layouts switcher - allows users to change only the layout;
o text direction switcher - allows users to change the text direction of the website

5. What is hot about T3 Framework
• An advanced navigation system upgraded by the Mega Menu, a new menu system to
improve the other menu systems by giving them additional class and menu item
description or slogan line, but also upgraded the template functions by adding the
override capabilities made possible now with the new Profiles feature.
• Multiple layout system - index.php no longer hold module positions, layouts do! These
layouts are files to manage HTML generating scripts and are built with blocks having
distinctive styling, functions and module positions.

• Mobile Ready - made possible with device detection capabilities implemented into the
framework to make your website compatible for mobile devices such as Blackberry,
Android, Palm, Windows Mobile and also iPhone devices.
• Native RTL support powered by ingenious code to switch text-direction and template
styling.

6. Template Framework Comparison
The new T3 framework is different than the classic framework. Any usual template has the
capability to manage module positions and styling classes, manage overrides, detect user's
browser client, interact with the user in a certain manner, and others can give a user the
freedom to chose from multiple colors or font sizes, but they all have the same structure.

* The original JA Purity is one of the classical templates that support some of the features built in the T3 Framework.

The new T3 framework will add more freedom to the end user by letting him chose the
navigation type and layout that he likes the most. You will be able to create a single layout or
multiple layouts exactly how your users want. The T3 framework will successfully upgrade the
way you develop. You can now create a full control panel for your users to customize the web
interface like never before.

7. Download
JA T3 Framework is free and you can download it here for Joomla! 1.5 and here for Joomla! 1.6.

8. Support
Whenever you need a hand developing with T3 Framework 2.0, feel free to ask for support in
our forum.

Members have access to professional help, and can submit support tickets online via support
portal and our support team will provide assistance in less than 12 hours!

9. Changelog and Roadmap
Visit our Project Management portal for Changelog & Roadmap

Guides

Contents :
1. Introduction
2. Structure
3. Layouts
4. Themes
5. Profiles
6. Override Priority
7. Template administration

1. Introduction
In this section we are going to explore

• The Structure & The Extensions - explore the file & folder structure, purpose of most
important files;
• Layouts & Blocks - explore the concept, features and advanced parameters
• Themes - explore the concept, typology, override coding
• Profiles - explore the concept, typology, override coding
• Template Administration - full usage instructions for all panels

2. Structure
The structure of the framework changed since the introduction of the JA Menu Parameters
Plugin. Generally, the template is lighter and faster, core scripts are now hold inside JA T3
Framework Plugin.

The latest release of the JA T3 Framework 1.0 comes with JA Menu Parameters Plugin to solve
all SEO related issues and also to make menu management easier.

JA T3 Framework 2.0 now incorporates this plugin to easily update the core files separately
from your customized template design.
This documentation section is entirely about menu management and usage of the integrated
plugin.
The new version introduces the new JA Typo Button Plugin to ease the work on editing special
content.

Extensions
Starting the JA T3 Framework 2.0 you will need to have:

JA T3 Framework Plugin

The core folder

• Template administration - these files manage the template administration panel with all
scripts and back-end views.
• Device and browser detection scripts - these are the scripts to detect user device
(desktop computer, mobile device) and user browser client.
• Menu system engines - these scripts power up all the menu systems T3 Framework use.
• Parameters and other core files - files to power the AJAX capabilities, caching, override
features, and general parameters.

The base-themes folder

This is the folder to hold the core default template with default:

• blocks to hold all default blocks: IE6warning, header, footer, middle, etc;
• css to hold default Core CSS Framework of the template styling;
• html content components and modules override;
• etc to hold default layouts, themes and profiles;
• js to hold default template javascript files;

• page to hold layout generating scripts and others.

The sample-themes folder
This is to hold the sample template you will need for creating your own T3 Framework based
template.
Coming soon..

T3 Framework 2.0 Based Template

The Default theme

The latest version of your JA T3 Framework 2.0 Template now incorporates the default layout,
and this way it could work as a regular Joomla! template.

These files and folders hold the default theme of the template to override the core plugin base-
themes styling. As you can see:

• can hold block overrides;
• styles the menu systems and general styling;
• holds own images;
• can override javascript code;
• it is recognized as a theme because of the info.xml file.

The T3 Framework Specific Files

The core folder holds:

• Template Core Layouts;
• Template Core Profiles;
• Template Core Themes;
• Template Core Themes Variations.

The local folder holds:

• User Created Layouts;
• User Created Profiles;
• User Created Themes Variations.

Other files

Folder and files information:

• the info folder holds template specific information;
• general template files (thumbnail, template details, favicon).

JA Typography Button Plugin

A new plugin to help editors to easily add special typography styles for special content.

In your favorite editor, you will notice a new button JA Typo.

Click this button to open the Typography selection window.

In this window, hover any of the styling and click to insert it in your content on the fly.

3. Layouts
JA T3 Framework 1.0 introduced multiple layouts feature to add more flexibility in design. A
layout is by definition a concept design for content arrangement within a page, but our
developers thought about a template framework to use a simple index.php file to keep only the
very general routers, and never manage layout design, module positions or script calls. Other
files can do a better job within a modular design.

Introducing Layouts and Blocks
Concepts and ideas behind

• Layouts are the files to hold the HTML generation of your front-end design. They load
other files called blocks to perform various functions. By using various styles and
positions for these blocks you can create unlimited layouts your users can select and use
for best convenience. These layouts are then loaded by the new template index.php file.
• Blocks are files to hold module positions, perform specific script calls and prepare the
HTML generation of the content. As you know, the most popular elements: header,
footer, left, right, spotlights, pathway, etc. these are now separate files, no longer HTML
elements defined in the index.php file.
• The idea is to have a website to use a single template, but having a unique design for
your homepage, another custom design for your Blog and another for your forums. In
other cases you may want your users to pick the most convenient layout.
• Layouts can be switched in front-end from the UserTools Panel.
• Layouts can be customized in the back-end using the built in editor.
• Layouts and blocks in theme variations or user created themes can override those in the
blank core theme.
• Blocks typology:
o blocks as separate files to hold specific module positions: footer, mainnav,
middle;
o blocks that are automatically generated according to layout settings: spotlights,
left & right, content-mass & column-mass;
o blocks that manage specific functions such as a few user-tools, or the
IE6warning that cannot be customized inside the layout configuration;
o blocks that call for dynamically generated content such as: system messages or
content component body;
o blocks that call for javascripts and stylesheets.

Default Layout

Layout xml file

Layout information

This holds the very basic layout design of the template with all default blocks supplied by the
framework. All blocks have default style, order and positioning. Other layouts may override
these block settings, without having to use the entire code of the default layout to generate the
layout design.

Layout blocks

• ie6 blocks set manage the Microsoft Internet Explorer 6 Warning Message;
• user-tools blocks set manage the front-end customization tools that front-end users can
use to make navigation more enjoyable:
o color.php block holds the theme switcher;
o cpanel.php block loads all other user-tools mini blocks;
o direction.php block manages the text direction of the template: Right to Left or
Left to Right;
o font.php block manages the font-size of the template;
o layouts.php block detects all layouts both core and user created and displayes
them in the panel;
o layout-switcher.php block manages the layout switch;
o menu.php block manages the menu system switch;
o profiles.php block manages the profile settings for each page users navigate;
o reset.php block provide reset feature to restore all settings to profile defaults;
o screen.php block manages the template width switcher;
o themes.php block manages the theme switch when required by the profile;
o tools-mega.php block loads megamenu parameters;
• desktop blocks set are used for desktop devices designated layouts
o content.php holds the content component body call;
o css.php block manages the Google Font for text logo text, module titles, content
titles. page titles;
o fixheight.php holds a script to force usage of the same height of the left, main
and left, and a fixed height for content mass and column mass positions;
o footer.php block holds module positions for copyright notices, other menus and
other advertising;
o head.php block is used for system CSS file calls;
o header.php block holds website's logo and a module position for search
modules;
o mainnav.php block holds the main navigation of the template;
o message.php block holds the system message body to display system messages;
o middle.php block is where your content actually is displayed: articles, products,
galleries, and this block also incorporates left and right blocks previously
designed as separate block files;
o module.php and modules.php are block generators used to create blocks for
special module positions needed by advertising modules, content sliders, etc;
o navhelper.php block holds the pathway module position;

o spotlight.php is a block generator script to be used as top spotlight or bottom
spotlight, no matter how much spotlight blocks you may want to use.

Layout Variations
In this section we are going to explore methods on how to develop layout variations.

Different block positions

Two columns left layout
Layout xml file

Layout information
This layout inherits blocks and their settings from the default layout, but overrides the position
for left and right blocks. See more information below.

Layout blocks

• left block is using left1 layout position (default was right1);
• right block is using left2 layout position (default was right2);

Different block order within the layout

Top menu & Left-Body-Right Layout
Layout xml file

Layout information
This example layout loads all blocks of the default layout, but overrides the order for header
and mainnav, and also overrides the position of the left block. Please note that whenever you
use a Left-body-Right layout, the left-mass and right-mass positions are hidden. See more
about just below.

Layout blocks

• mainnav block moved to top;
• header block moved below the mainnav block;
• left block is using left1 layout position;
• right block is using right2 layout position;

Different block styles

Square Layout
Layout xml file

Layout information
This layout also loads all of the blocks coming with the default layout, but this time, the right
block uses a different style.

Layout blocks

• right block is using style="square" style, and you can customize this styling in the
template.css file, but you will need to customize the modules.php in the HTML folder
and add your desired code for this style.

Mobile Ready Layouts
Multiple layouts feature is also powering the Mobile Ready feature. These layouts have their
own blocks sets optimized and developed according to specific standards. In the Profiles tab of
the template administration panel, you can assign these layouts for each mobile device type.

The Handheld layout

• handheld specific blocks override the default blocks and they are optimized for fast
loading:
o footer holds the website copyright information;
o head holds the scripts;
o header holds the template logo;
o main holds the main content body;
o mainnav block holds a special designed main navigation;
o toolbar block is in charge to allow user to show / hide the main navigation.

The framework uses this handheld layout when it detects devices such as:

• Windows Mobile devices
• Android powered mobile devices
• Blackberry mobile devices
• Palm mobile devices
• and other mobile devices

The iPhone layout

• iphone blocks set override the default blocks and they are designed according to iPhone
standards:
o footer holds the website copyright information;
o head holds the scripts;
o header holds the template logo;
o main holds the main content body;
o mainnav block holds a special designed main navigation;
o menu block generates iPhone specific navigation system.

Block attributes and parameters
JA T3 Framework 2.0 comes with advanced layouts feature. Blocks that form layouts can be
manipulated with a series of parameters and settings to easily change the HTML rendering
behavior.

General block parameters

Block name

Expression: <block name="top" ...>
Purpose: this attribute serves as an identifier for the blocks, as there is always a chance some of
your blocks to be the same type, so the framework needs to know how to identify them. The
identifier refers to the layout position within the layout.

Example: <block name="left1">left</block>

Block type

Expression: <block name="header" type="header" ...>
Purpose: this parameter sets the behavior and the functionality of the block as there are
several files to manage behavior of these blocks:

• head.php
• header.php
• middle.php
• footer.php

Block style

Expression: <block name="top" style="JAxhtml" ...>
Purpose: this parameter sets a module style for all modules inside a block. These styles are
defined in the modules.php located in the your_site/plugins/system/jat3/base-
themes/default/html folder, so this way Joomla! can understand how to show the content of
the modules. The styles list is:

• no style - the default block setting with no block style defined, only provide support for
module class suffixes;
• raw - provides a blank design for modules, no div, no classes;
• xhtml - mostly used for macro blocks like header, middle, footer;
• JAxhtml - provides a clean design for modules;
• JArounded - provides support for rounded corners design for modules.

Generate additional div

Block markup

Expression: <block name="left" name="top" markup="2" ...>
Purpose: a new parameter to generate some additional div tags within the left or right
columns. The idea is to provide more flexibility to designers. Values of this parameter:

• markup="1" - default value, no effect;

• markup="2" - advanced markup, will add a div class="l" (l is for left) above the column
and one div class="r" (r is for right) below, see example below..

• markup="3" - complex markup, will add two div tags: class="tl" (tl is for top left) and
class="tr" (tr is for top right) above the column and two div tags: class="bl" (bl is for
bottom left) and class="br" (br is for bottom right), and a two middle div tags. See
example below...

Block inner

Expression: <block name="right" block-inner="3" ...>
Purpose: this parameter will add a number of inner div tags to wrap the block. The value you

set here is actually how deep the div structure will be. The additional div tags will have
class="block-inner1", class="block-inner2", .. class="block-innerX". See image below..

Main inner

Expression: <block name="right" main-inner="2" ...>
class="main-inner1", class="main-inner2", .. class="main-innerX".

Wrap inner

Expression: <block name="right" wrap-inner="3" ...>
class="wrap-inner1", class="wrap-inner2", .. class="wrap-innerX".

Remove div

No wrap

Expression: <block name="header" no-wrap="1" ...>
Purpose: removes the div with class="wrap" that wrap the block for any macro block that fills
the entire width of the template (header, mainnav, middle, footer, etc).

No main

Expression: <block name="header" no-main="1" ...>
Purpose: removes the div with class="main" that wrap the block for any macro block that fills
the entire width of the template (header, mainnav, middle, footer, etc).

Middle column width

Column general width

Expression: <block name="middle" type="middle" colwidth="20" ...>
Purpose: this parameter sets a default column width for the left, component body and right
blocks inside the middle block. Left and right blocks use a column width of 20%, and main body
will use the remaining 60%.

Custom column width

Expression: <block name="right" width="25" ...>
Purpose: this setting will override the default column width of 20% set for all blocks in the
middle block. A higher value of this parameter will increase the width of left and / or right
blocks, and will decrease the width of the main body block.

Middle Positions

Standard Columns

Purpose - middle.php macro block can render a column for each of the left, content-body
(known as main) and right blocks, but can also render a column for the content-body and left &
right joined into second column. Each column have distinctive class rules to be styled separately
for each layout.
Variations

• left + body + right

<blocks name="middle" colwidth="20" fixheight="1">
<block name="left1/left2">left</block>

<block name="right1/right2">right</block>
</blocks>

• left + right + body

<block name="left1">left</block>
<block name="left2">right</block>
</blocks>

• body + left + right

<block name="right1">left</block>
<block name="right2">right</block>
</blocks>

• other variations
o right + left + body
o body + right + left
o left + body + right
o other variations

Enabling mass positions

Purpose: enables you to use content-mass-top and / or content-mass-bottom, left-mass-top
and / or left-mass-bottom, right-mass-top and / or right-mass-bottom positions as additional
module positions. You can enable the content-mass positions anytime, but column-mass (left-
mass-top, right-mass-bottom, etc) can be enabled only when left and right blocks join to form
a column.
Variations

• left + body - all additional positions

<block name="left-mass-top">left-mass-top</block>
<block name="content-mass-top">content-mass-top</block>

<block name="content-mass-bottom">content-mass-bottom</block>
<block name="left-mass-bottom">left-mass-bottom</block>
</blocks>

• body + right - top additional positions

<block name="right-mass-top">right-mass-top</block>
<block name="content-mass-top">content-mass-top</block>
</blocks>

• body + right - various additional positions

<block name="right-mass-top">right-mass-top</block>
<block name="content-mass-bottom">content-mass-bottom</block>
</blocks>

Inset Columns

Expression: - <block name="inset1">left</block>
Purpose: allows you to group the main-body with left and/or right blocks to form a column
with special div structure and styling classes.
Values

• inset1 - groups main body with left / right block, and sets the position of the left / left
block to the LEFT side of the main-body;
• inset2 - groups main body with left / right block, and sets the position of the left / left
block to the RIGHT side of the main-body.

Variations

• (left + body) + right
<block name="inset1">left</block>
• left + (body + right)
<block name="inset2">right</block>

• (left + body + right)
• left + (right + body)
• (body + left) + right
• other variations

Spotlight parameters

Total width

Expression: <block name="bottom-spotlight" type="spotlight" totalwidth="95"
...>user6,user7,user8,user9,user10</block>
Purpose: this setting will override the default width of the entire spotlight (100%) with the
value you set here. In the expression above you can see a 95% width for the bottom-spotlight
block.

Custom width

Expression: <block name="top-spotlight" type="spotlight" special="left"
specialwidth="25">user1,user2,user3,user4,user5</block>
Purpose: - this will override the default 20% width for a single position within the layout, it
could be the one in the right side, it could be the one in the left side, but let's examine these
parameters closer:

• special="left" - this defines where is the module we want to use the custom width: left
or right
• specialwidth="25" - this defines the new width value for this module within the spotlight
block.

4. Themes
• Themes are in charge of filling a template with color and give your template a new look
and feel.
• Themes can hold CSS and image files to override everything in the core plugin styling,
and also basic template styling.
• Themes can also hold html content components and modules overrides.
• Usually they override the default theme.
• They can also override layout blocks for customization purposes.

• In Profiles tab of the template administration panel you can use multiple themes for a
single profile, and set an order of priority.

Base Theme

• This is the base theme to hold very basic layout design.
• This theme has no graphics, no colors, just dimensions, padding and margins.
• Additional styling should be added in theme variations to override this default layout
design.

Theme Variations
• Theme variations override the base theme and have highest priority to style the
template.
• They can be used to create unlimited color themes, with contrasting colors and graphics.

The Default Theme

This is the default theme supplied with the T3 Framework based template. This theme will
override the base theme in the core plugin. Let's have a closer look at the files and folders:

• blocks folder to hold the blocks you want to override;
• css folder to hold template.css to override general template styling and menu folder to
override menu systems styling;
• html folder to override same files in the core plugin for content components and
modules views;
• images folder to override the logo and generally all graphics needed to have a custom
theme design;
• info.xml file to hold theme information.

Color Contrast Themes

This is a theme variation to override the default theme supplied with the T3 Framework based
template. Let's have a closer look at the files and folders:


Graphics Rich Themes

This is graphics rich theme supplied with the JA Anion T3 Framework 2.0 based template. Let's
have a closer look at the files and folders:

• images folder to override the logo and generally all graphics needed to have a unique
theme design;

Important notice
The framework will load all CSS files, images, and layouts for:

• 1st: plugin base-themes
• 2nd: default themes of the template with: layouts, css, images
• 3rd: other theme variations and user created templates

You must ONLY use additional files to override what is supplied by default, and keep all
simple and optimized. No need to use same code in all template.css files.

5. Profiles
What is a profile
Basically it is a new presets feature to hold all template settings. These settings are hold in files
inside the template folders.
You can create unlimited unique profiles, combining all template settings to achieve several
design goals, and these profiles you create are stored in your template local folder.
You can manage profiles in the Profiles Panel of the template administration.

What do they bring to the framework
• Profiles have taken over the menu & layout override options used in the previous
version of the framework.
• When switching the layout in front-end does not redirect to home page anymore
because of the improved User Tools panel.
• No more template parameters in the links! User can always customize some profile
settings in front-end and reset to default profile settings, even if overrides are set for
specific pages.

Default Profile
This is the file for the default profile. It holds default values for all template settings:
your_site/templates/jat3_blank/core/etc/profiles/default.ini

logoType=image
setting_font=3
setting_screen=fixed
setting_screen-fixed-screen_width=950px
hide_content_block=0
setting_direction=ltr
gfont_global=
gfont_logo=
gfont_slogan=
gfont_moduletitle=
gfont_pageheading=
gfont_contentheading=
menutype=mainmenu
setting_menu=mega

startlevel=0
endlevel=-1
ja_menu-mega-animation=slide
ja_menu-mega-duration=300
option_t3logo=1
option_font=1
option_screen=1
option_profiles=1
option_layouts=1
option_direction=1
option_menu=1
themes=core.light
desktop_layout=default
handheld_layout=handheld
iphone_layout=iphone

Profile Variations
Other profiles can only override some settings defined within the default profile. Example:
your_site/templates/jat3_blank/local/etc/profiles/your_profile.ini

themes=orange

This profile will only override the default theme used by the template with the orange theme,
so as you can see, there is no need to repeat the entire profile code if the other settings are not
changed.

6. Override Priority
Templates have the ability to override everything coming by default with the Joomla!
distribution package: content components or modules front-end views, styles, language strings,
etc.

The template default settings are hold in the default profile. Other profiles will then override
every setting in the default profile.

You can assign a unique settings profile for your homepage, one for your online shop, one for
your forum and another one for your blog. This way you can override the default profile for
every single page or content component with your desired profile.

Lowest Priority

As you can see in the JA T3 Framework Plugin structure:

• it holds the default styling and code of the blank theme in the base-themes folder:
o CSS styling,
o layouts,
o HTML template overrides,
o images,
o themes.

Medium Priority
The T3 Framework based template default theme:

• holds it's own general styling to override the default general styling in the blank theme
• it does not hold javascript files of any kind, but it can also override javascript,
• will override everything in the blank theme:
o CSS styling,
o layouts and blocks,
o images.

High Priority
A high priority have theme variations coming with the templates powered by the T3
Framework 2.0, as they can hold CSS styling, layouts and blocks inside, HTML template
overrides and images.

• will override everything in the default theme:
o CSS styling,
o blocks,
o images.

Highest Priority
• Priority zero have user created themes to hold custom layouts, images, stylesheets.
• When using multiple themes simultaneously, the theme priority can always be changed
in the Theme Settings section of the Profiles Panel
• Front-end users can always customize everything in a profile that was loaded for a
specific page: layouts, menu system, other profile settings.
• All styling marked as !important have highest priority.

Graphic representation

7. Template administration
The template administration was improved to make customization work easier via internal
editors and upload features, but also faster via AJAX implementations. The administration is
now split into five sections:

• Global Panel - general template settings and system settings
• Profiles Panel - template design settings and presets
• Layouts Panel - template layouts management
• Themes Panel - template color themes management
• Help & Update Panel - help resources and version information

The administration panel is now your best friend as each section comes with a quick guide, and
every setting provide hints and usage instructions.

Global Panel
Global Panel Overview

This panel controls the general behavior of the template and also the system and compression
settings. With all it's sections minimized, this panel looks like this:

Profile Override Settings

This section allows you to set profile overrides for specific pages or content components. The
default profile is used for all pages and content components by default, but you can create
unlimited profile overrides.

In case you want to change the template settings for one or more pages or content
components, here is a quick guide:

• Step 1 - Click the arrow to maximize the Profile Override Settings section.
• Step 2 - Select one or more menu items or components in the the left drop down list
(click and hold the Ctrl key for multiple selection) and then click the Select button in the
selection box.
• Step 3 - Select the profile you want to use for these pages.
• Step 4 - Click the Apply button.

Please note!
There could be several reasons why profile override settings don't work when using SEF. Why?
Within a Joomla! website, there could be several links to route to certain internal pages, and
these links don't always carry an Itemid value, but other SEF components like sh404SEF can
solve the problem because it makes sure to route all these links with no Itemid value to the
corresponding ones having Itemid=5 value. So having Itemid, T3 Framework will load the
proper profile.

System Settings

This section manages the cache feature for the template. Have a look at the picture below:

• Enable Development Mode - if you set this setting to Yes, it will completely disable all
cache, so that you can always see instantly your customizations on page refresh. Setting
this setting to No is recommended for production websites with huge traffic that need
cache.
• Cache Mode - Enables / Disables template cache to lower all PHP queries generating the
front-end HTML of your website (component/module template override views, layout
files, etc).
• Cache Exclude - Option to exclude the cache feature for specific components or
positions.
Example:
o position=user1,user2 - will exclude cache for these positions,
o component=com_virtuemart,com_fireboard - will exclude these components
from using cache.

This feature was developed to avoid script conflicts for AJAX content.

Compression Settings

Optimize CSS - This this feature will optimize all the CSS files used in your website.
Options:

• No - Disables the CSS compression features.
• Linked files - Uses the @import function to import all CSS files into a single CSS file to
have a single file call and reduce browser requests. This will fix the IE related issues
caused by the maximum 30 CSS files limit.
• Join & Minify - Combines Minify and Join (file merging) optimization. Minify is an
optimization technique to eliminate blank spaces and other unnecessary characters
(comments usually) without changing the functionality of the code. Join will merge the
content of the minified files into a single file to be stored in the folder you can configure
below.
• Join & Minify & Compress - will compress the CSS file created by Join & Minify using
Joomla! gZIP compression scripts.

Optimize JS - This this feature will optimize all the JS files used in your website.
Options:

• No - Disables the JS compression features.
• Join - Will only merge all JS files into a single JS file to be stored in the folder you can
configure below.
• Join & Minify - Combines Minify and Join (file merging) optimization. Minify is an
optimization technique to eliminate blank spaces and other unnecessary characters
(comments usually) without changing the functionality of the code. Join will merge the
content of the minified files into a single file to be stored in the same folder you can
configure below.
• Join & Minify & Compress - will compress the JS file created by Join & Minify using
Joomla! gZIP compression scripts.

Optimize Folder - Folder where optimized css/js files are stored. By default it is t3-assets in the
web root.
Please note: This folder must be writable.

Optimize Exclude - Not recommended
Add the JS / CSS files name (without location path) you do NOT want to optimize, one per row.

Example:
template-rtl.css
mega.js

Please note

• The CSS & JS Compression feature can work with JA Compress Plugin enabled.
• Minify Script reguires PHP 5.x.

Profiles Panel
Profiles Panel Overview

In this panel you can manage profiles: create, clone, edit, delete (your own) profiles. For each
profile you can customize all template settings: logo, font-size, layouts, menu system, color
theme, text-direction, etc. All these settings are split into several sections as you will see in the

next chapters.

Profiles Typology

There are 2 types of profiles:

• default profiles - cannot be deleted as they are part of the framework core, but can be
customized / reset to default;

• user created profiles to load user layouts, themes and other custom settings.

Editing Profiles

All user created profiles (clones of the defaults or created by user) override the settings of the
default profile. To edit a user created profile, please proceed with this quick guide:

• Step 1 - select a profile you created or cloned out of any other default one;
• Step 2 - click the checkbox to enable the customization of any setting and change the
values or options;
• Notice - the Profiles tab detected a user customization that will require to save the
settings;
• Step 3 - click the Apply button to save settings.

Please note that settings that are not checked cannot be changed and will not override the
default values.
Please note - when editing core template profiles, the framework will create profile overrides in
the local profiles folder (user setup).

General Settings

In the general profile settings you can customize:

• the logo - image / text (just like in the screenshot)
• the font size - select from six font-sizes: from 10px to 15px
• the template width - SPECIFIED PIXEL (default), SPECIFIED PERCENTAGE, AUTO, WIDE
• text direction - RTL or LTR
• you can also choose to show/hide the main content block.
• T3 Logo setting comes with 5 options:
o Don't show - will hide the T3 Framework logo
o Light Logo - show default T3 Framework logo
o Dark Logo - show dark T3 Framework logo
o Light Logo - show a small T3 Framework logo with default colors
o Dark Logo - show a small T3 Framework logo with dark colors.

Google Font API Settings

JA T3 Framework 2.0 comes with a built in font-replacement solution: Google WebFonts. In the
font settings you can customize:

• Global Font - a special font to be used generally for all text content in the front-end
• Logo Font - a font to be used when you are using Text Logo setting
• Slogan - a font to be used for slogan line under the Text-Logo
• Module Title Font - a font to be used for all module titles in your website
• Page Heading Font - a font to be used for Menu Item Pages
• Content Heading Font - a font to be used for content articles or items

For each of the elements above, you can also add custom CSS styling, one style per row.
Example:

font-size:18px;
font-weight:bold;

Menu Settings

The menu settings allow you to configure the main navigation for your website:

• the menu to be loaded (mainmenu is the default setting)
• menu system: Split Menu, CSS Menu, Mega Menu, Dropline Menu
• starting & ending points of menu rendering
• if Mega Menu is selected, you can customize the animation settings:
o Animation type: none, slide, fade, slide and fade
o Animation duration - time in milliseconds for the animation
o Delay hide time - time in milliseconds for the hide time delay.

User Tools Settings

In this section you can set what tools you allow your users to use, so you can show or hide any
of the user tools for each of your profiles:

• Font-size switcher
• Screen-size switcher
• Profiles-switcher - This switcher shows up when you have at least 2 PROFILES.
• Layouts-switcher - This switcher shows up when you have at least 2 LAYOUTS.
• Text-direction switcher
• Menu-system switcher

Themes Settings

Theme Settings allow you to override the styling of the default theme. To do that, please follow
the steps described below:

• Step 1 - click the Edit icon to open the theme selection box;
• Step 2 - check one or more themes to be used to override the default theme;
• Step 3 - click the Apply button;

• Step 4 - click and drag the themes and set your favorite order: the first in the left will
override all in the right, and the last is the default theme that is locked and cannot be
dragged.
• Step 5 - click the Apply button in the template administration panel to save the new
theme settings.

Layout Settings

The layout settings allow you to set the default layout to be used as default for each user device
type, for each specific profile.
You can set here:

• a default layout for desktop computers
• a default layout for Handheld devices: BlackBerry, Android Mobile, Windows Mobile, etc
• a default layout for iPhone devices

Layouts Panel
Layouts Panel Overview

In this panel you can manage layouts used by the template.

Layouts Typology

As you can see, there are two types of layouts:

• default layouts - supplied by the template developer and stand as samples end-users
can use to create their own layouts. These cannot be deleted as they are part of the
template core files.
• user created layouts - are created by the end-user to use his desired styling.

Editing layouts

JA T3 Framework 2.0 comes with an internal editor to easily customize layouts. To edit a layout,
please follow this quick guide:

• Step 1 - In the Layouts panel click the Edit link for any of the layouts you would like to
edit. This opens the layout editor you can see below.

• Step 2 - Customize the layout using the internal editor.
• Step 3 - Click the Save button in the internal editor to save the layout.

Please note: By editing core template layouts, the framework will create layout overrides in the
local layouts folder (user setup).

Themes Panel
Themes Panel Overview

This panel was developed to ease your work managing multiple themes. You can create your
custom color themes, pack them and upload them to the template themes folder right in the
back-end, just like installing a template extension.

There are two type of themes:

• Core Themes - default themes supplied by the template, cannot be deleted as they are
part of the template core files.
• Local Themes or User Created Themes.

Uploading themes

Based on default core themes, you can create your own themes and upload them right in the
back-end of your website. For instance you would like to design a green theme, please follow
this quick guide:

• Step 1 - Create your theme.
• Step 2 - Pack your theme into a zip file.
• Step 3 - Click the Choose File button to browse for the green theme.
• Step 4 - Click the Upload File & Install button.

The newly uploaded theme will be listed in the Local Themes section of the Themes Panel.

Help and Update Panel

This Panel allows you to:

• View the current version information.
• Check or upgrade to the new version with our JA Extensions Manager.

Also this panel provides help and documentation resources.

T3 Framework FAQs

Contents :
1. Developing a T3 Framework Template
2. End-user Customization
3. Updating T3 Framework
4. JA Purity III Demo

1. Developing a T3 Framework Template
Introduction
In this section we are going to cover all about developing a T3 Framework 2.0 Template:
ja_purity_iii with the very same design as ja_purity_ii. Generally we are going to explain the
development steps, style customizing basics, file & folder management and principles.
This section explores the template developer development procedures on how to create a new
template with core layouts, themes and settings. All these developer created files and themes
should use the core folder, as end-user can use them as examples for their design goals.

Video Tutorials
If you need further assistance, please watch our video tutorials on User Theme:

• Part 1 - preparation, customizing header and spotlights
• Part 2 - customizing Mega Menu, links, HTML overrides, suffix class,etc.

Preparation
Technical Requirements

To be able to develop your own template, you will need to prepare:

• the software tools
o Adobe Photoshop CS3/CS4 or Gimp for graphics;
o Adobe Dreamweaver or Notepad++ for code editing;
o Mozilla Firefox with Firebug plugin for CSS play around;
o FileZilla or any other FTP client;
• the enviromnent
o localhost xampp, wamp or any Apache with PHP and MySQL server;
o or
o livesite preferably on a subdomain.
o Joomla! 1.5 installed on your development server, check server requirements
here;
o other resources will be added to this section shortly.

Create template folder

If you are developing on localhost, create a ja_purity_iii folder inside the templates folder. To
do that on your livesite, you will need to use your FTP client.

Copy general template files

The new template will need the basic files to be able to work as a Joomla! template. To do that
please follow these steps:

• Browse the ja_t3_blank folder in your templates folder;
• Copy the following files from this folder to your new template folder:
o component.php
o favicon.ico
o index.php
o template_thumbnail.png
o templateDetails.xml
o params.ini

Create template file and folder structure

To override the basic design of the core framework, you will need to have a correct file and
folder structure. To do that, you can simply copy the files and folders from the ja_t3_blank into
the ja_purity_iii folder as follows:

As you can see in this image, the template files and folders are grouped so you can easily follow
and suggest copying only the default theme, layout, profile and general template files.

Edit the default theme XML file

Next, we are going to enable the default theme of the ja_purity_iii template.

• Find file your_site/templates/ja_purity_iii/info.xml
• Edit this file accordingly, here is an example:

<?xml version="1.0" encoding="utf-8"?>
<theme>
<name>default</name>
<description>Default theme for JA Purity III Template</description>
<date>July 2010</date>
<version>1.0.0</version>
<author>JoomlArt</author>
<copyright>JoomlArt</copyright>

</theme>

Adjust templateDetails XML file

The new template is ready to go, it only needs to have it's own information. To do that, you
have to adjust the templateDetails.xml file as follows:

• replace "ja_t3_blank" to "ja_purity_iii"
• replace all other information to your convenience, see our example below

<install version="1.5" type="template">
<name>JA_Purity_III</name> // update the template name here, no spaces are allowed
<version>1.0.0</version> // remember to update the template version
<creationDate>02/07/10</creationDate> // update the creation date here
<author>JoomlArt.com</author> // update the author of the template as you wish
<authorEmail>webmaster@joomlart.com</authorEmail> // update the contact details as you
wish
<authorUrl>http://www.joomlart.com</authorUrl> // update the author website as you wish
<copyright>J.O.O.M. Solutions Ltd.</copyright> // update the copyright owner of the template
as you wish
<license>GNU/GPL version 2</license> // update the licence type: commercial or GNU/GPL 2.0
<description>Clean and beautiful template powered by T3 Framework 2.0.</description> //
update the template description as you wish
<engine>t3</engine> // update the framework version if necessary
<files>
......common code deleted.....
</files>

<languages>
<language tag="en-GB">en-GB.tpl_ja_purity_iii.ini</language> // create these language files
and update here accordingly
</languages>
<administration>
<languages folder="admin">
<language tag="en-GB">en-GB.tpl_ja_purity_iii.ini</language> // create these language files
and update here accordingly
</languages>
</administration>

<positions>
</positions>

<params addpath="/plugins/system/jat3/core/element">
</params>
</install>

Create language files

Now your template will need language files. This is not mandatory if you create a template for
you, the framework will use the core plugin default language files, but if you are a template
developer, you might want to deliver fully functional templates. Here is what you have to do:

• create back-end language file
o open your template folder ja_purity_iii, and create a folder called admin
o copy & paste inside the file from same folder of the ja_t3_blank template folder
o rename the file from en-GB.tpl_ja_t3_blank.ini to en-GB.tpl_ja_purity_iii.ini
o open the file and edit it accordingly;
• create front-end language file
o open your template folder ja_purity_iii, and copy & paste inside the en-
GB.tpl_ja_t3_blank.ini file from same folder of the ja_t3_blank template folder
o rename the file from en-GB.tpl_ja_t3_blank.ini to en-GB.tpl_ja_purity_iii.ini
o open the file and edit it accordingly.

Install your new template in Joomla! 1.6

With Joomla! 1.6, you have to Discover the new template, so please follow this quick guide:

• Go to the "Extensions" menu, and click "Extensions Manager"
• Click to open the "Discover" tab

• Click the "Discover" button in the top-right toolbar
• Select your template and click the "Install" button.

Set the new template as default

To be able to customize the template, you will have to set it as default template, so to do so,
please go to your site back-end, and follow these steps:

• Step 1 - select the JA Purity III template;
• Step 2 - click the Default button.

Enable Development Mode

Now you have to make sure your customizations are applied instantly every time you change
the code or images, so you have to disable the framework core cache and enable development
mode. To do that, you must browse the JA_Purity_III template administration, and then follow

these steps:

• Step 1 - select Yes for the Enable Development Mode option;
• Step 2 - click the Apply button.

Now you can start customizing your new template so go to your front-end, and refresh the
page to to make sure new template works.

Building the default layout
Layouts are stored in ja_purity_iii/core/etc/layouts folder. Firstly, we will build the default
layout having 3 columns: Left - main - Right in main content.

For this design, we could have this configuration:

• TOP:
oheader
omainnav
ospotlight
• MIDDLE:
o left
o main content body
o right (rounded)
• BOTTOM:
o spotlight
o navhelper
o footer

With these blocks, the default layout XML file (default.xml) will look like this:

<layout name="desktop">

<stylesheets>
</stylesheets>
<blocks name="top" style="xhtml">
<block name="header" type="header" main-inner="1"></block>
<block name="mainnav" type="mainnav" main-inner="1"></block>
<block name="cpanel" type="usertools/cpanel"></block>
<block name="topsl" type="spotlight" main-inner="1">user1,user2,user3,user4,user5</block>
</blocks>
<blocks name="middle" colwidth="20">
<block name="right1" style="JArounded">right</block>
</blocks>
<blocks name="bottom" style="xhtml">
<block name="botsl" type="spotlight" main-inner="1">user6,user7,user8,user9,user10</block>
<block name="navhelper" type="navhelper" main-inner="1"></block>
<block name="footer" type="footer"></block>
</blocks>
</layout>

Save above XML into ja_purity_iii/core/etc/layouts/default.xml, then check it in your front-
end (refresh the page to test the layout change).

Calling additional files into layout

In some cases you might want to call for additional stylesheets or js files, here is an example on
how to do that:

• Create new folders called js or css (if none) in your template root folder;
• Copy the files into the new folders;
• Edit the default (or any other) layout like in the example below:


<stylesheets>
<file>css/your-file-name.css</file>
</stylesheets>
<scripts>
<file>js/your-file-name.js</file>
</scripts>
<blocks name="top" style="xhtml">
<block name="header" type="header" main-inner="1"></block>
<block name="mainnav" type="mainnav" main-inner="1"></block>
<block name="cpanel" type="usertools/cpanel"></block>
<block name="topsl" type="spotlight" main-inner="1">user1,user2,user3,user4,user5</block>
</blocks>
</blocks>
<blocks name="bottom" style="xhtml">
<block name="botsl" type="spotlight" main-inner="1">user6,user7,user8,user9,user10</block>
<block name="navhelper" type="navhelper" main-inner="1"></block>
<block name="footer" type="footer"></block>
</blocks>
</layout>

Building the default theme
The default theme of the template has a higher priority than the core styling. The best thing to
do is to use the default theme from the ja_t3_blank template and customize it for your needs.

For our example here, we are going to modify this theme to recreate the ja_purity_ii template
design, so in the following sections we are going to show you a step by step guide on the
customization techniques.

Default theme info

First thing to do is to update the your-site-root/template-name/info.xml file. Here is an
example:

<theme>
<name>Default</name>
<description>Default theme for JA Purity III Template</description> Please update the Theme
Description
<date>April 2010</date> Please update the Theme Creation Date
<version>1.0.0</version> Please update the Theme Version
<author>JoomlArt</author> Please update the Theme Author
<copyright>JoomlArt</copyright> Please update the Theme Copyright Information
<stylesheets>
</stylesheets>
</theme>

Calling additional files into the theme

You can also add additional files to be used for the default theme (or any other). Here an
example:

<theme>
<name>Default</name>
<description>Default theme for JA Purity III Template</description>
<date>April 2010</date>
<stylesheets>
<file>css/your-file-name.css</file>
</stylesheets>
<scripts>
<file>js/your-file-name.js</file>
</scripts>
</theme>

Main style

The main style of the new template is in the
your_site/templates/ja_purity_iii/css/template.css file now.
To reproduce the ja_purity_ii design we are going to modify this file as it holds the styling for
the default theme of the ja_purity_iii template. All other core or local theme variations are
only going to override just a few stylesheets.
Please note that we are not insist on all design details, we are only going to show you the files
you need to edit, and explain how.

The Header

To customize the header, please follow these steps:
find line 158 in file your_sitetemplatesja_purity_iiicsstemplate.css

#ja-header .main { border-bottom: 1px solid #ccc; }

and replace with

#ja-header {background:#333; border-bottom: 1px solid #555;}
#ja-header .main { padding:0; }

Changes preview

These changes also need you to customize the logo and the search module.

Customizing the logo

You will need the default logo from JA Purity II Template, and copy it inside the
your_sitetemplatesja_purity_iiiimages folder. Then you will have to edit the same CSS file,
so..
find lines starting 163

h1.logo { width: 184px; height: 28px; }

h1.logo a {
background: url(../images/logo.gif) no-repeat left;
display: block;
width: 209px;
height: 30px;
}

replace with

h1.logo { width: 205px; height: 78px; }

h1.logo a {
background: url(../images/logo.png) no-repeat left;
display: block;
width: 207px;
height: 80px;
}

Customizing the search module

This code change is so easy, we are only going to change text color, background color and
border-color, so..
find line 51 of the same file your_sitetemplatesja_purity_iiicsstemplate.css

/* Search ---*/

and add after it

#ja-search .inputbox { background: #444444; border-color: #555555; color: #CCCCCC; }

Navigation bar styling

In the same file your_sitetemplatesja_purity_iiicsstemplate.css
find line 203

#ja-mainnav .main { border-bottom: 1px solid #ccc; }

and replace with

#ja-mainnav {background:#333; border-bottom: 1px solid #ccc;}
#ja-mainnav .main { }

Changes preview

The spotlights

TOP SPOTLIGHT
find line 245

#ja-topsl .main { padding: 10px 0; border-bottom: 1px solid #ccc; }

replace with

#ja-topsl {border-bottom: 1px solid #ccc; background:#f6f6f6;}
#ja-topsl .main { padding: 10px 0; }

BOTTOM SPOTLIGHT
then find line 248

#ja-botsl .main { padding: 10px 0; border-bottom: 1px solid #ccc; }

replace with

#ja-botsl {border-bottom: 1px solid #ccc; background:#e6e6e6;}
#ja-botsl .main { padding: 10px 0;}

Changes preview for Top Spotlight

The pathway

find line 205

#ja-navhelper .main { text-transform: uppercase; border-bottom: 1px solid #ccc; }

and replace with

#ja-navhelper {border-bottom: 1px solid #ccc; background:#f6f6f6;}
#ja-navhelper .main {
text-transform: uppercase;
}

Changes preview

Styling custom block styles

We have previously setup to use JArounded style for the right block, and this will need some
additional styling the default theme of our new template. Please open
your_site/templates/ja_purity_iii/css/template.css and find line 149

/* Rounded Module

*/

and add after it the following code:

.ja-box-br {
background: url(../images/b-br.gif) no-repeat bottom right #fff;
}

.ja-box-bl {
background: url(../images/b-bl.gif) no-repeat bottom left;

}

.ja-box-tr {
background: url(../images/b-tr.gif) no-repeat top right;
}

.ja-box-tl {
background: url(../images/b-tl.gif) no-repeat top left;
padding: 0 15px 10px;
}

Next, we are going to correct the module title border-bottom, so find these lines 169-175

div.ja-module h3, div.module h3 {
font-size: 100%;
font-family: Helvetica, Arial, sans-serif;
border-bottom: 1px solid #ccc;
}

and replace with

div.ja-module h3, div.module h3 {
font-size: 100%;
font-family: Helvetica, Arial, sans-serif;
border-bottom: 1px solid #ccc;
margin:0 -15px;
padding:5px 15px;
}

Files needed for this customization can be found in the images folder of JA Purity II template.
You will have to copy these files in the your_site/templates/ja_purity_iii/images folder.

The next case of block style is JAxhtml (block style="JAxhtml"). This will generate the HTML
code for modules different than the JArounded style, and can be styled this way:

div.ja-moduletable, div.moduletable {
/* your CSS code goes here */
}

Customizing module class suffixes

If you want to create a blue class suffix to use for your modules, just open the template.css of
your default theme. Find modules styling and add this code:

/* blue */
div.moduleblue {
background: url(../images/bb-br.gif) no-repeat bottom right #2C77B6;
}

div.moduleblue .ja-box-bl {
background: url(../images/bb-bl.gif) no-repeat bottom left;
}

div.moduleblue .ja-box-tr {
background: url(../images/bb-tr.gif) no-repeat top right;
}

div.moduleblue .ja-box-tl {
background: url(../images/bb-tl.gif) no-repeat top left;

}

You will have to find these images in the images folder of the JA Purity III template and copy
them into the images folder of your default theme.
Please note: color fill module class suffixes only work for block style="JArounded".

Customizing the menu systems

Mega Menu

If you have copied the CSS folder from the default theme, you only have to adjust some lines to
make it's design similar to the one from JA Purity II.

Please find this file your_sitetemplatesja_purity_iiicssmenumega.css and replace it's
complete content with this code:

.ja-megamenu a.active { background: #069 !important; color: #fff !important; }
.ja-megamenu a.over {background: #555; color: #fff !important;}
.ja-megamenu ul.level0 li.mega a.mega { color:#ccc;}

/* lv - 1 and below

*/

/* Styling ---*/
.ja-megamenu ul.level1 li.mega { border-top: 1px dotted #777; }

.ja-megamenu ul.level1 li.first { border-top: 0; }

.ja-megamenu ul.level1 li.mega a.mega {
border: 0;
}

/* CHILD CONTENT

*/

.ja-megamenu .childcontent-inner {
background: #555;
border: 1px solid #777;
border-top: 0;
color: #ccc;
}

.ja-megamenu .level1 .childcontent-inner { border-top: 1px solid #777; }

.ja-megamenu .childcontent .ja-moduletable { color: #ccc; }
.ja-megamenu .childcontent .ja-moduletable a {color:#ccc;}
.ja-megamenu .childcontent .ja-moduletable a:hover {color:#fff;}

.ja-megamenu .childcontent .ja-moduletable h3 {
background: none;
border-bottom: 1px dotted #777;
}

/* Grouped --- */
.ja-megamenu .group-title { border-bottom: 1px solid #777; }

.ja-megamenu .group-title .menu-title {
color: #ccc;
font-weight: bold;
font-size: 115%;
}

.ja-megamenu .group-title .menu-desc {
color: #ccc;
padding-left: 0 !important;
}

Let's preview the changes!

Split Menu

To style the Split Menu please find this file
your_sitetemplatesja_purity_iiicssmenusplit.css and replace it's complete content with
this code:

#ja-splitmenu li a {color:#ccc;}
#ja-splitmenu li a:hover {color:#fff; background: #555;}

#ja-splitmenu li.active a,
#ja-splitmenu li.active a:hover,
#ja-splitmenu li.active a:active,
#ja-splitmenu li.active a:focus {
background: #069;
color: #FFF;

}

/* Sub Nav ---*/
#ja-subnav {background: #069;}

#ja-subnav ul li a {color:#ccc;}
#ja-subnav ul li a:hover {color:#fff;}

/* Sub Nav (lv2) ---*/
#ja-subnav ul li ul {
background: #333;
}

#ja-subnav ul li ul li {
border-top: 1px solid #555;
}

#ja-subnav ul li ul li:first-child {
border: 0;
}


CSS Menu

your_sitetemplatesja_purity_iiicssmenucss.css and replace it's complete content with
this code:

/* STYLING THE MENU

*/

/* 1st level */
#ja-cssmenu li a.active,
#ja-cssmenu li a.active:hover,
#ja-cssmenu li a.active:active,
#ja-cssmenu li a.active:focus {
color: #fff;
}

#ja-cssmenu li .active,
#ja-cssmenu li .active:hover {
background:#069;
}

#ja-cssmenu li:hover,
#ja-cssmenu li:active,
#ja-cssmenu li:focus {
background:#555;
}

#ja-cssmenu li a {color:#ccc;}
#ja-cssmenu li a:hover {color:#fff;}

/* 2nd level and above */
#ja-cssmenu li ul {
border-top: 0;
background: #555;
}

#ja-cssmenu li ul ul {
}

#ja-cssmenu li ul li {
border-bottom: 1px solid #777;
background: none;
}


Dropline Menu

your_sitetemplatesja_purity_iiicssmenudropline.css and replace it's complete content
with this code:

/* Main Nav ---*/
#jasdl-mainnav a {color: #ccc;}
#jasdl-mainnav a:hover {color:#fff; background:#555;}

#jasdl-mainnav li.active a,
#jasdl-mainnav li.active a:hover,
#jasdl-mainnav li.active a:active,
#jasdl-mainnav li.active a:focus {
background: #069;
color: #fff;
}

/* Sub Nav ---*/
#ja-subnav { background-color: #069; }
#ja-subnav ul.active li a {color:#ccc;}
#ja-subnav ul.active li a:hover {color:#fff;}

/* Sub Nav (lv2) ---*/
#ja-subnav ul li ul {
background: #444;
}

#ja-subnav ul li ul li {

}

#ja-subnav ul li ul li:first-child {
border: 0;
}

#ja-subnav ul li a {color:#ccc;}
#ja-subnav ul li a:hover {color:#fff;}

Create your own module/component HTML override

T3 Framework 2.0 based template themes have the ability to manage component and modules
HTML overrides. These themes can override the default overrides from the core plugin, so we
are going to show you an example on how to style the leading frontpage article by using HTML
overrides. Here are the steps:

• Step 1 - Create a new folder html folder inside your ja_purity_iii template folder;
• Step 2 - Create a new folder com_content folder inside your ja_purity_iii/html folder;
• Step 3 - Create a new folder frontpage folder inside your
ja_purity_iii.html/com_content folder;
• Step 4 - Browse the your_site/plugins/system/jat3/base-
themes/default/html/com_content/frontpage folder and copy the default.php file;
• Step 5 - Now browse the your_site/plugins/system/jat3/base-
themes/default/html/com_content/frontpage/ folder and paste the default.php file
into your_site/tempaltes/ja_purity_iii/html/com_content/frontpage folder;
• Step 6 - Open the
your_site/templates/ja_purity_iii/html/com_content/frontpage/default.php file and
find line 18

<div class="leading<?php echo $this->params->get('pageclass_sfx'); ?> clearfix">

replace with

<div class="leading-frontpage<?php echo $this->params->get('pageclass_sfx'); ?> clearfix">

• Step 7 - Finally we are going to style this new class, so please open the
your_site/templates/ja_purity_iii/css/template.css file and find line 71

.leading { border-bottom: 1px solid #ccc; }

and add after it

.leading-frontpage {padding: 10px 15px; border:1px solid #ccc; background: #f6f6f6; border-
top:none;}

Let's see the frontpage now!

Create your own blocks

T3 Framework 2.0 themes have the ability to also override blocks used by layouts. You can
override every block supplied by default and coming with the T3 Framework plugin:

• header.php
• mainnav.php
• middle.php
• footer.php
• other blocks.

Possible goals of these user customized blocks:

• Create / remove module positions.
• Modify module order or position within the block.
• Modify block parameters: style, width, type, inset, etc.

You can override blocks using:

• the blocks folder of the template.
Example: your_site/templates/ja_purity_iii/blocks.
• the blocks folder inside any core / local theme.
Example: your_site/templates/ja_purity_iii/core/themes/variation_theme/blocks

Extra layouts
Main-Left-Right Layout

To create a new core layout, please follow these steps:

• Step 1 - Browse the your_site/templates/ja_purity_iii/core/etc/layouts folder.
• Step 2 - Create a empty file called main-left-right.xml.
• Step 3 - Edit it and paste inside this code

</blocks>
</layout>

As you can see, this layout only needs to override the layout positions for left and right blocks,
no need to duplicate the rest of the layout code.

Left-Right-Main Layout


• Step 2 - Create a empty file called left-right-main.xml.

</blocks>
</layout>

Just like the example above, this layout only needs to override the layout positions for left and
right blocks.

Main-Right-Rounded Layout


• Step 2 - Create an empty file called 2cols-right-round.xml.

<block name="right1" style="JArounded">left</block>
</blocks>
</layout>

As you can see, this layout overrides the default style of the left and right layout and also their
positions.

Left-Main-Rounded Layout

To create this layout, please follow these steps:

• Step 2 - Create a empty file called 2cols-left-round.xml.

<block name="left1" style="JArounded">left</block>
</blocks>
</layout>

As you can see, this layout overrides the default style of the left and right layout and also their
positions.

Extra themes
To create a new theme, you only need to override the code or images, so please follow these
steps:

• Step 1 - create a green theme folder in your_site/templates/ja_purity_iii/core/themes
folder;
• Step 2 - create a file&folder structure inside this theme like this:

Please note that files must be empty.
• Step 3 - edit the info.xml file and paste this code inside

<theme>
<name>green</name>
<description>Green theme for JA Purity III Template</description>

</theme>

• Step 4 - open template.css file of this theme and paste this code inside:

/* Normal links ---*/
a { color: green;}

/*-- Cpanel --*/
a#ja-cpanel-toggle:hover, #ja-cpanel-toggle.open {
background: green;
}

• Step 5 - Paste this code inside css.css

#ja-cssmenu li .active, #ja-cssmenu li .active:hover {
background: green;

}

• Step 6 - Paste this code inside dropline.css

background: green;
}

#ja-subnav {
background-color: green;

}

• Step 7 - Paste this code inside mega.css

.ja-megamenu a.active { background: green !important;}

• Step 8 - Paste this code inside split.css

background: green;
}

#ja-subnav {
background: green;

}

You can repeat these steps to create multiple themes with your desired colors. Now you can
assign this theme to a profile, so follow instructions below.

Building the default profile
Your new template now needs a default profile to save everything that is default. You can copy
the default profile from ja_t3_blank template or you can create it yourself following these
steps:

• Step 1 - browse the your_site/templates/ja_purity_iii/core/etc/profiles folder;
• Step 2 - create a default.ini file;
• Step 3 - paste this code inside:

logoType=image
setting_font=3
setting_screen=fixed
screen_fixed_width=
hide_content_block=0
setting_direction=ltr
setting_t3logo=t3-logo t3-logo-light
gfont_global=||
gfont_logo=||
gfont_slogan=||
gfont_moduletitle=||
gfont_pageheading=||
gfont_contentheading=||
menutype=mainmenu
setting_menu=mega
startlevel=0
endlevel=-1
ja_menu_mega_animation=slide
ja_menu_mega_duration=300
ja_menu_mega_delayhide=
option_font=0
option_screen=1
option_profile=1
option_layouts=1
option_direction=1
option_menu=1
themes=
desktop_layout=default
handheld_layout=handheld

iphone_layout=iphone
android_layout=iphone

Building profile variations
Now your new layouts and themes can be assigned to new profiles. Profile variations will
override the default profile, and will not require the entire code for same settings.
To create a new profile, follow these steps:

• Step 1 - Open your your_site/templates/ja_purity_iii/core/etc/profiles folder.
• Step 2 - Create a new profile empty file called for instance green-content-left.ini
• Step 3 - Paste inside this file the following code:

themes=core.green
desktop_layout=main-left-right

As you may guessed, this profile will override the default profile themes setting and
desktop_layout setting.

2. End-user Customization
This section explores the end-user template customization process. Generally here you will
learn how to customize the logo, modules styling, user created layouts, user created themes
and user custom settings. You will be introduced to the techniques, procedures of editing files
to achieve a custom design, outside the core code of the template.
All user created themes and uploaded via the administration panel, and all user created custom
layouts and blocks must use the local folder, so users can easily update the core plugin and
template, without losing any customizations.
Before you go, you may want to check color schemes so click here to see some samples.

End user theme development
In order to prepare the template for production website, end users are going to create their
own themes to override the default theme, and upload them to the local folder, then assign
them to various profiles. The reason for using local themes is the ease of updating the core and
general template files without losing end user customization.
We are going to fill the blank CSS files with styling for most known elements, to get closer to
the JA Purity II template design.

How to use Firebug

Preparation

In order to customize the style of your template, we find a good idea documenting the best
practices using Firebug extension for Mozilla Firefox.

• First we are going to download and install Mozilla Firefox, so please click here to
download.
• Next click here to download and install Firebug.

Firebug Overview

A - The web page
This is the output of the code, the front-end of Joomla! powered website.

B - The HTML source
This is the HTML code of the page rendered by all scripts and front-end view of components
and modules.

C - The computed styling
This is where the magic happens as this is where we are going to play around to change the
design of various template elements.
Please note that computed style may look different than it looks in your CSS files.

Firebug Usage Example

• Step 1 - click the Inspect element button.
• Step 2 - hover any element of the template that you want to style, and click it, let's say
we want to style the links.
• Info 1 - after you have selected a link, the C - The computed styling section will instantly
display the element specific styling, in our case
a:hover, a:active, a:focus {color:#333333; text-decoration: underline;}
but you can always switch to :hover / :active anytime.
• Info 2 - on mouse out (when you are not hovering the link), the C - The computed
styling will instantly display normal links styling
a {color:#006699; text-decoration:none;}.
• Info 3 - when you are watching a computed style, Firebug also shows you the file and
line number where you can find the style.
• Step 3 - click the computed style for this element and add your styling. Click here to read
a good CSS reference.
• Step 4 - copy any additional style you have added to the CSS code (template.css in our
case).

Preparing files and folders

In order to create your own theme ready for your production website, you can create a new file
& folder structure in your computer similar to this one:

Please note

• these files must be empty (blank).
• this theme is going to override the default theme, this means you don't have to use all
the default styling, just the style for the elements you override.

Editing theme info file

Your new theme will need to be recognized as unique by the framework so you can also
recognize it. Notice the info.xml file in the newly created theme structure? Please open it with
your favorite code editor, and paste this code inside and customize to your needs.

<theme>
<name>user-theme</name>
<description>User theme for user website</description>
<author>mySite.com</author>
<copyright>mySite.com</copyright>

</theme>

Customizing logo

Getting started with logo

To use your own logo, you can either create your own, use the one you already have, or let
others do it for you. We are going to show you a quick and simple guide on how to customize
the logo for your production website.

All commercial JoomlArt templates come with full PSD sources used for template design, and
this guide you are going to read applies for them as well.

Editing logo

• Using your favorite graphics tool, create your own logo.
• Wrap it in a slice (please write down the dimensions of the slice, you are going to need
them for CSS edits). See our example below:

• Export it as transparent PNG-24 file,
• Rename it to your convenience. Example: website-name.png, (we used user-logo.png in
our example)
• Copy the new logo to your_site/templates/ja_purity_iii/local/user-theme/images/
folder.

Editing CSS

The new logo will need proper CSS in order to override the logo of the default theme. Open the
user-theme/css/template.css file and paste this code inside:

/* Logo Image ---*/
h1.logo { width: 118px; height: 28px; padding:20px 0; margin-left:0;} // change here the width
and height of the logo according to yours

h1.logo a {
background: url(../images/user-logo.png) no-repeat left; // change here the file-name according
to your logo
width: 118px; // change here the width of the logo according to yours
height: 28px; // change here the height of the logo according to yours

}

User design for the search module

We are going to modify the search module to look even closer to JA Purity II design by adding
an icon and some padding. Here are the steps:

• Step 1 - find ja_purity_ii/images/icon-search.gif image and copy it into
ja_purity_iii/local/themes/user-theme/images folder;
• Step 2 - open the user-theme/css/template.css file and add this code

/*--- Search module ---*/
#ja-search {top:25px;}

form.search {
background: url(../images/icon-search.gif) no-repeat left;
padding-left: 20px;
}

Customizing links

Your links will need your own color theme, so open the user-theme/css/template.css file and
paste this code inside:

/* Normal links ---*/
a { color: #e38600;}

Customizing Read-more link

Now we are going to style the Read-more link, so in the same file user-theme/css/template.css
add this code at the bottom:

/* Read-more link ---*/
a.readon {
background: #FFFFFF;
border: 1px solid #E38600;
padding: 0 5px;
}

a.readon:hover, a.readon:active, a.readon:focus {
background: #E38600;
color: #fff;
text-decoration: none;
}

Starting JA T3 Blank v1.1.4, the Read-more class rule has changed into p.readmore a so the
code will be:

/* Read-more link ---*/
p.readmore a {
background: #FFFFFF;
border: 1px solid #E38600;
padding: 0 5px;
}

p.readmore a:hover, p.readmore a:active, p.readmore a:focus {
background: #E38600;
color: #fff;
text-decoration: none;
}

User design for the menu systems

Next we are going to customize the menu systems to look exactly like JA Purity II design.

User design for Mega Menu

Please open user-theme/css/menu/mega.css, and paste this code inside:

/* root (level0) menu items border */
.ja-megamenu ul.level0 li.mega {border-left:1px solid #555;}
.ja-megamenu ul.level0 li.last {border-right:1px solid #555;}

/* active and hovered content links */
.ja-megamenu a.active {background: #e38600 url(../../images/grad1-mask.png) repeat-x center
top !important;}
.ja-megamenu a.over {background: #555 url(../../images/grad1-mask.png) repeat-x center top;}

/* root (level0) hovered menu items*/
ul.level0 li.over, ul.level0 li.haschild-over {
background: url(../../images/grad1-mask.png) repeat-x top #666666;
}

/* root (level0) active menu items */
ul.level0 li.active {
background: url(../../images/grad1-mask.png) repeat-x top #e38600;
}

/* level1 and above hovered menu items */
.ja-megamenu ul.level1 li.over, ul.level1 li.haschild-over {background:#777;}

/* level1 and above active menu items */
ul.level1 li .active {
background: #E38600 !important;
color:#333 !important;
}

User design for Split Menu

Please open user-theme/css/menu/split.css, and paste this code inside:

/* forcing the height of the items*/
#ja-splitmenu li a { height: 34px; }

/* Level0 (root) menu items borders */
#ja-splitmenu li {border-left: 1px solid #555;}
#ja-splitmenu li.last-item {border-right: 1px solid #555;}

/* Level0 (root) active menu items */
background: url(../../images/grad1-mask.png) repeat-x scroll center top #e38600;
}

/* Level0 (root) hovered menu items */
#ja-splitmenu li a:hover {
background: url(../../images/grad1-mask.png) repeat-x center top #555555;
}

/* Subnav background */
#ja-subnav {
background: #444;
}

/* Level1 only */
#ja-subnav li {
margin:0 10px 0 0;
}

#ja-subnav li a {
border-left:1px dotted #999999;
padding-left:15px;
}

/* Level2 and above menu items */
#ja-subnav li ul li a {
border-left: none;
padding-left: 5px;
}

/* Level2 and above active menu items */
#ja-subnav ul li.active a.active,
#ja-subnav ul li.active a.active:hover,
#ja-subnav ul li.active a.active:active,
#ja-subnav ul li.active a.active:focus {
color:#fff;
}

User design for Dropline Menu

Please open user-theme/css/menu/dropline.css, and paste this code inside:

#jasdl-mainnav a {
height:34px;
}

#jasdl-mainnav li {border-left: 1px solid #555;}
#jasdl-mainnav li.last-item {border-right: 1px solid #555;}

background: url(../../images/grad1-mask.png) repeat-x center top #e38600;
}

#jasdl-mainnav a:hover {
background: url(../../images/grad1-mask.png) repeat-x center top #555555;
color:#FFFFFF;
}

#ja-subnav {
background-color: #444;
}

#ja-subnav li {

margin:0 10px 0 0;
}

#ja-subnav li a {
border-left: 1px dotted #999999;
padding-left: 15px;
}

#ja-subnav li ul li a {
border-left: none;
padding-left: 5px;
}

#ja-subnav ul li.active a.active,
#ja-subnav ul li.active a.active:hover,
#ja-subnav ul li.active a.active:active,
#ja-subnav ul li.active a.active:focus {
color:#fff;
}

User design for CSS Menu

Please open user-theme/css/menu/css.css, and paste this code inside:

#ja-cssmenu li .active, #ja-cssmenu li .active:active, #ja-cssmenu li .active:hover, #ja-cssmenu li
.active:focus {
background: #e38600;
}

#ja-cssmenu li {border-left: 1px solid #555;}
#ja-cssmenu li.last-item {border-right: 1px solid #555;}
#ja-cssmenu li ul li {border-left:none;}
#ja-cssmenu li ul li.last-item {border-right: none;}

#ja-cssmenu li a:hover,
#ja-cssmenu li a:active,
#ja-cssmenu li a:focus,
#ja-cssmenu li a.sfhover {
color: #fff;
}

#ja-cssmenu li:hover,
#ja-cssmenu li.sfhover,
#ja-cssmenu li.havechildsfhover,

#ja-cssmenu li.havechild-activesfhover {
background: url(../../images/grad1-mask.png) repeat-x top #555;
color: #fff;
}

#ja-cssmenu li a.active,
#ja-cssmenu li a.active:hover,
#ja-cssmenu li a.active:active,
#ja-cssmenu li a.active:focus {
background: url(../../images/grad1-mask.png) repeat-x top #e38600;
color: #fff;
}

#ja-cssmenu li ul a:hover,
#ja-cssmenu li ul a:active,
#ja-cssmenu li ul a:focus,
#ja-cssmenu ul li:hover,
#ja-cssmenu ul li.sfhover,
#ja-cssmenu ul li.havesubchildsfhover,
#ja-cssmenu ul li.havesubchild-activesfhover,
#ja-cssmenu ul ul li:hover,
#ja-cssmenu ul ul li.sfhover,
#ja-cssmenu ul ul li.havesubchildsfhover,
#ja-cssmenu ul ul li.havesubchild-activesfhover {
background: #777;
color: #fff;
}

#ja-cssmenu ul li a.active,
#ja-cssmenu ul li a.active:hover,
#ja-cssmenu ul li a.active:active,
#ja-cssmenu ul li a.active:focus {
background: none !important;
color: #fff;
font-weight: bold;
}

Customizing user layouts
Using custom width for LEFT and RIGHT blocks

In some cases you may want to use a custom width for left or right column. To do that you have
to edit your desired layout, or all layouts in case you want to apply this change for all cases.
For instance let's override the width of the right column to be 25% wide. With the internal
editor, open this layout and change the code like this:

<block name="left1">left</block> <block name="right1" width="25">right</block>

This will increase the width of the right column and decrease the width of the content body
and left column.

Create User Profile
We have shown you how to develop a customized theme ready for your production website,
now we are going to create a user-profile to assign this theme to be used for all your pages. We
are also going to disable T3 Framework logo at the bottom of the page and the profiles
switcher. Here is a quick guide:

• Step 1 - In the Profiles panel, click the New button and type in a profile name. Example:
user-profile.
• Step 2 - Select the Don't show option for T3 logo to hide the logo at the bottom.
• Step 3 - Select the Hide option for Show/Hide Profile Tools setting to hide profile
switcher in front-end.
• Step 4 - Click the Apply button to save the changes to your profile.
• Step 5 - Profiles editing.

Global Configuration
Now you can assign your profile to All Pages or specific pages. Quick guide:

• Step 1 - In the Global. Profile Override Settings section, select user-profile
• Step 2 - Click the Apply button to save the changes to global template configuration.

3. Updating T3 Framework
JoomlArt provide regular updates for all T3 Framework based templates and also an easy way
to update your customized templates. All quickstart packages come with latest version of JA
Extensions Manager but you can always download it here and check installation guide here.
Watch a video tutorial here.

Update T3 Framework plugin
• In the JA Extensions Manager find T3 Framework plugin;

• Click the Check update link;
• If new version was found, click the Upgrade link;

Update T3 Framework based template
• Back-up the Local folder, you are going to re-upload it later.
• In the JA Extensions Manager find purity iii (or any other commercial) template;
• Cross check the differences between files, especially
your_site/templates/ja_purity_iii/params.ini and profile files located in the
your_site/templates/ja_purity_iii/core/etc/profiles folder and notice any difference
(new feature) that might interest you.
• Re-upload the local folder using your favorite FTP client.
• Reassign your profile to all the pages or specific ones.
• Click here to find out more about JA Extensions Manager Usage.

Update JA Typography plugin
• In the JA Extensions Manager find Typo plugin;
• Click here to find out more.

4. JA Purity III Demo
JA Purity III Template for Joomla! 1.5 was developed and documented in this section for
educational purpose only. There is no release date planned.
Click here to see live demo | Download here (user theme tutorial version)

Navigation

Contents :
1. Introduction
2. Video Tutorial
3. Important Note
4. Editing menu items
5. Editing additional menu parameters
6. Loading modules as menu items
7. Parameters reference
8. Final notes

T3 user guide

Recommended

Recommended

More Related Content

What's hot

What's hot (10)

Viewers also liked

Viewers also liked (17)

Similar to T3 user guide

Similar to T3 user guide (20)

T3 user guide