Articles

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:

• 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.
• Select the profile you want to use for these pages.
• Click the Apply button.

System Settings

This section manages the cache feature of the framework.

• Enable Development Mode - if you set this setting to Yes, it will completely disable template cache, so that you can always see instantly your customizations on page refresh in the front-end. Setting this setting to No is recommended for production websites with huge traffic that need cache.
• Enable Template Information - Enables / Disables displaying the module positions information feature in the front-end when adding tp=1 to the links.
• 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.

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:

• 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 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.

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.

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:

• Click on a profile you have created or cloned out of any other core one.
• Click the checkbox to enable the customization of any setting and change the values or options.
• The Profiles tab detected a user customization that will require to save the settings.
• Click the Apply button to save settings.

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:

• The logo type - image / text
• the font size - select from six font-sizes: from 10px to 15px
• the template width - SPECIFIED PIXEL (default - 980px), SPECIFIED PERCENTAGE, AUTO, WIDE
• text direction - RTL (right to left) or LTR (right to left)
• you can also choose to show/hide the main content block.
• T3 Logo setting has 5 options:
  • Don't show - will hide the T3 Framework logo
  • Light Logo - show default T3 Framework logo
  • Dark Logo - show dark T3 Framework logo
  • Light Logo Small - show a small T3 Framework logo with default colors
  • Dark Logo Small - 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 set a webfont for each of the following elements:

• 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 selected profile:

• The menu to be loaded (mainmenu or any other default menu is going to be 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:
  • Animation type: none, slide, fade, slide and fade
  • Animation duration - time in milliseconds for the animation
  • Delay hide time - time in milliseconds for the hide time delay.

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:

• Font-size switcher - a usability feature that allows users to increase/decrease the font-size.
• Screen-size switcher - another usability feature that allows users to switch the template size in the front-end. Useful for old computers using screen resolutions below 1024x768.
• Profiles-switcher - allows users to switch the profile in the front-end. This switcher shows up when you have at least 2 PROFILES.
• Layouts-switcher - allows users to switch the layout in the front-end. This switcher shows up when you have at least 2 LAYOUTS.
• Text-direction switcher - allows users to change the text direction from left to right to right to left and back.
• Menu-system switcher - allows users to switch the menu system out of the avalable ones: Mega Menu, Split Menu, CSS Menu, Dropline Menu.

Themes Settings

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

• Click the Edit icon to open the theme selection box.
• Check one or more themes to be used to override the default theme.
• Click the Apply button.
• 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.
• 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
• a default layout for Android devices

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:

• 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.
• Customize the layout using the internal editor. By customizing the layouts, you are changing the block parameter settings, so click here to find out more.
• 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

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:

• Create your theme following these instructions.
• Pack your theme into a zip file.
• Click the Choose File button to browse for your theme.
• Click the Upload File & Install button.

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:

• Click the Parameters (JA Extended) tab to edit the Mega Menu parameters.
• Add a description or a slogan for the menu item in the Add Description parameter field. Try to make it simple and short.
• Click the Save button to apply this change.

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:

• Click the Link Type Options in Joomla! 1.6 or Parameters (System) for Joomla! 1.5 tab.
• In Joomla! 1.6, for the Link Image text field, click the Select button and browse for your desired icon for Home menu item in all the images folder. In Joomla! 1.5, for the Menu Image parameter, select your desired icon from the dropdown box; your icons must be located in images/stories folder.
• Click the Save button to apply this change.

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 the Parameters (JA Extended) tab;
• For the Group parameter select the Yes option.
• Click the Save button to apply this change.

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:

• Click the Parameters (JA Extended) tab to edit the Mega Menu parameters;
• Set the columns number to 2 for the Columns parameter.
• Add a custom width for each column to make it more visual appealing, especially for the Youtube video player that exceeds the default column width of 200 pixels;
• Click the Save button.

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:

• Click Separator Menu Item Type (Joomla! 1.5) or Text Separator (Joomla! 1.6).
• Click the Parameters (JA Extended) tab to open Mega Menu parameters.
• Type in a Title for this menu item.
• Select Modules subcontent type.
• Select your module, for instance Login Form.
• Click the Save button to save the new menu item.

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:

• While browsing Templates Manager click the Options button in the top right toolbar.
• In the Templates tab, click Enable for the Preview Module Positions setting.
• Click the Save & Close button.

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

• In the Global Panel, System Settings section, click Yes for the Enable Template Information setting.
• Click the Save button.

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.