Using the PAGE ID to control visibility

[pingmeister]

I understand the page id, such as the one for my contact page can be used for hiding specific aspects on your page(s). My page id for this page is “page-id-13758”, so in order to hide the social media buttons and the “Leave A Reply”, exactly what would you suggest I add in the “style.css” or my CSS Editor? Asking thisbecause of these two factors…..thanks

[Senff]

body.page-id-13758 .sharedaddy,
body.page-id-13758 #comments {
    display:none;
}

[pingmeister]

Senff: Great mate! Look at my contact page now. Very helpful and I appreciate you.

Thanks

[pingmeister]

Also, I would like to know if there is a link or tutorial that goes further in depth on using the “page-id”? For instance, what about SHOWING something on a specific page that was previously blocked from all of them? Such as a “Leave a reply” comments box on my blog page here:

http://dc.cartoonfile.com/category/toonblog/

and the box does appear on this page for instance:

http://dc.cartoonfile.com/latest-news/

So wonder how you designate a command for actually showing something?

[Melindrea]

What you’re needing to do is to read up on specificity in CSS. The short of it is that selectors are more or less specific, and to “override” a prior call you need to make it more specific.

So, let’s say that you have

.social {
display: none;
}

but you want it shown on the page with the id contact:

“`

contact .social {

display: inherit;

}
“`

That said, favour using the backend to present which HTML is on the page, if possible, rather than using CSS to hide/show depending on the page id.

[pingmeister]

Thank you Melindrea. I used this previously (display: none) in order to hide the “Comments” box or that “Leave A Reply” and box underneath it that appeared throughout the entire site. Only really wanted it on that blog page at http://dc.cartoonfile.com/category/toonblog/ and I did go in and check the box ‘Allow Comments’ which is ticked-checkmarked but on my blog page it doesn’t appear. My question then is concerning the straight specificity of the code you mention here…..would it not add it back across the entire site since no actual page id is rendered in the code? Meaning I only want it to appear on the blog page? Also since my blog is on a “post” page, I go to Firebug and it doesn’t show it as a typical “page-id-“then number”.

[Melindrea]

There are two different places where you can get things shown.

1. Backend (WordPress?), where the code (what you get if you pick Tools > View Source in Chrome). If it does not show in there, your theme might not allow comments.

2. If it is shown in the code but you want to hide, it you use CSS, which is “Cascading Style Sheets”. It only deals with presentation. IE, if you have a closet with no shirts, you can’t put on a shirt no matter which day it is, because it’s not been put into the code.

On your blog (assuming it’s the page you linked to above), you don’t have a page ID, but there are a few HTML classes, so in your CSS you would use the selector instead. For example, the class category-toonblog seems like it’s fairly unique, so use that .category-toonblog rather than the page ID you have been using.

[pingmeister]

Thank you. My custom child theme built via 2012 theme does allow for comments, so looking at what you suggest here, I am going to try:

.category-toonblog {

display: inherit;
}

[pingmeister]

It looks as though that does work. Go to: http://dc.cartoonfile.com/category/toonblog/ and as the previous posts get archived by title and you click each one separately, the page opens and below each is “Leave A Reply”. Now, to get rid of that pesky looking “> Cartoon Latest: ToonBlog” above my red banner….have you any thoughts? Btw, I’m adding this code directly into my CSS and not in “style.css”

[pingmeister]

I have dozens upon dozens of pages that have a “Leave a Reply” box at bottom of pages like:

http://dc.cartoonfile.com/business-cartoon-biz-049/

OR

http://dc.cartoonfile.com/yooper-michigan-cartoon-028/

And I have tried this code in my “style.css” and tried it without the dash after first “single” word. Can anyone offer other directives?

.single-single-post #comments {
display: none;
}

[Author]

Posts