T3 Framework Video Tutorials – Layout Configuration

T3 Framework Video Tutorials – Layout Configuration


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. Layout Overview
Layout Configuration 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.


2 thoughts on “T3 Framework Video Tutorials – Layout Configuration

Leave a Reply

Your email address will not be published. Required fields are marked *