Changing Themes

By Shamus
on May 25, 2008
Filed under:
Projects

A few weeks ago I began the foolhardy task of mucking about with the theme on this site, much like a man throwing rocks at a wasp’s nest for his own amusement. I was carefully balancing a couple of time-sensitive projects. I figured the theme change would be a quick thing, that I could make sweeping changes to the behavior of the site at the cost of just an hour or so.

Three days and a multitude of complaints later I realized what I’d gotten myself into, but I didn’t have time to make it right. I patched it up a bit, reinstated the old theme as the default, and made a note to return to this particular dragon’s den when I actually had time to deal with the dragon.

At the root of my error was the failure to understand just how little freedom I have with the theme of this site. A new blog can put up any old theme they like, but once you have about three years of content behind the thing the site begins to get a little rigid. The following bullet list contains the lessons and wisdom I gleaned from the debacle:

  1. The main content area must be at least 600 pixels wide, or DMotR won’t fit. It can’t be wider than that or it will hose the formatting of hundreds of old posts where I have text wrapping around images.
  2. The sidebar has to be about 200 pixels wide, or parts of it will wrap and look stupid.
  3. While people are often running at gigantic screen resolutions, many do so with their web browser in a much smaller window. I can’t make the site wider than 900 pixels unless I want them to have a horizontal scrollbar. (I do not.)
  4. The sidebar has to go on the right, because a lot of people object to left-scrollbars, but almost nobody objects to right ones. I do not know why.
  5. The tiling background causes slowdowns for older machines, so the default theme can’t have a repeating background.
  6. Under no circumstances should you mess with your site theme unless you have the time to deal with it afterwards!

Taken together, all of this means I didn’t really have much freedom to change the site if I didn’t want to break things. The only major change I was able to keep was the navbar across the top. Which is cool. I guess.

I’ve hammered out the various difficulties. We now have three themes:

  1. Lawful Good: The default, with a white background.
  2. True Neutral: Exactly like Lawful good, except with a gradient background.
  3. Chaotic Evil: White-on-black version of the default theme. While this setup tends to scorch my delicate optic nerve, some people really prefer it.

All the themes should be the same in terms of spacing and functionality. I’m sure things will break, but I’ve got a three day weekend going so I should be able to attend to any required fixes, assuming the problems aren’t at some fundamental design level.

Enjoyed this post? Please share!


is a programmer, an author, and nearly a composer. He works on this site full time. If you’d like to support him, you can do so via Patreon or PayPal.

2020242 comments. (Insert played-out "meaning of life, the universe and everything" joke here.)

From the Archives:

  1. Rawling says:

    The sidepanel may be a little small still – under Categories the post counts are, in some cases, appearing on a second line for me. DMOTR, Random Thoughts, Tabletop Games.

    Vista, IE7 (not my choice!)

  2. James says:

    The only one that appears on a second line for me is the “Random Thoughts” category. The others appear fine on one line.

    BTW, I’m running Firefox 2 on Windows XP.

  3. Ian says:

    With Firefox 3 RC (on Vista, but I doubt that would matter in this case) the number of entries in “Random Thoughts” on the sidebar wraps for me. Other than that, everything is a-ok.

    IE8 beta 1 renders the page the same way as FF3 (it looks identical to me, but I didn’t really scrutinize it). When set to emulate IE7, several more of the sidebar entries wrap (“DMotR” and “Tabletop Games”, in addition to “Random Thoughts”, as well as “RSS 2.0 (Comments)” under “syndication”).

  4. Shadow Wolf says:

    The sidebar has to go on the right, because a lot of people object to left-scrollbars, but almost nobody objects to right ones. I do not know why.

    This is fairly easy to answer. When your eyes finish reading one line, and are looking for the beginning of the next line of text, it’s a lot easier if the text is the first thing on the next line. If there’s a bunch of unrelated text before the beginning of what you’re looking for, it introduces a larger discontinuity between the end of one line and the beginning of the next. The difference may be mostly subconscious, but it’s significant.

  5. pulse says:

    I had the tiling slow-down issue a few years ago and found that it only turns up when the image needs very many repetitions. While it does feel nice to use a single pixel height/width where possible, it usually doesn’t make much difference with compressed image formats.

    I tried scaling up your current True Neutral background from 1 pixel height to 50 pixels. It resulted in a file size of 522 bytes, rather than 112 bytes to store the original version with the same (lossless) png compression.

    (edit) I need to use a different email for future comments, that wavatar looks way too much like me…

  6. guy says:

    the stuff is all to the left of the screen. why is it doing that?

    Opera on XP

  7. Zukhramm says:

    Yeah, everything seems cramped together at the left side of the screen to me, in Opera at least, no in IE, but in IE everything else looks bad.

    In any case, I like the Lawful Good color theme, I had only seen the other two before.

  8. Mark says:

    They all look fine to me.

  9. Rhykker says:

    Huzzah for Chaotic Evil! I’m pleased that quoted text is now properly formatted on the black background.

  10. “a lot of people object to left-scrollbars, but almost nobody objects to right ones. I do not know why.”

    When your browser window is narrower than the web site, the browser default is to scroll to the left side, and cut off the right side. If the sidebar is on the left, it means that the main colum gets truncated, and can’t be read without manually side-scrolling the browser. When the sidebar is on the right, that’s what gets truncated, and usually the reader doesn’t care.

  11. onosson says:

    Hmmmm… I just realized why I often size my browser window to be narrower than my screen, and it is because of sites that default to the left side rather than being centred (as 20 Sided is doing for me in Opera on XP right now). That way, when switching tabs, I have most of the text in somewhat the same place.

    P.S. That’s an awful lot of Opera users commenting early on this!

    P.P.S. I really like True Neutral.

  12. Dev Null says:

    At the risk of descending into madness, and/or breaking up the continuity of the site, can you keep the old theme with the old content, and set yourself free to do whatever you like with a new theme for new content only?

  13. Rich says:

    I like the Chaotic Evil except how every other comment is greyish/bluish with white text. Kind of clashes and make early morning reading a bit painful. just me I guess. But it still beats black text on white.

  14. Craig says:

    I like the touch of the chaotic evil die being a 1 instead of a 20.

  15. Phlux says:

    Sounds like mostly technical issues that you’ve worked out. The one about right-side menu bars I think is a matter of mental conditioning.

    We’re training to read left to right, with a manual-typewriter-style carriage return at the end.

    Personally, when I’m reading I like my “carriage returns” to go all the way back to the left margin. If the “left margin” is actually eaten up by a navbar that mean’s my eye has to hover over your ads/navigation every time I “return” with my eyes. It messes with my mind.

    It’s also a matter of acclimation. Lots of sites have right-side nav bars, but they’ve always had them so it was never “different”.

    Lastly, I’ve noticed many sites that use right-side nav bars use a distinct color to frame it off…so it’s in black and the text-portion is white. Not everyone does this.

    I think it’s a combination of many things, but that’s my best stab at why a right-side nav bar didn’t go over well.

  16. Jabor says:

    Ok, hope there are no spelling mistakes – I’m typing blind here.

    Turns out the Chaotic Evil skin still has black text when you’re typing your comment. So I can’t see what I’m typing. Yes really.

  17. Joe says:

    Big fan, thumbs up!

  18. Firefox on KDE, not that it matters.
    I don’t understand how Chaotic Evil could scorch anything optical. Black is the color that least scorches eyes, since it’s the least light, and white is the color that contrasts best with white. Unless you use an e-ink display or use your computer in a well-lit room, I don’t see how it could possibly be a problem.

  19. guy says:

    and i don’t see why lawful good hurts eyes. it varies by person, and true neutral mark one burned my eyes, but not the eyes of anyone else.

  20. Binks says:

    Aw…you got rid of my favorite theme (the old white on black one). Now I need to use Chaotic Evil…which is probably a good thing because it looks a lot better :P.

  21. Freykin says:

    I use Chaotic Evil myself, and something similar on my journal. It’s the whole white space attracts the eye thing: if the only white space is the text, it’s much easier for me to read than if it’s black text on a big block of white space.

  22. Shamus says:

    Alex: That has been debated at length:

    http://www.shamusyoung.com/twentysidedtale/?p=1360

    The black-on-white vs. the white-on-black folks often charge one another with insanity. I’m inclined to think it’s related to the environment in which the thing is read.

  23. Rason says:

    Wow, maybe its because my room is really dark atm. When I read your statement “While this setup tends to scorch my delicate optic nerve, some people really prefer it.” I decided I would see what it was like and discovered, I really liked it!

  24. So when are you doing the other six themes..?

    (I’m liking the TN theme, incidentally (which seems to be working perfectly on IE7 at 1024×768))

  25. Nazgul says:

    Welcome to my world, or what was my world as a corporate webmaster for many years.

    You’ve arrived at a lot of common conclusions, such as the 600 pixel width. (It’s certainly not the only answer, or the only right answer, but it is a common one.)

    Regarding the themes… Besides the environment, don’t forget that people’s brains are wired differently. Things that are the logical way of doing something for Person A may be maddening to Person B. I see this all the time. Allowing the user some flexibility to choose is (IMO) the ideal answer – as long as it doesn’t cause insane amounts of extra work or other headaches.

    Thanks for caring what people think though. That’s perhaps not as common as it should be. :)

  26. guy says:

    @shamus

    so, when can we expect a fix on the opera thing? i can tolerate white on black and even yellow on black, but i don’t like the huge region of dead space on 2/3rds of the screen.

  27. Blurr says:

    Could you please make the text a bit more gray on the Chaotic Evil theme? Pure white hurts.

  28. Davesnot says:

    The answer to #4… because they mouse with their right hand.. and pulling a scroll on the left makes them cross-up their brain.. .. honest. .. me.. I don’t care what you do with the site.. I’m pretty flexible.. it’s your site.. it’s the ideas and words I come for. .. and pictures of dice.

  29. Calite says:

    The whole sidebar thing just has to do with how your brain associates things. Hand that controls mouse is(usually) on the right side, so it expects most the work it needs to do to be on right side, if you move it to left, it’s awkward to your brain, though it makes no real difference. Also, people tend to prefer the design they’re more used to.

    EDIT: So, basically what Davesnot said two minutes before I finished typing this.

  30. ArchU says:

    “The sidebar has to go on the right, because a lot of people object to left-scrollbars, but almost nobody objects to right ones. I do not know why.”

    I object to right ones. Anybody who disagrees is plainly foolish and has no right to an opinion.

    Alright, fine, it doesn’t actually bother me -,-;

    What does bother me is the bright white on black with the Chaotic Evil theme. That amount of contrast is evil. Light gray could achieve the same thing without the accompanying smell of burning retinas. Whaddyathink?

  31. Jabor says:

    Personally, I have no problem with pure white on black. But that’s probably because I’ve used white-on-black since basically forever. A few friends of mine have noted that pulling it back to #eee instead of #fff just seems to take the “edge” off the text, while still keeping it completely legible.

  32. Miral says:

    I’m positive there used to be a vertical space between comments before. But now the top of the avatar box is touching the bottom of the previous comment box, which looks a bit odd… (Firefox 2.0 on Windows.)

  33. Shamus: I completely agree that it depends on the environment. My post was somewhat tongue-in-cheek, and at the end I threw in the quip about “unless you use your computer in a well-lit room”. I tend to do my surfing in a dark room when I can (I’m not a creepy person, I promise), so white backgrounds hurt my eyes. When the lights are on or it’s daytime, I don’t really care one way or another, so I tend to prefer white-on-black since it’s better when it’s dark.

    In the other post, you talk about the letters being too bright when you use white on black. I actually agree, although I didn’t find it to be much of a problem, but you might consider just using a darker color on black. My Linux terminal uses thick gray (50%) letters on a black background (chaotic neutral?), and it’s pretty much perfect. I’ve also seen websites that do green on black (chaotic 1337), and those work well.

    Edit: looks like about 90 (3) people already suggested making the white darker. So I’ll throw in my vote to make 4.

  34. Shamus says:

    Yeah. I think I’ll make the white text just a shade darker.

  35. ArchU says:

    <- The numbering for each comment (above the dice) is actually about the right shade ^^

  36. Blurr says:

    I’m with ArchU on this one. The text is still too bright in my opinion.

  37. SiliconScout says:

    Yeah I would go with the numbering or perhaps a shade between what it is now and the dice numbers.

    Awesome stuff Shamus and CE FTW!!!!

    HA look at my bad self being all 133t ‘n stuff.

  38. Cuthalion says:

    EDIT: the comments appear some distance to the right of their numbers and corresponding dice, making the right side come right up to the sidebar. It looks funny higher up on the page, though all right when you’re far enough down that the sidebar is finished. It’s also centered this way far enough down, but it still looks funny for the first few comments. No biggy, I guess, since most comments are further down. FF2, Win2k.

    The True Neutral gradient messes with my head. If it was vertical, it’d be all right (though hard to implement), but the horizontal gradient while trying to read throws me off somehow. I think because my brain has to keep resetting from dark to light-background reading after every line.

    Fortunately, I can just use Lawful Good. I like black on white, maybe because I’m in a dim (but not dark) room with my monitor brightness at 50/100 and the contrast at 80/100. So #fff looks like #ddd or so anyway.

  39. Rick says:

    Interesting. If you hadn’t mentioned it, and hadn’t made LG the default for when I loaded the site, I doubt I would have ever even noticed.

    Which is to say, good change.

  40. In the titles for posts you’ve got a “first letter larger than the rest” thing going on. Looks OK on most posts, but any time you use an acronym as the first “word” in the title it looks weird.

    It’s particularly noticeable right now, since you have multiple post titles with acronyms on the first page.

  41. Ethan says:

    Shamus,

    Love the blog. Came for DMotR, stayed for, well, the rest of what you do here.

    But… your typographical choices are wigging me out. Before, I could just switch to one of the older themes, so I didn’t bother to say anything. Now, however, you’ve forced my hand.

    The navigation bars at the top and the bottom, where you have words with a large capital followed by some smaller capitals? The small caps are not only a different font from the large caps, but from a completely different font family (the large caps are old style, the small ones are sans serif). I’m not really sure what you’re trying to say with this choice of fonts, but it’s really distracting to me. I recommend finding a font with it’s own small caps (so, one with three of each letter: regular caps, lower-case, and small caps), and using that, rather than using larger capitals from one font and smaller point capitals from an unrelated font.

Leave a Reply

Comments are moderated and may not be posted immediately. Required fields are marked *

*
*

Thanks for joining the discussion. Be nice, don't post angry, and enjoy yourself. This is supposed to be fun.

You can enclose spoilers in <strike> tags like so:
<strike>Darth Vader is Luke's father!</strike>

You can make things italics like this:
Can you imagine having Darth Vader as your <i>father</i>?

You can make things bold like this:
I'm <b>very</b> glad Darth Vader isn't my father.

You can make links like this:
I'm reading about <a href="http://en.wikipedia.org/wiki/Darth_Vader">Darth Vader</a> on Wikipedia!

You can quote someone like this:
Darth Vader said <blockquote>Luke, I am your father.</blockquote>