JDB Layout Options

JDB Layout Options

When you're installing Pixel template without quickstart, you'll need to setting up your site manually. Firstly, you'll need to install JD Page Builder component on your site. Once done, you'll need to create a page in JD Page Builder.


Creating New Page


Importing Pixel Pre-defined Layout

Enter the name/title of the page in the textbox, without the page title your page will not be saved.

Next, click on down arrow beside options and choose Layout Options > Import to import pre-defined layout from Pixel as shown in the screenshot below. Search and locate jdb-home-layout.json file within Pixel template and it should be in the following path /templates/pixel/jdb-home-layout.json .

Once done, you'll see the following layout for you to play. Don't forget to click save to store your page.


Customizing JDB Layout

You may customize your site by clicking on the Add Section button(to add a new section on the page) or Import button(to add an already created section or page). On adding a section choose your grid or customize it as you like.(the sum should always be equal to 12).


After selecting the grid you can easily add the elements and create your desired page. Along with just saving you can either Save & Close the page or Save & New to create a new page or Save & Copy to copy the complete page.


Further explanation can be found at How to create a page in JD Builder.

Continue reading
Page Builder

Page Builder

In this template, we have packaged JD Builder for you to customize your site according to your preference. It is everything you need to create a stunning & beautiful website. With an extensive library of template layouts, sections, and page builder elements, you can create any imaginable design within minutes.


Real Time Preview

The Real Time Preview feature in JD Builder allows you to preview the created pages in real time. It offers quick and convenient interface development.

You can toggle Live Preview by clicking the Live Preview button on the top right.


To exit Live Preview use the Exit button at the bottom.

Live Preview by default will show your changes in a desktop layout but you can easily toggle live preview to view your page in Tablet & Mobile Layout by using the icons at the bottom.

You can also adjust the zoom perspective into the page to get a better layout of the page.

Even though Live Preview shows your your changes happening in real time. You must still save them using the Save button at the top. The save button will have a red indicator whenever there pending are changes that needs to be saved.

For more information and guides, please visit JoomDev documentation section.

Continue reading
Configuring Pixel

Configuring Pixel

It has always been an aspiration to design a template that works across our extensions out of the box. In case you've acquired EasySocial, EasyBlog, EasyDiscuss or PayPlans components you may configure them to looks similar to our demo site.


Restoring Default

After completed the Pixel package installation, now you can continue installing components (EasySocial, EasyBlog, EasyDiscuss or PayPlans). Then, once ready navigate to Extensions > Templates > Styles > (Choose Pixel) > Template Options > Maintenance > (Select maintenance scripts) > Restore. 


These maintenance scripts will assist you setting up component's menu items and assigning modules into respective module position according to template design.

Continue reading


We understand that there are times where you want to add your customize css codes but do not want to make these changes within the core css file to avoid overwritten by updates. Pixel template allows you to add custom css code in the template settings. Navigate to Extensions > Templates > Styles > (Pixel) > Template Options.

Custom Code

You can easily customize Pixel template with your own custom code, for example: CSS, JavaScript, Metatags, links and verification code by using the custom fields in that section of settings. Inserting custom code before your Joomla website’s </head> and/or </body> tags is a common requirement for a variety of scripts and services (e.g. Google Analytics).

Before < / head >

Any code you place here will appear in the < head > section of every page of your site. This feature is useful when you need to add verification code, extra Meta Tags, HTML Links Tags and other metadata. This feature is also very useful if you need to input a tracking code from Google Analytics.

The head of an HTML document is the part that is not displayed in the web browser when the page is loaded.

Always check if added code works correctly after saving.


Before < / body >

Any code you place here will appear at the bottom of the body section of all pages of your site. This feature is useful if you need to input a tracking code for a state counter such as Clicky. Some developers recommend to use their code should go directly before the closing body tag </body> of your page(s).


Custom CSS

Using Custom CSS gives you the power to create your unique design and allow you to customize the appearance of selected elements (colors, size etc.). You can use custom CSS to add your styles (code tweaks) or overwrite default CSS from a template or extension. This option is useful for small design changes. This is only for raw CSS code, do not use HTML or PHP code here.

For more extensive design changes (more than a few lines of code) we suggest using the custom.css file instead. By default custom.css file doesn’t exist, you have to create a new file (custom.css) inside /css folder of the template.

Warning! Please do not edit the template.css or any other CSS file from the Pixel template. The reason being that all of your changes will be overwritten by a template engine (reverting back to original code). Instead, we suggest using custom.css file where you can override the default CSS code created by the our team.


Custom JavaScript

Use this field to inject custom JavaScript to the whole website. It loads your custom Javascript code after all other JavaScript files (except special hard coded occasions), allowing you to be the last one who will affect your website. Add here only raw JavaScript code without starting tags.

For longer custom JavaScript code we suggest to use the custom.js file instead. By default this file doesn’t exist, you have to create a new file inside /js folder of template.

Warning! Wrong JS code may slow down or even temporary damage your template and block the edit toolbar. Always make a backup first.

Continue reading


The installation process is fairly simple and straight-forward. Pixel template comes with Quickstart package containing Joomla instance, Pixel template, HelixUltimate framework and free version of JD Pagebuilder which will be useful for website developer.


Downloading Pixel Package

If you're interested and would like to acquire Pixel template for your site, head on to our App Store, and search for Pixel template from the apps listing page. Click on Buy Now to purchase and or click on the Download button to get the template from our site. You should be downloading a zip file named pkg_pixel_quickstart_1.0.0.zip.

Got it? Perfect. Let's move on to the installation.


Installing Pixel Package

After you have acquire the Pixel package, you may proceed with the installation. Since this is quickstart package, you can upload it directly into your server and extract it there. It should contain Joomla installation package. 

Before we start installing Joomla!, there are a couple prerequisites that need to be met to install Joomla! 3.x successfully. These apply whether you have a dedicated server, a shared hosting plan server, or are installing a copy on a local computer for testing or development.

You’ll need to meet the following requirements to install and use Joomla!

Continue the installation process until arriving on Finalization summary page. On this page, you must select Pixel (GB) Sample Data. Otherwise, it will not install the template and you'll need to start over the installation process.


After the installation process completed, a screen that looks similar like this will be displayed. This means that you have successfully installed Pixel package on your site.

Pixel template will automatically be set as default template with some modules and default menus enabled. Now, you have successfully installed Pixel template. You may navigate to Site to take a look on your the site layout or proceed to Administrator to continue configuring your site.

For further understanding, please visit Joomla documentation.

Continue reading