Morph

The swiss army knife of Joomla template frameworks.

Documentation

  • Banner

Themelets

Themelets are design concept for your website. You can easily customize your themelet using Configurator, and/or custom css. Learn more about how to style your themelet, and even how to create your own custom themelet.

The anatomy of a themelet

This tutorial gives you a solid understanding of how a themelet is structured. Before you customize your themelet, get a better understand for the themelet folder structure, css and xml files, as well as the custom css, javascript and php.

How to apply block styles (BlockFX)

Block Styles are similar to ModuleFX, but instead of being applied to the Joomla module it's applied to the block containing the module. It styles not only the background color, but the actual elements inside the block. Learn how to change and apply predefined block styles.

Recommended tools to optimize your images

Optimizing the images used in your themelet and throughout your content is one of the first things you should do to improve your sites performance. Here is a list of utilities you can use to ensure that you site is well optimized.

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.

Easily add form password masking to your Morph powered sites login form

The jQuery password masking plugin already exists in Configurator, so all you have to do is using the custom code editor to activate it. This tutorial shows you how to include the plugin file, javascript and adding some custom css to tweak the layout.

How to add your own custom css, javascript or php

Thanks to the way Morph is built, you can do heavy customizations to your themelet and still be able to easily upgrade the framework. This tutorial explains the 2 different methods you can use when adding custom code for modifying your themelet.

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.

Creating your own custom themelet for Morph

Learn how to build your own custom themelet to work with the Morph template framework. Because the themelet is a graphical layer that sits on top of the Morph Framework, you can skip the entire process of building the xhtml/php structure. That is all included in the framework.

Overriding Morph's block layouts via your themelet

There are times where you may need to adjust or extend the html code that Morph automatically creates for you. In these cases, all you need to do is copy the include file from Morph to your themelet.

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