I’ve been diligently posting on tumblr, I feel like I have a fairly clear idea of how to distinguish tumblelogs from blogposts. Hopefully this means the homepage becomes more thoughtful and discussion-like.

Tumblr is hosted at their site. At first I used one of their default templates, but now it’s been converted to somewhat looking like the main site. They are very kind to provide a custom option where users can change the html and the css. I took one of the static pages — in this case the gallery page — and copied in the tumblr specific code. The original css is embedded in the html so I stripped it out and created a new css file called base-tumblr.css which gets called by a tumblr specific styles.css file.

I added an about page. The thing about about pages is that, it’s really only useful if you want people to know about you. To strike a balance between revealing too much and being entirely obscure is the trick, and I’m sure I was borderline successful only.

I wanted to include the about page on the main index of the about section. The options were: take it outside of mt and handcode index.php with an include to the mt generated parts; I could post date it so it always appear at the top; I could do some complicated include / exclude with categories; I could hardcode it into the main index template; or I could do it the easy way.

1. create it as a page
2. note down its page id — in manage pages hover on the title and it gave me id=1976
3. create a module called “about” that has the same tags as the page detail module, with one addition: wrap the whole thing in a mtpages tag:

   <mt:pages id=”1976”>
   <div id=”page-<$MTPageID$>” class=”page-asset asset”>
   <div class=”asset-header”>
   <h1 class=”asset-name”><$MTPageTitle$></h1>
   </div>
   <div class=”asset-content”>
   <MTIfNonEmpty tag=”PageBody”>
   <div class=”asset-body”>
   <$MTPageBody$>
   </div>
   </MTIfNonEmpty>
   <MTIfNonEmpty tag=”PageMore” convert_breaks=”0”>
   <div id=”more” class=”asset-more”>
   <$MTPageMore$>
   </div>
   </MTIfNonEmpty>
   </div>
   </div>
   </mt:pages>

   I could have scrubbed the page detail code more, but I left it as default.
4. in the main index call the module using mtinclude
5. save and rebuild

The second part of the index page is the latest 25 squares. I have to think of a better way of integrating the two and making it flow better.

I remember looking for, and finding a solution to embed a quicktime movie to the website. So today I was playing around with ringtones, found some and wanted to post on the website, I needed to find a way to embed mp3s. Of course the quicktime method works too, all I’ll have is audio but not video.

There are many ways and many online players. This from, of all places, the google blog, is a 10 second cut and paste. All I needed to do was replace [mp3 file address] with the url of my uploaded mp3.

<embed src= “http://www.odeo.com/flash/audio_player_standard_black.swf” quality=”high” width=”300” height=”52” allowScriptAccess=”always” wmode=”transparent”  type=”application/x-shockwave-flash” flashvars= “valid_sample_rate=true&external_url=[mp3 file address]” pluginspage=”http://www.macromedia.com/go/getflashplayer”> </embed>

There are several styles of players — they’re not fabulous, but get the job done. Supposedly we have to sign up and go to our profile page to select the player, but I found that by going to studio.odeo.com, selecting one of the featured people and clicking the link that says “embeddable player” will bring me to the page with a selection of players. It’s just a matter of changing the mp3 url and twiddling with bits of the code if necessary.

The rest of the site was converted to the new look.

For the about section, I thought using the “3-column footer in a 2-column theme” — putting categories, links, delicious tags etc that is all the rage now. But that means relegating static pages to the bottom of the screen and no one will ever read them.

Instead I created a new blog for the about section, to include — 100 things, faq, specs and the 25 square personal pages. There’s no actual about.php page, because there isn’t much to say. I figured out how to use the Pages function for these. Added the Pages widget to the sidebar, create a new page, save in its own folder and they get published. The standard Pages widget includes nesting by folder, but I took it out since it’s all flat in the hierarchy.

The download page on hidden doors is a page.

I fixed the divs on the 404 page too.

I think this is it.

Gallery is in the new design. I took the html of an entry page, stripped out the contents and inserted the flashplayer script for simpleviewer.

Changed background, fixed some of the margins.

The text is still in white, even though I changed it to #666666, not sure what’s going on. This needs to be fixed because I have white text on a white background.

The viewer takes pictures from my flickr set called favourites. I need to put more pictures in that set.

The logo is a variation of maratree; this time it’s the bright blue-orange combo version. If anyone asked me how I got from the original to this, I will have to shrug and say no idea. I was playing around with photoshop. The text is based on the blue and orange colour of the image. I fiddled with margins and padding in the header to fix the position.

main index

The main index for hidden doors is pretty much unchanged from before. Instead of the default entry view it shows category title, category description and a horizontal listing of individual entries. In other words: story title, story information and chapter headings.

With the new modular system the main index template is so much cleaner:

<MTSetVar name=”body_class” value=”mt-main-index”>
<MTSetVar name=”main_template” value=”1”>
<MTSetVar name=”main_index” value=”1”>
<MTSetVar name=”sidebar” value=”1”>
<MTSetVar name=”module_recent_entries” value=”1”>
<MTSetVar name=”module_category_archives” value=”1”>
<MTSetVar name=”module_author_archives” value=”1”>
<MTSetVar name=”module_monthly_archives” value=”1”>

<$MTInclude module=”Header”$>

<$MTInclude module=”Disclaimer”$>

<$MTInclude module=”Categories Summary”$>

<div class=”content-nav”>
<a href=”<$MTLink template=”archive_index”$>”>archives</a>
</div>

<$MTInclude module=”Footer”$>

I created 2 new modules. The disclaimer is just text contained in a box. Categories summary is a modification of the default category listing that is usually found in the sidebar. Hardly any change from 3.35.

<MTTopLevelCategories>
<MTSubCatIsFirst></MTSubCatIsFirst>
<MTIfNonZero tag=”MTCategoryCount”>
<div class=”asset-header”>
<h2 class=”asset-name”><a href=”<$MTCategoryArchiveLink$>”
title=”<$MTCategoryLabel$>”><MTCategoryLabel></a></h2>
</div>
<$MTCategoryDescription$>
<div class=”asset-content”>
<MTEntries sort_by=”title” sort_order=”ascending” glue=” | “>
<a href=”<$MTEntryPermalink$>”><$MTEntryTitle$></a>
</MTEntries> | <a href=”<$MTBlogURL$>download.php” title=”download”>downloads</a>
</div>
<MTElse>
<h1 class=”archive-title”><MTCategoryLabel></h1>
</MTElse>
</MTIfNonZero>

<MTSubCatsRecurse>
<MTSubCatIsLast></MTSubCatIsLast>
</MTTopLevelCategories>

So happily I went off to publish, expecting a similar look to before. And I tried again. And again. And again. What was wrong? The entries simply refused to list in ascending order even though I’d specified MTEntries sortby=”title” sortorder=”ascending”. It turns out that it’s a known issue. How ridiculous is that? They’re at version 4 and they can’t get something this simple to work?

Blimey.

entry listing archive

Normally this is the “Recently in [category] category” page that shows full entries. My modification is to use this archive template to list all chapters in one story.

<MTSetVarBlock name=”body_class”>mt-archive-listing mt-<MTVar name=”archive_class”></MTSetVarBlock>
<MTSetVar name=”sidebar” value=”1”>
<MTSetVar name=”module_about_context” value=”1”>

<MTSetVarBlock name=”page_title”><$MTArchiveTitle$></MTSetVarBlock>

<$MTInclude module=”Header”$>

<h1 class=”archive-title”>
<MTUnless name=”datebased_archive”>
<MTIfArchiveType archive_type=”Category”>
<em><$MTArchiveTitle$></em>
</MTIfArchiveType>
<MTIfArchiveType archive_type=”Author”>
Recently by <em><$MTArchiveTitle$></em>
</MTIfArchiveType>
<MTElse>
<$MTGetVar name=”page_title”$>
</MTUnless>
</h1>
<$MTCategoryDescription$>
<MTIf name=”datebased_archive”>
<MTEntries>
<$MTEntryTrackbackData$>
<$MTInclude module=”Entry excerpt”$>
</MTEntries>
<MTElse>
<MTEntries limit=”auto”>
<$MTEntryTrackbackData$>
<$MTInclude module=”Entry excerpt”$>
</MTEntries>
</MTIf>

<div class=”content-nav”>
<MTArchivePrevious>
<a href=”<$MTArchiveLink$>”>« <$MTArchiveTitle$></a> |
</MTArchivePrevious>
<a href=”<$MTLink template=”main_index”$>”>Main Index</a> |
<a href=”<$MTLink template=”archive_index”$>”>Archives</a>
<MTArchiveNext>
| <a href=”<$MTArchiveLink$>”><$MTArchiveTitle$> »</a>
</MTArchiveNext>
</div>

<$MTInclude module=”Footer”$>

I added an include for category description and created a new module called entry excerpt. This is based on entry summary, changing MTEntryBody to MTEntryExcerpt. Word count (so important!) is from the mt-wordcount plugin. which I’ve used since I started with mt.

<div id=”entry-<$MTEntryID$>” class=”entry-asset asset”>
<div class=”asset-area”>
<div class=”asset-title”><a href=”<$MTEntryPermalink$>”><$MTEntryTitle$></a></div>
<MTIfNonEmpty tag=”EntryBody”>
<div class=”asset-area”>
<$MTEntryExcerpt$> <br />
Date: <$MTEntryDate format=”%e %B %Y”$><br />
Word count: <$MTWordCount$> words<br />
</div>
</MTIfNonEmpty>
<MTIfTagSearch>
<$MTInclude module=”Tags”$>
</MTIfTagSearch>
<MTIfNonEmpty tag=”EntryMore” convert_breaks=”0”>
<div class=”asset-more-link”>
continue reading <a href=”<$MTEntryPermalink$>#more”><$MTEntryTitle$></a>.
</div>
</MTIfNonEmpty>
</div>
</div>

archive page

Lists all entries in chronological order. Since I use simple entry titles (“part 06”) it’s not a very useful page.

about

The new feature in mt4 is the about blurb at the top of the sidebar. Sometimes it’s useful. I changed the wording somewhat to reflect that I have stories and chapters instead of categories and entries. For the single entry archive I had to re-implement the previous next in category plugin. I’m glad it still works with mt4. Simple substitutes for MTEntryPrevious and MTEntryNext and a little change in formatting.

<MTEntryPreviousInCategory>
<p><a href=”<MTEntryPermalink>” title=”Previous in category”>« <MTEntryTitle></a> |
</MTEntryPreviousInCategory>
<MTEntryNextInCategory>
<a href=”<MTEntryPermalink>” title=”Next in category”><MTEntryTitle> »</a></p>
</MTEntryNextInCategory>

I suppose the single entry page shouldn’t have a sidebar, but *whatever*.

I’ve been working on implementing tabbed navigation. Using the sliding doors method gave really elegant results, but I had problems with the placement fo the tabs. First I put it underneath the header, but somehow their position ended up being absolute, and didn’t move when the window is resized. Placing it inside the header beneath the title description looked nice in firefox but I ran into problems with stupid IE. For a brief moment I thought about ignoring the IE anomaly but since I’ll have to look at the website at work, I know I’d be unhappy if I didn’t improve on the design.

The simplest solution, as of today, was: 1) not to use fancy rounded edge tabs and 2) place the tabs immediately above the content container rather than near the header. While I was at it, I put a light blue dotted border around the content container.

The html for the tabs is easy, all the items in an unordered list. I had to do a different list for each section, to distinguish between the current tab and the others.

<div id=”tabs”>
<ul>
<li><a href=”http://invisiblecompany.com/”><span>home</span></a></li>
<li><a href=”http://invisiblecompany.com/hidden%20doors”><span>words</span></a></li>
<li><a href=”http://invisiblecompany.com/gallery/simpleviewer”><span>pictures</span></a></li>
<li><a href=”http://invisiblecompany.com/gullsway”><span>places</span></a></li>
<li><a href=”http://invisiblecompany.com/taste”><span>taste</span></a></li>
<li id=”current”><a href=”http://invisiblecompany.com/shiny%20parts” id=”active”><span>technical</span></a></li>
<li><a href=”http://invisiblecompany.com/about.php”><span>about</span></a></li>
</ul>
</div>

The css turned out to be straight-forward too, though I spent a lot of time fiddling about and reading all sorts of different approaches. First, take out the list style and define the method of display as block. This puts the text in a nice block so I can add colours and borders.

#tabs {
float: left;
width: 100%;
margin-left: 5px;
}

#tabs ul {
margin: 0;
padding: 0;
list-style: none;
}

Then define the li elements — colours, text-decoration.

#tabs ul li {
display: block;
float: left;
padding: 0;
}

#tabs ul li a {
background: #85d6ff;
color: #fff;
text-decoration: none;
display: block;
margin-left: 1px;
margin-right: 1px;
padding: 0 20px 0px 20px;
}

Finally, define different behaviours for hover and for the current tab.

#tabs ul li a:hover {
color: #006699;
}

#tabs a:active {
background: #008fd6;
color: #fff;
}

#tabs li#current a {
background: #008fd6;
color: #fff;
}

The way the theme is working goes like this: there’s a base theme css that sits within each blog, it’s the absolute default theme and defines margins and sizes. No specific fonts, borders or colour. Within the mt-static>support>themes folder is a folder for the selected theme.

Both stylesheets are called by an index called Stylesheet - Main.

To add my own customisations I could have gone into the minimalist white css and made changes. I decided not to do that; instead I created a new css called base-custom, which I saved in the root directory. Appended the command in Stylesheet - Main:

@import url(http://www.invisiblecompany.com/base-custom.css);

This custom css contains all the personalised elements like float, box100, blockindent, copyright, disclaimer etc. It also holds any over-ride I want to implement.

For instance, the link behaviour goes through 3 iterations. First the default base theme tells it to underline links:

a {
text-decoration: underline;
outline: none;
}

then the imported theme tells it what colour, and adds hover:

a {
color: #000;
}

a:hover {
text-decoration: none;
}

I hate all of this, so in my custom css I tell it to do something else:

a, a:active, a:visited {
color: #008fd6;
text-decoration: none;
}

a:hover {
color: #006699;
text-decoration: underline
}

It’s kinda clunky to have one element go through 3 different behaviours, but it seems to work. Plus I’m not disturbing the default themes, meaning when (and I sincerely hope it happens) more themes become available I can switch easily. All I will need to change is the custom css.

Styles

Let’s face it, movabletype themes suck. And I’m coming from the point of view of a loyal user. If I ever switch to Wordpress, it will be because of the themes, plugins and MT’s technical demands.

To illustrate my point, compare the MT style archive against Wordpress themes. What’s worse, MT4 comes with 3 … yes THREE excrutiatingly boring default themes — a Cityscape collection of illustrated skylines of a handful of cities; a basic Minimalist theme which is a rehash of the Vox theme; and something called Unity which basically puts some colour to the sidebar.

Something I don’t understand is there are Default Styles and then there’s the MT4 Style Library. I was excited when I clicked on MT4 Style Library but that excitement only lasted for 1 millisecond until it loaded. The so-called extended library is nothing more than versions of the THREE default styles — instead of Minimalist Red or Green we have Blue, Brown, Grey, Purple, Light Blue (*gasp*), Light Green, Pink and White. I don’t know whether to or at the dismal choices.

None of the themes in the StyleArchive are MT4 compatible yet.

The least evil of the three evils is Minimalist. And the least evil of that lot is White. MT3 introduced Stylecatcher, which allows easy capturing and implementation of styles. I guess the saving grace was how easy it was to apply the style.

The problem with it being so easy is that I seem to need to apply it to each blog, I can’t do a system-wide implementation. This also means the css files are under the sub-folders and I have no idea how to pull one out to the root, apply to the entire site and make changes.

So here’s how things stand. Using the 80-20 rule, 80% is done, there’s just the remaining fiddly 20% to finish. Here’s how the website look today.

Known issues in terms of styles:

1. custom styles like float and box elements are not implemented
2. need to add horizontal tabbed navigation — the links are there but because I haven’t added the stylesheet elements it’s just a standard ul at the top left
3. entry container is too close to the sidebar
4. narrower container, something that looks like Kubrick
5. calendar is too cluttered
6. difference in list behaviour in sidebar — look at the admin section and the recent posts section; the line heights are inconsistent
7. fonts — cripes I really don’t like trebuchet, I prefer verdana; then again it’s miles preferable to a serif font
8. font colur = #666, not #333
9. link behaviour — normal a, a:visited and a: active need to be not underlined and in a different colour; a:hover should be in a darker colour and underlined
10. sidebar links to behave differently to main links — not blue, probably the same colour as normal text
11. borders on images and linked images to be dictated by the html not the stylesheet
12. comment form too prominent
13. add an “all tags” link — okay this isn’t stylesheet but I need to do it too

Templates

This was the toughest part of the upgrade. And the most scary. New features to the templates are:

• new archive types — for example category: monthly, entry, entry listing and page
• paginated archives — not sure how useful these are to me, but it’s all good
• consolidated archive templates
• restructured default templates — instead of a long and cluttered file full of code, it’s now a modular system
• widgets — what used to be includes

There are official instructions on how to upgrade 3.3 templates to 4 templates. Mostly it involves editing existing templates to fit the new version.

What SixApart called for the brave of heart only, is to use the default 4 templates in order to take advantage of “all the new features, new archive types, new template tags, new widgets and new template structure.” Why is it so daunting? Because it’s basically a fresh install, rendering all old templates inactive. In practice this means deleting all the old templates and starting from scratch.

My old templates were full of includes and little hacks here and there. I thought about it — will I lose a lot by implementing fresh templates? The answer was no. I know I will end up learning more about the system this way.

*deep breath* here goes.

the easy part

1. retrieve index txt files from the backup
2. create a new blog — I’ve talked about the recipe section for years, now is the perfect opportunity
3. set preferences
4. under design>templates check each template — I found that no configuration was needed and looking at the main index made me appreciate the clean-ness of the modular system
5. check out the new archive templates — again no configuration needed, I’m still learning
6. click on template modules — look at the building blocks




7. configure header to show site name
8. edit entry metadata so it shows preferred date format and category
9. by far the most editing is in the sidebar but it’s relatively painless using widgets — I added calendar, bloglines list, buttons and an admin section; the search bar I moved down from where it was at the top
10. talking about widgets, these are great … pretty intuitive
11. no change to system templates
12. save and publish (I’m getting used to calling it publish instead of rebuild)

I made a couple of new posts just to see how it all looks, and it was okay.

the hard part

1. start with the travel section — fewest posts, and I figured this is the one section I can afford to completely rebuild if necessary
2. check preferences
3. under Design>templates go first to the index template section, take a deep, cleansing breath and delete all the templates
4. with 2 tabs open — one with the current blog and one with the baseline recipes blog — copy the baseline templates one by one and create an identical new one in the target blog
5. repeat with all templates — this will take about an hour of intense ⌘-c and ⌘-v
6. some of the templates can be just refreshed (menu under more actions) but just to be pedantic, it’s worth double checking each one
7. save and publish
8. re-edit any parts that need tweaking

So that was it. Took 2 nights working till very late to accomplish. I still need to look at all the archive pages further down the hierarchy and change some of the verbage and positioning. But I consider it 90% done for every section except hidden doors. Talking about hidden doors, the modular system worked very well, I created a new module to hold the disclaimer and use mt-include on the main index to call it. The trick is to change the main index and category archive to show categories rather than entries.

I guess I can break down the process of upgrading into 3 parts: Installation, Templates and Styles. I’ll split them up into 3 posts.

Installation

There are two official methods for upgrading. The first is to replace old files with new: this preserves existing indexes, templates and customisations. The second, and recommended, is to download MT4 into a fresh installation, then copy over plugins and customisations. Step 5 of the recommended way says:

Login to Movable Type - The first time you access Movable Type, the system will detect the new version of MT installed on your system and take you through the automated process of upgrading your database. When this process is complete, you will be able to begin using Movable Type immediately.

Except it didn’t work for me. When I logged in as usual by pointing the browser to mt.cgi I got a server 500 error. What SixApart didn’t point out, or assumed, was that the permissions on the cgi files are correctly set. This isn’t the case. In any event, Elise’s instructions on how to safely upgrade to mt3.3 also apply for mt4. The steps I followed:

1. back up everything — ftp the entire site to my computer, exported all entries by clicking the Import/Export button, exported the database using myphpadmin
2. rename 3.35 folders — mt became mt3.35 and mt-static became mt-static3.35
3. place the mt4 folders in their proper place on my hard disk — the mt folder in cgi-bin and mt-static in the root directory
4. make a duplicate of mt-config.cgi-original and call it mt-config.cgi
5. edit mt-config.cgi to configure urls, paths, database and to copy the customised directives from the mt3 mt-config file
6. ftp mt4 files to the server
7. I did not copy plugins into the new installation — I’ll reinstall the ones I need after installation
8. change the permissions of all cgi files to 755
9. login as normal
10. hey presto! I got the Time to Update prompt
11. allow to update then return
12. afterwards change permissions of old cgi files to 644

I was then greeted with the new “back in black” dashboard. Heh, they even took the name from Wordpress. What I like about the dashboard:

• looks clean and sleek
• easy stats — though it’s probably more useful for a multi-authored, more complicated blog
• system-wide configurations — very useful for those of us with more than one blog in the installation
• switching to another blog brings me to (roughly) the same point in that blog rather than the homepage
• autosave
• easy edit entry screen, with tabs for body and extended body, easy selection of tags and categories (pop ups are gone forever, thank god)
• wysiwyg preview
• publish (what used to be rebuild) is faster and is on the main menu
• did I mention the shiny black header?

What I dislike about the dashboard:

• posting a new entry is now 2 extra clicks away; they desperately need to list all the blogs on the home dashboard page to give users one click posting (ie the old dashboard). I know I can set up bookmarklets but I don’t like them [ETA: there’s a plug-in which replicates the 3.35 screen which is great. my bugbear is that it’s at the bottom of the screen]
• the contextual menus activate far too easily, just mouse over accidentally and they drop down
• no breadcrumbs — going back and forth when updating templates (more later) was a nightmare of clicking, clicking and more clicking
• while the stats are interesting, it’s of little or no use for me as a single author on a personal site
• too much clicking