Morph

The swiss army knife of Joomla template frameworks.

Documentation

  • Banner

Developer Docs

Want to dig in code or do heavy customizations? You can easily use Morph in a way that suits you. Learn how to add your own custom css/js/php, take advantage of Morph's page class suffixes, or create your very own themelet for Morph.

How to configure the iPhone version of your site

Each themelet has its own unique iPhone layout, which users will automatically see when browsing your site on an iPhone. This tutorial shows you the available module positions for the iPhone version of your site, and how you can customize it further if you like.

Developer tool: enabling and working with module outlines

This screencast will help you understand how any site using Morph is built up using the different blocks and module positions. This is ideal if you want to duplicate the content and structure of a demo for your own site and need to know where things are published etc.

Customize your sites background on different pages with page class suffixes

If Morph's many automatic body classes aren't enough for you, this tutorial shows you how to create an additional class that is automatically appended to the body element. Learn how to add a page class suffix via the "Parameters (System)" tab of any menu item to create a "hook" for alternate styling.

Progressive enhancements

These are the subtle enhancements that are layered onto your site, as browsers can support them. Morph has a number of these that take place automatically in the background. Learn more about equal heights, scroll to top, and Google chrome frame.

Understanding the automatic body classes

Morph's automatic body classes can help you with everything from cross browser fixes, customizing individual pages and more! These are incredibly useful when dealing with cross browser inconsistencies and fixes, as well as overriding any of the default css for a specific component view.

Using Morph's developer toolbar

Developer tools help you work faster and smarter so we have included a number of tools that you can use when working with Morph to manage and extend your website to suite your specific needs. In Morph you have 2 toolsets - frontend and backend.

Using the browser css files

Each themelet can have its own browser specific css files. If one of these files is present in a themelets css folder, it will automatically be included by Morph. Depending on the amount of fixes required for any given browser, you can choose to use an individual css file or the browsers.css

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