SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 38
  1. #1
    SitePoint Zealot
    Join Date
    Sep 2008
    Posts
    101
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How To Hide/Delete "Leave a Reply" On Dozens Of Pages

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

  2. #2
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,260
    Mentioned
    196 Post(s)
    Tagged
    2 Thread(s)
    The DOM
    HTML Code:
    <div id="respond" class="comment-respond">
    	<h3 id="reply-title" class="comment-reply-title">Leave a Reply <small><a rel="nofollow" id="cancel-comment-reply-link" href="/business-cartoon-biz-049/#respond" style="display:none;">Cancel reply</a></small></h3>
    	<div id="commentform" class="comment-form">
    		<iframe src="http://jetpack.wordpress.com/jetpack-comment/?blogid=59943007&postid=12825&comment_registration=0&require_name_email=1&stc_enabled=1&stb_enabled=1&show_avatars=1&avatar_default=mystery&greeting=Leave+a+Reply&greeting_reply=Leave+a+Reply+to+%25s&color_scheme=light&lang=en-US&jetpack_version=2.7&sig=fb0ea33418541a7e0aadd67faabd333a7d606fd4#parent=http%3A%2F%2Fdc.cartoonfile.com%2Fbusiness-cartoon-biz-049%2F" allowtransparency="false" style="width:100%; height: 430px;border:0px;" frameBorder="0" scrolling="no" name="jetpack_remote_comment" id="jetpack_remote_comment"></iframe>
    	</div>
    </div>
    Try
    Code CSS:
    div#respond {
      display: none;
    }
    If you really don't ever want any comments - including "remote" - you should check your ACP settings
    i.e. prevent them, not just not showing them

  3. #3
    SitePoint Zealot
    Join Date
    Sep 2008
    Posts
    101
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It worked great Mittineague. However, I was trying to leave the "Leave a Reply" box in only one section of my site....the blog. If you go here:
    http://dc.cartoonfile.com/category/toonblog/

    and click in yellow header : "Latest news" or "These Are My Favourites" which are a couple recent blog posts....that "Leave a Reply" comments box no longer is visible....is there possibly a directive to allow perhaps a display: inherit;?

  4. #4
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,260
    Mentioned
    196 Post(s)
    Tagged
    2 Thread(s)
    You didn't say that before
    try
    Code CSS:
    body.single div#page div#main div#primary div#content div#comments div#respond {
      display: none;
    }

  5. #5
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,611
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Allow me to suiggest another way of writing that

    Hi, danno2.

    Remember the trick with the unique class in the body tag? (The one that should probably be an ID?)

    style.css (line 296)
    delete this selector completely. The original entry for #respond is found on line 1274.
    Code:
    div#respond {
        display: none;
    }
    style.css (line 1274)
    Code:
    #respond {
        display: none;    /* ADD HERE instead */
        margin-top: 3.42857rem;
    }
    Then add a new selector: (assumes that .single is ONLY found in the body tag of that page)
    Code:
    .single #respond {
        display:block;
    }
    Since you are not shy about using IDs (unless required by your CMS or JavaScript, most could easily be classes), I suggest that you add a UNIQUE ID to the body tag of each page so you can reliably use this method to override global styles on any page.

  6. #6
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,260
    Mentioned
    196 Post(s)
    Tagged
    2 Thread(s)
    Thanks Ron, I do often tend to be more verbose and precise than needs be. Because we're working with Id's, much can be safely omitted from the selector.

    The body tags have a lot of class
    The pages where the hiding is wanted have
    HTML Code:
    <body class="single
    	 single-post
    	 postid-12825
    	 single-format-standard
    	 custom-background
    	 custom-font-enabled">
    *have "single".

    The page where it's wanted to be visible doesn't have "single"
    HTML Code:
    <body class="archive
    	 category
    	 category-toonblog
    	 category-7015
    	 custom-background
    	 custom-font-enabled
    	 infinite-scroll
    	 neverending">
    So as long as the only page(s) where it is wanted to be visible is/are the only one(s) that don't have "single", (and the obverse)
    - now I'm getting confuzzled
    I think this should work
    Code CSS:
    .single #respond {
        display: none;
    }

  7. #7
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,611
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by Mittineague View Post
    Thanks Ron, I do often tend to be more verbose and precise than needs be. Because we're working with Id's, much can be safely omitted from the selector.

    now I'm getting confuzzled.
    The body tags have a lot of class
    The pages where the hiding is wanted have
    HTML Code:
    <body class="single
    	 single-post
    	 postid-12825
    	 single-format-standard
    	 custom-background
    	 custom-font-enabled">
    *have "single".

    The page where it's wanted to be visible doesn't have "single"
    HTML Code:
    <body class="archive
    	 category
    	 category-toonblog
    	 category-7015
    	 custom-background
    	 custom-font-enabled
    	 infinite-scroll
    	 neverending">
    So as long as the only page(s) where it is wanted to be visible is/are the only one(s) that don't have "single", (and the obverse) I think this should work
    Code CSS:
    .single #respond {
        display: none;
    }
    You mean I might have misread something? Aaargh.

    I thought he was talking about only one page or group of pages, and when I looked at the HTML, I thought I saw .single in the <body> tag (thus my note qualifying it's use). I got it backwards, though. Thanks for catching that. :sigh:

  8. #8
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,260
    Mentioned
    196 Post(s)
    Tagged
    2 Thread(s)
    Off Topic:

    Don't feel unique, I thought you caught one of my mistakes and I had to double check the page DOMs twice to be sure.

  9. #9
    SitePoint Zealot
    Join Date
    Sep 2008
    Posts
    101
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ron:
    Extremely thankful. It works. However, going back to my first dilemma, it now allows for the "leave a Reply" comments box on those dozens of other pages like I first mentioned such as:
    http://dc.cartoonfile.com/business-cartoon-biz-049/

    OR

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

    and the code I used in my "style.css" was:
    div#respond {
    display: none;
    }
    #respond {
    display: none; /* ADD HERE instead */
    margin-top: 3.42857rem;
    }
    .single #respond {
    display:block;
    }

    So as Mittineague said in the latter part of his last post "but dont have single". Should I now delete that single BEFORE the #respond in the code I just added to my "style.css"?

    I appreciate this input from you both...........

  10. #10
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,611
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    danno2,

    First lets clean up the local CSS.

    PLEASE delete these RED conflicting/duplicate entries from your local CSS.

    Delete this entry:
    style.css?ver=3.8 (line 309)
    Code:
    
    .single #respond {
        display: block;
    }
    
    Delete this entry:
    style.css?ver=3.8 (line 302)
    Code:
    
    div#respond {
        display: none;
    }
    
    Delete this entry:
    style.css?ver=3.8 (line 296)
    Code:
    
    div#respond {
        display: none;
    }
    
    Delete this entry:
    style.css?ver=3.8 (line 305)
    Code:
    
    #respond {
        display: none;
        margin-top: 3.42857rem;
    }
    
    PLEASE EDIT this ONE entry in your local CSS.

    style.css (line 1274)
    Code:
    #respond {
        display:none;  /* ADD ME per Mittineague */
        margin-top: 3.42857rem;
    }
    NEXT,

    It appears that there is no convenient way to target the #respond boxes that you wish to have visible without adding an ID or class to the HTML.

    Here are 3 possibilities:

    (1)
    The body tag on each page to be targeted can be given a unique ID; thereafter, the page(s) can be individually targeted. This is the most flexible approach.
    Code:
    <body id="uniqueid" class="single single-post postid.....etc>
    The css would look like this:
    Code:
    #uniqueid #respond {display:block;}   /* there should be one selector for each page to be targeted */
    (2)
    class="showrespond" can be added to the body tag of each page whose #respond box should be visible. This is an easy single purpose targeting technque.
    Code:
    <body class="showrespond single single-post postid.....etc>
    The css would look like this:
    Code:
    .showrespond #respond {display:block;}   /* this is the only entry in CSS */
    (3)
    class="showrespond" can be added to the div tag of each #respond box that should be visible. This is an easy single purpose targeting technque.
    Code:
    <div id="respond" class="showrespond">
    The css would look like this:
    Code:
    #respond.showrespond {display:block;}   /* this is the only entry in CSS */
    Pick the one that is the easiest or most promising for you to work with.


    reference supplement:
    Code:
    http://dc.cartoonfile.com/category/toonblog/     /* this page has no #respond box.  From here you select "these are muy favorites" or "latest news" */
    <body class="archive category category-toonblog category-7015 custom-background custom-font-enabled infinite-scroll neverending infinity-end">
    
    http://dc.cartoonfile.com/these-are-my-favourites/
    <body class="single single-post postid-13779 single-format-standard custom-background custom-font-enabled">
    body.single div#page div#main div#primary div#content div#comments div#respond {  /* should be visible */
    
    http://dc.cartoonfile.com/latest-news/
    <body class="single single-post postid-18806 single-format-standard custom-background custom-font-enabled">
    body.single div#page div#main div#primary div#content div#comments div#respond {  /* should be visible */
    
    http://dc.cartoonfile.com/business-cartoon-biz-049/
    <body class="single single-post postid-12825 single-format-standard custom-background custom-font-enabled">
    body.single div#page div#main div#primary div#content div#comments div#respond {  /* should be hidden */
    
    http://dc.cartoonfile.com/yooper-michigan-cartoon-028/
    <body class="single single-post postid-7555 single-format-standard custom-background custom-font-enabled">
    body.single div#page div#main div#primary div#content div#comments div#respond {  /* should be hidden */

  11. #11
    SitePoint Zealot
    Join Date
    Sep 2008
    Posts
    101
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So far so good Mittineague. I have cleaned up my "style.css" according to your instructions here and am currently at the next step of your post starting:
    Here are 3 possibilities:

    (1)
    The body tag on each page to be targeted can be given a unique ID; thereafter, the page(s) can be individually targeted. This is the most flexible approach.
    Code:

    and from the bottom up, inside my "style.css" editor, here are 4 current entries:
    footer.entry-meta .entry-date {
    display: none;
    }
    body.page-id-13758 .sharedaddy,
    body.page-id-13758 #comments {
    display:none;
    }

    }
    .category-toonblog #comments {
    display: inherit;
    }

    #respond {
    display: none; /* ADD ME per Mittineague */
    margin-top: 3.42857rem;
    }

    so my next question is regarding which of the 3 is best one. Hang on, I just wanted to show you where I am at....I appreciate your insights....

  12. #12
    SitePoint Zealot
    Join Date
    Sep 2008
    Posts
    101
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Back after reading through the 3 suggestions Mittineague and have a question then, regarding every time I make a new blog post. Am I understanding correctly, that based on:

    http://dc.cartoonfile.com/category/toonblog/ /* this page has no #respond box. From here you select "these are muy favorites" or "latest news" */
    <body class="archive category category-toonblog category-7015 custom-background custom-font-enabled infinite-scroll neverending infinity-end">


    I would be required to manually add that: <div id="respond" class="showrespond"> into the HTML of each new future blog post?
    If add: #respond.showrespond {display:block;} /* this is the only entry in CSS */ into my "style.css"?

  13. #13
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,260
    Mentioned
    196 Post(s)
    Tagged
    2 Thread(s)
    Let's back-up a step and clarify things.

    Are there some page types that you never want the comment form to show?
    Are there some page types that you always want the comment form to show?
    Are there some page types that you want the comment form to show only for a period of time?

  14. #14
    SitePoint Zealot
    Join Date
    Sep 2008
    Posts
    101
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Mittineague: In response to your first question

    Are there some page types that you never want the comment form to show? All of them, only want the comment box to show in my blog posts on this pagehere. Such as in "Latest News" and "These Are My Favourites" and others I post in the future.
    Are there some page types that you always want the comment form to show? No
    Are there some page types that you want the comment form to show only for a period of time? No

  15. #15
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,260
    Mentioned
    196 Post(s)
    Tagged
    2 Thread(s)
    OK thanks, (As ronpat pointed out, replace not add to)
    Code CSS:
    #respond {
        display:none;  /* ADD ME per Mittineague */
        margin-top: 3.42857rem;
    }
    .category-toonblog #respond {
        display: block;
    }
    I'm guessing the blog will be the only page with the class category-toonblog
    I don't know where the margin-top came from or what unit a rem is, but I'm surprised it would have any effect on something not displayed.

  16. #16
    SitePoint Zealot
    Join Date
    Sep 2008
    Posts
    101
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Mittineague: Just added :

    #respond {
    display:none; /* ADD ME per Mittineague */
    margin-top: 3.42857rem;
    }
    .category-toonblog #respond {
    display: block;
    }

    to my "style.css" but nothing in the way of "Leave a Reply" box appears at bottom of the blog pages.

  17. #17
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,260
    Mentioned
    196 Post(s)
    Tagged
    2 Thread(s)
    A typo error
    Warning: Selector expected. Ruleset ignored due to bad selector.
    Source File: http://dc.cartoonfile.com/wp-content...le.css?ver=3.8
    Line: 297
    Source Code:
    }
    Code CSS:
    body.page-id-13758 #comments {
        display:none;
    }
     
    }
    .category-toonblog #comments {
      display: inherit;
    }
     
     
    #respond {
        display:none;  /* ADD ME per Mittineague */
        margin-top: 3.42857rem;
    }
    .category-toonblog #respond {
        display: block;
    }

    And that extra brace isn't the only typo. True, most of the CSS warnings are about vendor prefixes, but not all. When you get a chance you should go to the CSS validator http://jigsaw.w3.org/css-validator/ and sift through them.

  18. #18
    SitePoint Zealot
    Join Date
    Sep 2008
    Posts
    101
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Mittineague:
    I am going to add the revision soon and will be back to let you know....have to step out and do something. I really appreciate your help.....sorry to put you through alot of typing back & forth here on the forum. I wish I could learn this on my own....I need to set aside more time and really study it. I once thought using Frontpage WAS HARD! LOL! Back soon . . . .

  19. #19
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,260
    Mentioned
    196 Post(s)
    Tagged
    2 Thread(s)
    Off Topic:

    No problem, it's not like I have to be here.
    In ways it gets easier, but there's always more "hard" things left to learn.
    Taking a break is a good idea, I am getting hungry

  20. #20
    SitePoint Zealot
    Join Date
    Sep 2008
    Posts
    101
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Mittineague:
    I deleted that extra brace. Re-checked the blog pages but alas, the "Leave a Reply" and comments box is not visible. Am going to use the CSS validator to see what may be the problem. Thank you though.

  21. #21
    SitePoint Zealot
    Join Date
    Sep 2008
    Posts
    101
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm back. I used the CSS Validator but see nothing affecting this CSS code that is currently in my "style.css" :

    body.page-id-13758 #comments {
    display:none;
    }
    .category-toonblog #comments {
    display: inherit;
    }
    #respond {
    display:none; /* ADD ME per Mittineague */
    margin-top: 3.42857rem;
    }
    .category-toonblog #respond {
    display: block;
    }


    So am wondering if there is any other alternative? I think nothing will work.

    Also wondering if I should delete:
    /* ADD ME per Mittineague */
    is that affecting anything?

  22. #22
    SitePoint Zealot
    Join Date
    Sep 2008
    Posts
    101
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    UPDATE: I added this to bottom of CSS mentioned above:

    div#respond {
    display: inherit;
    }

    and did show the "Leave a Reply" Comments box HOWEVER, across hundreds of other inner pages.....so I simply deleted it and back to square one.

  23. #23
    SitePoint Zealot
    Join Date
    Sep 2008
    Posts
    101
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Additional thought. Does it matter where I put this code? In "style.css" or in APPEARANCE>EDIT>CSS?

  24. #24
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,611
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    danno2,

    I assume that most of your web site is managed by a CMS and that the creation of the blog pages, "latest-news" and "these-are-my-favourites, are created automatically by that CMS or by a database system. Is that correct or am I mistaken?

    Do you know what mechanism puts the classes in the <body> tag at the top of each page?
    In other words, do you know how it was determined that the <body> tag for
    http://dc.cartoonfile.com/category/toonblog/
    would have these classes
    <body class="archive category category-toonblog category-7015 custom-background custom-font-enabled infinite-scroll neverending infinity-end">
    and the <body> tag for most/all of the other pages would have these classes
    <body class="single single-post postid-12825 single-format-standard custom-background custom-font-enabled">
    and what mechanism does that?

    The big question is:
    Do you know how to add another class in the <body> tag of those pages where you want the #respond box to be visible:
    http://dc.cartoonfile.com/latest-news/
    http://dc.cartoonfile.com/these-are-my-favourites/

  25. #25
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,611
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by danno2 View Post
    Additional thought. Does it matter where I put this code? In "style.css" or in APPEARANCE>EDIT>CSS?
    style.css is a filename (which I understand).

    I have no idea what APPEARANCE>EDIT>CSS is. It sounds like tabs from your editor. The thing that matters is the file that is being edited. Hopefully, it is style.css.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •