Supported Layouts

JA Cagox supports multiple layouts by default that allows you to build content your way. Here are the structure of the supported layouts.

• default layout →
• home layout →
• Simple layout →
• Simple Default layout →
• Blank layout →
• Horizontal layout →

Assign Layout for a template style

You can create multiple JA Cagox template styles, each template style is assigned to one layout and the template style is assigned to specific menu items so that in one site, you use 1 template but you can use as many layouts as you want.

To assign a layout for a JA Cagox template style, open the template style > Layout setting panel > assign layout for the template style.

Layout configuration

Once you assign layout for a template style, you can configure the layout to meet your requirements. There are 2 configuration panels: Layout Structure configuration and responsive layout configuration.

1. Layout Structure configuration

The layout structure allows you to change position for any position in the layout, configure number of positions in spotlight block.

2. Responsive Layout configuration

In the "Responsive Configuration", select the responsive layout you want to configure layout for. In the responsive layout configuration, you can disable any position you don't want to show in the layout, resize positions in spotlight block.

Sub Layout configuration

This is new feature of T3 Framework (version 2.4.3), the feature to to help you assign different layout for sub pages. To configure the feature, in the layout setting, scroll down and find the "Sub Layout" field then assign layout for the field.

Case Study:

We have Blog menu item that loads content from "Blog" category. In the Blog page (when user clicks on blog menu item), we want to use left sidebar position but its children page (when click on an blog item), we want to use right sidebar so in this case, sub-layout is the solution. In this case, the main page use layout A while its sub-page use layout B.

Here are steps to implement this:

• 1. Create template style, assign to "Blog" menu item, select "blog" layout. This layout is used for Blog menu
• 2. Assign sub-layout for the template style. The layout will be used for sub-pages in the Blog menu item.

If you want the sub page use same layouts with the main page, select "Default" for the Sub Layout option.

The logo settings are included in the Template Setting panel and its not global settings so you can use different logo for each template style.

Text Logo

To change the logo, open template style setting panel > Theme Setting and you would see the logo setting. There are 2 Logo types: Text and Image. For the Text Logo, just type the Site Name and Slogan.

The text logo is used the same in all responsive layouts and for both header logo and footer logo.

Image Logo

When you select the "Logo Image", you can add logo image for header, footer and for small screens like mobile.

Important settings:

• Logo Image: header logo
• Enable Small Logo: If Yes, you can browse image to display as header logo on small screens like mobile
• Footer Logo: the same as header logo, footer logo also has 2 types: Text and Image.

Megamenu Configuration

In Desktop layout, JA Cagox uses Megamenu, here is a sample megamenu on JA Cagox demo site.

The Megamenu is a feature of T3, so the configuration instruction is the same.

• Megamenu configuration detail instruction

Mobile Menu system

JA Cagox template supports 2 mobile menu systems: Off-canvas and Bootstrap dropdown menu, you can decide which one to use for your site.

Off-canvas sidebar

To create such Off-canvas menu, follow our instruction:

Step 1 - Enable Off-canvas sidebar

Open JA Cagox template style setting panel, in the "Add-on" tab, enable Off-canvas sidebar option.

Step 2 - Create menu modules

Create menu module and assign menu you want to display in off-canvas then assign the module to position off-canvas and assign to display in the pages you want.

Here is configuration of menu module.

Module position: off-canvas
Module Suffix: nav-pills

Bootstrap dropdown menu

Simply open the "Navigation" panel and enable the

JA Cagox template supports 3 themes: Default, Dark and Red. To switch theme for any template style, please open the template style setting panel, go to "Theme" panel and select theme for the template style.

Each theme has its own folder located in: templates\ja_cagox\less\themes. Each theme includes 3 .less file by default.

• template.less
• variables.less
• variables-custom.less

You can customize your theme using the files. To create new theme, just duplicate theme folder and rename. You can check more details at: http://www.t3-framework.org/documentation/bs3-customization#theme-customization

The footer info includes 2 sections: Copyrights and T3 footer logo.

Change Copyrights Info

To change the copyrights info, open the templates\ja_cagox\tpls\blocks\footer.php file, find the following info and change to what you want.

<small>

  <a href="http://twitter.github.io/bootstrap/" target="_blank">Bootstrap</a> is a front-end framework of Twitter, Inc. Code licensed under <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>.

</small>

<small>

  <a href="http://fortawesome.github.io/Font-Awesome/" target="_blank">Font Awesome</a> font licensed under <a href="http://scripts.sil.org/OFL">SIL OFL 1.1</a>.

</small>

Disable T3 Footer Logo

You can disable the T3 Footer Logo in the template style manager, open the General setting panel, disable the Show T3 Logo option.

In case you want to change the T3 logo, you open the templates\ja_cagox\tpls\blocks\footer.php file and find the following code, you can change the logo here.

<?php if ($this->getParam('t3-rmvlogo', 1)): ?>

	<div class="col-md-4 poweredby text-hide">

		<a class="t3-logo-small t3-logo-light" href="http://t3-framework.org" title="<?php echo JText::_('T3_POWER_BY_TEXT') ?>"

		   target="_blank" <?php echo method_exists('T3', 'isHome') && T3::isHome() ? '' : 'rel="nofollow"' ?>><?php echo JText::_('T3_POWER_BY_HTML') ?></a>

	</div>

<?php endif; ?>