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):
<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.
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 http://learningmovabletype.com/ . Thanks!