Hello there. I am Terry and I am a full-time undergraduate based in Singapore. I take photos, write a blog and design websites.

And no, I'm not a teddy bear.

Presenting teddY-risatioNâ„¢ Eta

First of all, I’m terribly sorry for being away from my blog for two weeks. It’s a personal record for being away for so long. The previous hiatus was 10 days – I beat it by 4 days! Heh. Okay, basically during that period I was trapped in the midst of my exams, ensnared by the repeated threats our lecturers threw at us about how hard the papers are going to be. But all thanks to them, I rammed up my pace and managed to not freak out when I read the question (yes, the papers were indeed hard).

Today is day 4 after exams. I cooped in my room for 4 solid days working on this theme. According to my theme count, this theme is the seventh theme I’ve made over a course of two years. So here it is, teddY-risatioNâ„¢ Eta, η.

teddY-risatioNâ„¢ Eta

So here it is, teddY-risatioN™ Eta, η!

The theme works well in Firefox 3, Safari 3, Internet Explorer 7 and Google Chrome. There is basic support for Internet Explorer 6 but due to incompatibility issues, the visual quality has been compromised for IE6 visitors.

Just as usual, I always have writeups for my new themes ;) Not only I write for my personal record but also to share with my readers of how this theme came about. I’ve included some links in the writeup, so if you’re interested in where I got the ideas from, you can find it out after the jump.

So here is a comprehensive list of the changes I’ve made:

1. It’s Sandbox again!

Oh boy, I just couldn’t stop loving Plaintxt’s Sandbox theme. It’s almost CSS free (sans the few necessary rules) and doesn’t require any knowledge of PHP – best for people like me! I must admit I don’t quite understand PHP and can utilise my knowledge of XHTML and CSS. So Sandbox is definitely where I will start off.

2. Typography

This theme is considered one of the most serious revamped I’ve ever made – the typography from the previous theme, teddY-risatioNâ„¢ Zeta, was not inherited at all. I’ve decided to create a new set of typography from scratch – in fact, the large-sized Verdana from the previous themes kept ticking me off.

My thirst for a better typography first started when I stumbled upon Ember’s blog. It just blown me away with his beautiful typography. I poked around a little, and I found Hemingway. Hemingway has been around on the Internet for downloads for quite some time but I didn’t know much about the importance of typography. After reading a book on it, I realised how important is it to have a readable and clean set of fonts – by choosing the correct font family, not overusing different types of fonts across the same page and colour.

For this theme, the major font family is Lucida Sans Unicode while the headers used Tahoma. The logo was changed from Calibri from the previous theme to Myraid Pro. I just love the way it looks like.

3. Layout

If you have visited this blog before, one of the greatest changes that you might not like it is actually the sidebar being switched position. Due to how the header elements are arranged, I have no choice but to place the sidebar on the left side.

The header section was slightly expanded to a height of around 300px or so, since I have to contain the gliding container in it alongside with the header menu. Designing the header was the hardest part because I had to decide the column width – and for the sake of consistency, subsequent sidebar and content container will have to inherited the same width.

The basic layout of the header section was inspired by  The Cosmic Machine’s Event Box page. I love how their logo appeared on the header and partially in the content. I didn’t exactly use the idea of the logo crossing the header and content border because that’ll require my header logo to be too huge.

I’ve used the 960 Grid System for the header and footer layout. I was forced to not use the grid system for the content area due to semantics reason – the sidebar should always load after the main content, but this is unachievable using the grid system. I stuck to the good old float and margin stuff.

4. CSS sprites

I always loathed the number of images that I have to deal with, especially when I am working on graphic intensive ones. After seeing how Jeff gave his blog, Perishable Press, a fantastic makeover, I peeked at his CSS code *weak smile* and realised that his backgrounds were CSS sprites.

This is how CSS Sprite works – images intended for different purposes are laid out in a grid, and then through CSS you will specify the background-position of the sprite you’re using. If you do check the background images of this theme (for Firefox users, this is easy!), it all breaks down into two big files – one is backgrounds.png and the other is small_icons.png. So throughout the entire layout, I am actually using that two image files but with different coordinates for each element.

5. Glider

The part I like about this revamp is that I can finally squeeze more content into the header. I was browsing through the CSS galleries when the glider on The Wojo Group homepage – very sleek and elegant, and saves space as well. I googled a little about the glider and realised that it was modified from Panic Coda‘s glider code. And then finally I dug out this Google Code site hosting the glider.js code. It’s very easy to implement actually, and you can see it in action here. Very handy eh?

The glider has a little problem dealing with iframes (not that I wanted to but because the tagboard uses iframe) but I guess that’s ok for me. I might be replacing it with something else… let’s see.

6. Archives

If you do take a look at the sidebar, the archives is pretty unique – I was reading Dean Jr. Robinson and Shaun Inman the other day and I really love the way they’ve organised their archives. Compact, clean and not visually obstructive. Mine is a little cluttered because of the sidebar width, but we’ll have to live with that for the moment being. Their minimalistic colour scheme immediately caught my eye and that was where I developed the colour scheme for the sidebar and the footer.

7. Revamped resources page

Check out the revamped resources page! I’ve completely abandoned the previous layout for a cleaner and more concise layout, that is easy to navigate. Besides having pages for my Photoshop and CSS tutorials, I’ve added an extra page for icon packs – just in case I’ll be developing any more in the future.

For the same reason, I’ve redesigned the pages for Photoshop and CSS tutorials. Now they look a lot cleaner and neater than before.

8. Footer

The footer has been greatly reduced to just two sections – older posts and tagclouds. Although the old footer was well-loved, I decided that it’s too big for my taste and I squeezed some of the stuff into the header. That’s why I love glider.js!

9. Cross broswer compatibility

Throughout the whole design process I kept cross checking between four browsers – Firefox 3, Internet Explorer 7, Safari 3 and Google Chrome. So far the design looks okay on the four browsers. Due to the Internet Explorer 6′s antiquity and it’s inability to support transparent PNGs, I’ve decided to forgo IE6 compatibility completely provide basic support for IE6 but at the expense of quality. Visitors coming through on IE6 will be served a message, encouraging them to switch to non-1990s browser :razz: heh.

So that’s it! I hope you’ll love the new theme!

Burn after reading » Now you're done reading. What's next?


Related posts that might interest you:


Posts that are popular among visitors:

Share it

If you've enjoyed the post, or think that it might be useful to others, do share in on a social network site that you're using. Thank you!

  • Digg
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks
  • StumbleUpon
  • Technorati
  • LinkedIn
  • Reddit
  • Design Float
  • Identi.ca
  • Live
  • Ping.fm
  • Print this article!
  • Twitter
  • Netvibes
  • HackerNews
  • Slashdot

60 responses to “Presenting teddY-risatioNâ„¢ Eta” » Leave a response

  1. PepperyResponse

    Wow, Teddy. I love your new theme (and blog, too!). You’re good at this. :)

    Check out Peppery’s latest blog post » State of the Nation

  2. RinResponse

    I love this theme! It is really clean and professional.

    As for the transparent pngs, have you tried twinhelix’s png fix?. It fixes the transparency problem, but due to the behavior tag in the css, it cannot be validated in the CSS validators which only supports up to CSS2.1 currently. Give and take, which really also makes me want to kill off IE6 haha. But then they make up like 21% of my site’s audience, thus I don’t feel like risking it.

    Check out Rin’s latest blog post » Procrastinators Unite!

  3. abiResponse

    Nice theme man! As usual a superb job :)

  4. sueResponse

    yippe wippe dipee! love the theme, and as always, ur cool lil rainbow logo, except it aint that little anymore!! aww no more shoutmix??

    Check out sue’s latest blog post » Interhouse Games of the 2 0 0 8

  5. VeronicaResponse

    I think the layout looks wonderful. You did such a great job on it. I hope you did well on all your exams.

    Check out Veronica’s latest blog post » A Night With Vern

  6. abdusfauziResponse

    oh man. u finish first. hahaha. well, congrats bro! [^^]

    Check out abdusfauzi’s latest blog post » Renungan : Tamatnya Tahun Pertama

  7. patResponse

    OMG! I’m so gonna take up computing lessons from you. :P Nice theme! Love the simplicity of it! So when are you free to *ahem ahem* hehe..joking. :P

    Check out pat’s latest blog post » Screwed

  8. WendyResponse

    Nice look! I don’t know if you get my e-mail about being unable to drop comments for the past few days. I sent in a few comments but somehow they couldn’t get through. I guess the problem is solved now.

    Check out Wendy’s latest blog post » Procrastinators Unite!

  9. sueResponse

    hellllloooo! haha now i found the tagboard. But now, i rather comment here =D
    Ohh thanks for the animated gif links =D its loading really slow now =(
    And yeah Im loving my photos more now, its because ive improved compared to last time =D
    And it rains alot here too, those pictures are outdated, as in a month ago’s. =D

    Check out sue’s latest blog post » We went to the beach, again =.=

    1. sueResponse

      EEEEEK! go post your past pictures!!! =D Ill be waiting

      Check out sue’s latest blog post »

  10. DestinyResponse

    Hey Teddy!! Great re-vamp!! I am totally in love with it! I love the glider effect especially!! If this is a Sandbox theme, I totally can’t tell it apart!! Heheh, I’ve tried sandbox themes before but they’re just not for me. I’m more of an adventurist… one day, I will visit the theme and come up with something spectacular for sure!! But you are always so inspiring!

    I’m glad you’re back!! Personal Hiatus just means you are actually responsible for your offline life as well… hope you are back for sure this time though!

    Check out Destiny’s latest blog post » The Hills & Dog Party

  11. BrandyResponse

    You’ve been buzzing about this theme on Plurk/Twitter. I’ve been looking forward to seeing the outcome. Let me say, it was worth the wait.
    This is a wonderful theme. You’re truly an inspiration, and very talented. Looks like you put a lot of hard work into this.
    I LOVE the Glider effect, although it took me awhile to pick up on it, seeing as I’m half asleep (I pondered, “Glider effect, what glider effect!?” prior to you mentioning it). I might have to experiment with it myself, one of these days.
    I’ve come across this theme as well, awhile back. http://wordpress.bustatheme.com/coda/
    However, I tried to modify it, so it would display the entries, instead of pages, but no such luck.
    Kudos to Teddy. =)

  12. MichelleResponse

    oh wow. i’m speechless and gobsmack!! love this new theme. as they all said, it’s very clean, neat, and professional looking. most of all, i love that you still managed to put in all the extra bits like the twitter, love the navigation pane and the archives!!! woot woot!!!

    Check out Michelle’s latest blog post » End Of Spring

  13. med

    hey coussie..hope all went well with ur exams ;) nice and easy on the eye layout you have here…keep it up

  14. Adam DanialResponse

    Congratulations on your new theme. It’s like a candy treat to my eyes visiting your page. I like the header which is by the way indeed very gorgeous. It’s simple it’s nothing the other websites have and that’s what I call creativity. I’m totally speechless. I’m sorry to ask this, but what actually Eta stands for? Is it Zeta, but it is shortened due to the simplicity? If it is, good idea on giving theme names! Happy holidays. Keep up on your good work blogging.

    Check out Adam Danial’s latest blog post » Hands up, Legs Down!

  15. IvyResponse

    OMG!!! This is an awesome theme!! Load very quickly. I’m guessing that it’s coded very efficiently. I’ve always loved the glider. I miss your gigantic blue footer though!

    Check out Ivy’s latest blog post » Nutmeg!

    1. IvyResponse

      @Teddy: You should definitely keep a larger footer. Or at least bring up the blue bit to include “Previously” and “Tagcloud”. It’ll make your page more balanced too!! :)

      Check out Ivy’s latest blog post » Nutmeg!

  16. emberResponse

    Wow! My blog definitely made a mere whiff compared to your revamp, Teddy!

    It’s nice to see how well you implemented the Lucida Hybrid method. Yes, typography definitely makes all the difference, though very often overlooked. And while we’re at it, isn’t Lucida just gorgeous? =P

    I’ve always wanted to try out CSS sprites too! Never got myself to try though..I might just try it in my next revamp. Speaking of which, you’re making me itching for a redesign myself. XD

    And there’s always the IE6 problem. Glad you decided not to ditch them entirely though. A depreciated version of the design is better than blocking IE6 users out completely.

    Awesome work once again, Teddy! =)

    Check out ember’s latest blog post » The day before.

  17. JayResponse

    No problem :) You deserved it! Also, that was the information I gave Ellin, but you gave me additional information that I’ll tell her. Thank you!

    Check out Jay’s latest blog post » Stop, Pause, and Reflect

  18. ChongxResponse

    looks like teddy has a new design! (: haha i havent been online for ages! tell me when your ass is in kl k?

    Check out Chongx’s latest blog post » Betong Trip

  19. JayResponse

    [continuing comment]
    When using firefox, if you view the smiles image properties when posting a page or post, the command for the smile still shows, so it’s still useful all the while.

    Check out Jay’s latest blog post » Stop, Pause, and Reflect

  20. jasonResponse

    I love the new header, especially the glider, cause it’s really cool! like how the shoutmix was adapted to the horizontal shape.

    I see more minimalism in each theme, and that really shows your passion and my ignorance to minimalism. Hehe.

    Unfortunately, I’m more partial to colour themes, but guess what, this theme is still very cool.

    Check out jason’s latest blog post » Alive and Not Mouldy

  21. tysernResponse

    WAHH, your new skin is so nice, aku damn jealous lar, oh yeah, i’ll be rotting away studying until thursday, and that’s when you’ll come back LOL, must make sure the 3 of us meet up in Pj alright.

    haha see you

    Check out tysern’s latest blog post » grrrrr

  22. AmarilysResponse

    Wow!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! I absolutely love this theme! You have really done an amazing job.

    The glider looks awesome :-) You are really inspiring me, and I’m actually thinking about using the glider on my future themes.

    I wish I had your talent Teddy :-)

  23. Vicky BResponse

    Yeh the prop 8 is so flippin useless..
    Love is bliiiind (as cliched as that is)

    When people bring up that “God says gay is wrong” they test my anti-violence way of life. I want to get a knife and stab them. Like you say, the bible doesn’t say gay is wrong. And besides, isn’t God meant to love everyone and everyones equal blah blah?
    I can’t understand why people follow religion so blindly. I have a friend who is like that, God is all and that’s that. There is no Buddah and every other religion is a lie. It’s crazy.

    Just wondering, so do you believe in the “Big Bang Theory”?


  24. AisyahResponse

    oh wow. a kick ass theme from Teddy! It looks very professional, theme and undeniably neat!

    Even without looking through the codes, I can tell that the coding must be one helluva code, such details, and such neatness.

    dang Teddy, you are amazing. ;D

    Check out Aisyah’s latest blog post » Today’s Randomness

  25. unerResponse

    hey teddy! what a great theme you have here! awesome, clean and great work! just love looking at it again and again. not much people prefer to have left sidebar, but yours look just nice. and that one thing for sure, your teddyrisation image still maintained, blue.. your color selection, header plan and placement, and overall design, all complement to each other. just great

    Check out uner’s latest blog post » Thematic, a FREE WordPress theme

  26. GiniResponse

    I love your new layout. Simple, sleek, and just plain awesome. Personally, I prefer a right sidebar, but you make the left one work really well.

    Check out Gini’s latest blog post » How to Create a Simple Menu Bar in Blogger, No Coding Necessary!

  27. MelissaResponse

    Again a wonderful new theme! It’s clean and simple! =D

    Good luck for your exam teddy! =)

    Check out Melissa’s latest blog post » November Sweets

  28. bongkerszResponse

    Awesome! I love this theme very much! Simple and efficient, damn you are good Teddy! Love the glider effects! I wish I have such talents..

    ps: You are a very neat person, outside the blog as well, Teddy? Haha!

    Check out bongkersz’s latest blog post » Alfred Jabu is not an empty tin! How dare you think he is one!

  29. hp84Response

    Congratulation for the launching of teddyrisation eta. One word to describe – marvellous!
    I believe you take into consideration the loading time for your blog, as the loading time has improve tremedously compared to your previous blog.
    btw, how are you? will you be in Singapore this Chrismas?

    Check out hp84’s latest blog post » or being a winner..

  30. gaTOResponse

    you are really talented. i want to design a theme of my own but too lazy and don’t have that much skills to do it and besides that, I’m not that creative kind of guy. hahaha..

    Check out gaTO’s latest blog post » A full Saturday

  31. My December so far - teddY-risatioNâ„¢Response

    [...] Presenting teddY-risatioNâ„¢ Eta57»Lo and Behold – LG KF700!40»teddY-risatioNâ„¢ Delta Released!34»Photographer’s Right – For Everyone.31»teddY-risatioNâ„¢ Zeta Logo30»Beautiful World27» [...]

  32. Compacting contents using Glider script | teddY-risatioNâ„¢Response

    [...] Presenting teddY-risatioNâ„¢ Eta58»Lo and Behold – LG KF700!41»Love is…?40»Venturing into infrared photography36»teddY-risatioNâ„¢ Delta Released!34»Stop Smoking!32» [...]

  33. That’s half a decade! | teddy-risationâ„¢Response

    [...] Released a new blog layout, teddY-risatioNâ„¢ Eta. [...]

Leave a Response » Share your thoughts or Return to top

Your name is required. Why?

  • So that I can address you personally (which I'm more than happy to do).
  • Everyone loves their name to be called, right? Nobody wants to be referred to as 'a certain someone' or Mr X (X-Men members aside).
  • If your post too much spam, your name will be imprinted on a personalised voodoo doll, completely free of charge. I'm just joking!

Your email is needed. Why?

  • Your email is, and will, never be given out to any third party under any conditions (except for people sneaking up behind me when I'm on WP admin).
  • So that I can contact you personally in case of certain issues that I wish to address personally.
  • If you post too much spam, I'll email the same spam you've posted 10 times back to you, completely free of charge.

You can always leave a personal URL behind

  • It can be anything - most people put their blog URL, their facebook page, their Twitter URL, their MySpace or etc.
  • I give love back by saying NO to no-follow. All of your webbie links are dofollows instead.

Twitter. Twitter. Twitter.

  • What is Twitter?: Twitter is a social networking and micro-blogging service that enables its users to send and read other users' updates known as tweets. Tweets are text-based posts of up to 140 bytes in length.
  • What is my Twitter ID?: To get a Twitter ID, you simply have to sign up for an account at Twitter.com. Your ID will be in the format of your profile's URL - http://twitter.com/[userid].

Comment notes

  • Gravatar: You can register for one at Gravatar.com
  • XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">
  • Codes: Wrap them up with <code></code> tags.

Hello Easter Egg hunter! You've discovered the magic of the Konami Code!

Yea. You probably know what the Konami code is before getting to this page. So now what? Here is a randomised YouTube video on my favourites list... which includes Rickroll, if you're luck enough to get it.

You are currently watching Natasha Bedingfield - Unwritten. Loving it? You can even watch the video in its full screen glory :)

The Konami Code:
Konami Code sequence