How to Insert Images in Movable Type 4.xx – The Easy Way

On Valentine’s Day of 2010, immediately after I ported my blogs from Movable Type v. 3.38 to v. 4.33, I made an entry that documented my key observations during the entire transition process.

Although optional – but it will make your main blog page livelier – one of the most difficult tasks was how to insert an image on the main style sheet.

I even wrote on that very same blog that I will try to make another entry on how I managed to do it.

Well, life goes on and people forget but here it is anyway.

However, after looking back at the entire process, it was really simple.

The simplicity was emphasized after I re-coded my main website to render it in the HTML5/CSS3 version.

So, here’s how I did it (note: your MT blog must be up & running already) on my MT 4.xx blog site, so just change the URL, the image size, position & alignment on your own blogs:

—-start tutorial—-

  • On the server hosting your MT blogs, go to–>mt-static–>support–>themes folder.
  • Depending on your blog theme, you will see the folder of the one you used.  In my case, it was minimalist-light-green
  • Open that theme folder and you find the exact .css file that you’re using.  Again, mine was minimalist-light-green.css.
  • Open that .css file, go to the /* Header————————-*/ section and add these lines:

#header-content {

width: 925px;

margin: 25 px 50px 26px 15px;

background: url (“enter your website link here“) no-repeat bottom right;

padding-right: 1px

padding-left: 0 px

}

—-end tutorial—-

Note that the key entry line is the background: url since it is where your image is to be looked-up by your main style sheet.

That was easy, wasn’t it?

The hard part in Movable Type is just in what folder where to look for the right .css file to insert and edit your image since there are so many files and folders after the installation of the software.

Hope this helps all MT users who like to put up an image within the style sheet !!!