Morph

The swiss army knife of Joomla template frameworks.

Free Download

Documentation

  • Banner

How to add your own custom css, javascript or php

If you want to edit your themelet and still be able to upgrade easily, there are 2 methods.

  1. The default option is via Configurator (in the code editor) and then your changes are stored in the database.
  2. The second method is if you include a custom.css in your themelets css (via ftp).
What's the difference?
  • The database version (1) will be saved when upgrading, while...
  • ...including a custom.css/php/js file (2) means you need to back up the files before you upgrade.

Please note: A backup of the themelet is automatically created, but just in case something goes wrong you should have your own backup.

Morph's engine will automatically detect and include the following files if present in your themelet:

/morph_assets/themelets/[yourthemelet]/css/custom.css
/morph_assets/themelets/[yourthemelet]/js/custom.js
/morph_assets/themelets/[yourthemelet]/custom.php

If you need to override any of the themelets css via the custom.css and you find that your changes aren't taking effect, try prepending your themelets name before the css you are wanting to override.

Before:
.menu li a{}

After:
#vanilla .menu li a{}

The themelets name is automatically appended as an unique identifier (id) on the <body> element, <body id="vanilla">. This serves as an additional hook that you can use in your css to give the selector more specificity and only one of the many tools in your Morph toolbox ;)

Wednesday, 29 June 2011

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