T3 Video Tutorials

Basic and Advanced Joomla video tutorials about T3 Framework

Joomla template folder structure video tutorial

This video shows you the folder structure of T3 Framework plugin and Joomla templates developed with the T3 Framework. In this video, we also describe functionality of folders and files - all the materials you should be aware of before getting started in customizing your templates.

Video Transcript

Hi. This is Peter from JoomlArt. And today we will be talking about T3 Version 3. This is the tutorial video made to show you how to use all the great features of T3 Version 3. So let’s get started. This video will show you the folder structure of T3 Framework and the template developed within the framework as well. This is gonna be 2 parts. First, the folder structure of the T3 Plugin and second, the folder structure of the Template developed with the T3 version 3 Framework. Now let’s start with the first section of this tutorial – the folder structure of the T3 Framework. From the root folder of your site, go to: Plugins >> System >> t3. Here is the list of all folders and files of the T3 System plugin.

We have folders, like: admin, base, includes, languages. Please keep in mind that, any customization here is NOT recommended, you should customize your site by using files in the template folder, not in the framework.

First, let's check the admin folder. Here are the folders and files inside the admin folder. All the folders and files in this admin folder are used for admin panel of the framework. Ok, now let's check the "base" folder. All the files and folders here are to build up the base theme. All themes of any template developed with T3 framework are based on the base theme. Or other words, all themes are the customized theme of the original base theme. T3 version 3 integrates Bootstrap, so you can see the "bootstrap" folder here. It's a complete bootstrap package.

This means, everything supported by bootstrap will also be supported in the T3 version 3. As you know that Bootstrap utilizes LESS CSS so you can see the less file here, it is the default of Bootstrap. You can also see another LESS file in folder: base. The LESS folder includes the less files specifically developed for T3 framework. tpls folder includes the layout and block files for the base theme and T3. Once inside the folder HTML, you can see there are many folders of modules and components. These are the override folder of their extensions in the template, so everything inside the base can be overwritten in the template.

Next, the folder includes the main code to perform the functionality of the framework like compile LESS to CSS, the CSS file original and many more ... etc. Finally, the languages folder contains the language files of the plugin.

The second section of this video is about the folder structure of the template developed withthin the T3 Framework. Go to: templates >>template name. The 2 folders that we often interact with: tpls and less. The tpls folder contains all layout files and block files. You can add new layouts, customize any existing layouts, blocks or make many adjustments using files inside of this folder. While the "LESS" folder contains all files that are used to develop and customize your site. These less files can be compiled to CSS files that are located in the folder: CSS. The LESS files can be compiled in the CSS folder to the T3 Version 3 Framework. On another note, you should customize your site with the LESS files, not the CSS files. Each time you compile LESS to CSS, the CSS files will be overwritten and all your customization files will be lost if you did it incorrectly. So make sure you compile from LESS to CSS. In case you want to customize your theme without using LESS files, you can use file: custom.css. This is the last files to be loaded. You can style your site with CSS normally. This file is the last file to be loaded and it is not overwritten when you compile LESS to CSS.

Inside the folder: etc, we have a number of .ini files, the ini files contain changes of layouts when you configure layouts from the back-end of your site. If these files are deleted, then all changes of layouts will be lost and will be reset to default settings. The "js" folder includes the javascript files that are used in your site. Put all the fonts used in the template into the intro folder "fonts". The html is the special folder of Joomla, it's to override template. This is the end of the tutorial today. Thank you for learning about the folder structure of T3 Version 3 framework. We have many videos available to teach you everything you want to know on our Youtube channel: Youtube.com/JoomlArt, such as Mega Menu, ThemeMagic, and Layout customization. Have a great day and see you soon!