The Composing Stick

Last year I wrote a post about getting help with Movable Type. Slightly tongue in cheek, but made a few valid points. Things have moved on now, so here is the updated Tips for getting help with Movable Type.

1. Go to the right place.

• Purchased a license? Go to http://www.movabletype.com and log in under the account you purchased your license under and click on Open a new ticket.
• MTOS or a free version? Go to the community forums http://forums.movabletype.com and see if anyone has had a similar problem. If not post a question. You can also run a comprehensive search across Movable Type resources by using mtsearch.
• Problem with a Plugin? Try contacting the plugin author. If that does not work try the community.

2. Be clear about the issue in your topic title.

Topic titles are your hook, be clear about your problem; Sidebar is being pushed below content is more informative than HELP!!!!!

3. Details.

The more details you can give at the outset the less back and forth later. Try to include

• The version and distribution e.g. MTOS 4.2, Pro 4.01
• A link to the site (if relevant).
• Sample code (if relevant). You will need to encode your code to make sure that it displays correctly. Use a site like http://centricle.com/tools/html-entities/ to do this.
• Steps to reproduce the problem.

4. Be Polite.

The majority of people that help on the community forums are users, just like you. They help in their spare time. If the problem is particularly complex then you may have to wait for someone to set up a similar configuration to test. It is a sad fact that people are less inclined to help people that spend the majority of their post mad mouthing the product or threatening to move to a rival.

5. Give back to the community

If you found the help useful, pay it forward by helping out another user when you can. OK, maybe this isn't a real tip as such but it is valid. If you have another suggestion for tip 5 let me know by adding a comment.

A problem that comes up every so often on the Movable Type forums is the mixing of recently upgraded system, old Movable Type version 3.x templates and Movable Type version 4 stylesheets. In layman terms "The layout is buggered" or "The syles don't show".

A reason for this is that a number of the divs (html code that allows use to define parts of a page) had their names changed from a functional name such as banner to a semantic name such as header, so your site looks as if it has lost its style. At this point you have three choices:

1. Start from scratch using new templates and new stylesheets.
2. Rename all the styles in the stylesheets.
3. Rename all the divs in your templates.

Each option has it's pros and cons. If you start from scratch you will have to redo any additional customisation you have made. If you rename the styles in the stylesheet upgrades may overwrite them, my preferred option is to rename the divs in the template. the following is a non exhaustive list of name changes

banner -> header
banner-inner -> header-inner
banner-header -> header-name
banner-description -> header-description
pagebody -> content
pagebody-inner -> content-inner

Also the names of the various layouts have been shorten, see my previous post Changing Number of Columns on a Page

Recently I posted two solutions on how to make a clickable header in Movable Type. I have to admit both were quick and dirty methods rather than elegant solutions, a fact raised by Plasticmind on the Movable Type IRC channel. So to make amends here is part two.

What I should have done is show how to use CSS image replacement techniques to create a clickable header. There are a number of image replacement techniques out there, mezzoblue has full list of all of them, what we are going to look at is listed as the Phark Revisited method or the Plasticmind method.

To make things clear I create a blog and applied the unstyled style, leaving me with the following look.

As you can see everything is very plain text, now I want a nice font to use form my heading, so I have created an image file called header.png that is 940 x 191 pixels. I have saved this in a directory called resources off of the blog root.

I am going to add a style to the end of styles.css to include an image (header.png) in any links in the header section of the template. To do this I add the following code:

#header-name a{
    display: block;
    background: #fff url("<$mt:blogurl$>/resources/header.png") no-repeat left top;
    width: 100%;
    height: 191px;
}

The results is this

The problem, as you can see, is that the unstyled name of the blog and the description are still visible, what we are going to do is shift these off the page. Shifting is better than changing the colour as it gives us more flexibility when swapping out images. We don't have to fiddle with matching the font colour or worrying about parts of the image being blocked out. Our style changes slightly to add a negative text indent and to hide the description.

#header-name a{
    display: block;
    background: #fff url("<$mt:blogurl$>/resources/header.png") no-repeat left top;
    text-indent: -9999px;
    width: 100%;
    height: 191px;
}

#header-description {
    text-indent: -9999px;
}

The -9999px shifts the text far off screen so that we don't see it. The final result is

a clickable image header and no fiddling with the templates, just a few lines of css.

This weekend I have been mainly working on a new plugin for MT. It has officially reached 'Ugly Alpha' stage which means it is good enough for me to try out in my own environment but I am embarrassed about the quality of the underlying code to post a link. More next week.

No matter what the product or service, at some point in time your are going to be staring at a strange error message, a dead television screen or a punctured inflatable novelty toy. Face it, at some point in your life you are going to need to get help or support.

If you have paid support all you need to do is login at www.movabletype.com and click on the Open a New Ticket link. In my experience the support offered has been timely and accurate.

Without paid support you have two options:

1. Bitch and Whine on your blog, twitter and any number of social media sites. This is a bit like complaining in a coffee shop about the poor performance of you cellphone in the vain hope someone from the manufacturer is in earshot sipping a cappuccino and fixes  it there and then. It probably won't help, but it might make you feel a bit better.
   
2. Go to the community for help.

There are two sites you can visit to get help from the community,  forums.movabletype.org and forums.sixapart.com.

A few suggestions about posting

1. Post Titles. You should try and summarise your problem in the post title. HELP!!!! doesn't say anything about your problem. Sidebar is pushed to the bottom of entries, gives us more of an idea and maybe someone quickly scanning the forum post titles will see it and know the answer.
2. The Details. You should include the version of Movable Type and any other useful information, for example; If you are having problem with your layouts a link to your site is needed. If you are getting 500 errors then the output of mt-check would be useful or knowing that it does not run.

If your question is complicated then you may need to wait while someone may need to replicate the problem or test a solution.

Movable Type has a number of standard column layouts accessible through the styles menu. This can also be accessed through templates so that you can change layout depending on the content.

What you need to do is set the page_layout at the start of the page like so:

<MTSetVar name="page_layout" value="layout-wt">

the value can be any of the following:

layout-wtt <-- Wide, Thin, Thin
layout-twt <-- Thin, Wide, Thin
layout-wt <-- Wide, Thin
layout-tw <-- Thin, Wide
layout-wm <-- Wide, Medium
layout-mw <-- Medium, Wide

By placing the code in a conditional statement and using private tags you can change the layout of pages or entries just by setting a tag.

A question that comes up every so often on the Movable Type message boards is how to create a clickable banner that links back to the blog homepage. The answer depends very much on how the banner has been added to the page. One way is an img link in the HTML, this can be wrapped in an anchor tag the same way as any other link. Below is a sample Banner Header template that does just that.

<div id="header">
<div id="header-inner">
<div id="header-content">
<mt:Ignore><!-- Use h1 and h2 html tags on the main index of the blog as the title, use divs on all other pages where there are page titles. --></mt:Ignore>
<a href="<$mt:BlogURL$>" accesskey="1"><img src="<$mt:BlogURL$>header.jpg" alt="<$mt:BlogName encode_html='1'" height="150" width="900"/></a>
<mt:If name="main_index">
<h1 id="header-name"><a href="<$mt:BlogURL$>" accesskey="1"><$mt:BlogName encode_html="1"$></a></h1>
<h2 id="header-description"><$mt:BlogDescription$></h2>
<mt:Else>
<div id="header-name"><a href="<$mt:BlogURL$>" accesskey="1"><$mt:BlogName encode_html="1"$></a></div>
<div id="header-description"><$mt:BlogDescription$></div>
</mt:If>
</div>
</div>
</div>

A lot of the default templates that come with Movable Type use CSS to place a header image on the page. If this is the case you will need to use a little piece of JavaScript to achive the same effect. Below is a modified Banner Header template.

 <div id="header" onClick="window.location='<$mt:BlogURL$>'">
 <div id="header-inner">
 <div id="header-content">
 <mt:Ignore><!-- Use h1 and h2 html tags on the main index of the blog as the title, use divs on all other pages where there are page titles. --></mt:Ignore>
 <mt:If name="main_index">
 <h1 id="header-name"><a href="<$mt:BlogURL$>" accesskey="1"><$mt:BlogName encode_html="1"$></a></h1>
 <h2 id="header-description"><$mt:BlogDescription$></h2>
 <mt:Else>
 <div id="header-name"><a href="<$mt:BlogURL$>" accesskey="1"><$mt:BlogName encode_html="1"$></a></div>
 <div id="header-description"><$mt:BlogDescription$></div>
 </mt:If>
 </div>
 </div>
 </div>

All we have done is add an onClick event to the header. Users that click in the header will then trigger the JavaScript which mimics clicking on a link.

Today I have added functionality to this site and to Darren Kenny Paralympic Cyclist that makes it easier for visitors to share the love and add links on facebook, email to friend or just plain blog about it.

A little research showed that there were two main sites offering tools to enable this; AddThis and ShareThis. Both have JavaScript that can be added to a page to include a sharing button, both allow some customisation and both can provide user stats. In the end I went with ShareThis for one simple reason, this site was up.

The original plan was to test one tool on each site, leave them running for a month or so and compare results. I had registered with both sites earlier in the week as I had wanted to look at the JavaScript and the options available. When I went to AddThis there was no indication on the home page that they were performing maintenance, nothing in the blog and they hadn't emailed me. You just get a simple unstyled page telling you to come back later when you go to your account.

To add the button was easy

• Register on ShareThis
• Get button code
• Create a Module template called ShareThis
• Copy code into template and save

• Go to the Entry template and include the ShareThis module where you need it

  <$mt:include module="ShareThis"$>

• Do the same with the Entry Summary template

• Rebuild site

The last week or so I have spent time on upgrading by brother's site to run on Movable Type 4.2. The previous site was still running 3.6 with heavily customised web templates that made me put off upgrading until the last minute, literally.

The first thing I did was upgrade the back-end, that was easy. The difficult part was that my customised templates did not have any comment code in and I wanted to add commenting ready for the start of the Paralympics games, I was left with no choice but to style the existing templates to match the old style as closely as possible. In the end the new templates went live during the Paralympic opening ceremony. So I give you version 1 of the new style for Darren Kenny, Paralympic Cyclist. There are a few tweaks to do with the styles before I will be happy.

Upgrading the site has given me a lot of material to write up, so before the end of September I will being a series of articles on customising the MTOS classic blog templates, so stay tuned.