The New + Improved TypePad Hacks

Moments ago I pressed the Publish button, revealing the new design I've been working on for this blog. If you're reading this in RSS, please click through and let me know what you think!

I'm especially interested in any bugs that may occur in different browsers… I'm coding and previewing on a Mac and things look fine here when I view them in Camino, Firefox, Explorer and Safari but I wouldn't be the least bit surprised if I need to add some fixes to the CSS for Windows or Linux machines. If something looks wrong to you, please email me and let me know what platform and browser you're using.

Here's a list of the changes:

1. Went from a two column layout to a three column layout with both sidebars on the right. I figure it's about time to implement that hack. If there are any problems with the design, this is really where I expect to find them.
2. Updated to the latest TypePad templates to take advantage of built-in perma-linked titles and page headers for date-based and category archive pages. The old design was created based on templates that predated even "featured posts" which is another thing I'll be glad to have here.
3. Fixed the CSS that positions the top menu. (The link from the graphic header was spilling over into the menu area).
4. I played around a lot with the sidebar content. Among other things I added AdSense ads and the MyBlogLog widget. Basically, the idea is to use the right-most column as an area where I can play with widgets without slowing down the load speed for the more important things on the blog (like the posts themselves).
   
   Now I just need to find time to dig up some widgets that add functions I want! Suggestions are welcome… is there a widget that you'd like to see here?
5. I remixed the order and presentation of footer items. I moved FeedFlare and Technorati tags below the post footers. I added a little edit button so that I can quickly edit posts in the future (the hack for that is forthcoming… it's very useful). I'll probably make a few more changes in this area over time. I'd like to add a print version for each article, for instance.
6. I made the blog wider. Most of the stats I have show that people are using pretty large screens to view TypePad Hacks and since a lot of widgets are wider than 200px, I wanted to make room for a wider sidebar on the right.

Overall, I think the blog is a bit faster to load posts and maybe a bit more interesting in this format. There's still a bunch of stuff to do before I'm quite finished… I'd like to add a featured post that clearly shows the various resources available here. I'll probably redo the menu soon to reflect some new pages I'm putting together. I'm looking for a drop-down menu in pure CSS (instead of CSS and JavaScript), both for speed and accessibility.

The main thing I need to add is a couple pages offering blog design and consulting services. I've been getting quite a few requests lately to do custom templates and design and I'm enjoying the work. In fact, I've been getting so much work that I haven't had the time to write many posts lately, let alone set up a "for hire" page. Heh. Basically, I'm going to divide it up into three different workflows:

1. Custom Templates and Code: Hourly rates for custom work. This is mostly what I'm doing right now, and a few of the projects have led to developing new hacks for things never before seen in TypePad. I'll post about these projects as I go.
2. Hacks for Hire: A page that lists all the hack tutorials on the blog and gives readers an option to either DIY using the tutorial or pay a flat fee to have me implement the hack for them. I think a lot of readers might rather just pay to have stuff done (based on some of the comments).
3. Standard Package Deals: I'm going to put together two or three packages that include all the features, services and hacks I think should go into a well designed blog. Probably I'll do base packages for personal, professional and business blogs, with other features available on an a la carte basis.

If you have something in mind that you'd like to have me work on, drop me a line on the contact page or give me a call. It's going to be at least a week before I get the pages listed above put together… and if the calls keep coming in, it may even take a bit longer.

I will get back to posting new hacks soon. Promise!

Comments

[Posted: Jan 30, 2007 1:16:08 AM]

Okay, well, I found the first bug myself! For some reason my FeedFlare is not showing up since I moved it…

I'm working on it. It may be that the flare actually has to be within the post body rather than in the footer. Can anyone confirm or deny this?

[Posted: Jan 30, 2007 1:17:42 AM]

Also, the preview page for comments is acting a little bit odd… The comment preview shows up in the sidebar rather than the post area. I'll look into that too.

[Posted: Jan 30, 2007 9:20:16 AM]

Hi John,

It seems that you have different widths for the homepage vs. post pages. The home page is wider. I'm viewing in Firefox 2 and 1024x768 and the right most column stretches beyond the right scroll bar about half way. I wonder if the main area is just a little too wide. Thinning it up (say 500 pixels) may make it easier to scan and mitigate the scrolling. For what it's worth.

By the way, TypePad tech support says that the three column hack can be handled by using the custom CSS mitigating the need to use advanced template. I'd love to try that, but I have no idea what the code would be. Do you or anyone else out there for that matter?

Anyway, keep up the great work!

[Posted: Jan 30, 2007 10:34:52 AM]

I actually like this layout better. I've been trying to get my blog setup this way and have just created a copy of my template to test it out.

[Posted: Jan 30, 2007 11:39:50 AM]

I love the colors. I just recently redesigned my blog, but I have to say I am disappointed at the size of the sidebars. Several widgets I want to add will not fit. I really love the 3-column format though, so I'll probably just keep it. Nice changes!

[Posted: Jan 30, 2007 11:59:26 AM]

I'm quite interested in the hacks you talked about to print posts as well as the one for a button to edit posts. The latter is probably the one thing I miss about Blogger.

[Posted: Jan 30, 2007 1:07:28 PM]

I like this a lot better. Haven't seen any problems yet myself. I'm looking forward to a printing hack myself. I never figured out a great way to implement one, and I think it would be good for my book review blog (book-blog.com).

Hate to say it, but you should think of redesigning the banner. You need some flare!

[Posted: Jan 30, 2007 2:57:46 PM]

Thanks for all the comments so far, folks! I'll post replies in the order received.

Graham,

Yeah, tech support is right. The layout of all TypePad blogs is controlled by the CSS file. With a Pro account, you can change the CSS without even converting to advanced templattes by pasting the changes you want into the custom CSS field in Basic Templates.

I fixed the issue of different widths. Really appreciate the head's up since I hadn't bnoticed it before you said something. I used a test blog to build the CSS and Template code for the redesign so that I could make mistakes without being "live." The wider pages were referencing the stylesheet for the test blog rather than the final blog. Oops!

You can find a link to the CSS I used for this version by viewing source and looking for the link to the stylesheet in the header info. Eventually I'm going to create a layout with auto widths for the post column, but the code I used to do that on the test blog wasn't working in IE. I've got to figure out how to take care of that.

[Posted: Jan 30, 2007 3:06:02 PM]

Darla,

Thanks! Have fun with the new look over at your place… I'll post an updated 3 col tutorial at some point when I've solved the problems I'm having with display in IE.

Diane,

Looks great. I know what you mean about wide widgets… Since very few people have side barrs over 250-300 pixels, you would think more widget designers would take that into account! I'd really like to see most of them come in a 100 and 180 pixel width.

Tom,

Edit Post hack to come soon. Maybe even tonight! It's definitely the only thing about Blogger that I miss. I still haven't figured out the print page hack, but I'm pretty sure it can be done by creating a print-only CSS design and giving people the option to load that. What I need to work out is how to reliably apply that to the archive templates.

Hey Debra,

Heh. I will get around to redesigning the banner. Other things on my plate at the moment andd this redesign was mostly for structural stuff. Pretty soon I'll see about prettying up the site with some gradients, etc. First I've got to finish up the work for clients and write some hacks up though.

[Posted: Jan 30, 2007 4:58:00 PM]

The new layout is great. thanks for the link to the style sheet. I'm in the middle of trying to make a three col layout like this and it'll save me hours.

[Posted: Jan 30, 2007 8:15:58 PM]

Thanks again John...I look forward to the updated 3 column left tutorial.

I love TypePad, but my blog is growing and I need more control over layout, etc., but I just don't want to fool with the advanced templates. They just put me on a slippery slope of hacking when I'd rather be blogging. Nonetheless, I'm cool with tweaking. I would consider adding the custom CSS a tweak and not a hack.

Maybe you can add a column called TypePad Tweaks? Haha.

[Posted: Jan 30, 2007 8:23:09 PM]

Maybe not a whole blog called TypePad Tweaks, but it would be a great name for a category!

Actually, I really like that. There's a lot of stuff that's simple enough to fall into the tweaks rather than hacks category.

[Posted: Jan 30, 2007 9:28:25 PM]

great job on the new site!

[Posted: Feb 1, 2007 3:49:09 PM]

Very, very nice. i much prefer this to my own 3 col wordpress layout. I'm gonna have to steal it ;-) My only comment is: it's bigger then my camino browser window fullscreen on a 12" Powerbook. I just tested it in Safari and Firefox, ditto. Will email you screen grabs.

[Posted: Feb 1, 2007 6:58:46 PM]

Hey Satire,

Yeah, the current version is a bit wide (as mentioned, I think, in the post). My ultimate intent is to give the leftmst column an "auto" width so that it can fit nicely into different screen sizes. But when I tried that, I found quite a few incompatibilities with older versions of IE and some other browsers as well… IE displayed the columns in the wrong order, while other browsers hid the right most edge of the text column behind the sidebar (making it impossible to read the full post).

If I can find a CSS hack that will fix this, I'll go back to a fluid width for the text column. Suggestions welcome, BTW.

[Posted: Mar 6, 2007 2:31:54 PM]

Yo John....I need someone like you to help set a up a kick ass Blog. I have done some work on my typepad www.realestatezealot.com site...enough to know that I need someone else to help. I want to start a larger project and need some one to work with me by any means possible. I've reviewed your work and writings and would love to talk with you.

Mark Eibner 720-217-5853

[Posted: May 4, 2007 1:54:31 AM]

John T
Have used the three-column hack on my blog (http://aqualung.typepad.com/aqualung) - just wondering if you have had any luck sorting out the IE display - mine is certainly still h0rked when I look at it in IE6!

I have the left column set to width:auto - it seems to work better for most people who see the blog, but it's not perfect.