How Not To Develop An E2 Zen Theme: A Cautionary Tale

Recently I decided I'd like to have a crack at CSS and make a Zen theme of my own.

I did not know anything about CSS at the time, and I do not know much more than that now.

I was messing around for a while, gradually building up a colour scheme and style that I liked (I personally don't think there's much wrong with E2's default layout), but not initially knowing that Opera - my browser of choice - appears to cache stylesheets and not thinking to try a CTRL+refresh, I moved over to Firefox for a slightly easier developing life. After a few days of poking it to see how it twitched when I did, the Firefox theme was more or less complete.

It will probably surprise few to hear that when I loaded this theme up in Opera, it looked absolute gash. The layout was completely broken, and since my theme uses intersecting borders as separator bars for several sections of the page it's important that the various elements align as they should.

Now having actually thought to try forced refreshes on Opera, I moved over to develop it there. Still wrestling with how alterations to different CSS element properties affected page layout, I decided that rather than try to force the square peg of my Firefox theme into Opera's, um, round hole, I would start it again from scratch. Fine.

After another day or so of prodding the theme was progressing nicely, but I was frustrated by small details. Portions of pages were not quite lining up as they should which, as anyone who knows me will not be surprised to hear, drove me absolutely nuts. I just could not figure out what was calling this misalignment of elements, and they had to be pixel-perfect.

My last resort, after trying to reposition various things and it having no effect on the alignment problems, was to "remove" various elements of E2 pages from my style; I use quote marks because I was not actually removing these elements, just setting them to not display. Those elements would still be present in the pages that E2 was serving to my browser, but as per the stylesheet's instructions it would not display them. Fair enough so far.

So I started plodding through my stylesheet, "removing" elements one at a time in the hope of eventually removing the one that was breaking the layout.

Before I continue it's worth noting a couple of things. Firstly, I was using browser tabs to develop my stylesheet. Tab A contained the edit page for my theme, and tab B contained a random writeup. Whenever I updated the theme in tab A, I would do a force refresh on tab B to see how the changes affected the way E2 rendered. I never did a force refresh on tab A, in case my changes caused the layout to go all loopy and stopped me from undoing them for whatever reason.

Secondly - and this is more for the benefit of those who haven't read Simulacron3's various nodes on Zen theme development, or aren't coders here - every E2 page consists of three basic elements: the header (which contains the 'Everything2' masthead and the search box), the mainbody (which contains writeups and their edit windows) and the sidebar (which contains all the nodelets you have chosen to have visible).

I guess some of you can probably see where this is going.

I was plodding merrily along, removing elements one at a time, over and over again seeing no change to the aforementioned alignment problem. This became somewhat automatic; pasting "display: none;" into a CSS statement in tab A, refreshing tab B and seeing the same broken layout. Usually accompanied by a sigh.

So yeah, by the time I finally reached my stylesheet's #mainbody statement and pasted "display: none;" into it, a horrific inevitability had long coloured the proceedings.

I refreshed tab B and, after the customary pageload delay, frowned at the result. For a few seconds I wondered where E2 had gone. As the moments passed, my eyes widened and my mouth opened slightly as I realised what I had just done, and flicked back to tab A only to be confronted by another gaping window of blackness. I spammed the 'back' button in both tabs, but was only greeted by the same accusatorily blank page.

Without thinking, I had set the mainbody section of all E2 pages to be invisible.

The mainbody section contains all nodes and their edit windows. It also contains the edit window for stylesheets.

The very nature of the error I had just made prevented me from correcting it.

I flicked over in my head what I could do now. I initially assumed the worst case: that I had to all intents and purposes incapacitated my E2 account. This isn't nominally the end of the world, but unfortunately in this case, all Zen themes are visible and available for consumption by any registered user! Anyone that tried my theme would also lose a major part of E2's functionality.

I quickly then created another user account so I could use it to contact a god to get my theme edited, or at least killed. Then I thought to check my own account again: fortunately I had not got to the sidebar yet and it remained, hiding off one side of the page. As I had the catbox nodelet displayed (if I had disabled that in my user settings, this account would temporarily have been quite screwed) I was still able to send messages, so I spoke to the first god I saw. TheDeadGuy pointed me in the direction of the magnificent Oolong, who soon removed the offending code from my stylesheet, congratulating me on my "wonderful mistake" after doing so.

As far as I know there was never any collateral damage (and my themes are quite safe for consumption - promise!), but it was rather a heart-in-the-mouth moment. I broke E2. Only nominally for me, of course, but I still broke it. An incredibly stupid mistake to make.

To this day (I say, theatrically, as if I didn't do this just a few days ago) I don't know why this error had also affected my 'editing' tab, and I'm sure I will get some messages following this telling me how I could have got out of this without involving anyone else, but there we are. A lesson learned. Don't bring da CSS unless you're paying attention, and Opera always caches stylesheets... usually.*

I can't even remember what was breaking the layout now.

*Not that the absence of this in other browsers would have permitted avoidance of the problem.

Also, thanks to XWiz, Waldermarxkul, DonJamie, ascorbic, Oldminer, e-lainey and solaraddict who have messaged me with advice following this writeup.