« Better Out than in. | Main | One for Ian »

Editing an MT blog for Beginners by a beginner.

A friend with a blog who has just moved to Movabletype was foolish enough to ask my advice on how to customise his blog: He posed five questions.
1. How do I get colours - you know, something nice....!
2. How do I get a pic onto the title bar
3. I have set up categories which I would like to use instead of dates
for archives - how?
4. How do I get blogroll onto it?
5. Hit counter - how?

I'm new to blogs and to MT but I have been playing with websites since 1995 - but I'm no expert nor a web designer. But I have got a blog so I am arrogant enough to think that people are interested in what I say. So here goes with a basic guide as I see it:

Apart from the documentation that comes with Movable type one the best resources I have found is: mediatinker.com

But first you need to look under the bonnet of how and where your new website keeps its files - you will need an FTP client - something like Visicom Media Inc. - AceFTP 3 Freeware. Configure this with the details your Hoster gave you and you would see various directories on the host - probably a public_html which will then contain a directory called either MT or movabletype. This is where the pages that you make are living. Whilst you are in there look for a directory called "images" - or make one if there isn't one there. You will need this later to put up pictures. And the FTP client is what you use to send the pictures up there.

Now go back to mediatinker.com and get a grip on this:
"The MT default templates contain four kinds of code: CSS, HTML, MT tags, and Javascript. - once you understand this all is easy."

1. How do I get colours - you know, something nice....!

CSS - controls the style sheet - to learn more see:
movabletype.org : Default Styles
"The layout and design of Movable Type's default templates depends entirely on the stylesheet being used. On this page, you can view screenshots of the 7 prebuilt styles; once you have selected the style you wish to use, copy and paste the contents of the text box into the "Template body" box of the "Stylesheet" index template in your Movable Type weblog. After rebuilding your index templates, your blog will take on the new style."

In your Movabletype control panel you can now see your CSS style.
This defines a lot of different elements and how each element should be displayed - for instance you will have an element called "Side" which will read something like this:

.side {
font-family:verdana, arial, sans-serif;
color:#333;
font-size:x-small;
font-weight:normal;
background:#FFF;
line-height:140%;
padding:2px;
}

This tells the browser that every time it comes across a bit of a page marked up as "side" then it should use this font at that size in such a such colour. Provided you have got a back up in case everything goes wrong you can now play with each element - change one - save and rebuild and see what difference it makes. This answers how do I get some colours in:

(But Tim it says that the color -sic- is #333 WTF is that? Look at HTML Color Chart - www.BROBSTSYSTEMS.com for an example of Colour codes - or you can do what I did and go off into the wilder territories and use "non-safe " colours such as "E6DCA5" which I got from looking at the source code on Farrow and Ball's Colour Information for Farrow's Cream.)
When you look at the HTML in the Index template you will see the various sections start with a (div) and then which style should be used - then the (/div) ends the section and the style no longer applies.

How do I get a Picture on the Title bar?

This is where you need to edit the HTML template. - this is the Index template in the control panel.
HTML is very simple once you look into it - it is all about nested brackets - something you open must be closed.

So I look for the bit that codes for the banner
and insert the code for a picture (img) where its source is (src=) you can shorten the whole URL to its path relative to where your blog lives - in my case it is is the images directory which is in the MT directory - and then I aligned it right. And again trial and error works! My code now reads:

<body">
<div id="banner"">
<h1">
<a href="">
<$MTBlogURL$">
<" accesskey="1"">
<$MTBlogName$>
</a">
</h1>">
<img align=right src="/mt/images/flag.jpg"">
<span class="description"">
<div class="codesample"">
<$MTBlogDescription$">
<&/span">
</div">

3 I have set up categories which I would like to use instead of dates
for archives - how?

This now takes us to MT itself ;
In your Index template you will have an entry about archives;
You need to add a section where the MTArchiveList archive_type="Category" rather than weekly or monthly.
You will see the way it is done with the existing archive section - a simple way is to copy the whole section the div marks the beginning and the end of the section and insert "Category" where it now says "Monthly".

4. How do I get blogroll onto it?
5. Hit counter - how?

Over there on the right are links to BlogRolling - Home and to a counter Sitemeter You will need to go to those sites and sign up and then they will give you some Javascript that you copy and paste into your index template. Simple as that - but do keep a copy of your template as a backup and also be prepared to move it about until it is in the place you want it. Trial and error will soon get you learning where the different divisions or sections are.

Post a comment