The anatomy of a themelet

The purpose of this overview is to give you a solid understanding of how a themelet is structured, so that you can better understand where the various files are located should you wish to customize your themelet.

Themelet folder structure

Below is a snapshot of the themelets file and folder structure, in relation to your Joomla site. The themelets folder is located in your morph_assets/themelets folder of your site root.

Themelet css

Most of the visual aspect of Morph is controlled from the themelets css, so customizing the look and feel of your Morph powered site is very much like customizing a normal Joomla template. The css filenames are pretty self explanatory, but here is a reference to ensure that finding the css you want to customize is quick and easy.

Themelets xml (themeletDetails.xml)

The themelet's xml file includes all the themelet specific information that is used by Morph & Configurator, including the themelet name, author, version number, license type and all of the themelets default settings.

Custom css, javascript and php (custom.css, custom.js & custom.php)

All of these are used by Configurator to output the custom css, javascript or php that you add from within Configurator (via the built in code editor). It is important that you do not edit the contents of these files, as it will prevent the code editor from working. If these files are not present, the custom code option in Configurator will not be present, as it is only activated if those files exist.

Themelet thumbnail

The themelet thumbnail is used as the preview image in Configurator (both in the top shelf when active and in the assets view). The recommended dimensions for the thumbnail are 200px x 133px.