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.
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
.com_quix{
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 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.
