13

I want to remove the footer of Disqus plugin. Disqus works fine, but the footer looking a little iterating. I want to remove the footer so that I can only see the relevant comments.

You can see the footer at the end of the image.

enter image description here

<div class="well">
  <div id="disqus_thread"></div>
  <script type="text/javascript">
    /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
    var disqus_shortname = 'destinationcompk'; // required: replace example with your forum shortname
    function disqus_config() {
      this.callbacks.afterRender.push(function() { alert('clayton') });
    }

    var disqus_identifier = "image_".concat(12);
    var disqus_title = "image_title".concat(12);

    /* * * DON'T EDIT BELOW THIS LINE * * */
    (function () {
        var dsq = document.createElement('script');
        dsq.type = 'text/javascript';
        dsq.async = true;
        dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    })();
  </script>
  <noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments
  </a></noscript>
</div>

Go to Fiddle Button

I'm just trying to hide footer that's it!

A.J.
  • 8,557
  • 11
  • 61
  • 89
  • 2
    Im not au fait with the terms of service Disqus employ, but I would imagine this would be in breach of them. – SW4 Dec 17 '13 at 11:56
  • Do you have a demo of this running somewhere? – Wez Dec 17 '13 at 11:57
  • http://jsfiddle.net/764W9/25/ – A.J. Dec 17 '13 at 12:33
  • 3
    Its actually in violation of their ToS if you remove the footer: https://help.disqus.com/customer/portal/articles/466260-terms-of-service "you agree not to ... modify ... adapt ... edit ... works from any Disqus Content.","You agree that Disqus may include advertisements and/or content provided by Disqus ... as part of the implementation of the Service. You agree to comply ... to enable proper delivery, display, tracking and/or reporting of Ads." If you don't agree to the ToS, don't use it. – davidcondrey Jul 03 '14 at 17:33
  • Using or not using is a separate debate. We are engineers, we should know if this thing can be performed or not. Makes sense? – A.J. Jul 08 '14 at 08:56
  • 2
    @Clayton We should also avoid being dicks to people who are giving us free stuff for our websites. – ceejayoz Jul 30 '15 at 20:12

5 Answers5

42

In your CSS add:

#disqus_thread {
     position: relative;
}
#disqus_thread:after {
     content: "";
     display: block;
     height: 55px;
     width: 100%;
     position: absolute;
     bottom: 0;
     background: white;
}
tanguy_k
  • 11,307
  • 6
  • 54
  • 58
fanta
  • 561
  • 4
  • 6
  • Do you know if in Iframe, Our Css is not applied there? – A.J. Mar 06 '14 at 07:14
  • It should be applied to the ID of the element where the iframe is injected. If you look at the Universal Code, there is an empty element
    where the iframe will go. And to that one you will be adding an extra element with :after CSS. Hope it helps!
    – fanta Mar 12 '14 at 03:28
  • 4
    This IS the correct answer. Even though I dont believe Disqus would be Ok with hiding the footer, this solution does the job. – Drewman Apr 17 '14 at 14:41
  • 1
    There is a typo in that answer, discus should be disqus in first css selector – Thomas Davis May 23 '14 at 00:31
  • The `height` hack falls apart if you're using Disqus in a responsive setup. For instance, on a phone where the Disqus footer is no longer 55px. – Yahreen Jul 21 '14 at 00:56
  • 1
    Hello Yahreen, you can use media-queries to adjust it, using this concept. – fanta Jul 24 '14 at 23:52
  • 2
    Oh behalf of the anonymous user who suggested an edit, it should be noted that the background should be changed to match the background of the surrounding content. – bjb568 Aug 05 '14 at 02:29
9

You can use negative margins and overflow hidden.

#disqus_thread {
  overflow: hidden;

  iframe {
    margin-bottom: -54px;
  }
}
Robert Bokori
  • 259
  • 1
  • 3
  • 8
6

I was under the impression that the new disqus uses an iframe and therefore custom CSS can't be applied:

http://help.disqus.com/customer/portal/articles/526768-introducing-the-new-disqus-and-f-a-q-

For the most part, customization is different in the new Disqus because we decided to completely re-implement our commenting embed inside of an iframe. This iframe is hosted on disqus.com and, as such, the browser won't let your website apply styles to it using CSS statements.

Timmy O'Mahony
  • 53,000
  • 18
  • 155
  • 177
1

Outside of the technical workarounds, there is a legitimate way to do this. According to the website, you can remove this with a Pro subscription, which is around $100/month at the time of this answer.

https://<accountname>.disqus.com/admin/settings/general/

Disqus Branding Toggle Option in Settings

Elijah Lynn
  • 12,272
  • 10
  • 61
  • 91
-4

In the Joomla administration panel go to administrator - extensions - plugin manager and disable Disqus. Example screenshot below:

enter image description here

Jonathan Argentiero
  • 5,687
  • 8
  • 29
  • 34
nini
  • 1