Quix 4.0 is here! Header Builder, Inline Editing, Fastest Template Framework & More...

ThemeXpert Blog

Quix Meets T3 Framework - Create a Joomla Website From Scratch in 10 Minutes

Quix Meets T3 Framework - Create a Joomla Website From Scratch in 10 Minutes
Parvez Akther

3 mins

In my previous article I showed you how Quix 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 Quix is running seamlessly with T3. If youre website or template is powered by T3 framework you can use Quix page builder without having any issues.

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

Lets create a beautiful page with Quix page builder and T3 framework with almost no coding. If you are a Joomla Template developer you need a little preparation which won't take you more than 5 mins work. Keep reading, I'll show you how?

Installing T3 Framework with Blank Template

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

Full Width Control to Quix Page Builder

T3 default template comes with a container class. If you are a developer you will know what that means but if you are not a developer, container class will add width to an element and position it to the center of the webpage. Quix can run inside the container class but if you want to get rid 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_quix' ) ? '' : 'container';

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

with this

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

Now we need to remove some padding from T3 element and add this code to any file you want but we recommend style.less

  body{ overflow-x: hidden; }
  .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 Quix

Installing Quix is as easy as installing any other extensions. Grab Quix page builder for Joomla and install it from Joomla Extension Manger

Create a New Page

After installing Quix 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 are working:

The "Quicx" is now called "Quix", isn't that mouth waterring. Yes it is, but now you must forget what was left behind, now we must live in this moment. And the change of the name obliged us to change the article.

Download Quix - Free Join Quix FB Group

Introducing Quix 1.0 - Next Generation Page Builde...
Quix RC1 Has Arrived - More Elements, Performance ...

Build better website with ThemeXpert

Get access to all premium Joomla templates and
next generation page builder Quix.

Join our club

Comments (1)

This comment was minimized by the moderator on the site

Can you fix the above? The code to replace with

div id="t3-mainbody" class=" t3-mainbody">
is not populated.

There are no comments posted here yet

Leave your comments

  1. Posting comment as a guest. Sign up or login to your account.
Attachments (0 / 3)
Share Your Location