Support » Plugins » Alternating comment backgrounds

  • skeen

    (@skeen)


    Hello all;
    This is my FIRST HACK! What I did with my b2 blog is format the comments so that they were one on top of the other, but… I made it so that the background colors alternated for easy readability. I had modified this slightly to work with WordPress’s b2comments.php.
    skeen’s alternating background hack
    Below the first line of b2comments.php, add the following:
    $bgColor = "#EEEEEE";
    You would now use the $bgColor variable as the colour you wish to change your background to. Here is an example of what I did:
    <span style="background-color:<?=$bgColor;?>;">
    <?php comment_text() ?>
    </span>

    Below this, add the following code:
    <?
    if("#EEEEEE" == $bgColor) {
    $bgColor="#DBDBDB";
    }
    else {
    $bgColor="#EEEEEE";
    }
    ?>

    Thats it! You’re set. Your comments background color will now alternate.

Viewing 15 replies - 1 through 15 (of 20 total)
  • Anonymous

    Cool! Thanks for the hack, I’m going to try it out!

    Anonymous

    Hey, I was just thinking about alternating background color for posts. How could I do that?

    skeen

    (@skeen)

    Hey, I was just thinking about alternating background color for posts. How could I do that?

    You would do that the same way, set the background colour for the element that you are displaying the content text in using the $bgColor variable. Make sure to set the $bgColor variable above the b2 loop though, and make sure this code…
    <?
    if("#EEEEEE" == $bgColor) {
    $bgColor="#DBDBDB";
    }
    else {
    $bgColor="#EEEEEE";
    }
    ?>

    …is within the b2 loop, under the content text area.
    This method of alternating background colours can be used in all sorts of creative ways.

    presto

    (@presto)

    I understand to place
    $bgColor = “#EEEEEE”;
    after
    <?php // Do not delete these lines
    now my question is where exactly do I place
    <span style=”background-color:<?=$bgColor;?>;”>
    <?php comment_text() ?>
    </span>
    and
    <?
    if(“#EEEEEE” == $bgColor) {
    $bgColor=”#DBDBDB”;
    }
    else {
    $bgColor=”#EEEEEE”;
    }
    ?>

    Anybody get this working correctly?

    Nice, David, thanks!

    I love the div alternating, used it in my comments-popup.

    I’ve had this working with my comments for a couple of days now using JavaScript and ‘proper’ stylized divs. The only ‘problem’ I see with the above aproaches is that it will only put the backround behind comment/post text, leaving date/name/title unstyled.

    um, that depends on where you open/close the wrappering div. note that on my homepage, the entire content of the post is enclosed by a bordered div, but when you go into one of the posts, the title/meta information isn’t inside the block with the text body of the post. I use numerous divs to control stylizing posts at different levels.
    -d
    http://www.chait.net

    It’s another, even simpler way to do it.
    At the top of your page, put<?$i;?>, then, inside your comments loop, put <div class=”<?=($i%2)?”color1″:”color2″;$i++;?>”>. Then, somewhere in your stylesheet, put
    .color1 {background-color: #DBDBDB;}
    .color2 {background-color: #EEEEEE;}

    Cine, you just embarassed us all. Thank you.

    that was neat 😀

    Hmmm.. That’s really not much simpler — it was already simple to start with — and really hinders readability. 😉 Also, I believe <? might not validate (unless you were just using that for shorthand).
    However, the numeric approach is useful if you wanted more than two colors. Of course, you’d probably want to use a more descriptive variable than $i, especially where that gets used in so many loops it might conflict… 😉
    Something like:
    … at the top
    $colorNum = 0;
    $colorArray = array(“color1”, “color2”, “color3”);
    $colorCount = 3;
    inside the comments or posts loop (within <?php section)… at least I think this’ll work… :
    echo “<div class='”.$colorArray[$colorNum%$colorCount].”‘>”;
    colorNum++;
    That’d allow you as many color combinations as you might want.
    Note that this system can be extended in a few other ways.
    use the category nicenames to define CSS overrides (I do this for my ‘post type’, by number):
    echo “<div class=’color-‘”.$niceCategoryName.”‘>”;
    or, if you have a specific color-class to assign a-priori based on category, or otherwise programmatically:
    echo “<div class='”.$colorArray[$niceCategoryName].”‘>”;
    The permutations are endless! 😉
    -d
    http://www.chait.net

    @ davidchait
    Cine’s method allows us to put colors in css, where it belongs. Not in the source of the page (where it shouldn’t be).
    Using Cine’s method here, works as intended. Thanx.
    http://www.MaxT.dk

    Actually Max, you’re wrong on two counts! 😉
    First, if you read up the page earlier, you’ll see that I was the original poster of the CSS-based solution. Cine’s post was a ‘compression’ of that method, though I note above the potential issues.
    Second, my more recent post specifically does everything via CSS class tags, nothing embedded in the html. Not sure what you misread. I gave expanded approaches for doing greater than 2 colors, more content-specific color tagging, as well as programmatic or database-driven color tagging. All transformed into named CSS classes in the end.
    Just wanted to make sure you go back and re-read the posts well, as you missed something, and it might be useful to you in the future. Glad you’ve got something up and running!
    -d
    http://www.chait.net

Viewing 15 replies - 1 through 15 (of 20 total)
  • The topic ‘Alternating comment backgrounds’ is closed to new replies.