WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Display certain CSS function on home/archive page, but hide in single page. (11 posts)

  1. testingmoon
    Member
    Posted 2 years ago #

    Hello,

    I would like to know how to display the content below in main/archive page (where all my posts are), but hide it in the single page (where the actual post is, that happens once the user clicks on the post from main page for example):

    .post-874 {
    background: url("http://image.com/1.png") repeat scroll 0 0 transparent !important;
    }
    .post-875 {
    background: url("http://image.com/2.png") repeat scroll 0 0 transparent !important;
    }
    .post-876 {
    background: url("http://image.com/3.png") repeat scroll 0 0 transparent !important;
    }

    At the moment, the example images are being displayed everywhere (if the user is on the main page, he is able to see all posts and images too.. If the user searches, he can see images.. If the user is reading the actual post, he can still see the images). I only want the user to see the image when he is on the main/archive page.

  2. stvwlf
    Member
    Posted 2 years ago #

    See this page
    http://codex.wordpress.org/Function_Reference/body_class
    It adds classes to the Body tag depending on what kind of page you are on so you can create more specific CSS that targets specific page types.

    When used, you will find you can use CSS like this

    .single .post-874 {
    background: none;
    }

    that will override the CSS you listed in your post.
    However, you will have trouble if your use !important. Try to find a way to eliminate it by using more specific CSS that overrides any reason you would use !important in the first place.

    The body class also marks the home page and archive pages like this:

    .archive .post-874,
    .home .post-874 {
    background: url("http://image.com/1.png") repeat scroll 0 0 transparent;
    }
  3. testingmoon
    Member
    Posted 2 years ago #

    Excuse my ignorance, but could you please tell me what to do with body_class? I'm a bit confused. I do understand that once body_class is in place, I can go to my css and write the command below to hide the background in single posts (where the actual post is):

    .single .post-874 {
    background: none;
    }
  4. stvwlf
    Member
    Posted 2 years ago #

    Hi

    Most themes today already include the body class in the theme. Try adding the syntax I listed above and see if it works as is.

    If it doesn't work, it will make it easier to help your further if you can post a URL to one of the posts.

  5. testingmoon
    Member
    Posted 2 years ago #

    Alright, thanks a lot stvwlf!

    I had to go to my header.php and change my
    <body>
    into
    <body <?php body_class($class); ?>>

    Then I wanted to make it so that I would not ever have a background image for any of the posts, so I wrote these 3 simple lines to solve that obstacle:

    .single .post {
    background: none;
    }
  6. stvwlf
    Member
    Posted 2 years ago #

    yes, that is exactly it.

    good!

  7. testingmoon
    Member
    Posted 2 years ago #

    Oh, just one more question, I'm not sure if I should create a new topic for it, perhaps you will know the solution... How can I change the opacity for the image? I would like for the text to be readable, because at the moment it's a little bit difficult to read.

  8. stvwlf
    Member
    Posted 2 years ago #

  9. testingmoon
    Member
    Posted 2 years ago #

    http://www.css3.info/introduction-opacity-rgba/
    Helps us deal with background colors, but not the images.

    http://www.w3schools.com/css/css_image_transparency.asp
    I had a look at this website before, but I just didn't know what to do, I was confused. Could you please give me an example?

    .post-874 {
    background: url("http://image.com/1.png") repeat scroll 0 0 transparent;
    }

    The "CSS Image Opacity" (W3 School website) uses "img" in their CSS, but I'm not using that, I am using "background: url".

  10. testingmoon
    Member
    Posted 2 years ago #

    Never mind, it seems that the best way to go is simply modify the background image accordingly, the opacity isn't really going to solve the issue. Thanks once again, SOLVED!

  11. testingmoon
    Member
    Posted 2 years ago #

    In case anyone else wants to change their image opacity:
    http://pixlr.com/editor/

Topic Closed

This topic has been closed to new replies.

About this Topic