JA T3 Framework 2/Guides
From JoomlArt Wiki
{{#customtitle:JA T3 Framework 2.0 Developer Guides|JA T3 Framework 2.0 Developer Guides}}
|
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
Structure
Back to top
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. Click here to read now.
Extensions
Starting the JA T3 Framework 2.0 you will need to have:
JA T3 Framework Plugin
Back to top
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
Back to top
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 etc folder holds:
- etc/profiles: All user-modified profiles;
- etc/layouts: All user-modified layouts;
The themes folder holds:
- All user-modified themes;
Other files
Folder and files information:
- the info folder holds template specific information;
- general template files (thumbnail, template details, favicon).
JA Typography Button Plugin
Back to top
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.
Layouts
Back to top
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
Back to top
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:
- blocks as separate files to hold specific module positions: footer, mainnav, middle;
- blocks that are automatically generated according to layout settings: spotlights, left & right, content-mass & column-mass;
- blocks that manage specific functions such as a few user-tools, or the IE6warning that cannot be customized inside the layout configuration;
- blocks that call for dynamically generated content such as: system messages or content component body;
- blocks that call for javascripts and stylesheets.
Default Layout
Back to top
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:
- color.php block holds the theme switcher;
- cpanel.php block loads all other user-tools mini blocks;
- direction.php block manages the text direction of the template: Right to Left or Left to Right;
- font.php block manages the font-size of the template;
- layouts.php block detects all layouts both core and user created and displayes them in the panel;
- layout-switcher.php block manages the layout switch;
- menu.php block manages the menu system switch;
- profiles.php block manages the profile settings for each page users navigate;
- reset.php block provide reset feature to restore all settings to profile defaults;
- screen.php block manages the template width switcher;
- themes.php block manages the theme switch when required by the profile;
- tools-mega.php block loads megamenu parameters;
- desktop blocks set are used for desktop devices designated layouts
- content.php holds the content component body call;
- css.php block manages the Google Font for text logo text, module titles, content titles. page titles;
- 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;
- footer.php block holds module positions for copyright notices, other menus and other advertising;
- head.php block is used for system CSS file calls;
- header.php block holds website's logo and a module position for search modules;
- mainnav.php block holds the main navigation of the template;
- message.php block holds the system message body to display system messages;
- 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;
- module.php and modules.php are block generators used to create blocks for special module positions needed by advertising modules, content sliders, etc;
- navhelper.php block holds the pathway module position;
- 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
Back to top
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
Back to top
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
Back to top
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
Back to top
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:
- footer holds the website copyright information;
- head holds the scripts;
- header holds the template logo;
- main holds the main content body;
- mainnav block holds a special designed main navigation;
- 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:
- footer holds the website copyright information;
- head holds the scripts;
- header holds the template logo;
- main holds the main content body;
- mainnav block holds a special designed main navigation;
- 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
Back to top
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>
Click here to find out more.
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
Click here to learn more about block functions in the default layout. You will also learn that not all block types can be configured and don't even show up inside the layout file as they stand for specific template functions.
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.
Click here to learn how to customize these styles.
Using a block style for a macro block (top, middle, footer) this style will be used for all blocks inside.
Generate additional div
Back to top
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 (l is for left) above the column and one div (r is for right) below, see example below..
- markup="3" - complex markup, will add two div tags: (tl is for top left) and (tr is for top right) above the column and two div tags: (bl is for bottom left) and (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, only in middle content, like: right, left, content-mass-top . The value you set here is actually how deep the div structure will be. The additional div tags will have,, ... See image below..
Main inner
Expression: <block name="right" main-inner="2" ...>
Purpose: this parameter will add a number of inner div tags to wrap the block in div has class name 'main'. The value you set here is actually how deep the div structure will be. The additional div tags will have,, ...
Wrap inner
Expression: <block name="right" wrap-inner="3" ...>
Purpose: this parameter will add a number of inner div tags to wrap the block inside div has class name 'wrap'. In div class 'wrap', width is always "100%". The value you set here is actually how deep the div structure will be. The additional div tags will have,, ...
Remove div
Back to top
No wrap
Expression: <block name="header" no-wrap="1" ...>
Purpose: removes the div with 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 that wrap the block for any macro