JoomlArt T4 Template Framework
Building layout is the most important work of template or website development. It is very easy 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.
A. 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.
B. 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.
-
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.
-
Site Slogan: add slogan for the site. When text logo is used, the slogan will be shown below text logo.
-
Logo Image: browse logo image or upload logo image.
-
Logo on mobile: the logo image will be shown on mobile layout. If it is not set, it will use global logo.
-
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/
-
Show back to top button: enable this option to show the Back to top button.
C. Global Settings
The Global settings include configuration for CSS & JS optimization, Custom code and Add-ons management.
-
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.
-
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.
-
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.
D. 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).
-
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.
-
Layout Position Preview: You can view all positions in the layout using the Layout Position Preview. This will give you better overview about the layout structure, positions with content assigned and empty positions.
1. Section (Row) Configuration
For each row or section, it includes 3 configuration panels: General, Color Palletes and Overlay.
1.1 General settings includes:
-
Section Title: Add title for section, the title will be generates to ID in the frontend. 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.
-
Custom CSS Class: You can add Custom CSS Class Name. For example bootstrap classes.
-
Sticky Setting: Sticky top, sticky bottom or none.
1.2 Color Palettes: Each color palettes is a set of four 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.
1.3 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 by assigning column type. You can also add custom CSS Class to any column type.
2.1 component: To make the column as a Joomla component main content area.
2.2 module position: Select any suitable module position. The published modules in the position will be displayed in the column. You can also select module style.
2.3 module: Select a module to show in the column. For example, breadcrumbs.
2.4 block: It is a special content type to build a content block faster using custom HTML mockup. When you edit content block, you can edit the block HTML mockup directly in the panel. The Blank T4 template has four header blocks and one mainnav block.
2.5 element: It is also special content block defined by developer. You cannot edit code here. The Blank T4 template has five elements: logo, masthead, megamenu, megamenu-toggle, offcanvas-toggle.
3. Header Blocks
T4 framework has four pre-made header style blocks.
- header-1: It includes logo and header-r module position.
- header-2: It includes logo and megamenu on right side.
- header-3: It includes logo and megamenu below the logo.
- header-4: It includes megamenu on the left side, then logo at the centre and header-r module position on the right side.
E. Theme Settings
You can select a theme from the supported themes for current template style. Theme settings include settings for:
-
Typography (Google Fonts): You can customize font family, font size, font weight, line height, and letter spacing.
-
Headings: You can customize typography for headings.
-
Page (Colors): You can customize text color, link color, link hover color, background color, and background image.
-
Brand Color: These are the contextual standard colors of Bootstrap. For example, primary, secondary, success, info, warning, and son on.
-
User Color: You can add your own custom color for a specific purpose like text color, heading color.
F. Navigation Settings
On one website, you can use different menus on different pages using navigation profiles.
-
Megamenu: Select a menu and build megamenu for the menu using the megamenu builder. You can build a mega menu with multiple rows, each row can include multiple columns.
-
Off-canvas: Off-canvas is a popular menu type and navigation for a website, it can be used for mobile menu or even in desktop layout.
-
Menu breakpoint: select the screen that mobile menu will be enabled
G. Tools: CSS Customization
In the Tools panel, hit the Edit Custom CSS button and add your own custom CSS rules to the editor.
You can also add custom CSS in the custom.css file inside template folder: templates/t4_blank/local/css/custom.css