7ce71ee9f0931c4ea73943235dd5af32.jpg
Promociones de Prestadores de Servicios Turísticos

Template Customization

I. Template Override

Multiple styles simultaneously

JA T3v3 can use multiple styles simultaneously, each style can be applied in specific menus. The menus that are assigned in style A will override the same menus in default style.

Template Override

With JA T3 3.0, you can override default template configuration for specific menu items. The override feature help you to have different layouts for your front-page.

 

What is the difference between JA T3v2 and JA T3v3

In JA T3v2, we use profile to override template. Each profile can be assign to one or many menus, the menus assigned will override the same menus in default profile.

In JA T3v3, we use style to override template. Each style can be assigned to one or many menus and the menus assigned will override the same menus in the default style.

So, style in JA T3v3 can be understood as profile in t3v2

There are 2 steps that you should follow to override template.

Step 1: Create override template.

To create new override template, you can duplicate the default template or you can go to the edit page of the default template then save it as copy.

Duplicate Style

Or Save as Copy

Step 2: Configure style

After you create an override template, you can configure the template (change layout, color, ...). Firstly, let's check the layout setting of the default template.

Configure layout

Configure Theme

Menu Assignment

Now, we assign the template to specific menus, so that the menus will apply the settings of the override template, instead of the default one.

II. Template Width Customization

Template width is defined by grid, and divided into number of columns (default is 12 columns).

To change width of template, open file: variables.less in: templates/ja_t3v3_blank/less then change defined width of template.

// Default 940px grid
// -------------------------
@T3gridWidth: 940px; // T3 add. For non-responsive layout.
@gridColumns: 12;
@gridGutterWidth: 40px;
@gridColumnWidth: floor((@T3gridWidth - @gridGutterWidth * (@gridColumns - 1)) / @gridColumns);
@gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));

We base on gridcolumn of 12. Width of each column is: floor((@T3gridWidth - @gridGutterWidth * (@gridColumns - 1)) / @gridColumns);

To change width of template, you just need to change T3gridWidth. The gridColumnWidth will be auto caculated.

From the base, we build up responsive grid system as follow:

// 1200px min
@T3gridWidth1200: 1200px; // T3 add
@gridGutterWidth1200: 40px;
@gridColumnWidth1200: floor((@T3gridWidth1200 - @gridGutterWidth1200 * (@gridColumns - 1)) / @gridColumns);
@gridRowWidth1200: (@gridColumns * @gridColumnWidth1200) + (@gridGutterWidth1200 * (@gridColumns - 1));

// 980px-1199px
@T3gridWidth980: 940px; // T3 add
@gridGutterWidth980: 40px;
@gridColumnWidth980: floor((@T3gridWidth980 - @gridGutterWidth980 * (@gridColumns - 1)) / @gridColumns);
@gridRowWidth980: (@gridColumns * @gridColumnWidth980) + (@gridGutterWidth980 * (@gridColumns - 1));

// T3 Add: 768px-979px
@T3gridWidth768: 740px; // T3 add
@gridGutterWidth768: 20px;
@gridColumnWidth768: floor((@T3gridWidth768 - @gridGutterWidth768 * (@gridColumns - 1)) / @gridColumns);
@gridRowWidth768: (@gridColumns * @gridColumnWidth768) + (@gridGutterWidth768 * (@gridColumns - 1));