For those of you who have struggled using the Disqus WP Plugin, this guide is for you. I tried using the plugin, but no matter which stylesheets I edited, I couldn't edit the Disqus CSS since the stylesheets are located within an iframe tag. Anyways here's what I did to fix that annoying box/margin error.
Using this guide, I added this JavaScript code to the end of my functions.php file.
function disqus_embed($disqus_shortname) {
global $post;
wp_enqueue_script('disqus_embed','http://'.$disqus_shortname.'.disqus.com/embed.js');
echo '<div id="disqus_thread"></div>
<script type="text/javascript">
var disqus_shortname = "'.$disqus_shortname.'";
var disqus_title = "'.$post->post_title.'";
var disqus_url = "'.get_permalink($post->ID).'";
var disqus_identifier = "'.$disqus_shortname.'-'.$post->ID.'";
</script>';
}
Next, I replaced comments_template(); in my single.php and page.php files with this code:
//comments_template();
echo '<div class="disqus-div">';
disqus_embed('YY');
echo '</div>';
Replace YY with your Disqus short name (typically http://shortname.disqus.com). Finally, I added this CSS to my custom.css file. Replace XX with the margins of your liking.
.disqus-div {
margin-top: XXpx;
margin-right: XXpx;
margin-left: XXpx;
}
You can also add any other CSS you want to this class. Cheers, hope this helps someone.
