Learning Movable Type: 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.


Movable Type Backend - D. Michael Allen's "dutchpink" design for the MT edit interface.

Posted by Elise Bauer on September 4, 2004 9:00 PM to Learning Movable Type http://www.learningmovabletype.com/