Support » Fixing WordPress » Different bg color for each block in a grid layout

  • Resolved webbing-in


    I am using grid layout in index.php file (please see attached code in pastebin link below for this layout).

    It has 2 rows and 3 columns of excerpts which make 6 blocks on the home page. I need to have different background colors in each of these blocks. Is it possible?
    Perhaps if i assign a catagory to each excerpt/post and then get some code to display different background color. But I am not sure how… Please can anyone suggest how to do this? Thank you.

Viewing 11 replies - 1 through 11 (of 11 total)
  • Are there unique ids or classes for each excerpt? You can use those in CSS to target specific areas. But there’s really no way to help with a CSS question without seeing a live site.

    thanks wpyogi for quick reply.
    my problem is the php code which calls all excerpts to display posts on home page.
    It has only 2 classes – 1. griditemleft, 2. griditemright
    So if I give them bgclr in css, then I get 1 color for 4 blocks on left and another color for 2 blocks on right.
    Wheras I need different colors for all blocks.

    I am still developing this site on localhost, so I do not know how I can get you to see the site.

    I just came across this site from themezilla

    If you inspect elements for this grid view, you get below div class:
    <div class=”post-423 portfolio type-portfolio status-publish hentry” id=”post-423″ style=”position: absolute; left: 255px; top: 0px;”>….</div>
    and it has different post id in each class.
    How do i get this class with individual post id inserted in my code (from the pastbin)
    If i get this code then I can change color for each block. Can you help?

    Can you post a link to a site where you are using this code?

    I am developing my site locally, but below link is the exact example of how my grid is looking.

    It has white background for all blocks excerpts. I need to have each excerpts background in different color.


    If you look at the HTML code, each excerpt has a unique id and class:

    <div id="post-423" class="post-423 portfolio type-portfolio status-publish hentry" style="position: absolute; left: 255px; top: 0px;">

    You can use those in the CSS to assign a color to just that excerpt:

    #post-423 {
        background-color: red;

    exactly….but how to get that class in php code?
    If you see my code for grid layout in pastabin, you will understand how my grid is. So how and what do I add to this code so that I will get this unique id for each excerpt.

    wpyogi, I tried adding this to my code, but it’s not working. any idea?

    <div class=”griditemleft”>
    <div id=”post-<?php the_ID(); ?>” <?php post_class(); ?>>

    I thought this div id will help me get the post id and class, but dont know what mistake I am making that i dont get the result.

    I got it…
    I edited above code to
    <div id=”post-<?php get_the_ID(); ?>” <?php post_class(); ?>>

    and then assign css code to each category.

    thanks for spending time for my query, wpyogi.

    forgot to mark it as resolved

    Awesome – you’re ahead of me on this one :)!

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Different bg color for each block in a grid layout’ is closed to new replies.