A Couple of Movable Type Tips
September 18th, 2009 | 1 Comments | Tech Stuff |
This may be a WordPress blog, but back at the office we’re a Movable Type shop. Talking at lunch today, we decided that the real meaning of “Enterprise Edition” is, “you better have an enterprise backing you up on this,” because the documentation is, ahem, incomplete.
But here are a couple of theme– and style-related tweaks you should know.
MT calls its themes “styles” in the GUI, but “themes” in the filesystem; and if you look through their documentation you’ll find next to nothing. There’s no way to add a style, or a style category, directly through the GUI. All the work has to be done in the code itself.
In our Enterprise Edition we have four different styles within the Professional Website category, Professional Black, Professional Blue, Professional Green and Professional Pink. We wanted to add a custom version that students were going to use for a freshman-level class. The basic steps were:
- Clone one of the existing templates: just by copying the directory and re-naming it. In the case of the Professional Website templates, these are in /mt-static/Commercial.pack/themes/.
- Change the colors and the header image to something more relevant: upload an image of the appropriate size, change the css file to point to it instead.
That much is pretty obvious. Here’s what you do next:
- Rename things: Change the directory name to something distinct. I used “professional-shufs”. Change the screen.css file header lines to match, particularly the second line:
name: Professional SHUFS, a Theme for SHU Freshman Studies
And the rest of it as needed. - Make thumbnails: Take a screen grab of your theme in use, and make two thumbnails. One should be 120px high by 90px wide and named thumbnail.gif; the other 278px wide by 209px high and named thumbnail-large.gif. Upload these to your new theme’s directory, overwriting what’s there already.
- Modify the index: This is what makes it actually appear. Open /mt-static/addons/Commercial.pack/themes/professional.html. You’ll see a chunk that looks like this:
<link rel="theme" type="text/x-theme" href="professional-black/screen.css" />
<link rel="theme" type="text/x-theme" href="professional-blue/screen.css" />
<link rel="theme" type="text/x-theme" href="professional-green/screen.css" />
<link rel="theme" type="text/x-theme" href="professional-pink/screen.css" />
You’re going to add a line to point to your new style:
<link rel="theme" type="text/x-theme" href="professional-black/screen.css" />
<link rel="theme" type="text/x-theme" href="professional-blue/screen.css" />
<link rel="theme" type="text/x-theme" href="professional-green/screen.css" />
<link rel="theme" type="text/x-theme" href="professional-pink/screen.css" />
<link rel="theme" type="text/x-theme" href="professional-shufs/screen.css" />
The new style should now be one of the choices in the GUI.
Adding a new category of styles
In the “Select a Style” page there’s a microscopic “+” icon at the top of the left column. Click on it and it asks you for a Stylesheet or Repository URL. Hmm. What?
We have to back up a little and create a Repository URL. Let’s say that you’ve created two themes, and put them into the filesystem at /mt-static/themes/my-new-website and /mt-static/themes/my-new-blog. You need to create a Repository URL that points to the CSS files for each. The Repository URL is a file that looks just like index.html above. In the
section, you'll have theme links to the two you've set up. Open up a blank text file and put in something like:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="content-script-type" content="text/javascript" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>My Style Library</title>
<link rel=“theme” type=“text/x-theme” href=“http://foo.bar.com/mt-static/themes/my-new-website/my-new-website.css” />
<link rel=“theme” type=“text/x-theme” href=“http://foo.bar.com/mt-static/themes/my-new-blog/my-new-blog.css” />
</head>
<body>
<p>This is the Movable Type 4 style library for my new styles.</p>
</body>
</html>
An important thing to notice here: The CSS files in each theme have different names. That’s a must, apparently, even though it doesn’t seem to be required for the modification we did to the Professional Pack above.
Save that file to your web server, let’s say it’s at http://foo.bar.com/mt-static/themes/newthemes.html.
Go back to your MT GUI and click that green plus sign again, and enter that URL. Let it go through it’s machinations and you’ll see a new category in your left column.
What’s interesting about this is that your newthemes.html file can point to any of the themes you have on your site, wherever they happen to be. So you can have the same theme in multiple categories without duplicating them in the filesystem.
Custom Banner Images
One of the first questions we get here is, “how do I get rid of the chicken?” Long story, but the Professional Black style looks like this, out of the box:
We’d read that at Penn State they’d modified the system so that their users could upload their own image to replace the default. The solution is pretty simple, and I think I’ve recreated it. This is only tested with templates in the professional pack; the details will vary if you are using a different template set.
First off, the user, within their blog, needs to upload a new asset. In the administrative screen, go to “Create::Upload File”. Create a file that is 905px wide by 170px high and upload it. In the File Options screen, uncheck “Create a new entry using this uploaded file, and give it the tag “@banner”. Then click finish.
That, in and of itself, does nothing. You have to modify your template accordingly. Go into “Design::Templates” and click on the Stylesheet (styles.css) link. You’re going to add a line to the very bottom of whatever’s there.
<mt:Assets lastn="1" type="image" tag="@banner">
#homepage-image { background: url(<mt:AssetURL>) }
</mt:Assets>
This is going to take one single asset, of type image, with the tag “@banner”, and apply that asset’s URL as the background-image of #homepage-image. Save & Publish, refresh your page and you should be good to go.
Tags: Blogs, Movable Type, Tips
[…] Tom McGee wrote a post with several tips for customizing MT blogs. Tom’s tips focus on creating custom themes and modifying banner images in default themes. […]