T3 Framework FAQs

The answers for most questions asked about T3 Frameworks

Installing Google Analytics in Joomla template developed by T3 Framework can be done in a multiple way. Here is how we can manage to get that is gonna take you maximum 5 minutes.

Here are the 2 steps how-to:

Step 1: Get your Google Analytic code

Step 2: Add the Google Analytic code to your site

From the back-end of your site, go to Extensions >> Template Manager.

Open the template style setting panel of the template, in this example, we use T3 Blank as our template. So we're gonna open the template style setting panel of JA_V3-Home

Navigate to tab Injection then add the Google Analytic Code to the field Before

Now please open tab Injection then add the Google Analytic Code to the field Before .

These settings in the Injection tab are set as the global settings. That means you can add the google anlytic code to any style without go back in each style and add it manually.

If you weren't able to find these settings in the administration panel, that means you are using the older version of T3 Framework that is anywhere lower than version 1.3.0. You can upgrade to the latest version of T3 Framework (please always back-up before proceeding to any updates, it's highly recommended) or you can install the Google Analytics code manually (by adding code to a file that can be used in all pages). For more in-depth in the manual installation, please check the Video Tutorial for more info.

When it comes to Live Chat services, it really depends on which Live Chat services you are using. Each has its own requirement on adding its scripts. But no worry, we have those common places listing out in the Injection tab, so you can just go ahead to copy & paste them accordingly.

These settings are applied to the site's global settings as well, so you can only need to add the scripts once.

Problem

If you find trouble to display com_content in homepage whatever the menu type is assigned to, this thread would be useful for you.

The explaination for this problem is, in some templates, the home layout has no Component position and you assigned the home layout for Homepage.

List of templates that doesn't have Component position in home layout.

JA Hawkstore
JA Fubix
JA Mitius
JA onepage

How to Fix ?

Each template could have one or many layouts, but all the templates always have default layout, in the default layout, the Component is always loaded.

There are 2 ways to fix this issue

1. Add position "Component" to "home" layout

Step 1: open home layout file (it should be home.php) located in templates/ja_template/tpls/blocks.

<body>
	<?php $this->loadBlock ('header') ?>		
	<?php $this->loadBlock ('slideshow') ?>		
	<?php $this->loadBlock ('spotlight-1') ?>
	<?php $this->loadBlock ('mainbody-home') ?>
	<?php $this->loadBlock ('spotlight-2') ?>
	<?php $this->loadBlock ('footer') ?>
</body>

Step 2: Open block file that you want to add Component to, we suggest to add to mainbody-home block. So open file mainbody-home.php located in templates/ja_template/tpls/blocks/.

Add the following code.

<jdoc:include type="component" />

Inside  ... 

<!-- MAIN CONTENT -->
<div id="t3-content" class="t3-content">
	<jdoc:include type="message" />
	<jdoc:include type="component" />

	<?php if ($this->countModules('home-2')) : ?>
	<section class="featured-products">
		<jdoc:include type="modules" name="<?php $this->_p('home-2') ?>" style="T3Xhtml" />
	</section>
<?php endif ?>

</div>
<!-- //MAIN CONTENT -->

2. Change layout for Home style

Open the Home template style and choose the default layout that has Component position.

Note: by choosing a different layout, it will change the existing layout/structure of your homepage.

T3 Framework integrates Bootstrap and utilizes LESS (dynamic stylesheet language). It is required to develope your site with LESS. If you develop with CSS, when compiling, the CSS files will be overridden.

So what happen when you don't know LESS files? And all you want to do is styling with CSS? The custom.css file is here to save the date. Whatever CSS you add in this file will NOT be overridden when compiling.

Then, where can you find the custom.css file? It is located in: templates/ja_fixel/css. If you don't see it there yet, feel free to create a new one.

Open the file and start styling your site with CSS.

Since T3 Framework was first released, there is this on-going question on "How to upgrade JA T3v2 Framework to the latest version of T3 Framework?" We have answered this many times before, and the answer still remains a big NO.

Why not ?

T3 Framework has been rebuilt completely. T3 Framework integrates Bootstrap and utilizes LESS, while JA T3v2 Framework doesnt. T3 Framework also supports ThemeMagic, Layout Configuration, and much more, but these are not supported in JA T3v2 Framework. To use T3 Framework, you have to install T3 Framework from scratch, no upgrade is possible.

1. Change the Logo image

There are 2 ways to change the logo for a Joomla template developed with T3 Framework.

#1: Change logo from the Template Manager

For JA Template, each style can go with a different logo. To set style for the logo, go to Extensions >> Template Manager, now open the JA Template style you wish to work on then navigate to Theme Settings.

#2: Change the Logo from the variable.less file

Another way to change thelogo is changing the logo image path in variables.less file, which is located in the templates/t3_blank/less fodler.

// T3 LOGO
// --------------------------------------------------
@T3logoWidth:     60px;
@T3logoHeight:    50px;

@T3LogoImage:     "../images/logo.png";

You can also change the logo block size, by changing the value of the @T3logoWidth: and @T3logoHeight: variables.

2. Logo styling

To customize style for the logo, open the file style.less that is located in the templates/t3_blank/less folder. Search for the logo text, you'll find the style where you can either add more styles or customize it as is.

// Logo
// ---------------------------------------------------------
.logo {
float: left;

a {
display: inline-block;
line-height: 1;
margin: 0;
}

}

// Logo Image
// ----------
.logo-image {
overflow: hidden;

a {
background-image: url("@{T3LogoImage}");
background-repeat: no-repeat;
width: @T3logoWidth;
height: @T3logoHeight;
}

//hide sitename and slogan
span, small {
display: none;
}

}

Step 1: Add the font package(s)

Upload your font package(s) to templates/template_folder/fonts.

Step 2: Define font(s)

Now open file assets.xml located in the templates/template_folder/etc folder.

Define the font(s) you just added

<stylesheets>
<file>fonts/novecentowide/stylesheet.css</file>
</stylesheets>

Google Fonts

T3 Framework supports Google fonts, all you have to do is define the google font you would like to use in the assets.xml file (located in the templates/template_folder/etc folder).

<stylesheets>
	<file>http://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300</file>
</stylesheets>

Since Bootstrap 3 beta version was out, everyone is questioning us on whether or not T3 Framework will compatible with Bootstrap 3. Yes, we will.

We are currently busy with other projects as well as trying to keep up with our commitment for the monthly release. If there is only one thing we can't control over, it's time. Hence, we'll definitely keep you guys in the loop, whenever we can.

To add new style sheets and Javascripts to T3 Framework, there are 2 ways to do that. You can either declare the new style sheets and Javascripts to head.php file or assets.xml file.

#1. Use head.php file

Open file head.php in the templates/t3_blank/tpls/blocks folder, then declare the new style sheets and Javascripts as you wish with the format as below.

Add CSS style sheets

<?php 
// CUSTOM CSS
if(is_file(T3_TEMPLATE_PATH . '/css/custom.css')) {
$this->addStyleSheet(T3_TEMPLATE_URL.'/css/custom.css'); 
}
?>

Add Javascripts

<?php
if(is_file(T3_TEMPLATE_PATH . '/templates/your-temp-name/js/slider/lofslidernews.mt11.js')) {
$this->addScript(T3_TEMPLATE_URL.'/templates/your-temp-name/js/slider/lofslidernews.mt11.js'); 
}
?>

Just copy then correct the path to the CSS and Javascripts files.

Joomla provides addStyleSheet, addScript, addScriptDeclaration functions, which are the ones you should be using.

#2. Use assets.xml file

Another method to add new the CSS, Javascripts is embedding them to assets.xml, which is located in the templates/t3_blank/etc folder.

CSS style sheets & Fonts

Add the path to the style sheets & fonts you want to embed to your site. Use the format as below:

<stylesheets>
<file>fonts/novecentowide/stylesheet.css</file>
<file>http://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300</file>
</stylesheets>

Javascripts

Add the path to the Javascripts files you want to embed to your site. Use the below format:

<scripts>
<file>js/jquery.mousewheel.js</file>
<file>js/iscroll.js</file>
<file>js/script.js</file>
</scripts>

T3 Framework is a responsive framework template, that means all the templates developed with T3 Framework are responsive at core.

So how T3 does with Third party extensions like K2, Virtuemart ... in term of responsive ?

It does not intervene the 3rd extensions, hence if the 3rd extensions are not responsive by itself, then it's a huge chance they won't be responsive when you install in any of the templates developed with T3 Framework. Now it's up to you to consider if you want them in your site or not. If you still decide to go with it, you probably have to do the customization to make it responsive, and it sure does take a lot of time and effort. Please be wise here.

1. Customize the 404 Page

Normally, each JA Template goes with its own 404 page style. If you would like to customize it, this will guide you through the quick how-to:

Step 1: Open file `error.php`

The file error.php is located in the templates/ja-template-folder/ folder.

Open this file and you will be able to get the CSS file that has all the style of the 404 page.

<head>
<title><?php echo $this->error->getCode(); ?> - <?php echo $this->title; ?></title>
<link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/error.css" type="text/css" />
<?php if($theme && is_file(T3_TEMPLATE_PATH . '/css/themes/' . $theme . '/error.css')):?>
<link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/themes/<?php echo $theme ?>/error.css" type="text/css" />
<?php endif; ?>
<link href='http://fonts.googleapis.com/css?family=Handlee' rel='stylesheet' type='text/css'>
</head>

The CSS file is error.css located in the templates/ja-template-folder/css/ folder. Open the file and start your customization.

Please note that the file is NOT overridden when you compile LESS to CSS. As we don't have error.less file.

2. Customize Offline Page

To customize the Offline Page, you only need to go through the same procedure as you do for the 404 page customization

Each JA Template also has its own Offline page style.

Step 1: Open file `offline.php`

The file offline.php is located in the templates/ja-template-folder/ folder as well.

Open this file and you will find the CSS file that has all the style of the Offline page page.

<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/offline.css" type="text/css" />
<?php if($theme && is_file(T3_TEMPLATE_PATH . '/css/themes/' . $theme . '/offline.css')):?>
<link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/themes/<?php echo $theme ?>/offline.css" type="text/css" />
<?php endif; ?>
</head>

The CSS file is offline.css located in the templates/ja-template-folder/css/ folder.

Please note that the file is NOT overridden when you compile LESS to CSS. As we don't have offline.less file.

1. Sticky Menu

The majority of the templates developed with T3 Framework has a sticky Main Menu by default. In this case you're all set.

What if the template does not have this feature supported by default? You can always enable this feature manually.

To enable this feature, follow the following steps.

Step 1: Upgrade T3 Framework plugin to version: 1.2.1 (at least)

Any version before 1.2.1 does not support this feature and you have to dig in the code file to make it happen. It's highly recommended that you upgrade to any version higher than 1.2.1 to get this feature installed.

Step 2: Add class to make a sticky navbar

To get a sticky navbar, add class navbar-collapse-fixed-top (for collapse menu) and navbar-fixed-top (in desktop) to #ja-mainnav div (it is in the file: mainnav.php located in the: templates\ja_mero\tpls\blocks folder). You may need to update the margin-left & margin-right for the mainnav div.

<nav id="ja-mainnav" class="wrap t3-mainnav navbar-fixed-top navbar-collapse-fixed-top">

2. Off-canvas Menu in collapsed screens

T3 Framework supports Off-canvas menu in collapsed screens for mobile and tablet.

You can enable or disable this feature from the template manager setting panel. From template manager setting panel, go to Extensions >> Template Manager >> T3 template >> Navigation tab.

You will see the Off-Canvas Navigation field, feel free to enable or disable it as you wish.

The "Back to top" button allows you to quickly navigate to the top of your site.

To add this button in your site, open the file footer.php located in the templates/ja-template-name/tpls/blocks/ folder

Now add the following code to the bottom of the footer.php file.

<!-- BACK TO TOP -->
<div id="back-to-top" class="back-to-top t3-hide">
  <i class="icon-long-arrow-up"></i>
</div>
<script type="text/javascript">
  //<![CDATA[
  (function($){
    $(document).ready(function(){
      $('#back-to-top').click(function(){
        if($(this).hasClass('reveal')){
          $('html, body').stop(true).animate({
            scrollTop: 0
          });
        }
      });

      $(window).scroll(function(){
        $('#back-to-top').toggleClass('reveal', $(window).scrollTop() > (Math.min($('#t3-mainbody').length ? $('#t3-mainbody').offset().top : 0, 150)));
      });
    });
  })(jQuery);
  //]]>
</script>
<!-- //BACK TO TOP -->

Now add style for the button, using any LESS file in the templates/ja-template-name/less/ folder .

We suggest to add style to file style.less

For example

// BACK TO TOP
// ---------------------------------------------------------
.back-to-top {
  background-color: @T3primaryColor;
  bottom: 15px;
  height: 40px;
  margin: 0;
  position: fixed;
  right: 15px;
  width: 40px;
  z-index: 1000;
  .opacity(0);
  .transition(opacity 350ms);

  &.reveal {
    .opacity(30);
    cursor: pointer;
    &:hover, &:focus, &:active {
      .opacity(100);
    }
  }

  i {
    color: @white;
    font-size: 12px;
    line-height: 1em;
    left: 50%;
    margin-top: -7px;
    margin-left: -3px; 
    position: absolute;
    top: 50%; 
  }
}

T3 Framework supports Megamenu, when you run a multilingual site, you have to configure multi-language for Megamenu. Follow this guide to make it work.

Please make sure all the steps in setting up a multilingual site are done completely. If these steps weren't not done yet, there are 2 ways to build up a multilingual site: manual setup or auto setup with JA Multilingual Component. It's up to you to go either way.

Manual Setup Guide JA Multilingual Guide

Create menus for languages

Step 1: Create menus for languages

For each language, you will need to create a menu system based on the default language menu system. For example, your site is curently in 2 languages: English and Arabic. Then you should create menus for Arabic language based on the existing menus of theEnglish language.

In fact you don't need to translate all the menus, you just need to translate all the menus that are being used.

Step 2: Duplicate the default template style

Go to Extensions >> Template Manager then duplicate the default template style.

Step 3: Rename and assign language for the duplicated template style

Next, open the duplicated template style to rename it. Then assign to the desired language.

Step 4: Assign menu for Megamenu

Now open the Navigation tab, enable Megamenu then assign the created menu in the Menu field.

Step 5: Save mengamenu settings

Now all you have to do is SAVE the Megamenu settings, please keep in mind that this step is required even if you haven't change anything as it aims to detect your Megamenu.

Open the Megamenu setting panel and then make sure you select the right menu - Mainmenu for Arabic language.

Layout System

T3 Framework supports multiple layouts. To know more, please check our guidelines below.

Layout configuration

T3 comes with ease of layout customization. The visual layout configuration allows you to configure layout never easier.

Still have trouble?

Layout customization

The video tutorial guides you how to customize the layouts, how to add new layout, and how to customize blocks in a layout

Still have trouble?

T3 supports multiple layouts by default. In each layout, it is built up with multiple blocks (header, mainbody, spotlight ...). Each block contains one or many module positions. You can assign specific module positions to a block.

T3 framework supports multiple layouts that allow you to make your content displayed flexibly:

The 3 columns (left, content, right) can be configured to display in different way: Left + Content + Right, Content + Left + Right, Left + Right + Content ...

3 column layout: Left - Content - Right

Left

Content

Right

Layout: Content - Right

Content

Right

Layout: Left- Content

Left

Content

Layout: Full Width

Content

In the layout part, there will be 2 parts to be configured: The Layout Structure and the Layout Configuration.

Note: You can check more detail of layout configuration in the Setting guide

Where the settings saved?

Every time you customize, change settings of layout, the changes will be saved to an .ini file. For the fist time you make changes, the .ini will be generated and they are located in: templates/t3_blank/etc/layout.

When I change setting of layout: default. Now, file default.ini is generated with all settings of the defaultlayout. You can use the file to customize your layout by changing the settings in this file

The format of settings stored in this .ini file:

[block2@spotlight-1]
position="position-2"
default="span3"
tablet="span6"

Create new layout

Step 1: Create new layout

There are 2 ways to create new layout.

Save As Copy

When you configure layout from back-end, you can clone a layout.

Add new layout file

Each layout has its own file. The files are located in: your_site_folder/templates/t3_blank/tpls

To create new layout, you should clone a file here then edit it - define blocks that the layout uses.

Step 2: Create block

In the new layout, if you wish to use new block, you can create new one. Each block has its own file. The files are located in: your_site_folder/templates/t3_blank/tpls/blocks. Create new one by adding new php file with then name it or clone a block file then rename and customize it.

Step 3: Customize block

Each block has a number of module position assigned to, you can define the assigned module positions for the block using the code:

 <jdoc:include type="modules" name="<?php $this->_p('your_module_position_name') ?>" />

<!-- SIDEBAR 1 -->
<div class="ja-sidebar ja-sidebar-1 <?php echo $this->getClass($layout, $col) ?>" <?php echo $this->getData ($layout, $col++) ?>>
<jdoc:include type="modules" name="<?php $this->_p($sidebar1) ?>" style="JAxhtml" />
</div>
<!-- //SIDEBAR 1 -->

Step 4: Define blocks in layout

Open the php file of the layout to define the blocks that the layout includes.

<?php $this->loadBlock ('block_name') ?>

   <body>

    <?php $this->loadBlock ('header') ?>
    
    <?php $this->loadBlock ('mainnav') ?>

    <?php $this->loadBlock ('spotlight-1') ?>

    <?php $this->loadBlock ('mainbody') ?>
    
    <?php $this->loadBlock ('spotlight-2') ?>
    
    <?php $this->loadBlock ('navhelper') ?>
    
    <?php $this->loadBlock ('footer') ?>
    
  </body>

Code Format for customizing layout

Load a block inside layout/block

<?php $this->loadBlock ('blockname') ?>

Load a spotlight

<?php $this->loadBlock ('spotlight/4cols', $this->getPosname('position-1, position-2, position-3, position-4')) ?>

Include a position

<jdoc:include type="modules" name="<?php $this->_p('your_module_position_name') ?>" />

Note: Insteads load the module position navhelper, it will load the module configured for navhelper in backend

Documentation

For more helps and discussions on T3, visit our Discussion Chanel.

Install & folder structure

How to install T3 framework and its folder structure

T3 Bootstrap 2 version

How To Install T3 Framework

This video tutorial will guide you how to install T3 framework. There are 2 types of installation: Quickstart installation and Manual Installation.

Server Requirement

Software: PHP 5.4.x

Database

MySQL 5.1 +
MSSQL 10.50.1600.1 +
PostgreSQL 8.3.18 +

Web Sever

Apache 2.x +
Microsoft IIS 7 +
Nginx 1.0 (1.1 recommended)

Browser Requirement

Firefox 4 +
IE (Internet Explorer) 8 +
Google Chrome 10 +
Opera 10 +
Safari 5 +

Development Environment

During development process, Localhost is preferred. You can use the following servers in your PC to develop your site.

Windows

WAMPSEVER
XAMPP for Windows

Linux

LAMP Bubdle
XAMPP for Linux

Mac OS

MAMP & MAMP Pro
XAMPP for Mac OS

The instruction is appicable for both Joomla 2.5 and Joomla 3. We highly recommend you to use the stable version of Joomla, T3 version is now stable.

Now we move the project to github and you can check our project from: https://github.com/t3framework/t3

You can download our latest work or the released package. We suggest you to download the released version, it is tested and checked.

Download T3

You can select to install package (the package includes: T3 Blank Template and T3 Framework Plugin) or install one by one. The procedure includes the following steps:

Step 1: Install T3 Package

Step 2: Enable The T3 plugin

By default, when you install the plugin, it is enabled already. To check, go to: Extensions --> Plugin Manager --> find the plugin T3 Framework.

Step 3: Set T3 blank template as your default template

To set T3 Blank template as your default template, go to: Extensions --> Template Manager --> set T3 Blank template as your default template.

Select Language

Main Configuration

Enter the required information of your site: sitename, email ...

Database Configuration

Enter the required information of your site: sitename, email ...

Install Sample Data

If you install sample data, you will have a site like our demo. If you select default sample data, you will a fresh site site with T3 framework plugin and T3 blank template installed and enabled.

Remove or Rename the Installation folder

The final step is removing or renaming the Installation folder

There is always a team working on T3 Framework: support, fix bugs and develop new features. Since first stable version of T3 framework was released, there has been number of released versions. The released version comes with bug fixes, improvements and new features. You can view the information of release in T3 Framework changelog.

View T3 changelog

To have bug fixes, improvements, new features from a specific versions, you have to upgrade T3 framework to the version. But before upgrade, please always take BACKUP.

How to upgrade T3 Framework?

Install new version of T3 Framewotk directly to your system, uninstallation is not required.
Upgrade through Joomla update system
Upgrade though JA Extension Manager - recommended method

Upgrade instruction

Upgrade T3 Framework to latest version

Joomla Update

In the Template setting panel of T3 Blank template or any template developed with T3 Framework, you will se the notification if new version of template or plugin is found from the General tab

The Joomlad Update system is the override installation, so it will override all files/folder of the extension. If you have customized, so you should not use the Joomla Update system because your work will be lost.

In this case, we suggest you to use JAEM to upgrade

Upgrade through JAEM

We suggest to use JAEM to upgrade T3 Framework because your work will not be lost. If you use JA products, you should use JAEM for upgrading

Update JA T3v3 Framework to T3 Framework

We moved JA T3v3 to T3 project so now, we will maintain and develop T3 project instead of JA T3v3. For some templates that were developed with JA T3v3 (JA Brisk, JA Mero, JA Onepage) can be upgraded to be compatible with T3 framework.

1. Before Upgrading

BACK UP is required, please back-up your site before upgrading

There are 2 options available for your upgrading

Option 1 If you do not customize much and you can do it again

In this case, we suggest you to download Template and T3 plugin then install them again

Option 2 If you have customized a lot

Upgrade template through JAEM (JA Extension Manager) then install T3 plugin

2. Upgrade Template

To make templates compatible with T3, we had to make changes to the templates so you have to upgrade template before installing T3 plugin

Step 1: upgrade template through JAEM

To upgrade template through JAEM (JA Extension Manager Component) you need to install the component and configure it properly. Please check DETAIL GUIDE of how to use the extension.

Next, check the new version of template to upgrade

When upgrading, we only pay attention to conflicted files - files that have been modified by both User and Developer .

When upgrading, the conflicted files will be overridden by files in new version, that means what you customized in the files will be lost.

Now, upgrade template to new version. After upgrading successfully, you need to compare the conflicted files (using your back-up files) then copy what you customize to the new upgraded files.

3. Uninstall or Disable JA T3v3 plugin

4. Install T3 Framework Plugin

Download latest version of T3 Framework Plugin

Download T3

Now, install the plugin and make sure it is enabled.

Folder Structure

After this video tutorial, you will be able to know about your T3 System pluign folder structure, your JA Templates which developed with the T3 Framework and the functionality of the folders and files - all the materials you should be aware of before getting started in customizing your template.

After Installation, you should know the folder structure of the framework which shows you where and how to work with files.

T3 BS3 Blank template

T3 integrates Bootstrap, developed with LESS. Check the folder structure to know where to start.

templates/t3_bs3_blank/
+--less/            		/*  all LESS files */ 
¦    +-- rtl/			/*all files of right to left layout*/
¦    +-- themes/         	/*all theme folders theme files */
¦    +-- bootstrap.less
¦    +-- core.less
¦    +-- home.less
¦    +-- joomla.less
¦    +--  ...
+-- css/                     /*all compiled files*/
¦    +-- themes/             /*all theme folders and files*/ 
¦    +-- bootstrap.css
¦    +-- home.css
¦    +-- megamenu.css
¦    +-- template.css
+-- fonts/ 
+-- js/ 
¦    +-- scripts.js
+-- tpls/             /* all layout files and block files*/
¦    +-- blocks/       /*all block files here*/
¦    ¦    +-- head.php
¦    ¦    +-- mainbody.php
¦    ¦    +-- footer.php
¦    ¦    +-- ...
¦    +-- default.php
¦    +-- default-content-left.php
¦    +-- default-content-right.php
¦    +-- home-1.php
¦    +-- home-2.php
+-- images/
+-- languages/
¦    +-- en-GB.tpl_t3_bs3_blank.ini
¦    +-- en-GB.tpl_t3_bs3_blank.sys.sys.ini
+-- templateDetail.xml  
+-- templateInfo.php/
+-- thememagic.php/ 	/*the file is to add new group, parameters for ThemeMagic*/
+-- index.php/
+-- index.html

The most important folder is: less. The folder contains all LESS files that are used to develop your site, the LESS files can be compiled to CSS files.

T3 system plugin

When you install the t3 system plugin, the plugin includes the Bootstrap library that is used to develop your site. We recommend you not to customize files of the plugin, all your work should be operated in t3_blank template.

plugins/system/t3/
+-plugins/system/t3/base     /* base theme for T3 Blank template (bootstrap 2)*/
+-- css/
¦    +-- layout-preview.css
¦    +-- megamenu.css
¦    +-- thememagic.css
¦    +-- ...
+-- bootstrap/       /*Bootstrap 2 library folder*/
¦    +-- css/        /*css files in bootstrap library*/
¦    +-- ico/
¦    +-- img/
¦    +-- js/
¦    +-- less/    /*include all less files*/
¦    ¦    +-- code.less
¦    ¦    +-- form.less
¦    ¦    +-- ...
+-- less/
+-- fonts/
+-- js/
+-- html/
+-- tpls/
+-- params/
+-- tpls/
+-- component.php
+-- error.php
+-- index.html
+-- index.php
+-- offline.php
+-plugins/system/t3/base-bs3       /* base theme for T3 BS3 Blank template (Bootstrap 3)*/
+-- css/
¦    +-- layout-preview.css
¦    +-- megamenu.css
¦    +-- off-canvas.css
¦    +-- ...
+-- bootstrap/      Bootstrap 3 library folder
¦    +-- css/        /*css files in bootstrap library*/
¦    +-- ico/
¦    +-- img/
¦    +-- js/
¦    +-- less/    /*include all less files*/
¦    ¦    +-- grid.less
¦    ¦    +-- mxins.less
¦    ¦    +-- ...
+-- less/
+-- fonts/
+-- js/
+-- html/
+-- tpls/
+-- params/
+-- tpls/
+-- component.php
+-- error.php
+-- index.html
+-- index.php
+-- offline.php
+--admin/
+--includes/
+--language/
+--t3.php
+--t3.xml
+--t3.script.php

Customize T3 Framework

The very first things you need to know when you want to customize T3 framework.

Template and Style definition

Many users are concerned about the definition of Template and Style. In the very basic way, template includes styles. In one site, you can use one template but multiple styles. You can create multiple styles from a template.

In one site, multiple styles can be used simultaneously, each style can be applied in specific menus --> override default styles in the menus.

Template Override

With T3, you can override default style in specific menu items. The override feature help you to have different layouts, theme, navigation ... for your front-page.

There are 3 steps that you should follow to override style.

Step 1: Create override style.

To create new override style, you can duplicate the default style or you can go to the edit page of the default style then save it as copy.

Duplicate Style

Or Save as Copy

Step 2: Configure style

After you create an override template, you can configure the template (change layout, color, ...). Firstly, let's check the layout setting of the default template.

Step 3: Assign style to menu

Template Width Customization

Template width is defined by grid, and divided into number of columns (default is 12 columns).

To change width of template, open file: variables.less in: templates/t3_blank/less then change defined width of template.

// Default 940px grid
// -------------------------
@T3gridWidth:             940px;  // T3 add. For non-responsive layout.
@gridColumns:             12;
@gridGutterWidth:         40px;
@gridColumnWidth:         floor((@T3gridWidth - @gridGutterWidth * (@gridColumns - 1)) / @gridColumns);
@gridRowWidth:            (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));

We base on gridcolumn of 12. Width of each column is:

floor((@T3gridWidth - @gridGutterWidth * (@gridColumns - 1)) / @gridColumns);

To change width of template, you just need to change T3gridWidth. The gridColumnWidth will be auto caculated.

From the base, we build up responsive grid system as follow:

// 1200px min
@T3gridWidth1200:         1200px;  // T3 add
@gridGutterWidth1200:     40px;
@gridColumnWidth1200:     floor((@T3gridWidth1200 - @gridGutterWidth1200 * (@gridColumns - 1)) / @gridColumns);
@gridRowWidth1200:        (@gridColumns * @gridColumnWidth1200) + (@gridGutterWidth1200 * (@gridColumns - 1));

// 980px-1199px
@T3gridWidth980:          940px;  // T3 add
@gridGutterWidth980:      40px;
@gridColumnWidth980:      floor((@T3gridWidth980 - @gridGutterWidth980 * (@gridColumns - 1)) / @gridColumns);
@gridRowWidth980:         (@gridColumns * @gridColumnWidth980) + (@gridGutterWidth980 * (@gridColumns - 1));

// T3 Add: 768px-979px
@T3gridWidth768:          740px;  // T3 add
@gridGutterWidth768:      20px;
@gridColumnWidth768:      floor((@T3gridWidth768 - @gridGutterWidth768 * (@gridColumns - 1)) / @gridColumns);
@gridRowWidth768:         (@gridColumns * @gridColumnWidth768) + (@gridGutterWidth768 * (@gridColumns - 1));

Theme List

All the themes folder are in folder: templates/t3_blank/less/themes/dark

In each theme folder, it has 3 files:

template.less
variables.less: this file includes all default variables
variables-custom.less: this file includes your custom variables when you customize theme.

Create new theme

The best way to create new theme is cloning theme from an existing theme. You can also add manually. If you add manually, follow the 2 steps:

Step 1: Create theme folder

In the folder: templates/t3_blank/less/themes, create a theme folder. In this example, we name it: custom-theme

Step 2: add files

Each theme has 3 LESS files: template.less, variables.less, variables-custom.less. We add the files in folder: templates/t3_blank/less/themes/custom-theme

Note: the 2 files: template.less, variables.less should be copied from an other theme. The file: variables-custom.less includes custom variables in the theme.

Customize Theme

To customize theme, you can use settings of template (Theme Setting tab or ThemeMagic) or customize the Theme LESS files located in:

templates/t3_blank/less/themes/Theme_Name

Compile LESS to CSS

Now, you will need to compile less to css so that new created theme folder will be compiled to css theme folder. Now, you will have a theme folder compiled in the folder: templates/t3_blank/css/themes/custom-theme

When compile LESS to CSS, each theme has an independent folder. The folder contains all necessary CSS files, it is not overridden from default theme --> when your site runs on a specific theme, it only loads css files from 1 folder --> so it will increase the speed of your site.

Some added CSS files are:

home.css
bootstrap.css
bootstrap-responsive.css
template.css
template-responsive.css
megamenu.css
responsive-home.css
home-responsive-home.css
component.css

Note: The .min.css files are the compressed files. Your site uses the .min.css files when you enable the Optimize CSS option in the General setting.

home.min.css
bootstrap.min.css
template.min.css
template-responsive.min.css
megamenu.min.css
home-responsive.css

In the back-end, you can select the new created theme for style you want

About Module position in T3 Framework

If you have used JA T3 V2, you may familiar with module position in the new version. There is not much difference. You can create unlimited module positions, then assign them to blocks.

Module position is added to a specific block so you have to defined which layout you want to add new module position to.

Add module position

Step 1: Add module position to block

All block files are located in: template/t3_blank/tpls/blocks. Open the block file you want to add new module position to.

 <jdoc:include type="modules" name="<?php $this->_p('your_module_position_name') ?>" />

 
<!-- SIDEBAR 1 -->

        <div class="ja-sidebar ja-sidebar-1 <?php echo $this->getClass($layout, $col) ?>" <?php echo $this->getData ($layout, $col++) ?>>

          <jdoc:include type="modules" name="<?php $this->_p($sidebar1) ?>" style="JAxhtml" />

        </div>

        <!-- //SIDEBAR 1 -->

Step 2: Define new created module position

When done, you need to define the new created module position in the file: TemplateDetail.xml

 <positions>
   <position>your_module_position_name</position>
  </positions>

In the example, I will create a module position named custom-position in the layout: mainbody-content-left

<jdoc:include type="modules" name="<?php $this->_p($custom-position) ?>" style="JAxhtml" />

Now, I define the module position in TemplateDetail.xml file.

  <positions>
   <position>debug</position>
   <position>position-12</position>
   <position>position-13</position>
   <position>position-14</position>
   <position>position-15</position>
   <position>custom-position</position>    <! my created module position />
 </positions>

Custom template using CSS without changing LESS

T3 Framework developed with LESS, the LESS files are compiled to CSS files. Each time you compile, CSS files will be overridden so we suggest you not to use CSS to customize, develop your site because when you compile, your work can be lost.

To custom CSS without changing LESS, and your work will never be lost, you must work on the file: custom.css. The file is located in: templates/t3_blank/css .

Some characteristics of the Custom.css file

The file is included by default, you don't need to create new one.
The file is the last file to be called in your template so it will not be overridden.
The file is not a compiled file from LESS so it will not be overridden or lost when you compile.

Working with the file

The Custom.css file is the same as any other CSS file. Enter the CSS to style for your template as normal when you work with the template.css or any other CSS files.

Let's check front-end

ThemeMagic

ThemeMagic is one of the outstanding feature in T3 framework. It helps you in customizing your JoomlArt T3 Framework version 3 based Joomla template without having to search for the right file or without diving into the code.

Still have trouble?

T3 Framework is powerful by its easy customization with ThemeMagic. You can allow unlimited parameters to be configured in the ThemeMagic. The left menu is the configuration panel, the right panel is your homepage, so when you change setting of parameters, click on "Preview" button, then you can view the changes in your site front-end in the right panel.

Let's view parameters in the Thememagic.

Add new parameters to ThemeMagic

You can allow unlimited number of parameters to be configured. New parameters to an existing group or you can define a new group then add new parameters to the group. The customized parameters is set in the templateDetail.xml file in the folder: templates/t3_blank

Note: Please note that the UPPERCASE texts are language keys

Step 1. Define a new group

<fieldset name="custom1_params" label="CUSTOM1_LABEL">

</fieldset>

Step 2. Define parameter in new group

<field name="inputBorderRadius"

type="text"

default="3px"

class="input-tiny"

label="CUSTOM1_ELEMENT_RADIUS_LABEL"

description="CUSTOM1_ELEMENT_RADIUS_DESC" />

</field>

Step 3. Define a LESS parameter

Define a LESS parameter with the same name as above @inputBorderRadius: 3px;

Step 4. Use "@input BorderRadius" at somewhere in LESS file

It depends on you, just think how you want to use this parameter and how it affects to the template. It is required that you have some base knowledge about LESS and CSS. We suggest you to add to the file: style.less

modal-t3-signup {
.border-radius: @inputBorderRadius;
)

Step 5. Define language key

Open the language file of the template (language\en-GB\en-GB.tpl_t3_blank.ini) and define language key that you use to define parameters above.

Install Google Analytics

Step 1: Get your Google Analytic code

Step 2: Add the Google Analytic code to your site

Add live chat scripts

No content in Homepage

Problem

How to Fix ?

1. Add position "Component" to "home" layout

2. Change layout for Home style

Custom.css File

JA T3v2 upgrades to T3 Framework ?

Logo Customization

1. Change the Logo image

#1: Change logo from the Template Manager

#2: Change the Logo from the variable.less file

2. Logo styling

Remove T3 Logo from the footer

Add/install New Fonts

Step 1: Add the font package(s)

Step 2: Define font(s)

Google Fonts

T3 and Bootstrap 3

Embed style sheets and Javascripts

#1. Use head.php file

Add CSS style sheets

Add Javascripts

#2. Use assets.xml file

CSS style sheets & Fonts

Javascripts

Responsive for third party extensions

Style the 404 page and Offline Page

1. Customize the 404 Page

Step 1: Open file error.php

2. Customize Offline Page

Step 1: Open file offline.php

Sticky Menu and Offcanvas Menu

1. Sticky Menu

Step 1: Upgrade T3 Framework plugin to version: 1.2.1 (at least)

Step 2: Add class to make a sticky navbar

2. Off-canvas Menu in collapsed screens

Add the "Back to top" button

Multilingual for Megamenu

Create menus for languages

Step 1: Create menus for languages

Step 2: Duplicate the default template style

Step 3: Rename and assign language for the duplicated template style

Step 4: Assign menu for Megamenu

Step 5: Save mengamenu settings

I. About T3 Framework Layout

Layout configuration

Layout customization

II. Multiple Layouts

III. Layout Configuration

Where the settings saved?

IV. Layout Customization

Create new layout

Step 1: Create new layout

Step 2: Create block

Step 3: Customize block

Step 4: Define blocks in layout

Code Format for customizing layout

Load a block inside layout/block

Load a spotlight

Include a position

Documentation

Introduction

Installation

Settings

Layout

Customization

FAQs

Video Tutorial

How To Install T3 Framework

System Requirement

Server Requirement

Browser Requirement

Development Environment

Download

Manual Installation

Step 1: Install T3 Package

Step 1: Open file `error.php`

Step 1: Open file `offline.php`