shiny parts

new personal page

Tue, 30 Dec 2008 21:11:27 +0800

New personal page, last one this year. hey, at least there's an update in less than a year.

new personal page

Mon, 22 Sep 2008 19:22:43 +0800

After more than a year, I posted a new personal page. No big difference from before, indicating that either a) my life hasn't changed from a year ago or b) my life is so boring that it doesn't change.

tumbles

Sat, 29 Sep 2007 19:24:12 +0800

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.

about

Tue, 18 Sep 2007 07:54:27 +0800

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.

create it as a page
note down its page id -- in manage pages hover on the title and it gave me id=1976
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:

<$MTPageTitle$>

<$MTPageBody$>

<$MTPageMore$>

I could have scrubbed the page detail code more, but I left it as default.
in the main index call the module using mtinclude
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.

embed sound

Wed, 12 Sep 2007 23:37:18 +0800

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.

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.

static pages

Sun, 09 Sep 2007 21:19:02 +0800

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

Sat, 08 Sep 2007 22:29:17 +0800

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.

logo

Fri, 07 Sep 2007 22:01:37 +0800

I got tired of the fugly minimalist white header and boring text at the top so I made myself a logo and new header. 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.

hidden doors reset

Thu, 06 Sep 2007 23:01:47 +0800

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:

<$MTInclude module="Header"$>

<$MTInclude module="Disclaimer"$>

<$MTInclude module="Categories Summary"$>

">archives

<$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.

title="<$MTCategoryLabel$>">

<$MTCategoryDescription$>

<$MTEntryTitle$>
| downloads

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 sort_by="title" sort_order="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.

mt-archive-listing mt-

<$MTArchiveTitle$>

<$MTInclude module="Header"$>

<$MTArchiveTitle$>

Recently by <$MTArchiveTitle$>

<$MTGetVar name="page_title"$>

<$MTCategoryDescription$>

<$MTEntryTrackbackData$>
<$MTInclude module="Entry excerpt"$>

<$MTEntryTrackbackData$>
<$MTInclude module="Entry excerpt"$>

« <$MTArchiveTitle$> |

">Main Index |
">Archives

| <$MTArchiveTitle$> »

<$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.

<$MTEntryTitle$>

<$MTEntryExcerpt$>

Date: <$MTEntryDate format="%e %B %Y"$>

Word count: <$MTWordCount$> words

<$MTInclude module="Tags"$>

continue reading <$MTEntryTitle$>.

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.

« |

»

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

tabbed navigation

Wed, 05 Sep 2007 14:49:01 +0800

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.

home

words

pictures

places

taste

technical

about

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;
}

small style changes

Sun, 02 Sep 2007 22:18:38 +0800

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.

movabletype 4 upgrade - styles

Sat, 01 Sep 2007 16:38:38 +0800

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:

custom styles like float and box elements are not implemented
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
entry container is too close to the sidebar
narrower container, something that looks like Kubrick
calendar is too cluttered
difference in list behaviour in sidebar -- look at the admin section and the recent posts section; the line heights are inconsistent
fonts -- cripes I really don't like trebuchet, I prefer verdana; then again it's miles preferable to a serif font
font colur = #666, not #333
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
sidebar links to behave differently to main links -- not blue, probably the same colour as normal text
borders on images and linked images to be dictated by the html not the stylesheet
comment form too prominent
add an "all tags" link -- okay this isn't stylesheet but I need to do it too

movabletype 4 upgrade - templates

Sat, 01 Sep 2007 15:39:53 +0800

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

retrieve index txt files from the backup
create a new blog -- I've talked about the recipe section for years, now is the perfect opportunity
set preferences
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
check out the new archive templates -- again no configuration needed, I'm still learning
click on template modules -- look at the building blocks

configure header to show site name
edit entry metadata so it shows preferred date format and category
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
talking about widgets, these are great ... pretty intuitive
no change to system templates
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

start with the travel section -- fewest posts, and I figured this is the one section I can afford to completely rebuild if necessary
check preferences
under Design>templates go first to the index template section, take a deep, cleansing breath and delete all the templates
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
repeat with all templates -- this will take about an hour of intense ⌘-c and ⌘-v
some of the templates can be just refreshed (menu under more actions) but just to be pedantic, it's worth double checking each one
save and publish
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.

movabletype 4 upgrade - installation

Sat, 01 Sep 2007 14:19:33 +0800

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:

back up everything -- ftp the entire site to my computer, exported all entries by clicking the Import/Export button, exported the database using myphpadmin
rename 3.35 folders -- mt became mt3.35 and mt-static became mt-static3.35
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
make a duplicate of mt-config.cgi-original and call it mt-config.cgi
edit mt-config.cgi to configure urls, paths, database and to copy the customised directives from the mt3 mt-config file
ftp mt4 files to the server
I did not copy plugins into the new installation -- I'll reinstall the ones I need after installation
change the permissions of all cgi files to 755
login as normal
hey presto! I got the Time to Update prompt
allow to update then return
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

favicon in bloglines feeds

Tue, 28 Aug 2007 12:00:00 +0800

I have about 30-odd feeds on bloglines, which is around average. According to their faq the average is more than 20 (I wonder how more than a certain number can be considered as average). I subscribe to quiet thoughts and pizzaorme -- so I can be notified if there's a comment on my website; and to keep track of mm. :) What's always been a niggling annoyance is that my favicon doesn't appear in either feed. I've noticed more and more of my feeds getting their favicon "noticed" by bloglines, but it's been at least 2 years and mine is still blank. I know it's probably cos the favicon is in the root directory whereas the feeds are in their own folders. Googling pointed me to a couple of forums but the answer seems to be "email bloglines with your url". Not satisfactory, and I imagine not bloglines' preferred method. It was easy when I found it. I need to Claim my urls first, by going to my profile and clicking on Publisher Tools. I entered the site url and it found the 3 feeds: rdf, xml, atom. I then needed to do 2 things to prove my ownership:

make a new post with a code they gave me
add a code to the index template

Clicking on Verify and it confirmed that I managed to claim 2 out of the 3 feeds. For some reason the rdf feed didn't authenticate, probably because it's old. I subscribe to the xml one anyway, so it was fine. Once verified, I returned to the Publisher Tools page and there was an Edit link next to each feed url. I was then able to specify the location of the favicon in the edit menu. I wonder why this isn't in the Help section, or at least more obvious.

shiny parts

new personal page

new personal page

tumbles

about

<$MTPageTitle$>

embed sound

static pages

gallery

logo

hidden doors reset

title="<$MTCategoryLabel$>">

<$MTArchiveTitle$> Recently by <$MTArchiveTitle$> <$MTGetVar name="page_title"$>

tabbed navigation

small style changes

movabletype 4 upgrade - styles

movabletype 4 upgrade - templates

movabletype 4 upgrade - installation

favicon in bloglines feeds

<$MTArchiveTitle$>

Recently by <$MTArchiveTitle$>

<$MTGetVar name="page_title"$>