WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Different bg color for each block in a grid layout (12 posts)

  1. webbing-in
    Member
    Posted 10 months ago #

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

    http://pastebin.com/w5RAGbv6

    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.

  2. WPyogi
    Volunteer Moderator
    Posted 10 months ago #

    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.

  3. webbing-in
    Member
    Posted 10 months ago #

    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.

  4. webbing-in
    Member
    Posted 10 months ago #

    I just came across this site from themezilla
    http://demo.themezilla.com/?theme=gridlocked&ref=tf

    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)http://pastebin.com/w5RAGbv6
    If i get this code then I can change color for each block. Can you help?

  5. WPyogi
    Volunteer Moderator
    Posted 10 months ago #

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

  6. webbing-in
    Member
    Posted 10 months ago #

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

    http://demo.themezilla.com/?theme=gridlocked&ref=tf

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

    thanks

  7. WPyogi
    Volunteer Moderator
    Posted 10 months ago #

    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;
    }
  8. webbing-in
    Member
    Posted 10 months ago #

    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.

  9. webbing-in
    Member
    Posted 10 months ago #

    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.

  10. webbing-in
    Member
    Posted 10 months ago #

    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.

  11. webbing-in
    Member
    Posted 10 months ago #

    forgot to mark it as resolved

  12. WPyogi
    Volunteer Moderator
    Posted 10 months ago #

    Awesome - you're ahead of me on this one :)!

Reply

You must log in to post.

About this Topic