JoomlArt T4 Template Framework

Building layout is the most important work of template or website development. It is never easier to build from basic to complicated layout with T4 Layout Builder. T4 Framework is a powerful and advanced responsive template framework for Joomla. It is a modern, flexible and highly customizable framework to build beautiful Joomla websites easier.

To install T4 framework on your existing Joomla website, install T4 framework plugin and install T4 Blank template.

T4 Working Panel

To access working panel of T4 Blank template (or any template built with T4 Framework), from your site back-end, go to Extensions > Templates and open T4 Blank template style.

Dark Mode: To enable Dark Mode, from the setting panel, enable the Dark Mode option on the toolbar bottom.

Template Style: For each T4 template, you can create multiple template styles with different settings and assign to specific menu items. To create new template style, you can duplicate the default style or you can save as copy in setting panel of any style.

Development Mode: When you are developing your site, you should enable this option so any update you made will be instantly displayed without any cache. To enable or disable this option, go to System > Global Configuration > System and find the option Development Mode. When you are not developing your site, you should disable this option to activate T4 cache and improve your site performance.

Site Settings

The site settings include configuration for your site name, site slogan, logo image, custom favicon, and back-to-top option.

You can create multiple site settings profiles with different configurations and assign the profile to different template styles. Thus, you can have different logos, favicon, site name for different pages.

  1. Site name: added to the title tag of site name. In case the logo image is not set, the site name will be used as text logo.

  2. Site slogan: add slogan for the site. When text logo is used, the slogan will be shown below text logo.

  3. Logo Image: browse logo image or upload logo image.

  4. Logo on mobile: the logo image will be shown on mobile layout. If it is not set, it will use global logo.

  5. Change favicon: browse image for the site favicon. You can browse any image, it will be auto generated to .ico file and it will stored in folder: media/t4/t4_blank/

  6. Show back to top button: enable this option to show the Back to top button.

Global Settings

The Global settings include configuration for CSS & JS optimization, Custom code and Add-ons management.

1. JavaScript (JS) and CSS Optimization: It is the process of making your website smaller and faster to load by minifying the JS and CSS codes. To enable this option, from T4 template style setting panel, open the Global Settings > Optimization and turn on CSS and JS Optimization options then save. 

CSS and JS optimization options help compress almost all template's CSS and Javascripts and relevant Joomla's files to improve website performance. If any of CSS and JS file you do not want to compress, you can exclude the files from optimization by adding the files in the file exclude field.

2. Custom Code: You can insert any CSS, JS, meta tags, links, and verification codes using the custom code option. You can add custom code at the following positions in HTML: After <head>, Before </head>, After <body>, and Before </body> tag.

For example, you can add custom code for Google Analytics, Live Chat Integration, Addthis, and so on.

3. Addons Management

The Add-ons panel includes settings to enable or disable font icons like Font awesome, Iconmoon. When an Addon is disabled, its CSS and JS will not be loaded in your website. This is to help keep your site clean and load faster.

Layout Settings

You can build from simple to complicated layout with ease based on module positions and customize the existing template in almost any shape without code customization. 

A layout is a set of sections (rows). Each row has its own settings and can include one or multiple columns.

Layout Grid: T4 integrates Bootstrap 4 and its layout is based on 12 column layout from Bootstrap 4 with powerful mobile-first flexbox grid to build layouts of all shapes and sizes. When create a section, you can use set number of columns and configure width for each column (based on 12 column grid). The grid system is responsive by default where columns are re-arranged depending on the screen size.

Manage Layouts: In the Layout setting panel, there are multiple default layouts. You can select a layout for any template style from the layout dropdown selection.

1. Section (row) configuration

For each row or section, it includes 3 configuration panels: General, Color Palletes and Overlay.

General settings includes:

  • Section title: Add title for section, the section will be generate to section id and css. For example, if you add Main Body, it will be generated: <div id="t4-main-body"class="t4-section t4-main-body"> to help you add custom style for each section easier. So, the section title should short and simple.
  • Container: Configure the section container to be fix, full width or none (default).
  • Section layout: This setting allows you to add multiple columns to a section.
  • Responsive settings: You can customize width for each column on specific responsive layout and also select to show or hide columns on selected devices, related with screen resolution.

Color Palettes: Each color palettes is a set of color setting: background color, text color, link color, link hover color. For each template, there will be multiple default color palettes. You can use the default ones or clone new ones, customize and use.

Overlay: T4 Framework template allows you to make image overlay or video overlay for any section. You can select image or video overlay type, configure the display for selected overlay type based on corresponding settings.

2. Column settings

Column is used to show content for section by assigning column type:

  1. component
  2. module position
  3. module
  4. block
  5. element

3. Header

T4 framework has four pre-made header styles block.

  1. header-1: It includes logo and header-r module position.
  2. header-2: It includes logo and megamenu on right side.
  3. header-3: It includes logo and megamenu below the logo.
  4. header-4: It includes megamenu on the left side, then logo at the centre and header-r module position on the right side.

Theme Settings

You can select a theme from the supported themes for current template style. Theme settings include settings for:

  1. Typography (fonts)
  2. Headings
  3. Page (colors)
  4. Brand Color
  5. User Color

Navigation Settings

On one website, you can use different menus on different pages.

  1. Megamenu: select a menu and build megamenu for the menu using the megamenu builder

  2. Off-canvas: configuration for off-canvas menu

  3. Menu breakpoint: select the screen that mobile menu will be enabled

CSS Customization

In the Tools panel, hit the Edit Custom CSS button and add your own custom CSS rules to the editor.

Star InactiveStar InactiveStar InactiveStar InactiveStar Inactive