Helix - II

We are proud to inform you that our latest framework helix-ii proved that currently it is one of the greatest framework for the users. It contain everything what make the users work faster & smoother. User found the ultimate facilities provide by helix-ii after using this awesome framework. Although we released our framework a couple of weeks ago but there was no documentation for the framework yet. Because still now we working to upgrade the framework for you which provide more facilities then before. Here is our 1st documentation on Helix-II. This documentation contains little information. But as soon as possible we released the full documentation. Please stay tuned with us.

Layout Builder

Theme Customization would have no boundaries! Layout Builder is one of the unique features introduced in Helix – II which allows anyone to customize the existing theme in any shape or dimensions without having any programming language!

In the layout builder we used 12 columns. We called the columns as span. This means in our layout builder we used 12 span. This 12 span covered the whole width of our layout. If Users wants to create 4 columns then have to use span3 for every column. Also if anyone wants to create 3 columns then have use span4 for every column.

Create a new position

By using layout builder user will be able to crate unlimited module positions. Creating a new position is now very simple. Just follow the instruction given bellow:

Step 1: For create a new position at first go to templateDetails.xml file. You will found this file in this path: templates\shaper_helix_ii. Here you found positions field, which contains 27 default position name like logo, menu, search etc (line no. 35 to 63).

Now add your desire position name here. Like here we add a new position, name newposition.

Step 2: Now open Layout from template manager. Here we published our new position under the COMPONENT position. For doing that add a new row by using Add a new row option.

Now give it a name. We named it as New Position by using row settings.

Then click on the Row settings icon of the none box field.

After clicking on this icon you will found option for select the position name. Here we select our new created position named newposition. Then click on Apply.

Then save this by clicking on the save button on top left. Now your new position added on the layout builder. You can use this position on this template now.

Use Margin, Padding and Background

This awesome framework gave the option for using margin, padding and background from backend. You don’t need to code on your css file simply use those value on layput builder.

Header Section

In header section we used 03 columns. The columns are:

  1. logo
  2. menu
  3. search

For logo, menu & search we used span 2, span 7 & span 3.

There are some more facilities we provide in this layout builder for the users. Check the screenshot given bellow:

The first option is here is the drag & drop option. By using this option user will be able to move the section up or down.

Second one is the row settings option. Here user will be able to select the row’s name & class if he wants. Also users will be able to fix the section for where to visible or where to hidden.

The 3rd option provides users to add new row.

The 4th option provides users to add new column.

And the last option is the remove option. If users want delete the row then just click the cross button.

Layout Settings For Menu

In layout settings there is option for fixed the type by Module, Message or Components. Here is another option for select the position where to publish. From here users also able to select the span. This settings also contain Offset, Style or Custom class settings.

Feature Section

In the feature section we used the whole span. There is option available for to create more column and row.

Users Section

Here we 04 columns user 1, user 2, user 3 & user 4. Every column contains span3.

Main Body Section

In the main body section we used 03 columns. And the columns are

  1. left
  2. Component Area
  3. right

The left & right contain span3 and the component area contain span6.

Breadcrumb Section

This section had only one column and it contain span12.

Bottom Section

We select the bottom area by 4 columns. Every column contains same span and the span is span 4.

Footer Section

The footer section of this layout has 2 columns. First column is footer1 and contain span 8 and the other column footer2 contain span 4.


Helix comes with built-in LESS CSS compilation. Now you can reduce over requests to browsers while making CSS development and it makes your whole website more powerful and speedier than ever.

In our new framework helix-ii we used less. Less will be a new era for the developer’s. By using less user will be able to save their time. It makes works 10 times faster more than before. People who want to code less and want the output more than less is for them. Less makes the code easier, flexible & more comfortable. We have also the option to turn of the less.

Form the advanced option users will be able to disable the less option. But if you don’t disable the less option then you won’t be able to do normal Css. So for doing normal Css it’s must be necessary to disable the less from the advanced option.

For more information about less please check the url:


Helix-ii provides users the opportunity to play with the fonts.

In helix-ii users will be able to choose body, header & other font from the administrator panel. In body font just select the desire font & its weight. Here is another option great available is the selectors. Here users select the elements of the body that contain the selected font. Also user will be able to choose other tags or elements like div or class. Just do the same for header & others font option.

How to create a customized preset style

In helix –ii we provide three (03) preset styles. Here is another option called preset settings. From preset settings users will be able to change the header, background or text color. To create custom preset style at first go to this directory: templates\shaper_helix_ii\images\presets. Here you found three (03) folder named preset1, preset2 & preset3. Just copy one of those folder in the same directory and rename it by preset4. Then find the templateDetails XML file. You will find the XML file from this path: templates\shaper_helix_ii. Copy and paste under preset3:

Change field name preset3_header to preset4_header. Same to others field name.
After doing all of this procedure now you will found another preset styles named preset4 in your administrator panel.

How to create customized preset settings

In preset settings we provide the opportunity to change the header, background, text & link color. If you want to add more option in the settings like Footer color then open the Xml and create another line like the highlighted line:

After editing the XML file open the index php file. You will find the index.php file in this path:

Then open the index.php file and create a new line like the highlighted line:

After completing the line then saves the file and now you will found new option in your preset settings.

Custom Stylesheet

Now you can edit your template css withought lost anything when the template update or Helix II update.

Just create a custom.css file on templates/shaper_helix_ii/css folder and write your custom css here. This files needed when you need to style the template without using less or you want to override design of the template.

  • Custom css is not a compiled file from LESS so it will not be overridden or lost anything when less compiled.
  • The file is not included by default, you need to create your own

Lets customize the design

Custom.css file is the same file like any other standared css file. Just see we use our custom stylesheet in the example below.


With Chrome Developer Tools, we can see that the default background was gradient. We override it to write css on custom.css file.