Template Administration

In this article I will rewrite some parts of the official T3 Framework 2 Wiki Documentation especially those out of date or not clear enough. Generally, the guidelines are the same, just few things are not clear for some users and not handy for other users.


Global Panel

This panel controls the general behavior of the template and also the cache and compression settings.

Profile Override Settings

This section allows you to set profiles to be used for all your pages or to specific pages or content components. For all templates, the default profile of the template 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:

System Settings

This section manages the cache feature of the framework.

Example:
position=user1,user2 - will exclude cache for these positions,
component=com_virtuemart,com_fireboard - will exclude these components from using cache.

This feature is useful when trying to avoid script conflicts for AJAX content used in your modules.

Compression Settings

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

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

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

Optimize Exclude - 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:

Please click here to watch a video tutorial on Compression Settings.


Profiles Panel

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.

What are these profiles? Please click here to find out.

There are 2 types of profiles: core profiles - cannot be deleted as they are part of the template and/or framework core, but can be customized / reset to default; user created profiles - using 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:

Please note: when editing core template profiles, the framework will create profile overrides in the local/profiles folder (user setup).

General Settings

In this section you can customize the general settings of a selected profile:

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 set a webfont for each of the following elements:

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

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

Menu Settings

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

User Tools Settings

In this section you can enable/disable the tools you want to show or hide any of the user tools for the selected profile:

Themes Settings

This section allows you to override the default theme. To do that, please follow the steps described below:

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:


Layouts Panel

In this panel you can manage layouts used by the template. What are these layouts? Please click here to find out.

Layouts are known to be two types: core layouts - supplied by the template developer and 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:

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


Themes Panel

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.

What are themes? Please click here to find out.

There are two type of themes: core themes - themes supplied by the template developer, cannot be deleted in the back-end 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:

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


Mega Menu Guidelines

In this section I am going to show you how to set up the Mega Menu. This is a quick step by step guide on how to edit your main menu items for a more satisfactory design and usability.

Get the basics of Joomla! Menu Management, right here.

Adding menu item descriptions

All menu systems

In the back-end administration of your website (your-website.com/administrator), navigate to Menus - Main Menu (or any other menu you have set as default), and then click on Home (or any other menu item) to add an appropriate description for it, then follow this quick guide:

Adding menu icons

All menu systems

To be able to add icons to your menu items, first you have to upload your favorite icons to the your_site_root/images/stories folder for Joomla! 1.5, but for Joomla! 1.6 you can also create a special folder for your icons, outside the stories folder and inside the general images folder.

Please note that the icons must not exceed 16x16 pixels, a must if you want avoid layout breaks.

So while browsing the Menu Manager, click on a menu item that you want to add an icon for, then follow this quick guide:

Grouping menu items

Mega Menu ONLY

If your menu has no Mega Menu parameter settings, your menu will look like CSS Menu. Grouping menu items refers to grouping a parent menu item with it's child menu items to form a compact column. To do that please open a parent menu item (one having at least two child menu items) and follow this quick guide:

Click here to read a more detailed guide in the wiki resource.

Setting up columns

Mega Menu ONLY

Working on a parent menu item Articles having at least two child menu items (grouped also): Health and Sport, the next thing could be to set up two columns for each of the two child menu items. Similarly for three child menu items you could set three columns, but for four child menu items you can set two/four columns, just to make it more suitable for your design.

So, to set up columns for a menu item considering the above data, please follow this guide:

Loading modules as menu items

Mega Menu ONLY

In this section I am going to show you how to load modules as menu items. Basically you can load any type of module, just make sure it's a usable feature for your website.

So, let's load the default Joomla! Login Module as a menu item. Go to Menu Item Manager of the Main Menu. Click the New button to add a new menu item, then follow this guide:

Similarly you can use the Module positions subcontent type.

For more about Mega Menu, please visit the parameters reference section, or watch a Video Tutorial on Mega Menu.

Module Positions

A useful feature in T3 Framework 2.0 is the Positions Highlight Feature. It was developed to help end-users explore the module positions of the template and use them for their modules.

In Joomla! 1.6, you have to enable this from Templates Manager. To do that, here's what you have to do:

Now you also have to enable the T3 Framework Feature, so click to edit your template and follow this quick guide:

Next, in your front-end add tp=1 to your front-end website address. Example: http://your-site.com/index.php?tp=1.

Click here to watch a short video tutorial for this feature and click here to watch some examples on creating these module positions.