Alternating color for posts


Author Message
Arnold

Posted: 11/24/2011
Quote message 

Hello,
<p>
My goal is to have alternating colors in my posts / blogroll in the archive.php. So for instance the even posts have a white background, and the odd posts have a black background.
<p>
There are how-to's for this, but I'm a bit lost, in how to do this in the generated themefiles of Artisteer. When I try to follow a how-to for getting this done, I get stuck because I cannot find the right place to add the codes like in the how-to on <a
href="http://adambrown.info/b/widgets/easy-php-tutorial-for-wordpress-users/posts-that-have-alternating-colors/">http://adambrown.info/b/widgets/easy-php-tutorial-for-wordpress-users/posts-that-have-alternating-colors/</a>
<p>
In Artisteer generated templates there are loops in different files, and I do not know which one I need to alter. I also do not grasp where the DIV code is, that is used for the posts. In firefox I can see that the CSS styles for the posts are .box-body and .post-body but I cannot figure out how to match that to what is mentioned in the how-to that Adam R. Brown has provided for general Wordpress templates.
<p>
It would be great if someone could help me out with the code and where to place it. Many thanks in advance!
<p>
Best regards,
<p>
Arnold
 
Gina

Posted: 11/25/2011
Quote message 

Hi Arnold,

Add this code to your functions.php:


function oddeven_post_class ( $classes ) {
global $current_class;
$classes[] = $current_class;
$current_class = ($current_class == 'odd') ? 'even' : 'odd';
return $classes;
}
add_filter ( 'post_class' , 'oddeven_post_class' );
global $current_class;
$current_class = 'odd';

Then add the style to the background of the posts (I inserted just an example of colors):

.odd {
background: none repeat scroll 0 0 #ffffff;
}
.even {
background: none repeat scroll 0 0 #000000;
}
 
Arnold

Posted: 11/25/2011
Quote message 

Hello Gina!

Wow, thanks for your code, I will try this as soon as I'm back home. This was something I've been struggling with for some days now.

Have a good weekend!

Arnold
 
Gina

Posted: 11/25/2011
Quote message 

Arnold, I must say that this code in applied to all posts on the site (home page, pages, archives). It also has defines first post in the list as 'odd', thus if the page has one post it will have .odd style. So you may chose to define .odd as neutral and give to .even outstanding background color.
 
Arnold

Posted: 11/25/2011
Quote message 

Hi Gina, thanks for the remarks, that it applies to all posts is actually quit good for what I wanted, and thanks for clarifying the way the postcolors will work in case of a single pos. Can't wait to see the results as soon as I'm back home. Once again, thanks for helping me out here, much appreciated!

Best regards, Arnold
 
Arnold

Posted: 11/25/2011
Quote message 

Hi Gina, I've just added the code and it works perfectly! Thanks!

Best regards,
Arnold
 
Brian

Posted: 12/6/2011
Quote message 

Gina that code still works like a charm to alternate post bg colors ...

Is there a function that one can add to alternate comment bg colors the same way?
 
Gina

Posted: 12/7/2011
Quote message 

:-)

To use the same principle for comments, add this code to functions.php:

function oddeven_comment_class ( $comments ) {
global $current_class;
$classes[] = $current_class;
$current_class = ($current_class == 'odd') ? 'even' : 'odd';
return $classes;
}
add_filter ( 'comment_class' , 'oddeven_comment_class' , 'commentform_class' );
global $current_class;
$current_class = 'odd';

And this one to styles.css:

.odd
{
background-color:#c3fbe7 !important;
}
.even
{
background-color:#93f993 !important;
}

(the colors are just an example)
 
Brian

Posted: 12/7/2011
Quote message 

Thanks Gina - I tried that and it inserts the odd / even class into the list element >

	<ul id="comments-list">		<li class="even" id="li-comment-1">  			<div class="blog-post" id="comment-1"> 


I really need the item to go into the div element - is that possible?
 
Gina

Posted: 12/7/2011
Quote message 

I inserted in "li" as comments are listed as in unordered list. There are several divs embedding the comments. Here is a basic structure (this is for one comment):

<div class="art-box-body art-post-body">
<div class="art-post-inner art-article">
<div class="art-postcontent">
<div class="comment-author vcard">
<div class="comment-meta commentmetadata">
<div class="comment-body">

Here are the filters that you may add to the code written according to the divs above. Place the filter(s) in the part of th code add_filter ( 'comment_class' , 'oddeven_comment_class' , 'commentform_class' ).
The filters:

'post_body_class'
'post_inner_class'
'article_class'
'comment_author_class
'comment_meta'
'commentmetadata_class'
'comment_body_class'

I am not sure what exactly you need, thus, try those out (one by one, or in combination)
 
Brian

Posted: 12/8/2011
Quote message 

I imagine I have it totally foobarred - let me post what I am using first >


function oddeven_comment_class ( $comments ) {
global $current_class2;
$comments[] = $current_class2;
$current_class2 = ($current_class2 == 'odd') ? 'even' : 'odd';
return $comments;
}
add_filter ( 'comment_class' , 'oddeven_comment_class' , 'commentform_class' );
global $current_class2;
$current_class2 = 'odd';


I changed those as I assume since I was also using the alternate post code that they needed to be different - that ok?

Here is my structure >


<ul id="comments-list">
<li class="comment even thread-even depth-1 odd" id="li-comment-1">
<div class="blog-post" id="comment-1">
<div class="blog-post-body">
<div class="blog-post-inner blog-article">
<div class="blog-postcontent">
<!-- article-content -->
<div class="comment-author vcard">
<div class="avatar"></div>
</div>

<div class="comment-meta commentmetadata"></div>

<div class="comment-body"></div>

<div class="reply"> </div>
<!-- /article-content -->
</div>
<div class="cleared"></div>
</div>
<div class="cleared"></div>
</div>
</div>
</li>



As a note the alternating post filter is in this div >


<div class="blog-post post-1 post type-post status-publish format-standard hentry category-name tag-name odd" id="post-1">


I think would also like the comment odd/even to go into the blog post div as long as it doesn't also insert into the "# responses to" div - I don't want that to have the same formatting.

I tried to insert a few of those filter names you have into the code I have but it just kept inserting into the li element.
 
Gina

Posted: 12/9/2011
Quote message 

OK, let's me just get it clear for myself.

If you use odd/even for both posts and comments (since they have the same div class), they the formatting will be the same. But if the odd\even class is in <li>, then you can specify separate styling for this:

ul#comments-list .even {...}
ul#comments-list .odd {...}

So, why don't you like odd\even in <li>?
 
Brian

Posted: 12/10/2011
Quote message 

Because then I wouldn't be able to set unique background color / image for each post, comments, reply div area if they all use the same class call. ;)


 
Brian

Posted: 12/10/2011
Quote message 

Ok, I'm an idiot ... LOL.

Gina that works fine - I don't have to use both filters just the post one.

Thank you very much - you are an expert for sure!
 
Gina

Posted: 12/12/2011
Quote message 

You are welcome.

And by the way in this code:

ul#comments-list .even {...}
ul#comments-list .odd {...}

You may apply different background (different from the post) and it will be applied only to comments, even if there is .odd .even for posts as well
 
Jeramiah Townsend

Posted: 1/9/2012
Quote message 

Gina (or anyone able to answer)
I'm trying to do the same thing... but I'm confused. You said...
Quote Gina:


Then add the style to the background of the posts (I inserted just an example of colors):

.odd {
background: none repeat scroll 0 0 #ffffff;
}
.even {
background: none repeat scroll 0 0 #000000;
}

Where do I add this? I'm a little slow on the uptake.

Thanks.

Jeramiah Townsend
 
Arnold

Posted: 1/9/2012
Quote message 

Hi Jeremiah,

You can add that piece of code into your "style.css" file of your template (and change it to the colors you like).

Best regards,

Arnold
 
Jeramiah Townsend

Posted: 1/9/2012
Quote message 

Arnold,

Thanks. I've tried to include it various places in my styles.css file. But I still can't seem to get it.

Specifically I've included it at the end of the file, at the beginning of the file, and under most sections that include the code "background".

Now I'm no code guru... so it's not amazing that I can't figure it out. If there are any good samaritans out there, I will gladly give you access to the site so you can fix it.

Jeramiah


 
Jeramiah Townsend

Posted: 1/9/2012
Quote message 

Arnold,

Thanks. I've tried to include it various places in my styles.css file. But I still can't seem to get it.

Specifically I've included it at the end of the file, at the beginning of the file, and under most sections that include the code "background".

Now I'm no code guru... so it's not amazing that I can't figure it out. If there are any good samaritans out there, I will gladly give you access to the site so you can fix it.

Jeramiah


 
Gina

Posted: 1/10/2012
Quote message 

Hi Jeremiah,


Actually for .css files there is no difference where you place the code, if there is such classes as odd and even in php files then the code must work.

Have you added the code to php files already?

Could you please the link to your page?