Display certain CSS function on home/archive page, but hide in single page.

  • Resolved testingmoon

    (@testingmoon)


    12 years, 11 months 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(“https://image.com/1.png”) repeat scroll 0 0 transparent !important;
    }
    .post-875 {
    background: url(“https://image.com/2.png”) repeat scroll 0 0 transparent !important;
    }
    .post-876 {
    background: url(“https://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.

Viewing 10 replies - 1 through 10 (of 10 total)

  • See this page
    https://codex.www.ads-software.com/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("https://image.com/1.png") repeat scroll 0 0 transparent;
}
    Thread Starter testingmoon

    (@testingmoon)

    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;
}

    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.

    Thread Starter testingmoon

    (@testingmoon)

    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;
}

    yes, that is exactly it.

    good!

    Thread Starter testingmoon

    (@testingmoon)

    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.

    https://www.css3.info/introduction-opacity-rgba/

    https://www.w3schools.com/css/css_image_transparency.asp

    Thread Starter testingmoon

    (@testingmoon)

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

    https://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("https://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”.

    Thread Starter testingmoon

    (@testingmoon)

    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!

    Thread Starter testingmoon

    (@testingmoon)

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

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Display certain CSS function on home/archive page, but hide in single page.’ is closed to new replies.