Start chat

Joomla 3.x Documentation

About T3 Framework

T3 framework is the most popular template framework for Joomla. It powers all our T3 based templates and is available for Joomla 1.5, 2.5 and 3+. For the ease of upgrades the framework is in the plugin format and is installed separately. With over 3 years of active development the T3 framework has come a long way and is more user-friendly, feature rich, easy to customize and with extensive responsive layout support which not only looks good on all browsers and devices.

How to Access

Select Extensions > Templates > Styles.

Click the 'theme3441 - Home' to edit the home page style.

Go to the General tab.

The following settings will be applied for all styles, themes and layouts

  1. Development Mode: when you are developing your site, you should enable this option. Once it's turned on, your site directly runs on original files - LESS files. Enabling this option will decrease your site speed so when you finish developing, turn the option off. When you are not developing your site, you should disable the option. This will increase your site speed. In this mode, your site runs on CSS, not LESS. The CSS files are compiled from LESS files.
  2. ThemeMagic: enable the option "Enable ThemeMagic .

Note: This option should be enabled only when you customize your theme using ThemeMagic, after you finish your customization, you should turn it off.

  1. Legacy Compatible: this option will make your site compatible with Bootstrap 2. For example, you use some extensions that integrates Bootstrap 2. To make the extensions work in your site, it will load some CSS of Bootstrap 2. It will load font awesome version 3 as well..
  2. Responsive: when the option is disabled, your site is a non-responsive site and you can set the fixed width size for your site. Once it's disabled, all responsive files will not be loaded.
  3. Build RTL CSS: when compile LESS to CSS, you can select to build CSS for RTL language or not. To active this option, please enable option and run the Compile LESS to CSS.
  4. T3 Assets Folder: when enabled, the optimized and joined CSS files will be located in the defined T3 Assets Folder folder. By default, this folder is t3-assets..
  5. Show T3 Logo: enable the option to show the T3 Logo in the footer.
  6. Optimize CSS: when you enable this option, compressed CSS files will be used (.min.css files).
  7. Optimize JS: combined and compress Javascript files.
  8. Link Title for Article View: override setting for Link Title in Article View. This setting only applies for Single Article view.

General Settings

Go to the General tab.

The following settings will be applied for all styles, themes and layouts

  1. Development Mode: when you are developing your site, you should enable this option. Once it's turned on, your site directly runs on original files - LESS files. Enabling this option will decrease your site speed so when you finish developing, turn the option off. When you are not developing your site, you should disable the option. This will increase your site speed. In this mode, your site runs on CSS, not LESS. The CSS files are compiled from LESS files.
  2. ThemeMagic: enable the option "Enable ThemeMagic .

Note: This option should be enabled only when you customize your theme using ThemeMagic, after you finish your customization, you should turn it off.

  1. Legacy Compatible: this option will make your site compatible with Bootstrap 2. For example, you use some extensions that integrates Bootstrap 2. To make the extensions work in your site, it will load some CSS of Bootstrap 2. It will load font awesome version 3 as well.
  2. Responsive: when the option is disabled, your site is a non-responsive site and you can set the fixed width size for your site. Once it's disabled, all responsive files will not be loaded.
  3. Build RTL CSS: when compile LESS to CSS, you can select to build CSS for RTL language or not. To active this option, please enable option and run the Compile LESS to CSS.
  4. T3 Assets Folder: when enabled, the optimized and joined CSS files will be located in the defined T3 Assets Folder folder. By default, this folder is t3-assets..
  5. Show T3 Logo: enable the option to show the T3 Logo in the footer.
  6. Optimize CSS: when you enable this option, compressed CSS files will be used (.min.css files).
  7. Optimize JS: combined and compress Javascript files.
  8. Link Title for Article View: override setting for Link Title in Article View. This setting only applies for Single Article view.

Theme Settings

Go to the Theme tab.

  1. Theme: select a theme for current style. Each style goes with one theme.
  2. Logo Type: choose Logo type (Text\Image).
  3. Site Name: specify your site name.
  4. Slogan: enter a slogan for your site.
  5. Logo Image: upload the image for Logo.
  6. Enable Small Logo: enable this option to allow select a new version logo for small screen.
  7. Display footer logo: enable the option to show the Logo in the footer.
  8. Footer logo width: set the footer Logo width.
  9. Footer logo image: upload the image file for the footer Logo.
  10. Footer text logo: enter the text for Logo. Works with text logo type.
  11. Footer slogan: enter the slogan for your site.
  12. Footer after logo text: specify the text which will be displayed after the logo.

  1. Privacy Policy Link: enable the Privacy Policy link.
  2. Privacy Policy Item: specify the Privacy Policy link.
  3. Privacy Policy Label: enter the label for the Privacy Policy item.

  1. Left Sidebar Width: set right sidebar width in grid columns.
  2. Right Sidebar width: Set right sidebar width in grid columns.

Layout

Go to the Layout tab.

Change the module position by clicking on the configuration icon on the top right.

Select Layout for style. In T3 framework, each style will use one layout (but please keep in mind that one site use many styles > so one site can use multiple layouts simultaneously because T3 use multiple styles simultaneously).

In the layout setting, there are 2 parts to be configured: Module Positions and Responsive layout configuration.

Change the module position by clicking on the configuration icon on the top right.

Add-ons Tab

Go to the Add-ons tab.

Enable off-canvas sidebar then select effect for the Off-canvas sidebar.

  1. Enable: enable to load off-canvas library.
  2. Off-Canvas Effect: sidebar transition effect for Off-canvas menu.

Custom Code Tab

Go to the Custom Code tab.

Add custom code to some special positions of webpage. Those markup will not filter. Please be careful when copy code from other websites.

  1. After <head>: add custom code right after open <head> tag.
  2. Before </head>: add custom code before closing </head> tag.
  3. After <body>: add custom code right after open <body> tag.
  4. Before </body>: add custom code before closing </body> tag.
  5. Show debug module position: add modules in debug position before closing </body> tag.

Layout Settings

Go to the Layout Settings tab.

Change the positions' width (Normal or fullwidth).

Typography Settings

Go to the Typography tab.

Change the Page heading and Item heading font size for the Featured Articles page, Category Blog page, Category Articles, Gallery View, Archived Articles and Single Article pages.

Features Tab

Go to the Features tab.

  1. To Top button: enable the option to display To Top button.
  2. Totop text: input toptop button text.
  3. To Desktop button: enable the option to display To Desktop button at mobile devices.
  4. Todesktop text: input To Deskptop button text.
  5. Tomobile text: input To Mobile button text..
  6. jQuery Black&White plugin: enable or disable jQuery Black&White plugin.
  7. Invert hover effect: enable the invert hover effect.
  8. Animation in speed: set the animation in speed.
  9. Animation out speed: set the animation out speed.
  10. Offline Countdown Time: set the cut-off date.

Assignment

Assign the current template style to the selected menu items that can be viewed by users.

Megamenu

To enable Megamenu, please open Navigation tab. Enable Megamenu option then open Megamenu configuration panel.

Sub-megamenu configuration

You need to select the sub-menu to see the settings.

This setting allows you to configure the width of the sub-megamenu, add column, and add class that style for it.

Columns Configuration

You need to select the column to see the settings.

In this level of configuration, you can: Add column, remove column, set width of column, assign module to column.

You should create an empty column to enable the Select Module option.

Menu Item Configuration

You need to select the menu item to see the settings.

In this level of configuration, you can: enable or disable submenu if a menu item, display sub-menus in group or not, move menu item to right or left, assign a module to a module menu item, add icon for menu item.

Theme Magic

You have to enable ThemeMagic first, then click on the ThemeMagic button to open ThemeMagic panel.

  1. Select theme to customize.

  1. Customize theme by changing parameter values.

Typo

  1. Base font size: set the main text font size in pixels only.
  2. Base line height: set the base line height.
  3. Font Family base/Font Family secondary: choose a font family.

Color

  1. Brand Primary Color: the color must be specified in hexadecimal format (for example, #aabbcc). Also, it is possible to select a color from a palette provided.
  2. Brand secondary color: the color must be specified in hexadecimal format (for example, #aabbcc). Also, it is possible to select a color from a palette provided.

Grid

  1. Large Desktop Width: set the large desktop width in pixels only.
  2. Gutter Width: set the gutter width in pixels only.

  1. Click on preview to see the changes.
  2. Save or save as copy the customized theme.