Video Transcript

Hi. This is Peter from JoomlArt. Today we will be talking about Layout Customization. Each layout file has its own PHP file, the PHP files are located in: template then the template name then the folder tpls. Ok, you look here. We have 6 layout files, which means you have 6 layouts available for selecting in back-end. There are 2 ways to create a new layout that we suggest.

The First, you can save as any layout in the Layout tab. Just select the layout you want to clone then click as "Save as Copy", then name the layout and clone it. You're all set. Now, feel free to customize the cloned layout. Always remember to save your settings. As you can see in the clone file, here is the PHP File and default clone.

The other way to add new layout is cloning a PHP file in the folder. This will be loaded to layout list in the back-end. So we can open the layout file. Scroll down to check to see what we have in this file. So here is the block to be loaded in this layout: top-header, header, mainav, etc ... It is easy to load a block to a layout, just use this function with the layout name which can be changed to whatever. All block files are located in the "blocks" folder. Here is the list of all blocks that can be used in the layout. If you want to use any block in a layout, just load the block in the layout php file.

Ok, let’s go back to the layout php file. Now, let’s use another block, so we will replace the current block name with the new one, we'll "mainbody-home" block. Rember if you don't want to load any block in the layout, just remove it here. So you see now the top-header block is no longer loaded in the layout. Now let's add a block just after the mainbody-home, ok, we clone this function. Make sure that lined up all nice. Now we will enter the block name that we want. We'll use spotlight-2. So here is the layout before changing, we have: top-header block, mainav, top-bar, slideshow, spotlight-1, main body home, nav helper and last footer. Now, we gonna reload the back-end to check the new layout Ok, here is the layout with the changes we customized. The top-header block is no longer located in the layout as you can see. So you scroll down and you see block spotlight-2 has been added to the layout. That looks good. So just check and reload the font-end on the Homepage. So scroll down, see the way the layout works to the users.

To create a new block, you can add new php here, although we usually suggest you clone from an existing file. So we clone "mainbody-home", rename the cloned block file. Now, we gonna open that file. Let’s scroll down. Here is the layout configuration. Based on each template or each layout, it can be defined differently. In the block has the sidebar, the content width is span8 and the sidebar width is span4. In case the block has no sidebar, so the content width will be span12 or full width.

Ok, you can see it in the layout configuration panel. It includes main content and sidebar. Let’s scroll down again. Here is the main content configuration. This code is to load "message" to the main content. And here is the loading module position function, the module to be loaded is "mastcol". Scroll down again. Now we have configuration for Sidebar 1 and sidebar 2, the "Sidebar 1 and 2" position are defined in the Position Configuration. We use "$sidebar1", we need to define it. First, scroll up to see how it is defined. Okay The mascol, sidebar1 and 2 are defined here. Okay Let's go open this file "templateDetail.xml".

Ok scroll down again. All positions defined in the template are listed here. And we also see the positions defined in the block. You can change any positions defined in the XML file, we change to position: social. For position-5, let's change it to slidenews. Now let's check changes in the layout configuration. Don’t forget to reload. So as you can see, Social is in a new place. Please also note that you can load a block inside a block. For example here, we load block "spotlight-2" in the "mainbody” and “home-cloned" block.

Now we will add a new position in the main content. We copy this loading position function, then paste to the place we want to display the position, so let’s use after spotlight-2. And then we change to the position to be loaded. We just format: 'position', so we use up any position defined in the templateDetail.xlm. That's excellent. As the "custom" position is not defined so we need to define it in the xml file. Ok, so let's add a new row then define the new position here. We Reload the page to check. Let's Scroll down. Looks good. The new position has been added. Now we want to add a new mascol, so we will clone the configuration of mascol 1, and then we gonna replace mastcol 1 to 2. And we need to define mascol2. So let’s go back to the top. Now, let's define mastcol2 here. Please ensure that the mast-col-2 is defined in the templatedetail.xml. Ok, let’s reload the page again. Great, the new mastcol is added right here.

You can now set to any position you want.

If you have any more concern, please check our detail documents at t3-framework.org. Navigate to Documentation >> Layout settings. We have detail documentation for layout customization here. You can also find the useful functions that are used to customize your layout. Ok, that looks great. Remember if you have any question, you can go to t3-framework.org or visit the T3 version 3 forum on the JoomlArt forum. Thank you guys very much for your time. Stay tuned for the next serie of videos on the T3 version 3. Free open source framework by JoomlArt.