• Hi!

    I would like to have different background color of my posts. I would like to always vary between two different background colors. Then it would be easier to distinguish one post from the other.

    Is there any plugin which makes this possible? I’ve search throw the plugin lists, but in vain.

    Does someone has an idea about how to accomplish this?

Viewing 9 replies - 1 through 9 (of 9 total)
  • Thread Starter Thort

    (@thort)

    If I have two different content stylesheets with different background color.

    Would it then possible to shift alternately between them?

    Would it be possible to make php code that can decide which content stylesheet to use when posting a new post?

    Thread Starter Thort

    (@thort)

    This forum has alterning background colors on the posts. White and grey.

    This is what I also want on my blog.

    How is it done?

    Set a variable to alternate classes outside The Loop. Once inside the loop, use an If..Then..Else statement to change between the two classes. You’ll need to add two classes (in this example the classes are darkentry and lightentry) to your CSS file. These two classes should be very much like the “entry” class in the CSS except for different background colors. Then edit the Loop in the index.php file of your theme.

    Outside the loop (before the line <?php if (have_posts()) : ?>):
    <?php $postbg = 'darkentry'; ?>

    Inside the loop (just before the line <div class="entry">):
    <?php if ($postbg == 'darkentry') {
    $postbg = 'lightentry';
    } else {
    $postbg = 'darkentry';
    } ?>

    Then change the line:
    <div class="entry">
    to be:
    <div class="<?php $postbg; ?>">

    The combination of these things will allow you to change with each post, and not just colors… you could change fonts, font sizes, or anything accessible via CSS.

    Thread Starter Thort

    (@thort)

    Thank You Billh !

    I do appreciate your detailed reply!

    I’ve tried to follow your advice exactly. But I can’t get it to work.

    You wrote: “You’ll need to add two classes (in this example the classes are darkentry and lightentry) to your CSS file.”

    Here I am insecure. How shall these new stylesheet classes look like? I tried this:

    .lightentry {
    background-color: #ffffff;
    }

    .darkentry {
    background-color: #f2f2f2;
    }

    But I’m not sure if it’s right.

    I’ve installed a testblog at:

    https://thort.se/testblog

    Here I have used the default WordPress theme and done changes in the index.php and style.css of the theme.

    I would be grateful if you would like to look into the blog and try to see what I have done wrong.

    You can use a tertiary statment as well

    <?php ($postbg == “darkentry”) ? $postbg =”lightentry” : $postbg =”darkentry”; ?>

    Thread Starter Thort

    (@thort)

    Thanks makemead!

    I am out in deep water now. I know very little about php. I’m not capable of inserting your code in my index.php.

    Here is the output right now of my index.php in my modified WordPress default theme. I have tried to follow billh’s instructions in his reply above:

    <?php get_header(); ?>

    <div id="content" class="narrowcolumn">

    <?php $postbg = 'darkentry'; ?>

    <?php if (have_posts()) : ?>

    <?php while (have_posts()) : the_post(); ?>

    <div class="post" id="post-<?php the_ID(); ?>">

    <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>

    <small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>

    <?php if ($postbg == 'darkentry') {
    $postbg = 'lightentry';
    } else {
    $postbg = 'darkentry';
    } ?>

    <div class="<?php $postbg; ?>">

    <?php the_content('Read the rest of this entry &raquo;'); ?>

    </div>

    <p class="postmetadata">Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?> <?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?></p>

    </div>

    <?php endwhile; ?>

    <div class="navigation">

    <div class="alignleft"><?php next_posts_link('&laquo; Previous Entries') ?>

    </div>

    <div class="alignright"><?php previous_posts_link('Next Entries &raquo;') ?>

    </div>

    </div>

    <?php else : ?>

    <h2 class="center">Not Found</h2>
    <p class="center">Sorry, but you are looking for something that isn't here.</p>

    <?php include (TEMPLATEPATH . "/searchform.php"); ?>

    <?php endif; ?>

    </div>

    <?php get_sidebar(); ?>

    <?php get_footer(); ?>

    Is everything looking okey? Something wrong? Is my stylesheet okey? ( https://thort.se/testblog )I do not have alterning background color in the posts, which is what I want.

    Your sixth line: <div class="post" id="post-<?php the_ID(); ?>">

    Should read like this: <div class="<?php $postbg; ?>" id="post-<?php the_ID(); ?>">

    Thread Starter Thort

    (@thort)

    Thanks billh!

    I have insrerted the changed the sixth line as you suggest.

    Still no alterning background color in posts.

    Here is the present reading of index.php.

    <?php get_header(); ?>

    <div id="content" class="narrowcolumn">

    <?php $postbg = 'darkentry'; ?>

    <?php if (have_posts()) : ?>

    <?php while (have_posts()) : the_post(); ?>

    <div class="<?php $postbg; ?>" id="post-<?php the_ID(); ?>">
    <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>
    <small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>

    <?php if ($postbg == 'darkentry') {
    $postbg = 'lightentry';
    } else {
    $postbg = 'darkentry';
    } ?>

    <div class="<?php $postbg; ?>">

    <?php the_content('Read the rest of this entry &raquo;'); ?>

    </div>

    <p class="postmetadata">Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?> <?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?>

    </div>

    <?php endwhile; ?>

    <div class="navigation">

    <div class="alignleft"><?php next_posts_link('&laquo; Previous Entries') ?>

    </div>

    <div class="alignright"><?php previous_posts_link('Next Entries &raquo;') ?>

    </div>

    </div>

    <?php else : ?>

    <h2 class="center">Not Found</h2>

    <p class="center">Sorry, but you are looking for something that isn't here.

    <?php include (TEMPLATEPATH . "/searchform.php"); ?>

    <?php endif; ?>

    </div>

    <?php get_sidebar(); ?>

    <?php get_footer(); ?>

    About the stylesheet. I’m insecure what is right. Should my two new clases read:

    .lightentry {
    background-color: #ffffff;
    }

    .darkentry {
    background-color: #f2f2f2;
    }

    or

    #lightentry {
    background-color: #ffffff;
    }

    #darkentry {
    background-color: #f2f2f2;
    }

    I’m insecure about the . or # sign.

    Here is the whole stylesheet, as it looks right now:

    https://thort.se/storage/forum/wordpress/stylesheet_post_background_color_1.htm

    And, once again, the address to the blog:

    https://thort.se/testblog

    I’m thankful for your guidence. If you still have patience with me I should be thankful if you have some more ideas how to solve the problem.

    Hello,

    I tried this code also & could not get it to work.

    Does it even work at all?

    Wish some good fello with xmas spirit would jump in & lend a hand here……

    Ho, ho, ho…

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Varying background color in posts’ is closed to new replies.