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?
Thread Starter
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.
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?
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.
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
