Introduction to Morphs Layout System (PageFX)

This is probably one of Morph's most powerful features, because it gives you the ability to set a wide variety of layout combination's on any specific pages or components on your website. For example, you can easily switch the left sidebar from 200px to 300px wide in a matter of seconds without touching any code.

As with all other features in the FX Range, it's super easy to set a layout for a page. There is nothing to configure, but just a matter of adding the required suffix or combined suffixes to the page in Joomla!... as easy as that.

In case you are new to Joomla, adding a page class suffix is done by opening the menu item to which you are wanting to add the suffix to (Menus > [Choose a menu] > [Click on a menu item]), then look on the right for the Parameters (System) accordion. The option you are looking for is "Page Class Suffix". Just add one of the suffixes listed below & save.

Outer Sidebar Suffixes

The outer layout refers to the width and position of your secondary content.

outer0

No outer sidebar.

outer1

160px sidebar on the left.

outer2

180px sidebar on the left.

outer3

300px sidebar on the left.

outer4

180px sidebar on the right.

outer5

240px sidebar on the right.

outer6

300px sidebar on the right.

outer7

No sidebars published (full-width).

outer8

200px sidebar on the left (custom).

outer9

200px sidebar on the right (custom).

Inner Sidebar Suffixes

The inner sidebar refers to the width and position of your tertiary content.

inner0

No inner sidebar.

inner1

Inner sidebar 50% on the right.

inner2

Inner sidebar 33% on the right.

inner3

Inner sidebar 25% on the right.

inner4

Inner sidebar 200px on the left.

inner5

Inner sidebar 200px on the right.

These options can be combined with each other to create dozens of layout combinations on any page and each page can be different. Essentially, the idea is that you can customize your page layouts based on the following order:

• Global default (set in the sidebar block tabs in Configurator).
• Component default (ie, sidebar 300px right for the blog).
• Page by page (ie, the blog default is 300px right, but for the blog author profile page you want the sidebar to be 180px on the left).

PageFX not only sets the sidebar layouts, but with Configurator you can also set the main website width based on 4 preset options (750px, 950px, 974px and 100%). Click here to learn more

Benefits for developers

Developers can make use of the Page Class Suffix feature to add a custom “hook” to any page or pages on a website.

This "hook" is set at the highest level in the page structure, which means any visual css can now be added or over ridden for that page only. click here to learn more

For example, this can be used to:

• brand specific areas of the site
• color code different sections to match a color coded navigation
• set gallery pages to have a dark content background
• add styling for a specific season like Christmas without modifying the actual code in any way

Gone are the days where developing for Joomla! means that the layout of the template you are using will dictate your content! ;)