September 04, 2004

Customizing the MT Edit Window

If you are creating a group weblog with multiple authors, you might want to customize the look of the Movable Type editing windows with the group's logo. MT3.1 makes this really easy to do. The styles.css file and the images folder that are in the folder you chose for your static files on your server are where you can find the files you will need to adjust.

Changing the logo

The default upper left-hand logo of the editing window looks like this in MT3.x:


The file name is topnav-logo.gif and it can be found in the images folder in your static files folder. You can use an image editing program like Photoshop to swap out the Movable Type logo for that of the group's. Save the image as a gif file, with the same name as the orginal.


Using an FTP program, upload the new logo file to your images folder on your server. Now when you access the MT edit window, you should see your new logo!

Changing the link from the logo

The logo is linked to your weblog by default. If you would like to change that link so that clicking on the logo takes you to a different page, you will need to make a change to the header.tmpl file in the cms directory of the tmpl directory of your MT files.

Open up the header.tmpl file in a text editor. Find the following line (around the 19th line from the top):

<div id="topnav-img"><h1><a href="<TMPL_VAR NAME=MT_URL>"><img alt="Movable Type" src="<TMPL_VAR NAME=STATIC_URI>images/topnav-logo.gif" width="224" height="66" border="0" /></a></h1></div>

Swap out <TMPL_VAR NAME=MT_URL> for the new URL.

Save your changes. Upload the file back to your server (as ASCII text) in the tmpl directory. Set the permissions of the file to 755.

Other changes

Changing the logo is the easiest way to quickly customize the edit screen. You can, however, do much more if you want and have expertise in CSS. The styles.css file in your folder of static files holds all of the style information for your edit screen. The images are stored in the images folder in the folder where you store your static MT files. The stylesheet and images are called by the templates in your tmpl folder that is in the same location on your server as your MT cgi files. The stylesheet includes comments that show which templates specific style elements belong to. If you look at an MT template in a text editor you can see where the different div ids and classes are declared and match them to the ids and classes in the stylesheet. Clearly you need to know what you are doing regarding CSS if you are going to make substantial style changes to the edit window.

Changing the size of the entry edit window or the template edit window is straightforward. I've outlined those steps in Enlarging the MT Edit Windows.

You can add Quick Tags to your editing screen to easily add formatting options while you create and edit entries.


Arvind from Movalog has a Quick Tags Tutorial with all the steps. Apparently it works with Mac Safari as well as Windows browsers.


Skinning MT - Arvind's tutorial on how to skin the MT edit interface.
Movable Type Backend - D. Michael Allen's "dutchpink" design for the MT edit interface.
HTMLArea - Arvind's tutorial on how to install this WYSIWYG editor.

Has this tutorial been helpful? Please consider linking to Learning Movable Type at . Thanks!

Posted by Elise Bauer on September 04, 2004 to General Tips and Tricks
Comments(4) | Email to a friend | Printer-friendly version


If you would like to send a trackback
please use the following URL:


I'm wondering whether you would be allowed to change the logo displayed in the interface. Wouldn't that be a breach of something or another ?

There is nothing in the licenses that prevent this. In fact, in the 6A discussions of the development of MT3 it has been specifically pointed out that it is now much easier to completely customize the edit screen of MT, a feature that many people who have built commercial MT installs for clients have requested.

Ah excellent just wanted to make sure before I hacked away. Wanted to edit that logo before just didn't know what the restrictions were - thanks for the clarification :D

Ok This isn't exactly customizing the edit entry window but its still a customization.

To change the icon displayed when a comment that is Typekey authenticated is posted just replace the graphic nav-commenters.gif found in your weblog folder !

Comments are now closed for this entry.

Email to a friend

Email this article to:

Your email address:

Message (optional):