Change Background Colour for each post

Community Forums Forums Design Tips and Tricks Change Background Colour for each post

This topic is: not resolved

This topic contains 4 replies, has 4 voices, and was last updated by  genwrock 7 months, 3 weeks ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #92719

    GregAllum
    Member
    Post count: 3

    Wondering if it’s possible to change the background for each post or page. Not the actual background of the theme, which I have a photo for, but the background where the words of the post sit.

    Ideally I’d like either it to be a full colour, not white or an image of my choosing.

    Many thanks
    Greg

    #92835

    andym119
    Member
    Post count: 72

    There may be a plugin for it, I’m not sure, alternatively you can use css.

    If your using chrome or firefox, right click on the post or page you want to add the background on and click inspect element.
    In the html field look for the post or page name it will look something like this depending what post/page it is:
    class=”post-1″
    or
    class=”page-15″

    you can use these classes to add a background by putting it in a css editor or your child theme css.

    for example to change the background for post 6, put in your css -

    .post-6 {
    background: red;
    }

    You can also add an image by using css background image and putting the url to an image in your media library.

    or you could use pseudo class ‘nth-child’ in your css, such as:

    .post:nth-child(8n+8) {
    background: blue;
    }

    which says for every 8th post, add this background. You can then add more of these.

    • This reply was modified 7 months, 4 weeks ago by  andym119.
    • This reply was modified 7 months, 4 weeks ago by  andym119.
    #92843

    genwrock
    Member
    Post count: 692

    Use custom field option. Create a new custom field “post-bg” and put the color hex value in value field.

    Then you will add the following code in functions.php file

    add_action('genesis_entery_header', 'dynamic_background');
    function dynamic_background(){
      global $post;
      $post_bg = get_post_meta($post->ID, 'post-bg', true);
      if($post_bg && (get_post_type() == "post"))
         echo '<style type="text/css">.post-'  . $post->ID . '{background: ' . $post_bg . ';}</style>'  .  "\n";
      else
         return;
    }

    • This reply was modified 7 months, 4 weeks ago by  genwrock.
    • This reply was modified 7 months, 4 weeks ago by  genwrock.
    • This reply was modified 7 months, 4 weeks ago by  genwrock.
    • This reply was modified 7 months, 4 weeks ago by  genwrock.
    #93036

    dev
    Participant
    Post count: 458

    Genwrock: Very clever code.

    How might one alternate background colors on posts… say white then gray then white then gray… etc.

    #93048

    genwrock
    Member
    Post count: 692

    Aha.. Then I think that you do not need the above functionality. You can try this

    add_filter('post_class', 'custom_post_class');
    function custom_post_class($classes){
      global $wp_query;
      if( $wp_query->current_post % 2 == 0)
       $classes[] = "post-white";
      else
       $classes[] = "post-grey";
    
     return $classes;
    }
    

    Add the code in your functions.php file.

    Now add the following css in your style.css file

    .post-grey{background: #CCC;}
    .post-white{background: #FFF;}

    Note: I did not test the code. So you will keep a backup first and then you will try my code


    • This reply was modified 7 months, 3 weeks ago by  genwrock.
    • This reply was modified 7 months, 3 weeks ago by  genwrock.
Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.