WordPress.org

Ready to get started?Download WordPress

Forums

Alternating comment backgrounds (20 posts)

  1. Anonymous
    Unregistered
    Posted 10 years ago #

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

  2. Anonymous
    Unregistered
    Posted 10 years ago #

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

  3. skeen
    Member
    Posted 10 years ago #

    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.

  4. presto
    Member
    Posted 10 years ago #

    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";
    }
    ?>

  5. Cena
    Member
    Posted 10 years ago #

    Anybody get this working correctly?

  6. Cena
    Member
    Posted 10 years ago #

    Nice, David, thanks!

  7. nicknicknick
    Member
    Posted 9 years ago #

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

  8. nsxpower
    Member
    Posted 9 years ago #

    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.

  9. davidchait
    Member
    Posted 9 years ago #

    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

  10. Cine
    Member
    Posted 9 years ago #

    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;}

  11. nsxpower
    Member
    Posted 9 years ago #

    Cine, you just embarassed us all. Thank you.

  12. OperaManiac
    Member
    Posted 9 years ago #

    that was neat :D

  13. davidchait
    Member
    Posted 9 years ago #

    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

  14. MaxT
    Member
    Posted 9 years ago #

    @ 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

  15. davidchait
    Member
    Posted 9 years ago #

    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

  16. davidchait
    Member
    Posted 9 years ago #

    None taken. ;)
    Just so you are clear, that array is an array of NAMES, not color values. Those names are the CSS class names for the given color blocks. The advantage being that you can make the array as big as you want, index into it however you want, not playing with the actual class names within some tighter code lower in the page. Cleaner to say the least.
    The other thing it does is allows you to do things like add a field to the categories table, so that each category also has a color-class-tagging. At the top of the page, you extract those color tags into an array indexed by the category ID, and then within the posts loop you pickup the proper class for the post's category. Works well for single-category posts.. ;)
    However, this IS where you might also want something more database-driven. Maybe the colors themselves should be specified in the category table or something. Depends on each person's needs -- some people may desire the explicitly database-driven control rather than CSS. Some people might not even want to touch the CSS, in which case programmatic building is better. Not to leave out CSS, you can also programmatically >build< a set of styles on the fly at the top of your page, based on the database -- combined data-driven and CSS-applied stylings.
    Lots of ways to skin this cat! ;)
    -d

  17. MaxT
    Member
    Posted 9 years ago #

    Hm, I see, my fault... I thought color1, color2 etc refer to the hex values of colors, not php variables. *Ashamed* :p
    And I prefer to use CSS for styling/layout, that's what it's made for ;) DB used for storing content. Once again, my apologies :)

  18. davidchait
    Member
    Posted 9 years ago #

    No problem! Yeah, I think there's a lot of different solutions here that depend on how people like to use php/html/css/sql. For instance, my CG-Amazon library depends highly on web-side cache files with a lightweight table for larger querying -- no reason to ask for large amounts of data you don't need, or to slow your page down by bogging down the SQL server with too many requests. ;)
    -d

  19. ritesh
    Member
    Posted 9 years ago #

    Cine, just tried your method! fantastic, works like a charm. :D

  20. StarrysWorld
    Member
    Posted 8 years ago #

    That was fantastic Cine. For some reason the other methods weren't working for me and like said above I wanted more than two colours and that bit of code made it really simple!!

    Thank You if you still come by here!

Topic Closed

This topic has been closed to new replies.

About this Topic