T3 BS3 Blank and T3 Blank template
T3 Framework version 2.0.x supports 2 base template: T3 Blank template and T3 BS3 Blank template. T3 Blank template integrates Bootstrap 2 while T3 BS3 Blank template integrates Bootstrap 3.
The global settings are applied for all styles, themes and layout, no matter the settings are changed in any styles.
This is an important option. You should clearly define the differences between enabling and disabling the option.
Enable 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. The LESS files are located in
When developing your site, Firebug is a good tool. You can use this tool to track
In this mode, it is easy for you to develop your site with LESS but it will decrease your site speed so when you finish developing, turn the option off.
Disable Development Mode
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.
The CSS files are located in
templates\t3_bs3_blank\css. But we don't recommend you to customize your site with the CSS files in this folder as each time you compile LESS to CSS, the files will be overridden.
In case Development mode is off, you are allowed to enable or disable option: Optimize CSS. This option will optimize and join CSS files. By this way it will improve your site performance.
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.
T3 is a responsive template framework. However this feature can be configured. You can turn it on or off.
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.
- Step 1: Enable the option "Enable ThemeMagic"
- Step 2: Access The ThemeMagic setting panel
Note: This option should be enabled only when you customize your theme using ThemeMagic, after you finish your customization, you should turn it off.
Follow THIS LINK to see how to work with ThemeMagic and customize.
Enable Bootstrap 2 compatibility
This option will make your site compatible with Bootstrap 2. For example, you use some extensions that intergrates 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.x as well.
Compile LESS to CSS
T3 is developed with LESS. When customize your site, we suggest you to work with LESS files. The LESS files will be compiled to CSS files later on. All the LESS files for customization are located in
When site development is complete, you should compile LESS to CSS. This option will compile LESS files to CSS files. All your customization in LESS files will be compiled to corresponding CSS files.
Build CSS for RTL language
T3 supports RTL (right to left) language style. The LESS file of RTL is located in
When compile LESS to CSS, you can select to build CSS for RTL language or not. To active this option, please enable option Build RTL CSS in the General tab then run the Compile LESS to CSS.
The Theme settings allows you to configure themes, logo. The settings can be also configured in the ThemeMagic setting panel
Select a theme for current style. Each style goes with one theme.
T3 allows you to select image or text logo. If you select to use image logo, browse to the image that is displayed as logo. If you select text logo, enter the text that is displayed as logo, slogan is optional.
Now, let's see how front-end looks like.
Change Logo Image and Customize Logo size
An other way to change logo is change the logo image path in the file:
templates/ja_t3v3_blank/less. You can also customize the logo size in this file.
// T3 LOGO
Please refer this LINK to know more detail about how to customize logo.
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: Layout structure and Responsive layout configuration.
Layout Structure Configuration
Assign module position.
Set number of columns in each spotlight block.
Responsive Layout Configuration
Select responsive layout.
In each responsive layout, you can enable/disable content, resize module positions in spotlight block.
Off-Canvas Sidebar Confgiguration
The new Off-Canvas sidebar is now independent with Collapse Navigation for small screens. The Off-canvas sidebar displays content from a defined position.
Enable Off-canvas sidebar
To enable Off-Canvas sidebar, open Add-ons tab then enable Off-canvas sidebar.
Assign a module position to Off-canvas sidebar. By default, Off-canvas will be assigned to off-canvas position.
Add content for Off-canvas sidebar by creating modules then assign them to off-canvas position.
To display menu in off-canvas sidebar, create module menu then assign the menu to "off-canvas" position.
Use Off-canvas as Navigation in small screens
In case you want to display Off-canvas sidebar as navigation in small screens like tablet, mobile, please disable Off-canvas sidebar in responsive layouts.
The tab includes settings that allows you to add scripts like Google Analytic, Live chat service ... to the any position.
To add scripts, please open tab Custom Code then select to add the scripts to: after , before , after , or before .
In front-page, view source to see whether the scripts are added or not.
About Template and style
T3 Framework supports 2 starter templates: T3 Blank template (Bootstrap 2 integration) and T3 BS3 Blank template (Bootstrap 3 integration).
For each template, you can create unlimited styles that are to override the default style.
Each style includes its own theme, layout, logo, navigation ... When creating new style, you can configure those things and override the default style.
3 steps to override style
Step 1: Create override style
To create new override style, you can duplicate the default style or you can save as copy in setting panel of any style.
Or Save as Copy
Step 2: Configure style
Now open the clone style then configure theme, layout, navigation ...
Step 3: Assign menu items for the style
Open the tab Assignment the tick on the menu items that you want to apply the style. The style will override default style in selected menu items.