About JA T3v3 layout
JA T3 3.0 supports multiple layouts by default. In each layout, it is built up with multiple blocks (header, mainbody, spotlight ...). Each block contains one or many module positions. You can assign specific module positions to a block.
Flexible Content Displaying
JA T3 3.0 supports multiple layouts that allow you to make your content displayed flexibly:
The 3 columns (left, content, right) can be configured to display in different way: Left + Content + Right, Content + Left + Right, Left + Right + Content ...
-
3 Columns Layout (Left + Content + Right)
-
3 Columns Layout(Left + Right + Content)
-
3 Columns Layout(Content + Left + Right)
-
Content + Right
-
Left + Content
-
Full Width
In the layout part, there will be 2 parts to be configured: The Layout Structure and the Layout Configuration.
I. Layout Configuration
1. Layout Structure Configuration
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.
Select Layout for style
In JA T3V3, each style will use one layout (but remember that one site use many styles --> so one site can use multi layouts simultaneously because JA T3V3 use multiple styles simultaneously).
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.
By default, the default layout (Left + Content + Right) has the followings block:
Now, let's check the back-end and front-end consistently.
- header
- spotlight-1
- mainbody (Left + Content + Right), mainbody-content-left (Content + Left), mainbody-content-right (Content + Right)
- spotlight-2
- navhelper
- footer
Assign Module position
Configure number of columns for spotlight block
2. Layout Configuration
The layout configuration panel allows you to customize layout in devices (mobile, desktop, table, xtablet). You can enable, disable any module position, re-size width of each module position.
Enable/disable module position
Re-size module position in the spotlight block
3. Layout Configuration from .ini file
Every time you customize, change settings of layout, the changes will be saved to an .ini file. For the fist time you make changes, the .ini will be generated and they are located in: templates/ja_t3v3_blank/etc/layout.
For example, when I change setting of layout: default --> save. Now, file default.ini is generated with all settings of the defaultlayout. You can use the file to customize your layout by changing the settings in this file
The format of settings stored in this .ini file.
[block2@spotlight-1]
position="position-2"
default="span3"
tablet="span6"
Now, let's view the front-end corresponding with the back-end layout configuration.
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-right-left
Module position assign
Front-end
II. Layout Customization
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>
III. Code format for customizing layout
1. Load a block inside layout/block
<?php $this->loadBlock ('blockname') ?>
2. Load a spotlight
<?php $this->loadBlock ('spotlight/4cols', $this->getPosname('position-1, position-2, position-3, position-4')) ?>
3. 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 for navhelper in backend