I tweaked this site's layout just a few days ago by mainly changing my CSS style sheet. The layout still does not display properly in anything other than Internet Explorer on the Mac but I like the new look better, of course! I reduced the colors on the page by replacing the dark orange with the red used in my masthead. I also made all titles lowercase and changed the boxes I had around the titles to just an underline. The spacing is opened up a bit as well.

I plan on using tables (perhaps just 1 more) and a single masthead graphic to fix the problem with the layout displaying incorrectly (or not as I intended) on most browsers.

Shortly after upgrading Movable Type to 2.51 I was able to quickly add a search function (see down below to the right) by cutting and pasting the following code into my Main Index template:

<form method="get" action="<$MTCGIPath$><$MTSearchScript$>">
<input type="hidden" name="IncludeBlogs" value="<$MTBlogID$>" />
<label for="search" accesskey="4">Search this site:</label><br />
<input id="search" name="search" size="20" /><br />
<input type="submit" value="Search" />
</form>

I also plan on revamping this layout which has never displayed properly on a Windows PC. Actually, it only works as I had planned on a Mac in Internet Explorer. On a PC, section borders don't align and my headings on the right lose their left border and margin. (If you're using a PC, here is what it's supposed to look like.)

I do most of my entries on an Apple PowerBook G4 laptop but I'm on my desktop PC now and I can see a huge difference in the colors as well. For instance, on my PowerBook the red photo in my masthead above closely matches the "thetoms" text but on my PC the photo is brighter and too saturated. I think the main reason for such a big difference in color is the display. Laptop screens in general are not as bright as desktop displays (both LCD and CRT types) and as a result colors are muted quite a bit. I noticed this before when I hooked up my PowerBook to my Sony LCD display — the external screen was much brighter with more contrast and the colors were much richer. When I redo my template, I'm going to be sure I use a desktop display. And I'll test the whole thing out on my PC as well!

I should add that sooner rather than later would be a good time for me to update my layout and templates since I've just refreshed my knowledge of HTML and CSS (Cascading Style Sheets) from a project I'm in the middle of working on — updating http://www.bbdo.com.hk with our new logo and corporate identity. To ensure compliance with our new corporate identity guidelines, I copied http://logo.bbdo.com (our new corporate identity site) almost exactly (coding is different though)!

Just upgraded Movable Type from version 2.21 to 2.51. Process involved downloading Movable Type 2.51 Upgrade Version, uploading files to my server's mt directory (replacing old files/directories), setting permissions of *.cgi files to 755 (chmod 755 *.cgi), deleting mt-upgrade*.cgi files (rm mt-upgrade*.cgi), then rebuilding site. Important: For extlib directory, transfer over contents of that directory — don't just replace entire directory. Full upgrade instructions are here. Not sure what new features I can take advantage of yet... Local blog search would be nice. Will see...

Oh, before I upgraded, I exported all my entries to a text file (Utilities => Import/Export button) and I FTP'd over the db directory on my server to my local disk as backup.

Quick Note: I just updated Movable Type from version 2.11 to 2.21. Upgrade only involved FTPing updated files to my server, replacing any existing files and folders that have the same name. No real big changes from previous version. Major addition was ability to use MySQL to store data (instead of Berkley DB) and "TrackBack, a peer-to-peer framework for communication between weblogs".

I'm anxiously awaiting the "post via email" feature that I hear is currently in the works.

Erase this message and you'll never see it again. ( - Phentermine) http://www.fda-phentermine.com 46.4070911825733

In Photoshop, I've come up with a new banner (click pic for full size):

Modifying my stylesheet (yes, I'm gonna use "style sheet" as one word from now on!) and index template to get it to match that exactly is proving difficult though. I'm stuck actually! With a lot of modifications and trial and error over many hours, this is the best I've got so far (click pic for full size and see that the border doesn't line up):

I have thought about doing this using a table with, perhaps, 2 separate pictures but if possible I'd like to keep the text as text and use only CSS but... we'll see. Perhaps I'll just modify my layout!

BTW, I just discovered that only Internet Explorer (IE) for Mac properly renders my CSS code. If you're using anything else, compare what you see with this screen capture of this page in IE for Mac (click pic for full size and see the headings on the right column):

Oh, well, it's late and I'm tired so I'm going to sleep soon and will tackle this again tomorrow. I think I might actually buy a book on CSS tomorrow. Good night! BTW, TGIF!

Well, what do you think? I hope you think this new page design is an improvement! In customizing the design I certainly learned a lot about CSS, even though the layout is essentially the same. Good CSS references I learned from:

http://glish.com/css/
http://www.wrongwaygoback.com/designforlife/customise.shtml

I also changed the pop-up window that you get when you click the Webcam picture on the right. Using Javascript, the pop-up window is sized properly without any toolbars or scrollbars and includes a button to close the window.

I have to give credit to Steve Ivy of RedMonk.Net since I pretty much copied his blog's masthead. I sure hope he doesn't mind!

Yup, I've been studying CSS (Cascading Style Sheets) today so very soon this site will take on a whole new look after I modify this site's style sheet and templates. What I did to help me learn was to print out this page as it looks in a browser (page layout), and print out this page's linked style sheet and HTML code (source). On the layout, I then marked up all the code used in the various sections of the page, referencing both the style sheet and HTML code. I still have more to learn but that exercise was really helpful.

Oh, yesterday I modified this page's template to add that Webcam picture on the right. That picture is updated every 15 minutes. Right now if you click on the picture, a new window will pop-up with the full-res version of the picture, at 640x480 pixels. Just now I have modified some Javascript that will pop-up a new window without the toolbar and scrollbars and will add a title and a button to close the pop-up window. I won't be implementing this until tomorrow though... It's past 1am now so I'm going to sleep!

Added this to my Style Sheet so that all sample code stands out and looks clean:

pre {
	font-family:geneva, verdana, arial, sans-serif;
	font-size:11px;
	color:#333;
	line-height:15px;
	background-color: #EEE;
	border: 1px solid #333;
	padding: 2px;
	margin-left: 30px;
	margin-right: 75px;
	}

I modified my Main Index template to add code "donated" by David Gagne that adds a hidden "Edit This" link for each entry. In my case, I decided to make the hidden link that vertical bar "|" in the "Posted by" section (at bottom) of each entry.

Here's David's beautiful explanation:

	<MTEntryIfAllowComments>

<!-- Start addition -->
<a target="_blank" title="admin" onmouseover="window.status=
'edit this entry'; return true;" onmouseout="window.status=' '; 
return true;" href="<$MTCGIPath$>mt.cgi?__mode=
view&_type=entry&id=<$MTEntryID$>&blog_id=<$MTBlogID$>">|</a>
<!-- End addition -->

	 <a href="<$MTCGIPath$>mt-comments.cgi?entry_id=
<$MTEntryID$>" onclick="OpenComments(this.href); return false">
Comments (<$MTEntryCommentCount$>)</a>	
</MTEntryIfAllowComments>

Some code I added to the Main Index template:

<!-- Start addition -->
<div class="sidetitle">
	Categories 
</div>
<div class="side">
	<mtcategories>
		<a href="<$MTCategoryArchiveLink$>"><$MTCategoryLabel$></a>
		<br />
	</mtcategories>
	<a href="gallery/" target="_blank">Photos</a> 
</div>
<!-- End addition -->