The image above is created from 6 different small images, but I took a snapshot of this image to create a single gif file for my header.
You would think that adding an image to the header would be easy enough, but as with most changes in Movable Type 4, it’s confusing to know where to put the code for any changes you want to make. I tried inserting the code directly into the stylesheet to begin with here, but the image didn’t display and the whole header formatting was thrown out. After lots of trial and error I decided the best place to insert the image was in the header template module.
Look for the following code:
<MTIf name="main_index">
<h1 id="header-name"><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName encode_html="1"$></a></h1>
<h2 id="header-description"><$MTBlogDescription$></h2>
<MTElse>
<div id="header-name"><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName encode_html="1"$></a></div>
<div id="header-description"><$MTBlogDescription$></div>
</MTIf>
And replace with this code, pointing to your header image:
<MTIf name="main_index">
<img src="http://www.yoursite.com/blog/images/image.gif" alt="" style="float:left; padding-right:10px;"><h1 id="header-name"><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName encode_html="1"$></a></h1>
<h2 id="header-description"><$MTBlogDescription$></h2>
<MTElse>
<img src="http://www.yoursite.com/blog/images/image.gif" alt="" style="float:left; padding-right:10px;"><div id="header-name"><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName encode_html="1"$></a></div>
<div id="header-description"><$MTBlogDescription$></div>
</MTIf>
I’m using the Unity Blue style for Babble On and added some top padding to the header name. In your stylesheet, at around line 218, you’ll see #header-name.
Add padding-top: 30px; to push the text down. You might need to play around with this to get it right for your blog.
Leave a comment