0

I would like to use Disqus comments system as a guestbook on a wedding website based on a bootstrap/html5 template.

Since the content on the website is personal, i would like to remove the share links for Facebook, Twitter etc which appear above the comments box and below each individual comment.

Screenshot here, https://i.stack.imgur.com/jE2IY.jpg

Is there a way to achieve this by hiding the share elements in CSS ?

I understand the new Disqus uses an iframe, however there is a similar thread for hiding the Disqus footer linked here and the CSS code below does work. 

#disqus_thread{
     position: relative;
}
#disqus_thread:after{
     content: "";
     display: block;
     height: 55px;
     width: 100%;
     position: absolute;
     bottom: 0px;
     background:white;
}

Using the 'inspect element' in Chrome, I am able to hide the share elements using 'display:none' 

.nav-secondary>ul>li.share-menu {
float: right;
display: none;
}

and 

.post-content footer .share {
position: relative;
display: none;
}

Could anyone help me with the correct code/syntax to add this to my styles.css to hide the Social Sharing buttons.

Thanks !

Community
  • 1
  • 1
Roger
  • 1
  • 1
  • 1
  • You cant. The Disqus widget is loaded in an iframe making it inaccessible to your CSS. The documentation also states that these elements can't be removed : https://help.disqus.com/customer/portal/articles/545277-disqus-appearance-tweaks The thread you linked to about hiding the footer is simply placing an element over the top of the iframe from within your own page. – Turnip Nov 06 '14 at 16:57
  • 1
    Thank you for your prompt reply. Can a similar element be placed over the share buttons ? – Roger Nov 06 '14 at 17:05

2 Answers2

1

As described in the article its not possible. https://help.disqus.com/customer/portal/articles/545277

Reason: Its using iframe to render the comments to prevent XSS

Even though i am not recommending you to do this but there is a way to do so.

Please read terms and conditions before doing any of this.

    <div id="disqus_thread"><div>

    <style>
    .hide-social-discuss {
        background: white; // change color according to your site back.
        height: 20px;
        position: relative;
        width: 80%;
        top: -60px;
    }
    <script>
        //add this to script
        $("#disqus_thread").append("<div class='hide-social-discuss'></div>")
    </script>
Shireesh Kumar
  • 154
  • 1
  • 3
0

Same CSS you mentioned, but adjusted to cover share buttons.

Please read disqus terms and conditions before using this.

disqus_thread {
  position: relative;
}
#disqus_thread:before {
  content: "";
  display: block;
  height: 20px;
  width: 80%;
  position: relative;
  bottom: -72px;
  background: white; //replace with your background colour
}

You won't be able to use featured comments anymore, but hey, it works

looks like this for me ¯_(ツ)_/¯

Community
  • 1
  • 1
URK
  • 31
  • 5