The Building Blocks

All the code snippets that make up T3

The Building Blocks

The file system is the most daunting part of T3 when first getting into it.

There are so many files compared to a simple core Joomla template making it hard to determine what is what.

Quick Overview of the Build Blocks in T3

The T3 Blank template already has a great variety of module positions grouped into handy blocks that represent the various areas of the website such as Header, Footer, Navigation, and content area. But what happens if our website requires a unique layout that doesn't fit into T3 Blanks layout? Creating new blocks in our template is a relatively simple process but it does require some modifications to the template code. So fire up your favourite text editor, and let's get our hands a little dirty under the hood of our template.

Read more: Quick Overview of the Build Blocks in T3

Working with LESS in T3

A common mistake by inexperienced developers with T3 is using the template.css file to store all your css changes. The problem arises when you perform an upgrade of the template: the template.css file gets over written and hence your custom styles are lost. To combat this problem T3 uses the LESS syntax to generate style sheets which are then stored in the CSS directory when compiled.

Register to read more ...

The building blocks of the T3 framework

Theme Magic within the T3 framework makes it easy enough to work through and customise a template such as the Blank templates or Purity that you can download for T3 but when it comes to getting dirty with the code, this is where you need to start paying attention and understand the setup and good practises so you don't get caught out.

There are best practises and methods in customising the template but before we get into it, we must first understand all of the parts that make up the structure of the template.

Register to read more ...

Block and the Layouts

Customizing the HTML output usually comes next when tweaking the template and making it suitable for your project and this is also one of the strengths when it comes to using T3.

Over time when you're building your websites for clients or for a template club, you will be designing certain elements that you will be using over and over again. Elements such as header areas, footer area that always contain between 4-5 module positions, certain style of mobile headers and so forth. All of these elements can be reused over and over again.

If you were to compile all of these blocks of code into one massive template, you will have the holy grail of templates that will do everything under the sun. Some of you that are reading this might thing, great, extra overhead and bloat which is true if you were to use everything, but if most cases you may only be using 2-3 different block types out of the suite of 30 that you may have accumulated over the years of developing on the framework or have collected from other templates and projects. So if you're only pulling in just 3 block areas out of our collection of blocks then you're not creating all of that unnecessary overhead or bloat. You're just pulling n the elements that you need, read for customisation.

Can you see the appeal of T3?

In this section you will learn:

Layouts

Blocks

 

You will need an active subscription to learn more about Blocks and Layouts in T3 framework.

Register to read more ...

Types of blocks

As you build and use blocks in T3, it is important to note that you will be building two types of blocks. Some blocks are more static and rigid in what they contain,

e.g a block with a left module position and a right module position both with defined widths of perhaps 50% or in Bootstrap talk, both with span6 classes.

Register to read more ...

Layouts in T3

This is a complex area of T3 that allows users to display different layouts in different devices.

T3 Blank already has a layout of numerous module positions, but I recommend creating a new unique layout so that we can tailor the module positions to our own needs. This will also allow us to be able to install new updates for the template and not overwrite any of our modifications to the code.

Register to read more ...

Template positions

Like with any custom Joomla template you should define all of your newly created module positions in the template.xml file. This is the Joomla template file that holds a lot of the information about the template including the name, author and of course, all of the available module positions in the template. You don't have to add in all of the positions but it is seen as good practise to so when a user is selecting a module position from the module manager in Joomla, it will automatically appear in the list without the user needing to guess or manually type in the name of the position they want to use.

Register to read more ...

Themes and creating themes

Themes are also an important aspect to remember when customising your template. You should always create your own theme within the base templates so that you don't overwrite your LESS customisations in the event of a template upgrade.

Register to read more ...

LESS and all that CSS styling

After installing the T3 blank template we essentially have a blank canvas, ready to start painting your website over the top. For many people, the first step might be to get right into the existing CSS files and start styling the website to match their grand vision, playing around with colours, widths of columns, adding in some cool bootstrap effects and much more. It is just logical to start here. However when using the T3 framework it is not recommended to start modifying the existing CSS files without the prior knowledge of what they do. Infact it can be down right disastrous!

Let me paint a scenario for you. You have installed T3 and spent hours or perhaps even days modifying the CSS files to make the website styled exactly how you want it - and with it finally finished you can now sit back and admire your hard work. There's just one more thing to do, and that is update the T3 Blank website as you have noticed a newer version has been released in the time that you have been working on your website. Easy enough you think as you press the update button. Unknowingly you have just over written all your hard work, as the newer T3 Blank template files innocently replaces all their older existing counterparts. A big mistake that could have been avoided if you only knew the correct protocol for using the CSS and LESS with the T3 framework.

Register to read more ...

T3 special code formatting

Before we move on to anything else, it is important to note that T3 has its own slightly different templating language that you will have to know and learn to be able to implement into any T3 template.

Register to read more ...

Layout configuration

I mentioned a little earlier the layout configuration when it came to customising the blocks and module positions for different screen resolutions within T3.

The layout configuration is one of the most powerful parts of the system allowing you to take control of your template and make it look feel and act differently on different screen resolutions.

When editing the layouts, T3 will save the configuration of them all in a few files.

Register to read more ...

Understanding the etc/layout directory

When you configure a template layout all the setting are stored within an .ini file within the etc/layout/ directory. This is handy in the event that the template interface is inaccessible due to javascript conflicts and other problems hindering its accessibility, as this file can be manually edited, saved and all changes reflected back on the layout. If an .ini file is deleted the layout reverts back to a basic "factory" default.

Register to read more ...

Extending T3's functionality

It's possible to expand T3's functionality by intergrating the various jquery plugins available or by even creating your own functions. To do so there is a certain protocol you should follow so that additions to the template are treated correctly.

Within the template directory you will see a folder called etc, which provides files that call in any additional functions. Let's take a look at the process of including a jquery plugin within your template. With the following example we are going to use the paypal / bootstrap accessibility plugin located in github, although the same theory will apply for any plugin.

Register to read more ...

Login

If you have a subscription, login to access course material and your account details.

Please contact m@joomtraining.com.au for any account issues.