JA T3 3.0 layout Structure
JA T3 3.0 supports multiple layouts. In each layout, it is built up with multiple blocks (header, mainbody, ...). Each block contains one or many module positions. You can assign specific module positions to a block.
Example
Now, we will see the layout structure of a specific layout: default-content-left.
In the layout above, it has 7 blocks and each block has one or many module positions assigned to. You can customize it easily without coding.
Multiple Layouts Supported
JA T3 3.0 supports multiple layouts: 3 columns (left, content, right), Content + Right, Left + Content, Full Width, Multi Columns.
-
3 Columns Layout (Left + Content + Right)
-
3 Columns Layout(Left + Right + Content)
-
3 Columns Layout(Content + Left + Right)
-
Content + Right
-
Left + Content
-
Full Width
To configure layouts, go to back-end of your site then navigate to: Extensions -> Template Manager -> Template you want to configure it's layout -> Layout tab.
In the setting panel, selec the Layout you want to change it's setting.
Next, go to the Positions Configuration setting, this includes the blocks in the layout.
Each layout has different blocks. We will to more detail about each layout, from this, you can understand the structure of layout and how to build a new layout. By default, the default layout (Left + Content + Right) has the followings block:
- header
- spotlight-1
- mainbody (Left + Content + Right), mainbody-content-left (Content + Left), mainbody-content-right (Content + Right)
- spotlight-2
- navhelper
- footer
For each block, it has one or more module positions, you can assign module positions to the block.
1. Header
Module positions assign
Front-end
2. spotlight-1
Module position assign
Front-end
3. spotlight-2
Module position assign
Front-end
4. navhelper
Module position assign
Front-end
5. footer
Module position assign
Front-end
6. default (Left - Content - Right)
Module position assign
Front-end
7. Content-left-right
Module position assign
Front-end
8. content-right-left
Module position assign
Front-end
Customize Layout - Create new layout
Step 1: Create new layout
Each layout has its own file. The files are located in: your_site_folder/templates/ja_t3v3_blank/tpls
To create new layout, you should clone a file here then edit it - define blocks that the layout uses.
Step 2: Define blocks that include in the layout
Open the layout php file to define the blocks that the layout includes.
<?php $this->loadBlock ('block_name') ?>
Example
<body>
<?php $this->loadBlock ('header') ?>
<?php $this->loadBlock ('mainnav') ?>
<?php $this->loadBlock ('spotlight-1') ?>
<?php $this->loadBlock ('mainbody') ?>
<?php $this->loadBlock ('spotlight-2') ?>
<?php $this->loadBlock ('navhelper') ?>
<?php $this->loadBlock ('footer') ?>
</body>
Step 3: Create block
In the new layout, if you wish to use new block, you can create new one. Each block has its own file. The files are located in: your_site_folder/templates/ja_t3v3_blank/tpls/blocks. Create new one by adding new php file with then name it or clone a block file then rename and customize it.
Step 4: Customize block
Each block has a number of module position assigned to, you can define the assigned module positions for the block using the code:
<jdoc:include type="modules" name="<?php $this->_p('your_module_position_name') ?>" />
Example
<section id="ja-mainbody" class="container ja-mainbody">
<div class="row">
<!-- MAIN CONTENT -->
<div id="ja-content" class="ja-content <?php echo $this->getClass($layout, $col) ?>" <?php echo $this->getData ($layout, $col++) ?>>
<jdoc:include type="message" />
<jdoc:include type="component" />
</div>
<!-- //MAIN CONTENT -->
<?php if ($this->countModules($sidebar1)) : ?>
<!-- SIDEBAR 1 -->
<div class="ja-sidebar ja-sidebar-1 <?php echo $this->getClass($layout, $col) ?>" <?php echo $this->getData ($layout, $col++) ?>>
<jdoc:include type="modules" name="<?php $this->_p($sidebar1) ?>" style="JAxhtml" />
</div>
<!-- //SIDEBAR 1 -->
<?php endif ?>
<?php if ($this->countModules($sidebar2)) : ?>
<!-- SIDEBAR 2 -->
<div class="ja-sidebar ja-sidebar-2 <?php echo $this->getClass($layout, $col) ?>" <?php echo $this->getData ($layout, $col++) ?>>
<jdoc:include type="modules" name="<?php $this->_p($sidebar2) ?>" style="JAxhtml" />
</div>
<!-- //SIDEBAR 2 -->
<?php endif ?>
</div>
</section>
Code format for loading block, spotlight, include module position
- Load a block inside layout/block
<?php $this->loadBlock ('blockname') ?> - Load a spotlight
<?php $this->loadBlock ('spotlight/4cols', $this->getPosname('position-1, position-2, position-3, position-4')) ?> - Include a position
<jdoc:include type="modules" name="<?php $this->_p('your_module_position_name') ?>" />Note: Insteads load the module position
navhelper, it will load the module configured fornavhelperin backend
