7ce71ee9f0931c4ea73943235dd5af32.jpg
Curiosidades

Layout Customization

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


Visita Xcaret

Visita Tulum