Customizing Movable Type's Interface with Application Templates

Introduction

This article explains how you can customize the user interface of the Movable Type application. This is a powerful area of functionality that's easy to get started with and almost unlimited in its potential. Some key points we'll cover: * How to create custom application templates for Movable Type's interface * The benefits of using application templates * Ideas for how to use application templates with your plugins or workflow * Links to some example application templates, to see what's possible and to inspire your own

Customizing the Movable Type user interface

To understand the potential of customizing your Movable Type interface, you'll need a little bit of background. Most Movable Type users are familiar with the templates that are used to generate HTML or XML files for output. But Movable Type also uses another template system, called HTML::Template, to produce the HTML files that define the application's user interface. This system allows for flexibility such as limiting the display of certain features to only users who have permission to access them. Fortunately, despite their power, the templates that make up the Movable Type interface basically look like standard HTML, with some little bits of logic added. Tip: If the only items you want to change in the user interface are things like font selection, formatting, borders, or the positioning or display of user interface elements, you can just edit the styles.css file in the root of your Movable Type installation and tweak to your heart's content. You can see the results of a number of these types of customizations under the tag "Pimp My CMS". If you want to follow along in your own Movable Type installation, you should check out the /tmpl directory underneath the directory where you have Movable Type installed. You'll find a subdirectory called cms that contains most of the templates that make up the screens you're familiar with when you log into the system.

What's an AltTemplatePath?

Once you've found the tmpl directory, it's pretty easy to understand the next few steps. Movable Type allows you to simply override the default application templates in this directory with ones of your own creation by making templates with the same name, putting them in a folder that the application can access, and then telling the system where to find them. For our examples, we'll assume that your custom application templates will live in a folder called /exttmpl underneath your Movable Type install. (That puts the exttmpl folder right next to the tmpl folder for easy access, and the "ext" part of "exttmpl" stands for "external" templates.) The configuration setting for the path to custom (or "alternate") templates is AltTemplatePath. To tell Movable Type where to find your application templates, you need to edit the mt.cfg file, which contains the system configuration for Movable Type. Just edit the file and add a line that says: AltTemplatePath ./exttmpl Once you've saved the mt.cfg file, you're all set: Movable Type will always look in the /exttmpl directory first to see if there's an application template available, and if it finds one, it will use your custom template in place of the ones built into the system.

A Simple Example

If you're just getting your feet wet with modifying the Movable Type user interface, the best place to start is by customizing the templates that come with the application. We'll copy one of the existing templates from the /tmpl/cms directory to /exttmpl/cms. For this example, header.tmpl, which generates the top of the page and the left toolbar for the Movable Type application, will serve our purposes. After you've copied header.tmpl to its new location, open it up in a standard text editor.

Side Note: In Movable Type's user interface templates, you'll see some standard HTML laying out the structure of the page, as well as some new tags that you may not be familiar with. The items that start with TMPL_VAR are template variables, which Movable Type generates depending on your system configuration. The ones starting with MT_TRANS are bits of text that are translated into the language selected by the user. (Movable Type has been professionally translated into half a dozen languages, and it's also possbile to create your own translations.) A full explanation of this template language is outside the scope of this article, but if you want to learn more the language used here, you can start with HTML::Template Explained. Full resources, including a mailing list, are available at the SourceForge site for the project.

The line we'll want to edit for our example is line 28 of header.tmpl in version 3.16 of Movable Type. Before any changes, it looks like this: <TMPL_IF NAME=BLOG_NAME>|  <a target="_blank" href="<TMPL_VAR NAME=BLOG_URL>"><MT_TRANS phrase="View Site"></a></TMPL_IF> If you've worked within Movable Type a lot and use a tabbed browser or are just meticulous about managing your browser windows, you probably already know what this (potentially annoying) bit of markup does: It's the "View Site" link on the top navigation in Movable Type. By default, it opens a new window to display your blog when you click on it. If you're administrating a blog for a workgroup in a company, opening in a new window might be a handy convenience for many of the authors who contribute to the weblog. But we're power users! We're in here mucking around with our application's templates! So we can't have Movable Type be coddling us by opening up new windows on its own. How do we fix this annoying habit? We just take out the markup that's instructing the browser to open up the new window: The target="_blank" attribute. So let's replace line 28 of header.tmpl with this new version: <TMPL_IF NAME=BLOG_NAME>|  <a href="<TMPL_VAR NAME=BLOG_URL>"><MT_TRANS phrase="View Site"></a></TMPL_IF> Then, just save the modified file, make sure it's located in /exttmpl/cms, and log in to your Movable Type installation. You should be able to click on "View Site" from the top navigation of any of your weblogs to verify that the changes worked.

Your Changes Are Safe

One of the most satisfying parts of working with application templates for Movable Type's interface is that your changes, improvements, or customizations to the Movable Type user interface are safe. If you upgrade Movable Type, the /exttmpl folder isn't overwritten, so your templates will continue to work. (Though, if the user interface for Movable Type is revised, you won't get any new functionality that's made available in the new version's templates.) In addition, your application templates can make use of the hundreds of strings that are localized for each of the international versions of Movable Type. If you make smart use of translated variables (refer to the HTML::Template links, above), your customizations will work for Movable Type users around the world, taking advantage of the translation work that's already been done. And the application templates that make up the Movable Type interface are being made available under the Artistic License, allowing you to customize the templates and redistribute them as needed, either for your own use, for your customers, or to share with the entire Movable Type community. Best of all, we'll be expanding support for application templates in future releases, to include items such as the email templates used for notifications from the Movable Type application. Once you've created a library of customizations encompassing all of your preferences and personalization, you'll be able to deploy it on any of the platforms where Movable Type runs.

What's Next?

The potential for custom application templates is limitless; If it's like most of the extensibility features we've built into Movable Type over the years, we'll be surprised by the creative ways that people make use of the potential. But we're already starting to see some good examples of what can be done. At a very basic level, an application template could rename elements of the user interface or change the places that links go. Don't like the word "blog"? Want to rename the "Extended Entry" field? Those changes could be done in minutes using the same technique we covered in the example above. If you're a plugin developer: The power of combining your custom plugin code with a truly customized user interface defined with an application template is amazing. By creating custom links, adding additional integration points in the user interface, or by simply displaying tips or documentation for your plugin inline on the application pages where it's most useful, customizing Movable Type's interface can make your plugins even more valuable for users. If you're looking for inspiration: Take a look at the work that's already been released in the community. Alex Sancho created a liquid template for displaying Movable Type's interface, letting the information in the application reflow to fit larger screens. Dan Wolfgang has built a number of application templates, customizing functionality ranging from the file upload screen to the entry preview page. If you've got some customizations of your own, be sure to let us know and we'll share them with the community on the Professional Network blog. If you really want to push the limits: Truly advanced functionality could be generated using application templates along with other markup and application languages. The XUL language which defines user interface elements on Mozilla browsers would let you make a rich application UI for any functionality in Movable Type or in a plugin. If you prefer Flash for certain types of interaction, an application template can let you embed Flash within the application. And if you're an information architecture astronaut, you can rearrange the pages of the Movable Type application to better fit the workflow you envision.

Show Off Your Work

We'll be offering up some examples soon of how our own team has built on the application template functionality in Movable Type. You can build on these examples, or just start from scratch with your own ideas, to truly make Movable Type fit your needs and expectations. Once you're on your way, let us know, and we'll share your customizations with our entire community.