Testing New Theme: Lawful Good

By Shamus
on Apr 8, 2008
Filed under:
Projects

A few weeks ago I was working at tweaking the existing theme for the site and making a few improvements. It turned into an unintentional overhaul, and then I got sidetracked and didn’t get time to complete it. I thought I’d make it available now and get some feedback and see if anyone spots any problems. It works in IE7, Firefox, and Safari. I haven’t tested it in IE6, but I’m sure it will look like a train wreck. The theme relies heavily on masked PNGs, and IE6 doesn’t go in for that sort of business.

To see the theme, just go to the front page and use the dropdown box on the right, select “Lawful Good”.

The goals I had for this theme:

  1. I liked the “glossy surface” thing going in the current theme, and I wanted to expand on that.
  2. The old sidebar is hopelessly over-cluttered, and I wanted to trim it down. The archives have grown and now take up a lot of screen real estate, so I’ve moved them and other lesser used items to the bottom of the page. The new sidebar is a lot lighter and hopefully more useful. (Search is now at the top.)
  3. I wanted to back off from the pure white background. The major problem with the old theme was that it was just too dang bright for some people. At the time I couldn’t just dim the background by a couple of shades, because all of the logos and dice images would have ugly white boxes around them. I’ve fixed this so the the images are now very tolerant of background color changes – pretty much any light color will work.
  4. I wanted to clean up the sprawling, hackish code of the old theme. Not that it matters to visitors, but this theme uses a lot less code to get the job done.
  5. I wanted to replace the current black / white themes with Chaotic Evil / Lawful Good, which would make for a nice meta-theme.
  6. I wanted more dice. I’m still working on this. I really like the handful of dice at the bottom of the page, though.

Yes, I know glossy silver doesn’t exactly match the purported content of this site. A proper RPG site theme would probably be cartography / papyrus / middle ages, and a proper videogame theme would probably just have iconic characters splashed around. But there are already a lot of sites along those lines. And besides – this really does it for me, visually. I guess I’d rather the site theme look sexy than make sense.

It’s not perfect, but it’s an interesting work in progress. If anyone wants to put up a shot of how it looks in IE6 I’d like to see it. Please let me know about any problems / errors you find. Or just let me know what you think of it.

EDIT: One further note is that the new theme assumes a desktop width of at least 1024. Up until now I’ve stuck with 800, but I noticed that people running in 800×600 has vanished to almost nothing over the last couple of years. Less than 1% right now according to my web stats.

ALSO: To get back to the old theme, return to the front page, look in the left sidebar. It’s right under “search”. It’s a list instead of a dropdown list.

The Next Day: I’ve made some minor changes to get rid of the h-scrolling everyone is getting. I haven’t really addressed the major gripes with the theme, but this quick fix should make it a little more useful. A fuller overhaul will have to wait until I have more time.

Enjoyed this post? Please share!


202020207There are now 87 comments. Almost a hundred!

From the Archives:

1 2

  1. Nentuaby says:

    http://img407.imageshack.us/my.php?image=18854900um0.jpg

    Unfortunately, the above is what it looks like in my copy of Firefox (2.0.0.13, Windows XP). Big whitespace between the content and the sidebar, unecessary horizontal scrollbar.

    (Edit: The URL at the start of this comment also pokes out of its box)

  2. General Karthos says:

    I was gonna take a screen shot and put it up, but Nentuaby renders that unnecessary, because my screen looks -exactly- like that for the theme.

    Oh, and I was on Firefox’s latest version as well.

  3. Maddy says:

    I like the colors and overall look, but in Firefox the sidebar to the left is friggin’ huge and I have to scroll to the right or maximize my window to read your actual content. It’s easier to read when either the sidebar is on the right, or the text wraps to the window so I don’t have to scroll. Alternatively, maybe just not such a wide sidebar.

  4. Tacoman says:

    Quite a bit of white space in a vertical bar between the d20 and the date. It looks slick for coloring, shading, and transition in Firefox. This is sadly not true in IE where the title and rss boxes both have the white background.

    I like the idea of the themes. Would they replace the old ones? I really like the white background.

  5. Shandrunn says:

    Well, let’s have a look…

    First of all, it’s pretty. Very nice.

    I think there are some layout issues though. On my screen (Firefox 2.0.0.13 at 1280×960) about 40% of horizontal screen space is taken up by the sidebar and left margin, and another 10% by the right margin. 50% left for content doesn’t feel like much, and makes me have to scroll a terrible lot.
    Also, all the stuff at the bottom of the page feels a bit cluttered. Some more vertical spacing would work out great I think.

    Still, with some tweaking I think you’ve got an excellent theme here.

    Edit: Hah, and here I thought I’d be the first to offer my insights. Silly me.

  6. Phlux says:

    Mine looks very similar to the above screenshot, but I don’t get a horizontal sidebar (IE7). It all fits onto one screen. I am viewing on a 19″ widescreen at 1440×900, as well as a 15″ widescreen at 1680×1024 (my laptop)

    Personally I like the colorscheme, but I like having the content on the left side better, or at least having it centered. Right now it’s really far to the right side of the screen which just feels….wrong.

    Maybe this is brilliant marketing, though. We all read left-to-right, so having the tower ads on the left forces me to “read” them first…which potentially leads to me clicking on them.

  7. James says:

    Large amount of space between sidebar and text – a good 5cm. Looks good, though

  8. Shamus says:

    Lots of people complaining about horizontal scrolling. I can’t figure that out. If your window is at least 1024 wide, this should not happen. Once I get some time to work on the theme again I’ll see if I can figure that one out.

  9. Mark says:

    It shouldn’t happen, but it does.

  10. Lee Davis says:

    My screen is 1920×1200, but I run browser windows at more like 800×1024; I’m typically multitasking, surfing while other things complete on the other side of the screen, or using the browser as reference for something I’m writing. So, you’re making me either horizontally scroll or resize my browser – or, so far, stick with the old (white) theme.

  11. Jason says:

    FWIW, I’m running IE6 at work (luddites…) and it doesn’t look horrible. Of course, since the firewall won’t let me access any photo-sharing sites, I can’t post a screen capture. So, you’ll just have to take my word for it. Sorry.

  12. dlowe says:

    While I agree that nearly everyone CAN see your site at a width of 1024, I certainly don’t WANT to. It’s a little unfair to force your website to dominate the entire screen. I like the look you’re going for, though, so I’m torn.

  13. asterismW says:

    Ditto to previous comments. I don’t have the horizontal scroll bar issue (1280 x 1024 on 20″), but I’ve got the huge sidebar, and the text doesn’t start until about halfway into the screen. I’m definitely not a fan of where the text is; it feels right-justified. I much prefer having sidebars at the right of the screen, rather than the left.

    The grey isn’t bad though, and not nearly as eye-wrenching (to me) as light text on a black background.

  14. Shamus says:

    Ah. Now I’m getting it. I should have realized (duh) that some people keep a big desktop but use small windows.

    Jamming it all back into 800w isn’t going to happen, but I can reclaim a lot of that space between sidebar and content, and fit it into 900-ish. Maybe I’ll get some time to put into it this weekend.

  15. Raine says:

    I like it. Its different but good.

  16. Visi says:

    http://img.photobucket.com/albums/v60/KoChanneo/Image2-1.jpg

    This is how it looks for me. I never have the browser maximized because it makes most pages a hastle to read, and I can keep an eye on other things happening in the corner. I don’t think I’m alone with this :p

    (And, sorry about blocking any ads, it happens automatically and I can’t really turn it off :p)

  17. empty_other says:

    I didnt like the width. I have many windows open at the same time, and this one is covering too much. I’ll think i change back, now where is that roll-down menu… Where is that… Oh my! It is gone! HELP! I am trapped!

  18. Kacky Snorgle says:

    Ditto Lee Davis and dlowe (edit: and the three other people who said the same thing while I was typing). Theoretically I *could* make the browser window that wide, but I never do so, and I’m unlikely to start just for this site….

  19. Ferrari says:

    In the Mac version of Firefox, it seems to keep locking up the browser trying to bring the site down. I’ve just crapped out twice trying to switch over and check it out. Firefox 1.5, Mac OS 10.4.11 for what it’s worth.

  20. henebry says:

    I’m running Safari, and I get the same odd gulf of white space between the sidebar and the content as is shown in the two screenshots posted above. The gulf is big: looks to be 200 or 220 pixels.

    You imply in your response posts, Shamus, that this large gulf separating the sidebar from the content was intentional on your part. This is hard to believe. I’ve increased the size of my browser window to make everything fit with no horizontal scrollbar and the gulf looks downright weird, especially when I scroll down past the bottom of the sidebar content: now text fills the right 3/5 of the window, while the left 2/5 is totally empty. Visually, it looks weighted badly, like it will topple over! ;)

    I should add that the dice next to each comment aren’t displaying correctly in Safari: they each have a white rectangular border, as does my wavatar. But this may be just a matter of Safari using cached versions of these images. I’ll try a reload and see if this fixes things.

    Update: reloading the page fixed the white borders around the dice, but leaves a white border around the wavatars–one that looks good, actually.

  21. Sal M says:

    Just as another data point, the left sidebar is equally large in Safari 3.1, Camino and Opera on Mac.

  22. Viktor says:

    Please find some way to move the text back to the left. It currently feels like a lot of wasted space while I read. Although I don’t mind the various archives being moved to the bottom, I would have expected that to free up more space, not less.

    Edit: My screen when viewing comments:
    http://s271.photobucket.com/albums/jj145/ninjalindz/?action=view&current=20.jpg

  23. Dave says:

    It looks bad in IE6 (it’s my work computer).

    Check out:
    Screeshot #1
    Screeshot #2

    Even at 1024×768, it still wants me to horizontal scroll. Must be because of the vertical scroll bar.

    As long as I can still read the site at work with the old theme, it’s all good. :)

  24. Viktor says:

    You’re not showing it to me, Dave.

    Edit: Fixed.

  25. Tom says:

    Nice look. The silver background gets a bit dark to the right, muddying the text (figure-ground contrast is a tad low). I also have the same issue with the extra column-worth of space as other commenters. White space is good, but this may be a bit excessive.

  26. Ryan says:

    It’s kind of odd to have all the text on the right hand side when I got used to it being on the left but overall, I like the new Lawful Good layout. Maybe you could make some other alignment based ones?

  27. Rick says:

    Shamus: “Lots of people complaining about horizontal scrolling. I can’t figure that out. If your window is at least 1024 wide, this should not happen. Once I get some time to work on the theme again I’ll see if I can figure that one out.”

    The problem may be that your title image is 1024 pixels wide, which means for me (IE7, 1024×768), the vertical scroll bar and window borders mean it won’t fit without a horizontal bar.

    Definitely don’t care for the huge left sidebar, either.

  28. Eltanin says:

    I like the theme, though the silver isn’t precisely the color for me. It’s way way better than the glaring white desert though. I REALLY like the handful of dice at the bottom. That’s a handful of pure awesomeness as far as I’m concerned.

  29. Viktor says:

    Okay, I wasn’t having to scroll when I posted earlier, but now I am. I think it’s because the hyperlinks aren’t wrapping, but I’m viewing at 1280.

  30. Stu says:

    hmmm, the layout and fonts look excellent now :-)

    but somehow I still prefer reading light against dark text… can we have a lawful evil next? *grin*

    just fyi… I have the same horizontal scrolling problem and gap between content and sidebar as most. browser width is 1280.

  31. onosson says:

    I like the overall look, but I agree that text on the left and sidebar on the right is better – not just because it’s how the site used to look, but because it fits with what a lot of other sites do, and you learn to anticipate where to look for things, making it seem odd when it’s the other way.

    I’m running Opera on Windows XP, and everything looks good.

  32. Pederson says:

    I rather like it, but definitely agree that you need to reclaim the empty space between your sidebar and your site content.

    I’m seeing a load of stuff at the bottom of the site here (links to the archives, syndication bits, blogroll, etc) that might be better placed vertically in the right margin, with articles/posts centered between the two sidebars. IMO, YMMV, etc, etc.

    Alternately, if that’s where those bits are supposed to be already, then you may wish to know that Firefox 2.0.0.13 isn’t dropping them there for me.

  33. Nihil says:

    Can we have a vote for flipping the theme around (or ideally, adding a symmetrical copy)? From the majority of other websites, I’m used to reading the main text on the left side of the screen.

  34. Blurr says:

    I’m also getting a bar at the bottom of my screen, and I run at 1280 x 1024 with a full window. The gap looks really bad, too.

    Also, there seems to be a distinct lack of a way to switch back to the default. Am I missing something?

    Edit: Found it. I was looking for a list box. XD

  35. Licaon_Kter says:

    Opera 9.50beta ( from http://my.opera.com/desktopteam/ )
    -same spacing issue as Firefox users
    -no Wavatars
    -no idea on how to change back the layout ( where is the layout/color changer? )

  36. Tango says:

    Like several others, I am of the opinion there seems to be too much space between the navbar and the content. No horizontal scrolling issues though – I always run my browsers full screen. Honestly, I think the only thing I don’t run full screen are IMs and channel windows in IRC programs.

    Wavatars and Gravatars seem ok – but like Licaeon, no idea how to get back to the old theme.

    Also, since comments don’t collapse, access to the information at the bottom of the screen involves a lot of scrolling.

  37. Davesnot says:

    it’s pretty slick.. but.. I lost my place to pick backgrounds.. I like that it isn’t blaring white.. but.. where is that theme choser.. hmm.. well.. I can’t find anything in the fridge either.. so that’s not new..

    I love the dice at the bottom. .. hmm.. and I suppose since were talkin’ dice.. can the comment dice be bigger?

  38. Malkara says:

    I’m at 1024 by 768, and the site requires a horizontal scrollbar in the new theme. :P

  39. Shamus says:

    To get back to the old theme, return to the front page, look in the left sidebar. It’s right under “search”. It’s a list instead of a dropdown list.

  40. RedHillian says:

    As noted, even at 1024 wide the vertical scroll bar forces the use of a horizontal scrollbar.

    I’m not convinced about the big island of grey down the centre, but overall I like the colour combination.

    EDIT: also, on posting this, it auto changed to the new format even though I’d gone back to the old one.

  41. Nazgul says:

    I prefer a smaller size and text on the left as many have said already. I also prefer the white background, which seems easier on my eyes (which admittedly are pretty sleep-deprived and tired today), but hey that’s what user-selectable options are for. I do like the new layouts for the top and bottom of the page.

    I also like the handful of dice, although the three columns at the bottom of the page look a little disjointed, perhaps because they are uneven both vertically and horizontally. I can’t help but think there must be a better way for them to appear more harmonious with each other….

  42. Donald K. says:

    The colors are nice, and I don’t have a horizontal scrollbar at 1680×1050, but the text being off-center is pretty annoying.

  43. Zem says:

    Opera user at 1280px here.

    The colors look nice, but the layout seems a bit weird with all the text on the right half of the screen, and the left half almost entirely blank, with only the small sidebar at the top left. Scrolling down to the comments, almost half the screen is simply grey.

    This looks unbalanced, as if there was something missing in the left half that the browser did not load.

    and as others said non-maximised windows are not very useable with this.

    Generally I would suggest using relative horizontal positioning instead of absolute for the two major columns in your layout, that way it would work for various screen sizes.

  44. Tarous Zars says:

    You can’t use a width of 1024px for your page if your screen is 1024px wide. You need to account for “browser chrome and scrollbars”

    Cameron Moll has a decent write up about it over at authentic boredom.

    http://www.cameronmoll.com/archives/001220.html

    He suggest the maximum width you should use for your content is 960 if you want it to work on all modern browsers without horizontal scroll. Since you used a width of 1024 many people with 1024 screens are seeing a horizontal scroll bar.

    For what its worth I also think the gap is a bit large. Just snug the content up with the ads/navigation with a 10 or 15px gap would look a lot nicer

  45. stuff says:

    Firefox user at 1440×900 here. I like the new colours and top bar layout, but having the nav bar on the left makes the page seem lopsided, as all the text is right of center.

    EDIT: one more thing, right after I posted my comment, the search and theme changer disappeared.

  46. Kheldar says:

    Shamus, with regards to browser screenshots, try the following website. Looks like it should take care of things for you in that regard.

    http://browsershots.org/

  47. Freggle says:

    Firefox 2.0.0.13
    – I too have a horizontal scrollbar, while I have a resolution of 1280 by 800; even though I use full screen view.
    – Also, the wide gap between the left bar, and the article makes the article appear far to the right side of the screen, what really decreases readability. Off-center is indeed annoying.
    – The dice in the comments still need some work I see, but that’s oke. Is there any system in the way the dice are ordered? For example. On comment #39 the dice with 11 comes after the dice with 8. How do you determine this?
    – The dice at the bottom look really good by the way.
    – The links to the catergories are very small. Not really a problem for me perhaps, but it slows browsing a bit (mouse-precision), and makes it much harder to read. The links at the bottom are much more to size, but look a bit strangely placed.
    – The theme-change links, as well as the search box appear only on the main page. Not on the page with article and comments.
    – The navbar is really for from the left side of the screen.
    – The Archives appear so far below because of the amount of comments, that less people will notice them. Who would scroll all the way down a page if 75% of it is comments they are perhaps not interested in?
    – minor issue really:

    02Oct2006
    DM of the Rings XIII:Let’s Not go There
    04Oct2006
    DM of the Rings XIV:Boring Distractions
    06Oct2006
    DM of the Rings XV:Riddle me This
    09Oct2006

    Nice size of the links on that page, but how can one determine what chapter was at what day? Only by going to the top or bottom of the page. Which is inconvenient with so many lines on the page.
    – The links on the top of the page: “Home, Webcomic, About …” are uneavenly spaced. (And I think there should be a link to the first post of the D&D Campaign because that is just as well as the comic a finished topic)

    Don’t take all this too hard by the way. I like the color. Reads very nicely, but I just think there still quite some work to be done.

  48. BlckDv says:

    Huge fan of the new background (it makes the header bar very stunning); also like the new cleaner side menu… but, as many others have already pointed out; it has way too much forced dead space on the horizontal.

    At home; this is somewhat annoying, as I don’t like feeling like I am reading the right column of a website and not seeing the main column… at work it is just nuts, as I’m on a dual monitor setup, and I’ve got miles of grey space.

    But please keep up the good work; the changes are exciting; just in need of some polish.

    -D

  49. guy says:

    MY EYES! i don’t know why, but it hurts my eyes alot even glancing at it.

  50. Alpha Lupi says:

    Opera 9.27 on Vista, and everything looks right.
    My only issues:
    1. Like everyone else, the large gulf between the sidebar and the main body
    2. I liked the sidebar on the right better.

  51. Taellosse says:

    It looks like you’re not leaving any clearance for the vertical scroll bar (and anything else that might take up horizontal space on a maximized browser window at 1024, like the Opera/Firefox All-In-One sidebar’s tab when the sidebar is retracted) in your calculations of space for 1024. I, for one, certainly don’t go any lower than 1024, but on my laptop, that’s the highest resolution I can get, so it’s what I’m stuck with.

    There does also seem to be a bit more space than is necessary between the sidebar and the text. I don’t mind the sidebar on the left, but I don’t think the body text needs to be right-justified like that. It’d look better if it were centered more.

    But other than that, I like this. The 3D RSS icon is a subtle but nifty touch, and goes well with the header (although I think that ought to be just a little bit smaller–not a lot, but I think it would be better if it just extended across 3/4 of the page, rather than all of it), and the extra dice on the bottom looks good, too. I like the subtle gradient of the background color, too, and agree that it is easier on the eyes than either extreme we have in the old themes.

  52. Davesnot says:

    Thanks for the way back.. but I’m likin’ this.. but in the age-old tradition of always askin’ for more… when does Chaotic Evil show up?

  53. Mark says:

    There’s a little white border around all the wavatars, and it slightly overlaps the dotted line border around the previous post.

  54. Galaxian says:

    Running Safari 3.0.4 on Mac OS 10.5.1:
    Sidebar as comments above. Small dice images did have white boxes around them on first view, but reloading the page solved it, so must have been a legacy from the cache. Otherwise lovely.

  55. M says:

    Umm…it doesn’t look half bad to me, but…is there any reason everything switched to right-oriented? I like having the text on the left side of the page, with the menus and stuff to the right; it feels more natural to read that way.

  56. Elethiomel says:

    For me, too, there’s a horizontal scrollbar in a maximised window in 1024×768 on Firefox under Linux. The page looks very much like the screenshot in the first post. I beg you to leave an option to keep one of the original themes for as long as people have this problem. Please reduce the space between the sidebar and the text – as it is now, it is certainly not “lighter” than the current sidebar.

    The current LG sidebar is very irritating. No primary text website like a blog should have that much horizontal whitespace. Text should fill most of the window.

  57. ClearWater says:

    This is how it looks for me on IE6:
    http://picasaweb.google.co.uk/gm.clearwater/TestAlbum/photo#5187070550056329154

    And this is what it looks like on FF2.0.0.13:
    http://picasaweb.google.co.uk/gm.clearwater/TestAlbum/photo#5187070550056329170

    That last one is at 1400×1050, maximised, and I still have a horizontal scrollbar. Though I don’t need to use it.

    My brain filters out navigation bars when I don’t need them so to me more than half the screen is blank.

  58. Christian Groff says:

    I love the glossy title and the d20 dice on the bottom. The ads are there to pay for the site, right? Great theme! ^_^

  59. Kobyov says:

    Mine looks pretty much identical to Nentuaby’s, running FF 2.0.0.13 on vista. The thing that looks worst to me is the huge gap on the left, followed by the not-wrapping URL’s causing me to have a horizontal scroll on 1280×1024. Other than that this theme’s definately a keeper.

  60. craig says:

    Same as Nentuaby – big white space between the content on the left and the main stuff on the right. 1024X768, both in Firefox 3 beta 5 and IE 8. (What can I say – I’ve a weakness for trying out new stuff…)

  61. Shinjin says:

    Firefox 2.0.0.13

    The horizontal scrollbar that I’m seeing seems to stem from long URLs blowing the margins under the new theme. Under the white theme, links such as in ClearWater’s post above get truncated by the surrounding comment box. With the new theme there is no truncation.

    And agreed with some of the others that huge gap between the left-hand sidebar and the comments looks odd. Makes me feel like I’m about to fall of the side of the browser.

    It also reminds me of my old college roommate’s note-taking. One aspect of his dyslexia was that he only ever really saw the right half of his paper, so that’s all he ever wrote on.

  62. wagemage says:

    I don’t think any change that I’m noticing from the new theme is good. This is harsh, but I do not want you to think it’s “just a few kinks.” Little improvements can’t help when the overall impression fails.

    The color scheme has the most hope, but the end effect is a bit on the dull side. Instead of looking sharp as intended, it feels more like Photoshop’s running the aesthetic.

    The use of space and layout is seriously bad. The previous is miles better. You don’t have to assume 800×600 for the desktop, but you need to fit the primary “above the fold” content in that window. It’s fine to have your ad bar, archives, etc. off to the right of the main window, but don’t drop your prime product off the edge. (Especially when you’ve got twice as much space naked and empty in the middle.)

    The mix of text sizes is also too extreme. If the primary text is at proper expected size, the sidebar text is too small to use.

  63. Dix says:

    In Safari, result is same as screenshot provided by first commenter.

1 2

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>