Site Theme

By Shamus Posted Monday Feb 17, 2014

Filed under: Notices 164 comments

It’s that time of the decade again wherein I muck about with the site theme and annoy everyone. Today’s goals are:

  1. Get rid of the goofy double-indent problem I was having with multi-paragraph numbered lists.

    For example, before the change THIS paragraph would have been indented from the previous one. That was dumb and goofy.

  2. Clean up stray tags. Because of the way I’ve hacked away at this theme over the years, it’s accumulated a lot of cruft. Maybe at some point in the past I had a little doodad in a div box. Then I removed it. Because of the way WordPress is wired up, it’s really easy to get rid of the content and leave a <div class="now_useless_class"><div> behind. I’m always trying to track these down and get rid of them.
  3. Fix the problem of comment coloring. Previously, all comments alternated between blue and silver, regardless of thread depth. That was fine for flat conversations, but as threads got increasingly complex you’d end up with a blue reply to a blue reply to a blue reply to a blue reply. You’d scroll several pages down and lose track of who is replying to whom. If you want to see a good example of the problem at its worst, then see this post or this one. Note that with this new theme in place you won’t see the blue-blue-blue reply chain anymore, so you kind of have to use your imagination.
  4. Turn the comment dice into a sprite sheet. (I did not get this done. As of this writing, comment dice are disabled. It’s on my to-do list.)

My current solution to problem #3 is probably not going to last. I predict people will complain that it suffers from a bad case of angry fruit salad. Which is fair. But this rainbow puke is useful as both an illustration of the problem and a good way to visualize the tools we have to work with.

What we really want is to create a situation where no reply will match the color of the post being replied to. To do this, you should technically only need four colors:

  • Everyone replying to a blue comment will be either silver #1 or silver #2.
  • Everyone replying to a silver comment will be either blue #1 or blue #2.

Sadly, you can’t do this with the default WordPress setup. The only way to make this happen is to code your own comment loop. I did this sort of thing in the past, but it’s a time consuming pain in the ass that needs to be re-done every time I upgrade. Coding your own comment loop also creates a lot of performance worries.

So right now we’ve got rainbow comments. Other solutions are possible, I suppose. We could use ten different shades of blue and silver, but there are only so many distinct shades of each that are suitable as a background for black text. And one shade of medium pale blue isn’t nearly as easy to distinguish from another shade of medium pale blue as (say) green.

/* These two colors are for top-level comments. */
.even { background: #ddf;}
.odd  { background: #edf;}
 
/* The rest of these are for the various nesting layers. */
.comment .depth-1 .even {  background: #ddd; }
.comment .depth-1 .odd  {  background: #edd; }
 
.comment .depth-2 .even {  background: #fdd; }
.comment .depth-2 .odd  {  background: #ded; }
 
.comment .depth-3 .even {  background: #eed; }
.comment .depth-3 .odd  {  background: #fed; }
 
.comment .depth-4 .even {  background: #dfd; }
.comment .depth-4 .odd  {  background: #efd; }
 
.comment .depth-5 .even {  background: #ffd; }
.comment .depth-5 .odd  {  background: #dde; }
 
.comment .depth-6 .even {  background: #ede; }
.comment .depth-6 .odd  {  background: #fde; }
 
.comment .depth-7 .even {  background: #dee; }
.comment .depth-7 .odd  {  background: #eee; }
 
.comment .depth-8 .even {  background: #fee; }
.comment .depth-8 .odd  {  background: #dfe; }
 
.comment .depth-9 .even {  background: #efe; }
.comment .depth-9 .odd  {  background: #ffe; }
 
.comment .depth-10 .even { background: #dee; }
.comment .depth-10 .odd  { background: #eee; }
 
.comment .depth-11 .even { background: #fee; }
.comment .depth-11 .odd  { background: #dfe; }
 
.comment .depth-12 .even { background: #efe; }
.comment .depth-12 .odd  { background: #ffe; }

That’s the CSS controlling comment colors right now. Other schemes are possible. Right now it just runs through rainbow. Root level posts are at the red end of the spectrum and deeply nested stuff is at the blue end. Each nesting level has two colors that it alternates between.

I’m sure I’ll change it in the next day or so once I’ve gathered some feedback. Many other schemes are possible.

We could make even / odd entries use complementary colors instead of making them color neighbors. That would probably get rid of the rainbow effect and just make the colors look scrambled. Or maybe I could narrow it down to a few shades of (say) three colors. I don’t know. Maybe someone with an eye for color has some suggestions.

We could also just alternate between blue and silver in the nesting levels. So, the root is silver 1 and silver 2, the next level is blue 1 and blue 2, then the next level goes back to silver. That would retain the previous look of the site, but it still gets a little confusing when things get deep, and it’s still possible to get lost when a bunch of threads are tied off all at once.

Just remember that individual comments are stupid and can’t tell what comment color they’re replying to. All we have is odd / even, and depth. So we can’t make rules like “Reset the odd / even flag if we move to a different nesting level”. Basically, all we can do I fiddle with the color values above.

Also: Whenever I make a change there is always someone who get SO OFFENDED and FREAKS OUT in the comments. This is actually really irritating when I’m trying to gather feedback. Typing hyperbolic stuff in all caps like THIS COLOR SCHEME MAKES MY EYES BLEED AND IS HORRIBLE! isn’t helpful. Be calm. If you hate it, say so. It probably sounds funny to you as you type it, but on my end it’s like trying to have a Q&A session with an angry mob.

Thanks!

EDIT: As requested, I made usernames bold and large. Yeah, that’s a good change.

Also, I nudged up the color saturation. Just to see how people would respond. Feeling kind of fearless about this since I’m pretty sure we’ll end up changing everything tomorrow.

 


From The Archives:
 

164 thoughts on “Site Theme

  1. mookers says:

    I find it quite ironic that I finished reading this post and there were no comments.

    I guess that means I’m first, or something.

    1. ET says:

      I would have been the first comment, but I took like, 15 minutes to finish writing. :|

      1. Currently I’d say it’s less “angry fruit salad” and more “cubicle fabric swatches”.

        1. Personally, I think a good option would be to at least have every base post be the same color, and replies can be different colors. It would at least make it more obvious where the distinct conversations were.

          Maybe try matching the colors to the dice in the backdrop? (and increasing the backdrop saturation level a bit so the colors are more discernable). That’d help a lot with the OMG UGLY issue.

  2. Destrustor says:

    One thing I’ve noticed already: the mod-gold text boxes only work once per thread, apparently. Any other comments from you in the thread only gets a gold outline around whatever color the system decides to assign it. I don’t know if this is intentional or not, but it might create confusion if the readers forget to check the name or something.

    1. Shamus says:

      ?!!?!?

      Why? How?

      If you ASKED me to make CSS that would do one thing for the first instance of the element and another thing for the second instance, I’ wouldn’t know how to go about it. Shouldn’t this be impossible?

      I’ll see if I can puzzle that out.

      PS: I HATE css. Hate. Hate. Hate.

      1. Paul Spooner says:

        I had assumed it was a feature, as it draws less blatant attention. Looks like the gold fill is entirely gone at this point, with only the gold border left.
        Good luck!

      2. Bryan says:

        Looks like you’re using .comment-author-shamus to set off the li tags that contain your posts.

        So that’s where I’d look in the CSS I think…

        Firefox’s Web Developer extension has an “edit css” thing that works pretty well for this for me. So mucking around a little, I add this *after* the .depth-*.{even,odd} section:

        .comment-author-shamus.even, .comment-author-shamus.odd { background: #ff0; }

        and it works. The key is to *both* put it after all the .depth-* selectors, *and* make it apply to both .even and .odd — otherwise the .depth-* selectors are more specific.

        If there’s another way to make them more specific that’d work too, but I can’t think of one. Well, wait, that’s not entirely true; you could duplicate the whole section with an additional selector, like so:

        .comment-author-shamus.depth-1.even { background: #ff0; }
        .comment-author-shamus.depth-1.odd { background: #ff0; }
        .comment-author-shamus.depth-2.even { background: #ff0; }
        .comment-author-shamus.depth-2.odd { background: #ff0; }

        etc., etc., for every .depth variant. (And with a reasonable color of course. :-P) That’s working in the edit-css extension thing too.

      3. Nick Powell says:

        “PS: I HATE css. Hate. Hate. Hate.”

        When I use CSS my search history alternates between phrases like “How to horizontally align text boxes” and “FUCK CSS”.

      4. Shamus says:

        So here’s a little lesson I learned on this project:

        CSS class selectors are powerful but confusing as hell and the documentation isn’t easy to find. (I never did find it.)

        If I do something like:

        .foo .bar { properties }

        Then it will change everything with foo OR bar. However, if I do:

        .foo.bar { properties }

        It will change only things that are both foo AND bar. Typing phrases like “css class selector” “class selection” or “class usage” will not take you to a page that explains this sort of thing. In fact, I never did find it documented. I intuited it based on a comment left in this thread.

        As a programmer the way CSS handles selection logic is both strange and incredibly obtuse. (Not to mention easy to mess up, even if you’re lucky enough to know what you’re doing.) There are already a half dozen or so ways to construct AND / OR / NOT / XOR arguments in existing languages, so it’s sad to see CSS just did its own thing.

        I hate CSS.

        1. Mephane says:

          The declaration
          .foo .bar { properties }
          actually applies properties to any element with the class bar that is placed inside another element with the class foo (regardless of nesting depth). To affect both foo and bar, you need to seperate them with a comma:
          .foo, .bar { properties }

          1. Shamus says:

            Thanks.

            For clarity: When I used the word “and” I was referring to this:

            <div class=”foo bar”>

            So, something that is both foo and bar at the same time, not foo inside of bar. I guess the “AND” is ambiguous to the reader in this case, since you could interpret it as:

            “Affect only things that are both foo and bar”

            or:

            “Affect everything that is foo, and also everything bar”

            The latter I would classify as an “OR” if I was building a conditional statement.

            In any case, I’m sure I’m still missing a lot of nuance.

            1. Abnaxis says:

              If I’m reading right, Mephane’s OR had a comma, but yours didn’t. Was there a typo involved somewhere?

              Sorry for nitpicking, but I tend to pick up code in bits and pieces, and discussions like this are a GOLDMINE.

              EDIT: Never mind, I get it. Space means “child,” comma means “OR,” no separation means “AND.”

              Except…I thought “.foo > .bar” was the css way of looking for classes of type “bar” inside of classes of type “foo,” and that this was a CSS3-only operation?

              EDIT2: Handy reference that answers all my pestering questions, though it still doesn’t have “.foo.bar”.

              1. Mephane says:

                LOL. We just posted the same link simultaneously.

                And the difference between .foo .bar and .foo>.bar is that the former applies to any depth of nesting, i.e. .bar does not need to be a directly child. With the > however, only direct children are affected.

            2. Mephane says:

              There are a number of other cases still, which are used not as often. I highly recommend this as a quick reference.

              1. silver Harloe says:

                Sadly, this doesn’t cover very well how multiple class selectors work

                e.g.: elem class=”c1 c2″

                .c1 .c2 {} (space is optional — or I thought it was, Shamus’ post implies otherwise) applies to elem, even though it is not a descendant of itself

                if you have .c1{} .c2{} .c1.c2{}, c1 and c2 will be applied in an arbitrary order, but the latter will be applied last (so in case of conflict definition, it “wins”)

                …I think. I could be wrong and all mixed up, or I might be mistaking jquery selectors for css selectors (which are almost, but not quite, the same thing)

                1. Kacky Snorgle says:

                  Wait, it’s legal to put multiple classes on the same element? When did that happen? I’ve been using ridiculous workarounds for years now:

                  [span class=a”][span class=”b”][span class=”c”]thing[/span][/span][/span]

                  …and I’m pretty sure that when I started, that was the only way to get the effect I wanted (a bunch of overlapping classes allowing for 2^n distinct styles without manually maintaining 2^n classes in the stylesheet).

                  1. silver Harloe says:

                    it’s not just legal, it’s super amazingly handy, especially when doing lots of javascript work. and now you know you don’t have to work around it so hard :)

        2. Jason says:

          In case you”˜re still searching for a good CSS reference, I have to recommend the Mozilla Developer Network, and their page on CSS selectors in particular.

          Also, while I respect your right to vent about CSS idiosyncrasies, I think that if we all had to express the same types of flexible relationships in formal if/else/&&/|| statements, then everyone would hate CSS even more. Also also, it gets much nicer if you're using a CSS preprocessor like LESS or SASS.

          1. Tim Keating says:

            Thumbs up for LESS and SASS. Which, I just noticed, if they were to merge those projects, they could call it LESS ASS.

        3. maxoverdrive says:

          My go-to has always been http://www.w3.org/TR/CSS21/propidx.html Which lists all properties and links to the rest of the CSS2.1 spec such as http://www.w3.org/TR/CSS21/selector.html

      5. Tim Keating says:

        Well, you could always build your site with tables and FONT tags…

  3. Bryan says:

    Well. That’s different.

    Huh.

    Trying to balance my hatred of everything new (also… get off my lawn! :-P ) with the fact that yeah, it did sometimes get confusing before.

    Eh, we’ll see. I can probably get used to this. :-)

    1. Bryan says:

      …Although, scrolling through the most recent Skyrim thread does make one thing obvious. The usernames aren’t really standing out anymore. The bold text that they had before was, I thought, pretty useful.

      1. Wooji says:

        I have to agree with this. The colors seems fine but bold usernames would be nice.

  4. Dave B. says:

    I like the way you’ve used pastel colors to avoid the angry fruit salad problem, but I think they could actually stand to be a tad brighter. (More color saturation)

    Just the same, it’s completely usable the way it is.

    1. ET says:

      Personally, I think pastels are “angry fruit salad” enough to qualify.
      i.e. “annoyed, but still totally annoying fruit salad”

      1. swenson says:

        Yeah, it’s a little… lavender for my tastes.

        1. Mephane says:

          I’ll join this sentiment. The old blue+silver color scheme felt perfect, I don’t like these current pastel colors (or, more precisely, pastel colors in general).

  5. Wooji says:

    http://www.shamusyoung.com/twentysidedtale/ claims that this post has 4 comments but when i click the post it say “No comments whatsoever.” and i cant see any of the supposedly existing 4 comments.

    edit:And after commenting they show.
    edit2: also yay edit!

    1. ET says:

      Yeah, there’s a delay in the thingy which counts up the number of comments for blog posts.
      …and like every third or fourth blog post, somebody inevitably brings it up again… ^^;

    2. Bryan says:

      There are two hard problems in computer science: Cache invalidation, picking names for things, and off-by-one errors.

      (This one is cache invalidation…)

      1. swenson says:

        Picking names for things may be the worst of those three problems. It’s so haaaard. :/

    3. Humanoid says:

      I’m curious as to what plugin is currently being used. Partly because I’m a bit of a stickybeak, and partly because I’m not sure it’s behaving the way it’s designed to. In the worst case I’ve observed delays of upwards of 30 minutes (and double digit ‘missing’ comments) before the cached page was refreshed.

      Shamus mentioned he was using the most popular solution available, which appears to be WP Super Cache, but by the information on that page, it’s not really matching the behaviour we’re seeing. From the FAQ regarding the recommended Cache Rebuild feature:

      “When a visitor leaves a comment the cached file for that page is deleted and the next visitor recreates the cached page. A page takes time to load so what happens if it receives 100 visitors during this time? There won’t be a cached page so WordPress will serve a fresh page for each user and the plugin will try to create a cached page for each of those 100 visitors causing a huge load on your server. This feature stops this happening. The cached page is not cleared when a comment is left. It is marked for rebuilding instead. The next visitor will regenerate the cached page while the old page is served to the other 99 visitors.”

      Is there something else at work here?

      1. Humanoid says:

        (And yes I know I’m being one of those knows-enough-to-be-dangerous-but-knows-too-little-to-be-helpful types)

  6. Hitchmeister says:

    My first reaction to the new comment color scheme was not overly positive, but if it stays I’ll probably get used to it. It strikes me as very “seasonal” right now. It just looks a lot like candy you see around Valentine’s Day and Easter. I’m sure I couldn’t do better and I like the reasoning behind wanting to clarify the levels of nesting.

    1. Paul Spooner says:

      Ooh, it wouldn’t be too difficult to write a chron job to swap out the color scheme during different seasons. Pastels for spring, shades of green for summer, reds and oranges for autumn, and blues and greys for winter… of course then all the Australians would be confused.

      1. ET says:

        Well, obviously the website will detect if you’re in the northern or southern hemisphere. :P
        As for a red-orange colour scheme, I’d be careful with that – oranges would look a bit too much like the gold, to easily distinguish Shamus and company from us peons.

        1. Daemian Lucifer says:

          Uuuuuu,radioactive green!Its my favorite!This one definitely needs to stay in!

          EDIT:And its followed by puke green,which fits so perfectly.

          1. ET says:

            Umm…clearly, you’re wrong.
            The colour of radioactive goop in all games since the dawn of time has clearly been 00FF00, since that was the phosphor we had in the original screens powered by the earliest X-ray tubes, which were the first scary, widely-misunderstood “radiation”. ;)

            1. Epopisces says:

              (posting purely for the sake of creating a deeper comment nest).

              Also for fun google the hex color code ET listed. Then find a swatch of that color in Google images. Now make it full screen. Count how many seconds it takes for your eyes to bleed.

              I made it to 2.

              1. Bryan says:

                Er, no bleeding in sight. It’s been several minutes. (Flood-filled a screen-sized image in gimp with that color, and zoomed in as far as the window manager would let me enlarge the window.)

                But then again, my idea of “good design” is “black and white, text”, so hey, whatever; my opinion may be suspect. :-)

                (Also, higher depth!)

                1. Daemian Lucifer says:

                  Lets drill deeper!

                  Its a shame that there is no more radioactive green.Its a great troll color.

                  1. Bryan says:

                    Hmm, texturing trolls with that color instead of something like what the first Hobbit movie did would certainly be interesting. Of course, you’d run the risk of double-green-screening them. (See above about off-by-one errors…)

                    Or, oooh, I got it! We can paint trolls that color in real life! Of course it won’t help if you read something they wrote, but it will help if you’re talking to one of them at least…

                    (…Help! I’m stuck intentionally misparsing sentences!)

                    1. 4th Dimension says:

                      Just a fiew more comments and we’ll bottom out. And yeah, that green is kind of horrible, but since I’m a bit color blind it’s powers of puking are greatly diminished.

                    2. ET says:

                      (Reply to 4th Dimension, since we’re already maxxed out on nestitude.)

                      You are so horribly wrong!
                      Phosphor green is the best colour on the planet!
                      Anyone who doesn’t like the glow of 0x00FF00 clearly needs an eyeball adjustment!

                    3. 4th Dimension says:

                      Huh. Now there is a slight problem. After we hit the top of the tree, color of the tier 9 is not different enough from tier 10 even color. Maybe stick to one color that has enough of contrast to top level parent.

                      Something like:

                      .odd.depth-9 li.depth-10 { background-color: #d5f0ff; }

                2. Zukhramm says:

                  One deep thread is fine, but how about deep and branching?

                  A little too similar to the parent.

      2. Humanoid says:

        I could live with the winter scheme we’ve got right now. Or is it the colour of the monsoon?

        (Watch as the colours shift by the time I submit this comment)

        Genuine edit: It really did change.

  7. Paul Spooner says:

    Right now the color scheme is rather pastel, which works for me.

    Here’s a thought on how to further clarify the “who’s responding to whom” deal. Put the comment depth and comment index (in numeral form) at the top of each comment… that doesn’t make much sense… an example

    1
    _1.1
    _1.2
    __1.2.1
    _1.3
    _1.4
    __1.4.1
    __1.4.2
    __1.4.3
    ___1.4.3.1
    ___1.4.3.2
    _1.5
    2
    _2.1
    __2.1.1
    3

    …and so forth. It would give us an “address”, other than color, by which to judge which comment was in response to which. You’d need a seperator between the numerals (a period in my example, but anything would do) so that if there were more than 9 responses, the address wouldn’t get confused.
    Also, in the “respond” box, if it could list the address of the comment it’s responding to, that would help as well. I’ve seen a number of times where people were confused as to what they were responding to, and this might help clear that up.

    It also acts as a debug message if there are further comments-moving-around shenanigans.
    Not sure how difficult/easy it would be to implement, but there you go.

    For a specific example, this post would have a address of “7”. There’s even some space right under the date where it would fit nicely… though it might be confused with some alternate date format then… maybe put it above the commentor’s name?

    Also, it’s so convenient to have editing back!

    1. 4th Dimension says:

      I think implementing this would require editing the comment loop, and Shamus already said he is not going to do that.

  8. bucaneer says:

    If the goal is to make comments more easily distinguishable by color, then the new setup fails for me. Alternating blues and grays may not have always worked properly, but I never considered it a problem. With the new theme, most comments are sea of nearly indistinguishable shades of blue that blend together, until suddenly green! Or suddenly pink! Then the few comments with the new color stand out much like golden author comments used to, but without any reason. And the actual author comments don’t stand out nearly as well with only a thick frame around the comment.

    In my opinion, the fewer colors you use, the better. Could even be a single one as long as there’s a horizontal line or something else to visually separate comments in a thread. Blue/gray worked, but could be changed to some other pair of colors. Also, I think it’s important to remember that contrast in lightness is more important here than difference in hue.

    1. bucaneer says:

      And now it’s all different. What madness is this?!

      1. Paul Spooner says:

        Your noticing has been noted.

        (reports to the authorities)

      2. ET says:

        I’m pretty sure Sham-Wow is messing with the colour scheme while we’re busy commenting, so he can see what looks the nicest. :P

  9. Kerin says:

    Might actually be a decent place for some JavaScript. With less than 300 comments per page, a jQuery snippet to add sane and structured comment colors would be pretty snappy, and with the old system as fallback for noScript users it wouldn’t be too bad.

  10. ET says:

    Since you’re already messing with the comment system, maybe it’d be time to get rid of multiple-indent-comments?
    i.e. Only allow one level of nesting for comments.
    I know there’s a blog post by the main guy behind Stack Overflow, where he explains why they don’t use nested comments for question SO, or the other Stack Exchange sites.
    Unfortunately, Google seems to only want to help me find questions on SO, instead of the relevant blog post…

    My personal reasoning (and I could be wrong; I’m not a psychologist) is that comments are like a conversation, and humans are only good at navigating things that resemble a normal conversation.
    i.e. Lists, instead of trees.
    So, it’s reasonable to have one level of nesting, since that’s like the demarcation of individual conversations.
    But if you have a tree structure (i.e. multiple levels of nesting) then you’re constantly scrolling back and forth, trying to figure out which conversation you’re following.

    The multiple levels of indentation make it look like completely different conversations.
    I can’t think of a good way to phrase this, but imagine that you made a new list of comments, for each path from the root comment, to the leaf comments (i.e. comments with no child comments).
    They’d read like completely normal conversations, because they really are.
    For example, if you comments were:
    A
    – B1
    – – C1
    – – C2
    – B2
    – – C3
    – – C4
    – – C5
    Then you would have five different conversations: (A, B1, C1); (A, B1, C2); (A, B2, C3); (A, B2, C4); (A, B2, C5)
    But since they’re all more-or-less in response to the original comment A, they’re all kind-of on the same topic, and should be part of the same conversation.
    i.e. Only indented one level of nesting. :)

    So, I think that the colouring problem is really a red herring, and you ought to be solving the bigger problem, which is having too many levels of nesting.
    Well, that’s my argument in favour of single-level nesting for comments.
    Hopefully it wasn’t too rambly. :)

    1. ET says:

      Something I noticed while editing:
      The spellcheck button on the comment editor window/popup thingy works, but the button to make it larger does nothing.

      Also, would it be possible to get a full list of the supported tags for our comments?
      A lot of the time, I want to know if I can use a list, or some other markup, and then I’m left guessing likely tags by looking at the markup tags of your forum, and Wikipedia, etc. :P

    2. ET says:

      This post looks relevant, but I’m certain there’s a better post, explaining why SO only has single-level nesting of comments.
      Well, technically, the comments are nested once, under the question on SO, and not nested with respect to other comments.
      So, the question acts as a pseudo-comment in regards to determining nesting level. :)

      EDIT:
      Derp!
      It was the immediate next result in my internet search!

    3. Peter H. Coffin says:

      I understand where you’re going with that, but those kind limitations on nesting drive me up the freakin’ wall. I can never tell what’s being responded to where, because people so seldom provide any context.

      1. ET says:

        I too have had conversations where people provide little-to-zero context (sometimes in emails for/at work…), so I know how annoying that is.
        However, by Shamus’ continuing good luck, he’s got a community of people, who already usually provide context.
        So, I don’t think it’d be much of a problem, compared to the problems with multi-level comments.

        I dunno; Maybe I’m too dumb to easily follow stuff visually across multiple pages.
        For all I know, 99% of Shamus’ community has an easy time with the multi-level comments, and I’m the outlier. :)

        1. syal says:

          I like the multi-level comments, because we do often branch out into multiple subjects (when somebody mentions a broad topic, or other topics in passing), and it’s nice to be able to visually separate them from each other.

          Or if someone says something controversial and half a dozen people call them an idiot in slightly different ways, it’s nice to be able to respond to one person at a time.

          (How I’ve missed you, Edit Button.)

          1. 4th Dimension says:

            Yup. Simply put our ussual conversations aren’t threads but trees.

            1. ET says:

              So, what happens when I have a reply that answers two different people’s comments above me?
              Now we need graphs.
              (I’m not joking, either; This has happened to me.)

              1. 4th Dimension says:

                In that case Paul Spooner’s idea in previous root comment would be useful.

                1. ET says:

                  Then the visuals wouldn’t match the “addressing” scheme!
                  We need a way to visualize graphs!

                  1. 4th Dimension says:

                    There is only one soluion. Shamus, get the Unity engine, and make a 3d space in it where we can leave comments in a graph way.

                  2. AyeGill says:

                    Holographic monitors.

                    Obviously, this might cause some issues for people still using legacy hardware, but really, if you’re using a 2D monitor in this day and age, you have only yourself to blame.

              2. syal says:

                I’ve also had that happen, not knowing where exactly a comment should fit in the tree, but that’s a better problem to have than a reply snarl. (Worst case, you copy the same reply to every branch it applies to.)

                -edit: And it’s only really a problem if you’re trying to unify the branching conversations again, which is usually impractical, and if you do manage it will sort itself out anyway because the other branches will die off.

                1. ET says:

                  What about the larger problem, when the first branch gets very long, pushing the branch you want to reply to more than a page length down.
                  Now it’s a pain to keep the conversation in your head, when you’re typing up your reply!
                  So scroll back and forth, or have a second window open?
                  The tree structure really heavily favours the earlier branches, over later ones.

  11. Daniel says:

    A request: please keep something visually distinctive about the admin comments. As a regular reader of the blog who only sometimes reads the comments, I really appreciate the visual clue of which comments are by Shamus/other blog authors.

    (I know that’s not so much feedback as a request, but I thought it might be helpful anyway).

  12. Maybe I’m not understanding the problem, but why can’t you make it alternate between blues and greys? Couldn’t you do something like:

    .comment .depth-1 .even { background: #Blue1; }
    .comment .depth-1 .odd { background: #Blue2; }

    .comment .depth-2 .even { background: #Grey1; }
    .comment .depth-2 .odd { background: #Grey2; }

    .comment .depth-3 .even { background: #Blue1; }
    .comment .depth-3 .odd { background: #Blue2; }

    .comment .depth-4 .even { background: #Grey1; }
    .comment .depth-4 .odd { background: #Grey2; }

    etc

    To me, that looks like all blue comments would be followed by greys, and all of the greys would be followed by blues, and the blue and grey would alternate.

    Are you trying to avoid a Grey2 comment having a Blue1 comment underneath it? That seems harder to solve.

    1. Shamus says:

      That’s possible, but on long threads you’ve got this blue/gsilver/blue/silver stripe down the site. It’s much easier to think, “LegendaryTeeth is the peach comment” than “LegendaryTeeth is the second-most-deep blue comment.”

      I don’t know. I’m still gathering feedback. We’ll see.

      1. Otakun says:

        a suggestion – have the nested comment’s color boxes be fully enclosed by the parent comment’s color box. Right now the comment boxes are aligned to the bottom right. But if a thin band of color were to show there too, then it would be visually MUCH easier to tell the parent. It’s hard to explain what I mean or why but if you try it you will see. Probably just add a margin-right and margin-bottom width of 2 or 3 px will do the trick

        1. Shamus says:

          Seriously considering this. The downside would be wasted space when you tie off a lot of threads at once.

          Anyone else have a comment on this?

          1. mookers says:

            I don’t think it will waste that much space. Your comment threads are already so long it will make very little difference. :)

  13. Daemian Lucifer says:

    Bah,humbug,this looks like an angry fruit salad,and I hate it,blah,blah,etc,etc.

    Anyway,I dont really mind the new colors.They dont clash with each other,so its ok.Though maybe now you should dim down the background white to match the softer comments a bit better.

  14. As someone who routinely goes back and reads comments, I like the colors, it makes it much easier to see who’s replying to whom (hopefully whom is right there). The pastel is pretty easy on the eyes, and the bold usernames are easy to see and read.

    So applause! Also, good luck figuring out the gold box issues.

    1. Jonn says:

      For who/whom, as a rule of thumb, swap them and see if the sentence makes sense: who = he, whom = him.
      Basically, m at the end. Not sure of any gender-neutral terms, but maybe that helps.

  15. Thearpox says:

    Besides that fact that I preferred the old system and never had a problem with it, and that the new system suffers from a bad case of angry fruit salad,

    Why do the comments suddenly feel very sparse? It simply feels like I can see a lot less comments on the screen. I have a 1280×1080 monitor, the screen height shouldn’t be a problem. And yet… it is.

    So it may be that the comment boxes now have too much empty space, are too far apart from one another, or something else, but at least to me, it is a much bigger problem than colors.

    PS: And hooray for edit! Now if only I can close my eyes and wait for them to recover…

    1. topazwolf says:

      1680 x 1050 Resolution here. Now that you mention it, I too have a strange sense of loss in vertical content. It may be the color, or that the boxes are narrower now or something, but I feel it as well.

      Incidentally, I can literally no longer stare at these pink boxes. These brighter ones are really hard to look at. (the other ones aren’t too bad though)

    2. ET says:

      I think Shamus added some extra whitespace before/after the “reply to this >>” button.
      Probably could cut that whitespace in half, and still have enough to visually distinguish things vertically.

      EDIT:
      it also looks like the whitespace on the vertical edges of comment boxes, is about twice the width of the whitespace on the left side of the comment boxes.
      So, that’s probably also contributing to the spareness.

  16. Abnaxis says:

    I do not like the colors.

    First, I am of an opinion that pastel in small doses, with a tasteful gradient is ok, but it can be easily overdone–and has been overdone here. It evokes an immediate “OMG why in the world would anyone want to color a whole wall like that!” feeling in my gut, similar to when I have peeled old wallpaper off of walls, only to reveal the horrid 70’s technicolor underneath. It’s not “angry fruit salad” because there isn’t enough contrast for that, it’s “too much bright.” I see other people complementing it though, so it might just be my reaction.

    Also, there is way too little distinction between separate comments, at least at the first two levels. The pink and fuchsia are too close.

  17. topazwolf says:

    Hmmm. I believe that the other method was pretty decent.

    My suggestions. The base-most comments are separated from each other well enough, they don’t really need any variation. I would stick with odd and even counting of comments to the base comments. It differentiates the comments from each other well enough and you should know which comment goes to what in the lower levels. At higher levels, you could probably just use a repeating pattern of sliver to blue to copper (dull brownish color) back to silver to handle it. (Though as far as color scheme goes, I would try and keep it in the cool and metallic ranges. Green would work okay, purple would also work)

    More out there suggestions:
    Would it be possible to number the layer of comments? Beside the name or something, having a little number could help when we reach the top of the comment ladder and create the great comment plateau.

    Is there anyway to force users to use a custom avatar? This is by far the easiest way I’ve found to follow the conversation flow is just being able to instantly recognize who is commenting. (To readers other than Shamus, seriously get an avatar if you comment frequently)

  18. Atle says:

    An idea out of nothing:

    Using the name to generate a pseudorandom color. This means a reply will now and then have the same color as the post it replies two. And if two people with the same color engages in a conversion …

    But I think it should be worth a go, and easy to implement.

    1. Mephane says:

      Only if we get to a color change if needed. Like, I couldn’t stand ending up as bright pink. -_-

      1. Atle says:

        A sollution like I was thinking about the color would be determinsitically given by the name from an algorithm. The point is to store nothing nowhere, and have a really fast and simple algorithm. The drawback is that you would have to change your name to change color.

        Of course, a palette without “offending” colors would be entirely possible.

  19. Mersadeon says:

    I like this new theme. Maybe a bit too much on the red-pink side since most comments don’t gather many replies, but I really like how all of the comments look like I could eat them.

  20. Peter H. Coffin says:

    I think it’s awesome and nicely understated, but I have a serious tolerance for the eye-searing and garish. I am exactly the sort of jackass that uses optical illusions, inter-optical rivalry and random dot stereograms (“magic eye” pictures) for page design elements.

    Which is probably why nobody allows me closer to web-design than PHP and backend processing…

  21. GiantRaven says:

    I like this. It’s like eating tasty sweets, but for my eyes.

  22. Cybron says:

    THIS COLOR SCHEME MAKES MY EYES BLEED AND IS HORRIBLE!

    Sorry, someone had to do it. Actual feedback: I really don’t like the color scheme. The red on green hurts my eyes, as do the brighter yellows in general. The blue is fine. The weird pastel-y pink/red (the color of Hitchmeister’s post up there) is alright with the washed out yellow.

    I don’t know how much work it would require, but is it possible to keep both the new and old themes available and selectable? If it’s too much work, ignore it, but I’d take the confusion of the old theme over this, personally.

    Edit: oh hey, editing is back. Is that new, or have I just not noticed it being back?

    1. ET says:

      Shamus added editing back around the time he posted about the website being on new hardware.

      On the topic of colours:
      The whites and light blues, are extremely hard to distinguish visually, from the white background image which has dice in it.
      So…no light colours, please. :)

  23. Amnestic says:

    The comments seem more spaced out than before, to the extent that while I could have 3-5 comments on my screen at once without any issue, now I can barely get two on. If it’s intentional, I have to say I’m not a fan, sadly.

    Colourwise I feel like I’ve stepped into a granny’s baking blog and I do hope you reconsider the new set.

    Still, if you keep these changes as they are, I’ll doubtless just get used to it. Change is scary and all that.

    Edit: This new purple/blue I like a lot better than before! Change isn’t so scary now!

  24. Dev Null says:

    More a random musing than a serious suggestion, but I wonder how hard it would be to assign a unique color to each commenter on a particular post, and how many distinct commenters you’d have to get before you ran out of distinguishable colors. Possibly you could add more by using patterns.

    Yeah, I’m totally going dibs on cyan and fuscia plaid.

    1. ET says:

      That would be pretty much guaranteed to fail.
      The colouring needs to be based on the comments’ structure, not the people who are commenting.
      Otherwise, you’ll inevitably end up with a commenter with colour X, replying to a commenter with colour only-barely-different-from-X, and it’ll be a visual blob, where you can’t easily visually distinguish the two comments.

  25. krellen says:

    I think the biggest problem I see here is that the new colour scheme of the comments doesn’t jive with the overall colour scheme of the site, especially the background. Before, you had a sort of washed-out, muted theme to the site – a washed out dice in the background, washed out colours for the comments. Now, the brighter/darker colours of the scheme stand out glaringly – kind of in the same eye-catching way the gold admin comments do.

    Given that you want to keep a wider palette of colours to keep comment sorting easier, the solution here would be to get a more saturated background to compliment the comment colours.

    As it is now, the site is somewhat ugly, though it doesn’t quite reach eye-bleed levels.

    1. krellen says:

      And now there’s a new colour scheme. This one works a lot better, I think.

  26. Khazidhea says:

    I can see that it’s changed now, but just thought I’d comment that colour wise if using a spectrum of colours I’d prefer if it started from the other end; I’d rather see more blues/purples than reds/pinks.

  27. McNutcase says:

    When I first saw the new theme, it was low-saturation, small usernames, and it did kind of hurt to read. With the upped saturation, better bordering, and nice big usernames, it’s much easier to read, but to be honest I’m not noticing much advantage to it.

    Of course, I’m actually a user interface nightmare. I really ought to be using custom stylesheets for everything, because the combination of my defective eyes (a really rare form of colourblindness) and my cross-wired brain (synaesthesia) means I get really strange effects from certain colour combinations. So what I’m saying is, take my feedback with a whole sack full of salt. I am so far beyond even a corner case that it does not make sense to code with me in mind.

  28. Epopisces says:

    (For posterity: the theme I’m commenting on has root posts in saturated blue alternating with purple, with replies to the root progressively getting brighter and less saturated the deeper in they go).

    I don’t have any problem with the colors themselves, but in the root posts (the most saturated ones) readability is reduced on my monitor. It’s not that it is unreadable so much as there is a bit more strain on the eyes.

    But then the comments look fine when viewed on my Galaxy S3–readability is fine. Huh. Guess I’ll calibrate my monitor.

    EDIT: Wait, no, I lied. I was trolled by Shamus changing the theme as I was writing this post :P So, uh, comment on the style that I’m seeing as of this edit (a much more pastel version): far more readable. Your golden posts really stand out now–they were never hard to spot, but now they’re truly impossible to miss.

    Also, bold usernames are a must, they really do make a difference.

  29. Thomas says:

    :( I missed the crazy colours. Anyway can’t remember if this is any different than before (different shade of grey/blue? :P), but it’s looks nice as it is now =D

    There’s a dotted line around the left side of the comment boxes that looks a bit strange. And I wonder if it’d be possible to reduce the width of the little strip on the left in nested comments? Even before the comments right at the bottom began to look way too narrow and a bit crazy and I imagine this would aggravate the problem a lot (if it’s not narrower, I always thought it could be a little thinner anyway )

    1. anaphysik says:

      I don’t like the colours, and the added blank space before “Reply to this” should be reduced, but by *far* the biggest thing is the dotted left border – my eyes are just plain not liking following them. For whatever reason, the solid borders (and maybe the old colours) were a lot easier to track back to the replied-to comment.

  30. Nonesuch says:

    The comment dice are really small at the moment, and there’s this weird thing happening where the grey post background doesn’t carry over into their space, leaving it plain white.

  31. Exetera says:

    If you’re making theme changes now, is there any chance of going back to a more abstract background? The dice photo is visually complex, somewhat eye-grabbing, and horizontally tiles noticeably on my 1680×1050 monitor, and it’s been distracting me ever since you switched to it.

    Also: the comments have a bit too much padding/margin now, particularly around the bottom. Wastes a lot of vertical space, looks a little sloppy.

  32. silver Harloe says:

    Wow, that post was really hard for me to read, because my eye kept jumping to the next paragraph to see what you were saying about me, but it wasn’t me, just the color. Mentioned quite often.

    Anyway, while you’re under the hood, can you make the main page background repeat vertically? Maybe it’s just a firefox thing, or maybe I’m just broken, but when I read a really long thread, eventually the background goes to black. So if it’s already repeating the background vertically, it’s not doing it enough. Maybe saying background-color:white would make it more tolerable when the repeating stops.

    Also, you may find this helpful? http://www.w3schools.com/cssref/sel_nth-child.asp “every major browser except ie8 and earlier” sounds like decent enough support.

    1. 4th Dimension says:

      That selector selects only n-th children by order and not depth.

      li.comment:nth-child(2) would select:
      second root comment
      all comments that are second in their trees.

      Example
      C
      -C
      -Cx
      Cx
      – C
      C
      – C
      – Cx
      – – C
      – – – C
      – – Cx
      – – – C

      Cs are the comments and with x I marked the ones this would select.

      In conclusion I doubt this would be of any use to Shamus.

      1. silver Harloe says:

        agreed, it doesn’t seem useful here upon further reflection. was just a thought.

        so far I’ve wrangled the original post into this requirements w/ examples text:

        my interpretation of the requirements: comments alternate primary colors universally, never using the color of their immediate parent (only)

        trees are of the form: desired color_____classes assigned by wp (which we cannot change)

        no nesting

        blue1______comment even thread-even depth-1
        silver1____comment odd thread-odd depth-1
        blue1______comment even thread-even depth-1
        silver1____comment odd thread-odd depth-1

        one level nesting

        blue1___________comment even thread-even depth-1
        ____silver1_________comment odd depth-2
        ____blue2___________comment even depth-2
        silver11________comment odd thread-odd depth-1
        ____blue1___________comment even depth-2
        ____silver2_________comment odd depth-2
        ____blue1___________comment even depth-2
        silver1_________comment odd thread-even depth-1
        blue1___________comment even thread-odd depth-1

        two levels nesting

        blue1______________comment even thread-even depth-1
        ____silver1____________comment odd depth-2
        ________blue1______________comment even depth-3
        ________silver2____________comment odd depth-3
        ____blue2______________comment even depth-2
        ________silver1____________comment odd depth-3
        ________blue1______________comment even depth-3
        ________silver1____________comment odd depth-3
        ____blue2______________comment even depth-2
        ____silver1____________comment odd depth-2
        blue1______________comment even thread-even depth-1
        ____silver1____________comment odd depth-2
        ________blue1______________comment even depth-3
        ________silver2____________comment odd depth-3
        ________blue1______________comment even depth-3
        ____silver1____________comment odd depth-2
        ________blue1______________comment even depth-3
        ________silver2____________comment odd depth-3
        ____blue2______________comment even depth-2
        silver1____________comment even thread-odd depth-1
        blue1______________comment odd thread-even depth-1

        so even is always blue1 or blue2, odd is always silver1 or silver2
        depth > 1 can have all 4 colors

        I believe, in the original spreadsheet, even depths are all blue2+silver2, odd depths are all blue1+silver1,
        which technically also fits the requirement.

    2. silver Harloe says:

      I did some playing with the background – I see it is already set to repeat. I went to a long post and scrolled until the background went black, then brought up firebug to check the repeat and color settings, but while I had firebug open, the background showed up properly (and immediately went back to black when I closed it). Adding background-color:white; to the body didn’t dispel the blackness (though it couldn’t hurt). I appear to be experiencing a bug, probably Firefox specific, and not something fixable with css.

  33. MrGuy says:

    I like how we just applied the four color map theorem to WordPress themes.

    1. ET says:

      Yeah, now all we need to do is pick the right four colours!
      My vote: blue, purple, green, red, gold (for Shamus and company), all in the current (as of writing) semi-pastel, washed-out variants we see now. :)

  34. Destrustor says:

    I’m not too thrilled about the ” [commenter] says: ” part.
    Kinda makes it look like everyone has “says” in their name at first glance.
    Maybe un-boldening the “says” would help with that.

    1. ET says:

      Personally, I’d just get rid of the “says” and keep the colon.
      I mean, it’s pretty universal in the usage of English, that colons indicate that something following a colon, is somehow tightly related to the thing before the colon.
      Among other things I can’t readily think of, this applies to lists, movie subtitles, and the comments of us users. :)

    2. anaphysik "'mr. says' is my father" says:

      It’s not a bug, it’s a feature.

      (But yes, I agree with ET that “[name]:” would be superior.)

      1. Shamus says:

        You gotta be kidding me. Apparently THIS: http://pastebin.com/VF0jNL7R

        …is what you need to do to remove the default “says” from comments. You have to make a new filter class and add it to your theme.

        That strikes me as being a lot of lines of code (parsing code, no less) to execute (PHP code of all things) every time you print someone’s name (which happens for every comment) just so we can NOT print a completely superfluous word.

        Sometimes WordPress really pisses me off.

        1. Shamus says:

          Ah! An easier solution:

          .says { display: none; }

          On the one hand, that’s a nice quick solution that doesn’t require any fancy parsing. On the other hand, it’s still silly and dumb.

          1. anaphysik says:

            B-b-but Shamus! Now your better site design has ruined my joke! :P

    3. syal says:

      Agreed about the ‘says’. I can’t help but read it in the “The Cow Says” voice.

      -edit: …and of course it’s already fixed now.

  35. Off the bat, I’d suggest – if possible mind – some form of separation between the comment boxes and the background. Something akin to either a shadow drop or a darker border because the light against white is a bit…blend-y. :P That aside, there’s something else I’m not quite grok’n to about the palette, but I can’t really put my finger one it. Sorry.

  36. swimon says:

    The colour scheme (lavender and blue atm) is perhaps a bit too “friendly” and soft for my tastes but I’m sure I’ll get used to them. I hardly ever noticed the colour scheme before so it’s not exactly a big deal for me.

    The dotted lines on the left, top and bottom however, please remove them. They’re infuriating. I can’t quite put my finger on what’s so bad about them (maybe that they look different as you scroll past them so every time you stop scrolling it feels like the entire page jumps at you or just that they mess with my latent OCD or something else) but I really don’t like them.

    Other than that everything looks good on my end.

    1. swimon says:

      It looks much better now :D

      Not necessarily perfect but definately something I can live with.

  37. Hmmm. Your site now seems to prominently feature blue and purplish. You wouldn’t happen to have taken that idea from a different, new gaming blog, would you? WOULD YOU?!

  38. 4th Dimension says:

    Hmm, weird . . . better post this.

    Anyway, I don’t know if this is a feature or a bug, but as I understand you want for top/root comment colors to alternate? And you do by asigning them alternating even and odd CSS classes.
    Well something wierd is going on because currently the order of these classes is:

    EVEN
    EVEN
    ODD
    EVEN
    ODD
    ODD
    EVEN
    EVEN
    EVEN
    ODD
    EVEN
    and the rest is fine.

  39. Wooji says:

    Really like the current blue/white/light blue/purpleish theam very easy on the eyes (mine atleast).

    1. Duoae says:

      Me too! I think it makes the comment threads really easy to read.

  40. zefz says:

    By the way Shamus, why doesn’t shamusyoung.com redirect to twentysidedtale?

    1. ET says:

      Stop distracting him! :P

    2. Humanoid says:

      There was a weird redirection bug with some browsers that led to it just refreshing the page over and over again.

  41. Disc says:

    I can’t say I’m really into this blue-purple mashup. Just feels like somekind of sterile pharmacy puke of color or something. Creepy cold and not too inviting. Not sure where the association comes from, but there it is.

    Could be it just takes time getting used to, but the blue/silver worked generally better for me.

    1. ET says:

      On my crappy monitor, the desaturated purple looks like gray until I squint really hard… ^^;

  42. Eskel says:

    Regarding the first goal the formatting of numbered list looks weird to me.

    Currently the second paragraph in item 1 is separated by empty line on both sides. This makes the first item seem detached from the rest of list. I thing it might look better to add empty line between other items. That would make the spacing of the list more uniform.

    1. ET says:

      Yeah, I didn’t even notice that;
      Items in lists should probably all have spaces between them.

  43. TSi says:

    I kind of like the way it looks now although the commenter’s name feels a bit too big.
    I use a small screen as my main monitor (1440*900) and often use a full-HD monitor but never set my browser in full-screen for some reasons. That being said, I do have a problem while reading the comments as now they take up more space on the screen, scrolling becomes tedious so I’m now forced to zoom out a bit.
    I don’t mind having to zoom out to see more than one comment at a time but i think it would be better to disable the 1.4 line-height in the #main ID.

  44. RTBones says:

    If I have any issue with the colour scheme at all, its that at times the more pastel-ey colours seem to blend in with the background and wash things out. My eyeball-brain interconnect does like the fact that the scheme is relatively muted and sedate. An ever-so-slightly darker background that gives a little more contrast to the comments might take care of some of the washy-outy-ness.

    1. ET says:

      Or the currently white, dotted border, could be changed.
      Maybe a thick comic-book style black-line/white-line bubble?

  45. Neko says:

    I played with Firefox’s Style Editor and now I don’t know what to believe anymore. It shouldn’t behave like that, surely? A simple depth-1.odd > depth-2.odd { bla } should be all you need to disambiguate things, right? But I can’t get the damned thing to work.

    Can you just get the backend to flatten the notion of ‘odd’ and ‘even’ so it just alternates colours based on how the comments go down the page? Just keep a variable outside of whatever recursive process goes through the tree and flip it every time you write out the opening div?

    1. 4th Dimension says:

      Why do you need to explicitly specify that depth-2 is child of depth-1. Also I think > selector only selects DIRECT children. Depth2 li tag is not direct child of Depth1 li tag, but it’s “grandchild”. It’s more li.depth-1 > ul > li.depth-2 .

      Also Shouldn’t you need dots in front of depth? Like .depth-1.odd and not depth-1.odd?

    2. Shamus says:

      Nope. You either use the built-in (and completely dumb) scheme or you roll your entire comments loop and all formatting from scratch using a subclass.

      Did I mention that WordPress pisses me off?

      1. Paul Spooner says:

        I seems to be a theme that nearly all software interfaces and syntax (or lack thereof) piss you off. Maybe it’s just “poorly designed” ones… which is still pretty much all of them.

        If you designed a syntax that made perfect sense to you… what would other people think of it? I suspect there’s a good deal of comedy to be found in this vein.

        1. silver Harloe says:

          I’ve been programming since 1982, professionally since 1992, I can assure you that:

          1) Every programmer HATES HATES HATES every other programmer’s code.

          2) Your own code resembles someone else’s code after 6 months, see rule #1 for how you feel about your own older code.

  46. drlemaster says:

    Not sure what iteration I am seeing, appears to be alternating blue and some sort of sea green. The green might be a good color for bathroom tile, but I think it goes poorly with the blue. Did not check yesterday to see the rainbow effect. Trying to find the right balance of aesthetically pleasing and thread color-coding is a thankless job, sorry that “I don’t like the green” is the most I have to contribute. Were it not for tradition, I might suggest alternating blue and gold, and use some third color for the mod posts, but I fear that would go over about as well as “we’ve decide to move the Senate to the Oval Office, and let the president and his staff work out the Smithsonian.”

  47. Dythlem says:

    Really not a fan of the new colors. Have you tried a color palette website like Kuler? It might help you figure out a nice scheme for the blog.

  48. WWWebb says:

    I’m getting a 403 error whenever I try to view the site with WaterFox. I had to manually change my useragentstring from the Waterfox default:

    Mozilla/5.0 (Windows NT; Win64; x64; rv:26.0) Gecko/20100101 Firefox/26.0 Waterfox/26.0

    to the Firefox default:

    Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:25.0) Gecko/20100101 Firefox/25.0

    I don’t know what list WordPress is checking against when it comes to what’s an acceptable browser.

    PS- Yay comment editing!

  49. TMTVL says:

    Using my other username, testing to see if I can finally post again.

  50. AyeGill says:

    This may be of some interest. It’s a short article about programatically generating visually distinct colors.

    Edit: and of course my comment gets a background in almost exactly the same blue that links are rendered in (at least in my browser). Click the “this” in the first sentence to find what I was talking about.

  51. BUG LIST: (AS OF THIS MOMENT)

    – PgUp/PgDn and Home/End navigation don’t function

    – Site background image disappears the moment this comment appears on screen.

    BROWSER:
    Firefox 27.0.1

    OS:
    Windows 7 64bit

  52. Tony says:

    Have you considered Javascript/JQuery? It’ll still be a lot of computing power, but it would do nothing to stress your server.

    My interest got piqued so I made a prototype:

    http://jsfiddle.net/KWsnE/2/

    Sorry if that wasn’t what you were looking for.

    1. silver Harloe says:

      of course it wouldn’t stress the server – the code would run in everyone’s browser. but jquery, even minified, is a big download to attach to every page turn. (assuming WP is amenable to this kind of thing at all).

      1. Tony says:

        Well, the Jquery isn’t strictly necessary.

        http://jsfiddle.net/KWsnE/4/

  53. toasthaste says:

    I have no idea if this would work, but this idea occurred to me for making replies to replies always different colors:

    Each comment’s background could be semi-transparent. With the comment backgrounds overlapping the way they already do, the different levels of comments would add their own tinge of pigment to the ones “on top of” them. The top level comments would be palest, and each consecutive reply would have a little more pigment than the last.

    So two replies to the same comment would each have the same saturation as each other, but further replies to either of those comments would be progressively darker. With enough replies to replies you’d eventually be dealing with fully saturated comments, but I think the nesting would break down long before that became an issue.

    You could also have top level comments alternate in color without getting too much of a candy shop vibe, since they’d be severely desaturated until you went pretty far down a comment tree.

    I’ve drawn up a little picture to try to represent this better, I’ll post another comment after this one with the link, because I don’t know if linking to something would mark my comment as spam.

    1. silver Harloe says:

      this seems very clever. too clever. you might be an alien spy.

      with the right choice of base colors, this could really work well. I see your mockup image, but have you confirmed in any browsers that

      div class=”foo”
      ____div class=”foo”
      ________div class=”foo”
      ________/div
      ____/div
      /div

      actually makes three copies of foo on top of each other instead of one foo shared by all? (I couldn’t tell if you screen capped html, or made the image in an image editor)

      edit: I did the test:
      http://silverchat.com/~silver/test_class_overlap.html
      works in ff, chrome, safari, and opera, but NOT in ie8 (where neither div has a background color at all) (I’m a web developer, this is what I DO and why I keep latest copies of too many browsers, but MS won’t do ie past 8 for XP). I asked a friend to look at the url in ie11, but he hasn’t gotten back to me. Man, I need a new computer, but, sigh, I’m going to spend my tax refund on dental work instead.

      1. toasthaste says:

        I just tried it in ie11, it works fine! I’m glad you were able to test this out, I just mocked it up in an image editor and hoped that it would be possible to actually, y’know, DO. I don’t know the first thing about web development.

    2. 4th Dimension says:

      Mock code:
      li.comment.odd, li.comment.even { background: rgba(0,0,255,0.1); }

      It doesn’t look half bad.
      Although problem becomes (if we are going the route of one color) of finding a suitable color that stands out enough even with transparency set to 10% to be level one comment, and to be not too dark for level 10 comments.

      1. 4th Dimension says:

        This combination looks promising:
        li.comment.even {
        background: rgba(255, 70, 255,0.5);
        }
        li.comment.odd {
        background: rgba(70, 255, 70,0.5);
        }

      2. toasthaste says:

        Maybe a little contrast to make top-level comments stand out could work? Something like a border, or a colored bar along the top.

        If that worked, that might be a good way to distinguish Shamus and company’s comments from everyone else’s. Since I think the vibrant yellow would probably interfere with the whole overlapping transparencies thing.

  54. Steve C says:

    THIS VIDEO DRIVER MAKES MY EYES BLEED AND IS HORRIBLE!

    Seriously. My ATI drivers destroyed my fonts yesterday and I’m unable to get back to default. I have no idea what the website is supposed to look like today. Shamus could you please post screenshots of what you want it to look like? Or at least what it looks like to you currently? I’m certain I am not seeing the same thing that others see. Odds are there are others seeing something different than you are too. So me telling you that I don’t like your font and it looks flat should be promptly ignored since that’s on my end. Others may be giving you advice that should be ignored on the same basis.

    btw I was planning to use your site to help me get back to my own defaults. Ironic you changed it today. I blame Josh. Why? I don’t know. Just like blaming him I guess.

    1. Paul Spooner says:

      Here’s how the site looks right now.

      My guess is he’s not done messing with it. I would turn down the bloom and lens flare personally, but hey, it will look great on a magazine cover!

      EDIT: Aww, now it’s back to solid pastel greens and blues. Can you post a picture of what it looks like to you? That would be more informative and helpful to Shamus.

      1. Steve C says:

        Here is what it looks like to me. Like I said there is something wrong with my fonts and likely other things too. (btw thanks for your screenshot. I had a good laugh at that.)

        http://postimg.org/image/bndvpvjo9/

        1. Paul Spooner says:

          Hmm, that’s basically identical to what I’m seeing. The font is slightly different (you can compare to my “screenshot” of course), but just as readable to my eyes. I’m not a font expert though.

          Hehe, you’re welcome :) It was fun to make.

          1. Steve C says:

            That screenshot looks slightly better than what I actually see. There’s a slight rainbow affect around text. A screenshot is missing that distorted affect. I’m 100% certain it’s my AMD cataclyst control center. It started up immediately after I changed some settings and uninstalling everything doesn’t make it go away. Pain the butt.

  55. Shamus I got an idea that might/might not work.

    CSS allows the use of insertion of text before or after: http://www.w3schools.com/cssref/sel_after.asp

    How do you think it would look if in addition to the colors of the comments that you also add text (after the name?, or maybe before the dice?)
    Which says “Level 1” and “Level 2” etc. Indicating nesting level of a comment.

  56. Asimech says:

    Well, the cyan/purple-ish blue I’m seeing now is good. But there are a couple of things I’m wondering:

    Cyan seems a bit too much like CGA’s Light Cyan, what would it look like slightly darker and/or desaturated?

    Blue seems a bit too close to the link colour, would it get too close to the Cyan if it was brighter and/or more saturated?

    Those out of the way, it’s a net benefit for me as-is. There was something about the gradient in the old blue boxes that made it difficult for me to read text in them from time to time and I’m not having that problem now.

  57. Cybron says:

    Looks better to me now. I can’t make out which level each comment is on at all, but as long as it doesn’t hurt to look at, it’s fine with me.

  58. bucaneer says:

    The current scheme looks pretty fine to me, except for a pair of colors (.depth-1.odd #CAF8FF and .depth-2.even #EEEEFF) which appear to have the exact same luminosity and not enough difference in hue, so stretches where the two alternate (like here just look like a single block if I’m not paying attention. Making one of the colors a bit darker should be enough (#C0F0FF looks like a good substitute for .depth-1.odd to me).

Thanks for joining the discussion. Be nice, don't post angry, and enjoy yourself. This is supposed to be fun. Your email address will not be published. Required fields are marked*

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>

Leave a Reply

Your email address will not be published.