Morph

The swiss army knife of Joomla template frameworks.

Documentation

  • Banner

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.

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

  1. Go to the interactive modules and layouts demo and try some of the different possible layouts using only point and clicks!
  2. 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.
Wednesday, 01 February 2012

Introduction to Morph's architecture

Morph's architecture is quite different from most traditional Joomla! templates, so it's important to you understand the role that each of the three key parts play, as it will help you grasp the other key concepts that Morph introduces.

Fork on Github