Quicx Meets T3 Framework — Create a Joomla Website From Scratch in 10 Minutes

In my previous article I showed you how Quicx works with Gantry framework out of the box. This time I’m running a test with the most popular T3 Framework for Joomla! As expected Quicx run seamlessly with T3. If youre website or template powered by T3 framework you can use Quicx page builder without having any problem.

If you are not aware about, T3 is the most popular, modern and flexible Joomla Template Framework built with Bootstrap 3. Joomlart the company behind T3 framework, did a fantastic work and open sourced the project on GitHub.

Lets build a beautiful page with Quicx page builder and T3 framework with almost no coding. If you are a Joomla Template developer you need a small preparation and that’s not more than 5 mins work. Keep reading, I’ll show you how.

Installing T3 Framework with Blank Template

If your website already running with T3 you can ignore this step. If you want to build a Joomla template with T3 framework, download T3 package from T3 official website. The package contain framework plugin and blank bootstrap based template. Now install it from Joomla Extension Manger.

Full Width Control to Quicx Page Builder

T3 default template comes with a container class. If you are a developer you know what that mean but if you are not a developer, container class add width to an element and position it center of a webpage. Quicx can run inside the container class but if you want to get ride of the extra space you can follow this.

Open `no-sidebar.php` file from `templates/t3_bs3_blank/tpls/blocks/mainbody` and paste this 2 lines of code:

$input = new JInput(); 
$container = ( $input->getCmd('option') === 'com_quicx' ) ? '' : 'container';

With this code, we are checking if Quicx loaded on this page or not. If its not loaded we’ll add container class else remove it. Now replace this line

<div id="t3-mainbody" class="container t3-mainbody">

with this

<div id="t3-mainbody" class="<?php echo $container?> t3-mainbody">

Now we need to remove some padding from T3 element. Add this code to any less file you want we recommed style.less

.com_quicx{ 
body{ overflow-x: hidden; } 
.t3-mainbody, .t3-content{ padding-top: 0; padding-bottom: 0; } 
}

Head over to you template settings and click Less to CSS button to compile less code into css

Install Quicx

Installing Quicx as easy as intalling any other extensions. Grab Quicx page builder for Joomla and install it from Joomla Extension Manger

Create New Page

After installing Quicx you will see a dedicated top menu. Click there and then click New Page button.

Give your page a name and start dragging row, column and elements to the page. Here is the layout screenshot of the page we were working:

Download Quicx — Free Join Our Chat Room

Originally published at www.themexpert.com.