Introduction to Morphs Layout System (PageFX)
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.
Combine the suffixes
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! ;)
Video tutorial
This screencast shows you how quick and easy it is to setup (and change) the sidebar layout scheme on individual pages using Morph’s Configurator. In the screencast we’re using the Candy themelet as an example.
Try the 2 interactive demos
- Go to the interactive modules and layouts demo and try some of the different possible layouts using only point and clicks!
- Read about our free Configurator demo. Make sure you give it a spin and you’ll see how easy it is to manage your Morph powered Joomla site.

Feeling social? Connect with us!