New features

New updates for T3 Framework

T3 Bootstrap 2 version

About T3 versioning

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

Optimize CSS and JS

Available version: 2.1.0

Optimize CSS and JS is to improve your site performance by join and compress CSS and JS files so that the total size and number of requests will be decreased.

Now let's check how the feature affect your site.

#1: CSS optimization

#2: JS optimization

Enable optimization

To enable this feature, please turn off the development mode in General tab in any T3 blank template style back-end setting.

Now enable options Optimize CSS and Optimize JS.

For JS optimization, we provide 2 tools to compress:

  • Closure Compiler
  • JSMIN

In comparision, Closure compiler has better compress and more accurate but it limits the size of optimization group (under 200kb).

Exclude files to be optimized

You can exclude CSS and JS files that you don't want to optimize, just add the file name, if you have many files, please saperate them with comma. If you have 2 same files, please add full path to the files to distinguish.

How optimized files are generated?

When the optimization option is enabled, the optimized CSS and JS files will be auto generated when a page is viewed in the first time. If there is any change in the CSS, JS loaded in a page, new optimized JS and CSS files will be auto gererated again. So to prevent from having a lot of optimized CSS and JS files, you should check before turn the Optimization option on.

All the optimized CSS are located in templates/purity_iii/t3-assets/css folder and the optimized JS files are located in templates/purity_iii/t3-assets/js.

Support add-ons

Available version: 2.1.0 and only for T3 BS3 Blank template

In back-end setting of template style any template developed with T3 framework, you will see Add-ons tab, this tab include add-ons for T3. Currently it has configuration for Off-canvas sidebar and Extended template style.

Off-canvas sidebar

Off-canvas sidebar can be used to display flexible content, you can use it to display static content or use it as a menu system of your site.

Looking for how-to docs of Off-canvas sidebar? Check it out now.

Template extended style

This feature allows to load a Stylesheet (.less) file to specific pages. It's specially useful when you want to make a third party extension to be compatible with your site or customize the style of the third party extension.

Step 1: create stylesheet file

Create .less file in templates\t3_bs3_blank\less\extras. If you don't see the extras folder, please create the folder.

Step 2: assign the stylesheet to pages you want

Open back-end setting of T3 BS3 blank template style, in the Add-ons tab, assign the new created stylesheet to the pages that will load the stylesheet.

If you don't want the stylesheet to load in any page, just leave it blank or assign to Not use. If you want to use it in all pages, assign to All pages.

Purity III is the first template that apply the new feature. In Purity III, it supports number of third party extensions, the customized style of each third party extensions is stored in its own .less file.

Step 3: compile LESS to CSS

When you compile LESS to CSS, the .less file will be compiled to .css file and it's stored in templates\t3_bs3_blank\css\extras.

French and Italian translation package

Thanks to community who helped us to make french and italian translation package. You can download and install to the your system.

Step 1: download translation package

When you view T3 framework project on Github, you will see translation folder.

Download T3 framework

Download the T3 framework package, zip the folder of translation folder of the 2 languages.

Step 2: install French language

Go to Extensions >> Extension manager >> Install languages, select language then install.

Step 3: create content language for French

Go to Extensions >> Language manager >> content, create new content langauge.

Step 4: install French translation package

Access your template style manager >> Extensions >> Extension Manager. Browse the translation package then install.

Step 5: set French as default langauge

Back to Extensions >> Language manager >> Installed Administrator, set French as default language.

Now go to T3 blank template style, you will see it's translated to french.

Isolate template settings and customization

Available in version: 2.3.0

We got some complains from users that their template settings and customization are lost when upgrading to new versions. The reason is that, user's changes are often implemented in files in template folder, when upgrading to new version, the files are overridden then the user's changes are lost.

How the new feature helps you?

Simply, the problem can be prevented by putting all user's settings and customization in a folder that is independent from template. The way to implement this feature is:

In the template, there is a special folder - "local". The folder will contains all user's settings and customization. We don't include the folder in template and T3 framework plugin, so when you upgrade, everything in the folder is not changed or overridden.

File priority:

This is the priority to use a file:

  • local folder: {root}/templates/{template-name}/local
  • template folder: {root}/templates/{template-name}
  • base theme folder in T3 Framework plugin: {root}/plugins/system/t3/base (bootstrap 2) or {root}/plugins/system/t3/base-bs3 (bootstrap 3)

The settings of layouts when user configure in the template manager are stored in folder: local/etc/layouts.

How to disable the feature?

For developer, Template provider, when develop a template, they don't use the "local" folder, everything is included in template. In this case, they can disable the new feature by adding the code after } in the last line of the configuration.php.

define ('T3_LOCAL_DISABLED', 1);

Structure of the "local" folder

templates/t3_bs3_blank/local/
+--less/         		// extended and new .less files 
¦    +-- template.less
¦    +-- rtl/ 			//.less files of customized style of right to left
¦    +-- themes/          	// .less files of theme customized style 
+-- css/                   	 // compiled css files 
¦    +-- rtl/              	// compiled css files of right to left  
¦    +-- themes/             	 // compiled css files of theme  
¦    +-- template.css
+-- js/
¦    +-- scripts.js
+-- tpls/             		// override layout files 
¦    +-- default.php
¦    +-- home-1.php
¦    +-- blocks/        	// override block files
¦    ¦    +-- header.php
¦    ¦    +-- footer.php
+-- html/  			// override Joomla default layouts
¦    +-- com_content/
¦    +-- mod_footer/
+-- images/
¦    +-- logo.png 		// override default logo image
+-- etc/
¦    +-- assets.php  		// override/extend template parameters

Case studies:

1. Layout settings

Layout settings provided by Template provider are stored in folder: {root}/templates/{template-name}/etc/layouts. When customers configure layouts, the user's layout settings are stored in folder: {root}/templates/{template-name}/local/etc/layouts.

2. Override layout file

Default layout files provided by Template provider are stored in folder: {root}/templates/{template-name}/tpls. If user want to override layout files or block files, copy the files and paste to such folder: {root}/templates/{template-name}/local/tpls.

Examples:

To customize layout "home", copy file:

{root}/templates/{template-name}/tpls/home.php

to:

{root}/templates/{template-name}/local/tpls/home.php

Do the same way with block file. To customize "footer" block, copy file:

{root}/templates/{template-name}/tpls/blocks/footer.php

to:

{root}/templates/{template-name}/local/tpls/blocks/footer.php

3. Override Joomla core layout

Joomla core layouts are stored in: {root}/templates/{template-name}/local/html. For example, if you want to override the Joomla article layout: 

{root}/templates/{template-name}/local/html/com_content/article/default.php

4. Override / Extend less

Create a less file in folder: {root}/templates/{template-name}/local/less with same name of the file in template to override/extend the file. In this file, add LESS/CSS rule, it's not necessary to import file that has variables or mixins.

For example, you can create file: local/less/template.less, the syle in the file will auto compiled.

When you compile LESS to CSS, the compiled .css files are stored in local/css folder.

5. Override logo

If you use image logo type with default logo, you can override the default layout with your own logo by adding your logo to the "local" folder.

local/images/logo.png

6. Override JS file

Copy the JS file from your template:

{root}/templates/{template-name}/js

to:

{root}/templates/{template-name}/local/js

7. Add new CSS/JS file

To add new CSS or JS file, add the file to folder:

  • CSS file: {root}/templates/{template-name}/local/css
  • JS file: {root}/templates/{template-name}/local/js

Next, copy file: etc/assets.xml to folder: local/etc then define the JS and CSS file.

// Define JS file
<scripts>

    <file>js/custom/your-script.js</file>

</scripts>

// Define CSS file
<stylesheets>

    <file>css/custom/your-style.css</file>

</stylesheets>

8. Override/Extend template parameters

To override/extend template parameters, please implement in local/etc/assets.xml file. For example, in the following file, param snippet_open_head is overridden to be non-global setting, it means, the setting is only applied for current template style.

<?xml version="1.0" encoding="utf-8"?>

<assets>

    <config>

        <fields name="params" addfieldpath="/plugins/system/t3/includes/depend">

            <fieldset name="injection_params" label="T3_INJECTION_LABEL" description="T3_INJECTION_DESC">

                <field name="snippet_open_head" type="textarea"

                   class="t3-admin-textarea"

                   global="0"

                   filter="raw"

                   default=""

                   label="T3_INJECTION_OPEN_HEAD_LABEL"

                   description="T3_INJECTION_OPEN_HEAD_DESC"

                />

            </fieldset>

        </fields>

    </config>

</assets>