teddy-risation Theta released!
So here we have, the eight teddy-risation WP theme in it’s fully glory. Just like the other write-ups that I do for my previous themes, I will be doing one for this one as well, no exceptions. Not only does this entry helps to catalogue my list of themes and my insights of designing them (I have goldfish memory, so a backup medium for my cranial storage is needed), but I hope it will also inspire others as well.
teddy-risation Theta is coupled with the tiny rebranding movement I’ve embarked on, to ditch the funky (and not very impressive) capitalised letters in the site name and my nick as well. Known by the pseudonym ‘teddY’ in the past, I am now changing back to ‘Teddy’ or as simple as it gets, my real name, Terry. You can address me with both names now, I really don’t mind, no worries!
This theme took the longest to design – the date of its conception was actually somewhere during and after my first year final semester examinations. Ideas always have to came at the wrongest of all wrong times, don’t they? I did a simple sketch on what I wanted on paper, and moved on to my studies. When the exams ended, I immediately started materialising the layout in Photoshop, starting from the header section.
Theme Hybrid
Theta is actually a child theme of Theme Hybrid. It is a free WP theme and you can modify it in anyway you want, or even create your own child themes that rely on the Hybrid framework. I did modify a few core files on the Hybrid theme, but other than that, all the styling and customisation you see here leaves the original Hybrid files completely untouched. That means that I can easily update my theme when Hybrid issues one, without breaking my child theme.
In the past I’ve always used Sandbox. However, I’ve decided to try out other new WP themes because sadly, the Sandbox creators have paused the development of the theme and the future is rather bleak. I have to say that I really loved working on Sandbox, Andy and Scott – I really appreciate the support and help you’ve rendered to users of your theme and your dedicated effort. Because of that reason, I realised that I have to start learning how to work on other WP themes – out of the many available options like Thematic, WP Framework, Whiteboard and The Buffet Framework, I’ve chose Hybrid… for just one reason – the main colour scheme is greyish blue. What a biased choice, isn’t it?
Hybrid was a little hard to tame at first, I find myself constantly referring to different files in the library for hooks, filters and etc. The styling was a little more challenging to do, because unlike Sandbox that came in plain and simple, Hybrid has a basic stylesheet built into it and it takes time to figure things out. One thing I really love about Hybrid is that it has wonderful typography – while I have inherited the font family from the previous theme, the spacings and arrangement of text-based elements are all inherited wholely from the 22px stylesheet. Hybrid comes with a few different stylehsheets – 18px, 20px and etc, indicating the line height. I wanted my text to be more spaced out, so I picked 22px.
Randomity, and the essence of it
This theme incorporated some interesting randomity in it – the gallery images in the gallery window changes everytime you load it – not only does the array of images displayed changes, their arrangement is also jumbled up upon each reload. I’ve combined several shuffling and randomising techniques to achieve that, maybe I’ll blog about it later :) if you want it, just tell me.
Another one is the Twitter users that I follow – I have their avatars displayed in the sidebar. I have a lot of them, but I only randomly display 14 of them while the rest is hidden so that I do not clutter the sidebar up. It’s a lot of PHP stuff that I had to do, but it was fun! I spent one whole day just doing the PHP part for the Twitter widget. Tedious, but very fun and enlightening.
Fonts and sIFR
The main typeface I use for the headers and the introductory paragraph is Alte Haas Grotesk by designer Yann le Coroller. The fontw as featured in the previous week’s Fonty Friday feature, which I run on a weekly basis. For the logo, I used Colaborate Regular by Ralph Oliver du Carrois.
Since not everyone has Alte Haas Grotesk installed in their computers and that the CSS support for @font-face is rather patchy, font replacement methods, whether is it by flash or by images, are preferred. I did a little research and decide to settle for sIFR – Scalable Inman Flash Replacement. I’ve made sIFR to only replace post and page titles, so that I won’t overload your computer and make performance sluggish – anyway, it’s really, really not recommended that you use sIFR for a big chuck of text! Keep it to headers only :)
Javascript-powered feautures that gracefully degrades
One feature that I put in a lot of effort struggling to make sure that it gets incorporated into the theme is gracefully-degrading javascript-powered features when javascript is not available or disabled. As you know, many sites nowadays are powered by javascript and many of them actually breaks when JS is disabled – a good example will be YouTube – try disabling JS in your browser and see what happens.
Most of the effects you see here are powered by jQuery, a very light-weight javascript library that helps you to achieve many things that requires advance knowledge of javascript in the past. Simple actions like the toggle effect in the comment form (try clicking on the labels and see what happen) and in the Twitter section on the sidebar (visible on main page only) are easily achieved by knowing just a little bit of jQuery. Lovely, isn’t it?
jQuery also allows me to select last-child of a parent element – the :last-child pseudo-class is not very well supported in every single browser (hint hint, IE6) and so we can actually use jQuery to insert a class to the last-child. If JS is disabled, the visual impact is not too obvious to be seen while in most JS-enabled visitors, it helps to achieve a uniform, consistent appearance of list items and etc.
jQuery is also used to create the fading effect of the header navigation links, as well as the Next and Prev buttons of the gallery window in the header. I might be writing a little more about how that is achieved in the future, but I shall not bore you to death in this entry.
I’m still learning how to use jQuery, so in this theme’s functions.js file, I’ve also added annotations and urls to useful websites for first-time jQuery learners. They are excellent resources where one can start learning jQuery, with little prior knowledge of any programming languages.
The 404 page
For this theme, I’ve also designed a cute little 404 page that people will land on if they’ve followed a broken link (it can be any, but I ‘m giving you this for convenience’s sake). Check it out!
Improved gallery
Last, but not least, the Gallery page has been improved upon too. Without the obstruction of the sidebar, there’s now more space for photos, heh!
That’s all!
I guess I shall keep this post short. If you have any questions, feel free to shoot! Anyway, I have a question for anyone who’s reading this: what WP themes do you use for your theme framework? Do you create a theme completely from groundup, or modify existing themes (like me) ?
Too awesome, Teddy! This has gotta be your best theme yet!! Love the header and footer background! And your 404 page is teh funnies! Good job, really loving it!
Check out Ivy’s latest blog post » An Night of Adventure in Singapore
Thanks Ivy! The header and footer actually share the same background – it’s just that I’ve rotated the background in the footer to make sure that it’s not repetitive and boring, heheh.
The 404 page is my first! I’m still yet to write something that’s intelligent and funny for the page, maybe I’ll start hitting other blogs’ 404 pages for more inspiration.
Looking amazing, Teddy! You’re good at this! If only i had a clue what to do when it comes to making my own blog theme.
Hey Harrison, thanksf or the compliments! Actually I’ve been wanting to create a new theme many months ago, but I was totally clueless of what kind of look I wanted so I browsed quite a handful of CSS galleries online.
If you’re looking for inspiration, I recommend you Mephobox – it started off as a personal collection of sites Justin likes, and now he released his collection to public. Lots of great designs in there!
TEDDY. I love it! I was not expecting it to be done so soon. Especially since you just teased us with a snippet yesterday!
It looks soo lovely. Definitely your best layout yet. It’s so odd how we have such similar taste in WP themes. I adore the simplistic and minimalistic side of it — as well as the typography!
It’s so very sleek and stylish. I especially love how well organized it is (so important to me! haha) The gallery is just amazing, I have been wanting to implement something like that into one of my layouts. Speaking of which, I totally don’t want to finish my theme now.. damn you. I can’t compete. :P
I think I should tell you that on the comment page there’s an error in small letters in the top left corner stating “FireStats error: FireStats: Unknown commit strategy” which pushes the rest of the layout’s content a few 10 or so pixels down.
Oh, and on your calendar.. for 2009, the month of May’s link is the same as April’s. :P I noticed that a little while ago.
I’m drooling over the cleanliness of your sidebar, I love it!! Really digging the twitter avatars too, that’s too cool. Damnit, now I wanna implement a sidebar into my new layout so I can add all kinds of widgets and stuff! :D hehe
Really impressive though, Teddy. Great job! Now all you need is to get a faster/better internet host! Mwhaha :P
Check out Latrina’s latest blog post » The five finally together.
Thanks for the compliments! I thought it will take another two days or so because I forgot that when I get the basic layout done, I can pull the layout into other pages as well and that’s a breeze. I’m still fixing some issues with the theme, but so far so good.
I tried to keep things simple this theme – while the previous theme is also quite well organized, I stuffed too much information on the page – the gliders and the horribly long sidebars. I gave up quite a lot of elements in this new layout – the calendar, tagboard and random Flickr images have to go.
No, you don’t have to compare, really. The appearance of a blog should be geared towards meeting your personal goal and your visitors needs, so there’s really no basis of comparison between layouts :) don’t let that stop you in your tracks, okay? If you need any help, feel free to contact me and I’ll try my best to help, no worries!
Oh, regarding the FireStats error, that’s because sometimes my blog runs low on PHP memory especially when the traffic is high or the local ISP decides to screw things up again. I’m thinking of disabling FireStats anyway, because it’s consuming too much database space and bandwidth. I can always depend on Google Analytics – I actually have several monitoring plugins installed for redundancy. I run SiteMeter, Google Analytics and FireStats at the same time. Thanks for pointing out the link error! I’ve corrected it, teehee.
I remember that your layout is a one-column one, right? You can add them in the footer too :)
p/s: I think I’m going to HostGator, thanks for the recommendation! I sent you a mail on Facebook for more information, heh. Thanks!
Very, very good-looking, Teddy! Give yourself a pat on the back for all the hard work! =D
Really loving that noisy abstract you have going on in your header! I just can’t stop staring at it. And all those jQuery eye-candy you have on the hovers are really soothing. I’m already addicted to playing with your main nav-bar. =P (Oh, and your AJAX gallery kicks-ass!)
I’m really surprised you took a break from your usually medium-sized typography for your paragraph text! Large text never looked so good! =)
Although your sIFR titles isn’t yet showing for me – I’m pretty sure because of the usual flaky Streamyx connection but I’m dying to see how your post titles look like! Rest assured, I’ll check back later. =D
Great, great work once again, Teddy. Keep it up!
Check out ember’s latest blog post » Earth Hour ‘09
Thank you ember! The jQuery-powered navigation was a little bastard to tame because I’m new to the language and phew, took me ages to get it right. The AJAX gallery is actually powered by Slickr Gallery, it’s very useful if you want to display your Flickr albums.
I’m getting a little tired of medium-sized typography because sometimes I find myself squinting at my own entries, hah. When I saw the original Hybrid theme I told myself that the typography is just perfect.
The sIFR titles load the last, that’s probably why. Other slower loading scripts on the page also slows the rendering of the sIFR texts, and to make it worse I have a patchy host. As per Trina’s recommendation, I think I’m moving over to HostGator when my current plan expires in a month or so.
Have a great Sunday!
oh my. you really really make me feel like cashing out money to use wordpress now. mama mia, this is this is ________ ok i can’t really find a word for it but its better than good.
i like how the bottom of the page matches with the top of the page, the jagged lines, smart!
and you used custom fonts! yay, like me!
and the dashed lines surrounding your sidebar, like me too!
although i do miss the scrollable thing on the header you used to have.
now now, how much does a web hosting plan cost again?
Oh, it’s actually not very expensive to get your site hosted – local hosts offer around MYR150~200 a year, inclusive of domain renewal and etc. Mine is around MYR150 per year.
Thanks for the compliments. I removed the glider in the header because although it helps to squeeze a lot of content into a small space, not everyone pays attention to it. Plus, a more rudimentary form of the glider still exists for the header gallery window, teehee!
Its awesome dude… Very nice theme :) Love how simple it is yet superb! Well done
I just love this theme :) Neat and simple. :D
dear teddy bear, whoops! I mean terry,
Wow, your latest theme is just better than ever! IMHO, the previous one is a bit too crowded. But hey! The brand new Theta version is really good! Love it.
And yeah you should nix that Y and N capital letters of your personal brand. Hehehe.. Now it looks more professional.
Well done, terry! I’m looking forward for the next posts. :D
Check out Oridusartic’s latest blog post » The Wrong Plan
Thanks for the compliments! I have to agree that the previous theme is a little too crowded – I tried too much to cram so many things into just so little space.
Looks like the rebranding thing went well with you! Glad to hear that, heheh.
wow 150 per year hahaha sort of a hefty price tag, eeeeks too bad i think ill just have to stick with the old blogger =( unless someone decides to sponsor me?? hehe. *hint hint*
Check out sue’s latest blog post » My sexy square box
Actually I have bought a domain but I’m not sure if I’m going to switch host… if I’m switching this year, I’ll have to wait for the transfer to be done before opening it up for free hosting :)
[...] Yay, revamped my blog layout. Here comes teddy-risationâ„¢ Theta! [...]
Damn, this site looks great! Just like your previous one I must add.
I found your site after you commented on my list of Photoshop Alternatives a few months back and I thought I’d have a look-see at what you were up to. This is awesome mate, great job!
Gonna come back every now and then to see what’s going on.
Cheers,
Sietse “DuckbillJones” Smith
p.s.
I do realise I’m VERY late congratulating on the new design ;)
Thanks for your compliment, teehee! Ah, now I remember your entry *chuckles* thanks a lot for plugging me anyway! You rock.
Ah, no problem with the late congratulations. It’s never too late! I should check out your site more often too, heh.
Happy belated Halloween and take care!