Configure Layout

Supported Layouts

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

Assign Layout for a template style

You can create multiple templates style from JA Teline V template, 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 Teline V 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) and JA Teline V is the first template applies the feature. 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 Magazine menu item that loads content from "News" category. In the Magazine page (when user clicks on Magazine menu item), we don't want to use sidebar position but its children page (in Magazine page, user click on an article, in this case, the article page still belongs to the "Magazine" menu item.

sub-layout feature

Here are steps to implement this:

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

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

Image Optimization

In JA Teline V template, you can auto generate images to 3 levels: Big image, medium image and small image. This will help to optimize your used images and make your site perform much better.

To enable the option, from your site back-end, go to: System > Global Configuration > Articles > Shared Options, enable the Auto-generated Images option then configure image size (height and width) for Big image, Medium image and Small image to generate to.

Once the option is enabled, images used in your site will be auto generated. The generated images are stored in folder: media\jact, in the folder, you would see 3 sub-folders corresponding with image size levels:

  • media\jact\big
  • media\jact\medium
  • media\jact\small

How the generated images are used in JA Teline V?

We override layouts in JA Teline V and images in the overridden layout are defined to load correct image size in the generated image folder based in its function.

When debug, you can see the image path of the image, instead of loading original image, it loads generated version of the image.

Here is a comparison of images loading when image generation is enabled and disabled.

In conclusion, the feature is to help you optimize images used in your site. In stead of loading original image file, it loads generated images so that the image size will be decreased.

Create Top Menu

Step 1: Create "Top Navigation" menu

From your site back-end, go to: Menus > Menu Manager > Add New Menu. Here is the "Top Navigation" menu setting.

Step 2: Create Menu items in the "Top Navigation" menu

Go to Menus > Top Navigation > Add new menu item. Here are the list of menu items in the "Top Navigation" menu.

Step 3: Create Menu module to display the menu items of "Top Navigation" menu

Go to Extensions > Module Manager > Add new module then select the Menu type. Here is the module configuration.

Module position: topbar-l
Module Suffix: NOT USED

Remember to assign the module to display in all pages.

Megamenu configuration

The Magazine page use Megamenu, here is what it looks like in Demo.

To create the same menu, follow our instruction below.

Step 1 - Create "Main Menu" menu and menu items in the "Main Menu"

Go to Menus > Main Menu > Add new menu item. Here are the list of menu items in the "Main Menu" menu.

Step 2 - Select menu for Magazine page and enable Megamenu

Open the Magazine template style again, in the "Navigation" setting, select Main Menu and enable Megamenu.

assign layout

Step 3 -Open Megamenu configuration panel to build Megamenu

Hit the "Megamenu" button on the top option bar and you're navigated to the "Megamenu" configuration.

# 1: Enable Submenu - Select the menu you want to build megamenu for then enable the option "Submenu"

assign layout

#2: Create column - Select the submenu, make it justify and create one more column, set the left column width to grid 2 and the right column width to grid 10

assign layout

#3: Assign module for the left column and make sure you add class mega-left class to the "Class" field.

assign layout

In Demo site, we load the World Categories module (Articles Categories module) for the left column. Here is the module configuration.

Module position: None
Module Suffix: NOT USED

#4: Assign module for the right column and make sure you add class mega-right class to the "Class" field.

assign layout

In Demo site, we load the Latest World News module (Articles Categories module) for the right column. Here is the module configuration.

Module position: None
Module Suffix: NOT USED
Alternative layout: grid

The Alternative setting is included in the Advanced tab.

Step 4 - Configure the "More" menu.

As you can see in Teline V demo, the "More" menu item has special style.

To have such menu style, please add item-more class to the "Extra Class" field then add ja ja-th icon class to the "Icon" field.

Mobile Menu System

JA Teline V template uses OFF-CANVAS for collapsed manu system (Mobile and tablet). Here is how it looks like.

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

Create Off-canvas menu

Step 1 - Enable Off-canvas sidebar

Open JA Teline V 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.

In JA Teline V, the off-canvas displays menu items from Top Navigation and Main Menu so we have to create 2 menu modules, one loads Top Navigation and the other displays menu items in Main menu. Here is a sample configuration of menu module.

Module position: off-canvas
Module Suffix: NOT USED

Add icon for menu item

In Off-Canvas menu, the menu items in Top Navigation menu have icon, you can add icon for each menu item.

Open the menu item setting panel, go to "Link Type" setting panel then add icon class to the "Link CSS Style" field.

Supported icon class:

  • nav-icon nav-magazine
  • nav-icon nav-events
  • nav-icon nav-media
  • nav-icon nav-gallery
  • nav-icon nav-blog

Create new icon class

You can create new icon class to use for menu item in collapsed menu. Here is the instruction:

Open the file templates\ja_teline_v\less\off-canvas.less, search for "nav-icon" and you would see list off all created icon class. Now, add new icon class using the format of other icon class. For example, I want to create home icon class then I will add the following rule. 

&.nav-home:before {
	  content: "\f015";
	}

The icon gets from Front Awesome, just add the Unicode of the Font Awesome icon. To get Unicode of Font Awesome icon, open the usage page of the icon, view a sample here and you would see the unicode value of the icon.

Now you can add the class nav-icon nav-home to the field Link CSS Style in the menu setting panel.

Set Color for Category

In JA Teline V, you can set color for each category. The color is used when the category is called by a menu item or module, the default color is dark (in case you don't set color for category)

To configure color for category, open the Category setting panel > JA Extra Fields and add class to the field Category Class.

There are 6 classes supported by default.

  • cat-green
  • cat-blue
  • cat-red
  • cat-cyan
  • cat-violet
  • cat-orange

Create new category color class

Step 1: add new variable

Open the templates/ja_teline_v/less/variables.less file and add new color variable, here is a sample.

@black:                 #000;
@red:                   #c00;

Step 2: add color class for category title

1. For ACM module

Open the templates/ja_teline_v/less/magazine.less file, add the following css rule inside the .magazine-category-title class. Here is a sample.

// Category Title
// ----------------------------
.magazine-category-title {
    // ---------------
  &.cat-red {
    a {
      background-color: @red;
      &:hover, &:focus, &:active {
        background-color: @red;
      }
    }
  }
}

2. For menu item

When a menu item displays content from a category, the menu item color (when hovering, active) are from category color. Open the templates/ja_teline_v/less/navbar.less file, add class for color class inside the .t3-megamenu class, here is a sample:

// Color Themes
// ------------
.cat-red {

border-color: @red !important;
background-color: @white;

.module-title,
.module-title:hover {
  background: @red;
  color: #fff;
}
	.item-list .item .item-inner .item-title a:hover, 
	.item-list .item .item-inner .item-title a:active, 
	.item-list .item .item-inner .item-title a:focus {
		color: @red;
	}
}

3. For Joomla content

Open the templates/ja_teline_v/less/joomla.less file, add color class and style for category title (inside the class .category-name. Here is a sample.

// Colors
  &.cat-red {
    a {
      &:hover, &:focus, &:active {
        background-color: @red;
        border-color: @red;
      }
    }
  }

Create "New Articles" block

The "New Articles" block loads latest articles based on created date.

We use JA ACM to build the content block. Here is the module configuration.

Module position: whatsnew
Module Suffix: NOT USED

Module configuration

Get Demo Data →

{":type":"ja_teline_v:notification","notification":{"jatools-layout-notification":"new-items","notification-new-items[list_categories][]":["8","37","43"],"notification-new-items[count]":["99"],"notification-new-items[duration]":["40"],"notification-new-items[content_type]":[""],"notification-new-items[show_category]":[""],"notification-new-items[block_position]":["0"],"notification-new-items[show_author]":["0"],"notification-new-items[show_publish_date]":["0"],"notification-new-items[show_hits]":["0"]}}

Article Tools and Social Sharing

In article detail page, you can see the article typo tools and sharing tools.

For Sharing Tools, JA Teline V uses AddThis sharing. So firstly, you have to add the "AddThis" embed code to the field Before in the Custom Code tab.

To get the AddThis embed code, you can register FREE from: http://www.addthis.com/

Global level

To enable or disable the options, go to: Extensions > Template Manager > JA Teline V template style > General setting, find the Core Joomla setting section and you would see the configuration for the Typo Tools and Sharing tools.

Menu Item level

You can enable or disable the options in specific menu item. Open the menu item setting panel, in the Option tab, you would see the settings.

To enable the typo and sharing, select "Use Global" or "Show".

Article Reading Mode

In the reading mode, all header, footer and sidebar are disabled, but you can specific select modules to display in the reading mode.

The reading mode helps user to focus on the article content only by removing the header, footer, module on sidebar, etc. Here is the article in reading mode view.

Enable modules in reading mode

If you want to enable a module in reading mode (the module will be displayed under the the article), assign to display in the menu item that loads the article and add class visible-reading to the Module Class Suffix field. The following image shows you the module configuration that is enabled in Reading mode.

How to change background

To change background for a page (menu item). For example, I want to change background for Magazine menu item, follow the instruction:

Step 1: add class for Magazine menu item

Open the setting panel of Magazine menu item, in the "Page Display" tab, add class - magazine-bg for the "Page Class" field.

Step 2: add style for "magazine-bg" class

Open the file templates\ja_teline_v\less\style.less (you can use css by adding css rule to the file templates\ja_teline_v\css\custom.css). then add the following CSS rule:

.magazine-bg {
	.t3-wrapper {
		background-color: blue;
	}
	
	.container {
		background: #fff;
	}
}

For image background, use the format:

.magazine-bg {
	.t3-wrapper {
		background: url("../images/ev-bg.jpg") no-repeat fixed center top #0077bb;
		background-size: 100%;
	}
	
	.container {
		background: #fff;
	}
}

Please note you may have to customize style a little bit if issues happen as the page does not support Image Background by default.

Remember to compile LESS to CSS if you use style.less file.

FAQs

How to add new fonts

JA Teline V is developed with T3 Framework so you can refer to the documentation to add new font for your template.

Non-responsive support?

You want to make your site non-responsive? Easily, go to: Extensions > Template Manager, open setting panel of any JA Teline V template style. In the "General" tab, disable "Responsive" feature and add the fixed width for the template.

K2 support?

For now, JA Teline V does not support K2, but why?

JA Teline V is for Joomla 3 and in this version, the Joomla com_content is much powerful. In addition, we extend Joomla com_content to make it as a real CCK. Beside the Joomla Article, you have 4 more content types: Video, Event, Gallery and Topic, those content types has a lot of custom fields and own style to make sure it can satisfy the requirement for a Magazine/news site.

Upgrade to JA Teline IV?

JA Teline V is in JA Teline template series (previously we have JA Teline I to JA Teline IV), however the templates are independent, there is no upgrade option. In other words, if you want to upgrade your site to JA Teline V, you have to do it manually.

We will launch the custom work service and at that time, you can order quote for the upgrade.

RTL Support?

For now, RTL (Right to left language layout) is limited support. The template is built with T3 Framework so the main elements in the template should work, but you may need to customize if issues happens.

Back to main page →