Video Transcript

Hi, this is Peter from JoomlArt. Today we will be talking about the T3 version 3 Framework for Joomla.

This is a 2 part video series about layouts. The first video will be about Layout Configuration, and the second one is about Layout Customization.

So let's start with the Layout.

There are 3 main parts in this tutorial.

1. Layout Overview
2. Layout Configuration
3. Exporing layout files

Ok, now let's check out the layout overview.

Each layout is built up from multiple blocks. One block can contain one or many module positions. The customization can be operated from any level: layout or block.

The layouts they are very flexible, you can change from 3 columns to 2 or full width. The base with elements are from 1 to 12 and this can be configured depending on each layout.

We can go with combination of 3-6-3, 8-4 or simply 12, it's up to you.

Ok, now we're going to move on to Layout Configuration.

First we’re gonna go to Template Manager, this is under Extensions at the top of your screen. We're gonna choose a template. In this tutorial, we’re gonna use JA Mitius template. Ok. Now let's go to the Layout tab. Let's scroll down. Here's the list of all the layouts on the site, select the layout for the Home menu.

There are 2 parts to this Layout Customization: the Module Positions and the Responsive Layout. We're gonna start with the Module Positions.

The Module Positions allows you to change the structure of the layout. You can change any module position that you want. For the spotlight block, you can set the number of positions to assign to any module position. If you don't want to publish any position in the front-page, just assign to "None". Always remember to save your settings. When saved, go to the top of the screen and see in the green bar, “Style successfully saved”.

The Reset Position button allows you to reset module position tab to default settings while Reset All resets all settings in the layout including the responsive layout settings. So let's check in the front, ok the front-end looks pretty good.

Just in case, we can save the layout in case you make any change that we want to come back to, so we're gonna name this example default-cloned, then save.

So we’re gonna move to Responsive Layout, the top of the screen to the right of the Module Positions. Here's the supported layouts. There are 5 layouts and you can configure the theme one by one: Wide, Normal, Xtablet, Tablet and Mobile.

Ok, let's try Xtablet layout, the layout for iPads. We can disable any position in the layout simply with one click of the mouse. We can resize the positions inside any spotlight block, just drag and drop within the base of 12. Can disable the positions that may not be displayed well in the layout. Ok let's check the front-end in XTablet or iPad. You can see here, the front page is displayed absolutely with what we’ve just configured.

The last part in this tutorial is Exploring Layout Files.

Each layout has a separate PHP file, the files are located in template/template_name/tpls. We have 6 layouts by default and one cloned layout so we have 7 total layouts and here are 7 PHP files. Please note that our settings in the back-end for layout are not saved to PHP files, they are saved to ini files. The ini files are located in template/template_name/etc/layout. As you can note, only layouts that have been changed here will have an ini file. The files also include the change settings. We can actually change the settings of layouts from the files but we generally don't recommend that for users, let's give it an example.

In the first position: block 1, spotlight 1, you can change that, can set the default with span 6 to span12. Now we go back to the Layout settings panel and refresh and we see that it's changed in the back-end successfully. You see that the position-2 has been changed to -1 and the span has gone from 6 to 12.

Remember to stay tuned for the second part of this video. This is one of many videos for T3 version 3 Framework.