Usually every week, my only day to do “non-Caltech” stuff is Friday night. At Caltech, we don’t have weekends. We just do work all the time.
I’ve been seriously mulling over developing a new theme for my blog since last month, but since I only have about 4 partial days (Friday nights) each month to actually work on my own projects, the theme never got completed until recently.
I spent the first “free” day formulating a plan of attack on how to make a Tumblr minimalist-like theme by reviewing existing solutions. The three most popular ones are: T1, Tumble-hybrid, and Tumblejack. Both T1 and Tumble-hybrid are based off of the excellent Sandbox theme for Wordpress which allows amazing control over the presentation of the page using only CSS.
I decided to settle on modifying the CSS to T1 to make it look like the Tumblr minimalist theme. No sweat right? I could do this in a night.
Well, things don’t usually work out as well as you initially planned. The T1 css code, to me, wasn’t very well written (a lot of redundancies) and organized (including bad style) so I had to spend a lot of time deciphering it.
Time ran out and so I had to wait until the next Friday to continue work. Luckily, this was a weekend holiday thing so I was able to extend my CSS hacking into Saturday as well. I made fantastic progress those two days, figuring out some clever CSS tricks to have things be positioned correctly. I also did this cool trick by using jQuery to rewrite the HTML of conversations on the fly so that I could transform them into a list format (so that they could be presented like Tumblr conversations). I was feeling pretty good until I opened up the theme in Internet Explorer 7. Then all hell broke loose.
Well, it wasn’t that bad. The sidebar didn’t float right and the display of some items were off. But the general “look and feel” was there. At this point, I ran out of time so I left the “hacking CSS to make it work in IE” part to next time.
When the next Friday came around, I was all geared up for finishing this theme. I’ve dealt with making CSS work with IE before, and it usually involves adjusting some margins, padding, and other small things. It turns out that none of this was really applicable to the problems this theme encountered. IE just inherently interprets CSS different than FF in some cases. I couldn’t find a way, using floats, to make the theme work in both IE and FF. My enthusiasm dropped, and I commented to a house/dorm neighbor that it was impossible to fix this problem. It just couldn’t be done.
During the week leading up to the next Friday, this problem was stuck in the back of my brain nagging at me. I just spent all that time working on this theme, and if I couldn’t get it to work, I wouldn’t be satisfied posting to my blog. I want microblogging, dammit! As it turns out, I was taking a shower one night, and I thought of a way of using relative CSS positioning to replace the method of floating divs. It would work, I thought!
So on Friday night, I sat down to implement this relative divs method, and in Firefox, it worked perfectly. In IE, it worked, but then messed up the rest of the content of the page. I fiddled around the the CSS a lot, but couldn’t fix this problem. Time ran out.
Well, I kind of broke my Friday night rule, but yesterday night, I was determined to fix this problem, so I tore down all existing CSS code and rebuilt it line by line all while monitoring both FF and IE to make sure they looked the same at both stages. Surprisingly, I learned a lot from this since it was actually some poorly written CSS code that contributed to IE messing up the layout. FF is more forgiving when interpreting ambiguous CSS. I tracked down some offending lines and cleaned up the CSS code. And thus, I finally put it in production-beta use where I can fix things on the fly.
Well, if you encounter any problems with the theme. Leave a comment or email me!