DISQUS COMMENTS: LOADING BOX STYLES FOR ONCLICK EVENT

DISQUS COMMENTS ONCLICK EVENT STYLE COLLECTION

WHITE ORIGINS VERSION WITH BORDER

This is for template with white background:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#comments{display:none}.post-comment-link{visibility:hidden}#disqus_thread{background:#fff;margin:10px 0 0;padding:20px;box-shadow:inset 0 0 1px 0 #aaa}#disqusshow{position:relative;overflow:hidden;display:block;padding:15px 20px;text-align:left;color:#222;font-weight:700;text-transform:uppercase;letter-spacing:.5px;cursor:pointer;margin:10px 0;background:#fff;border:1px solid #999;transition:all .3s}#disqusshow:after{display:inline-block;content:"\f086";font-family:fontAwesome;font-style:normal;font-weight:normal;font-size:18px;color:#e85e54;border-left:1px solid #999;top:0;right:0;padding:12px 20px;position:absolute}#disqusshow:hover,#disqusshow:active{color:#f8695f}
</style>

DARK VERSION WITHOUT BORDER

This is for template with white background:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#comments,.post-comment-link{visibility:hidden!important;display:none!important}#disqus_thread{background:none!important;margin:10px 0 0;padding:12px;box-shadow:none!important}#disqusshow{position:relative;overflow:hidden;display:block;padding:28px 33px;text-align:center;color:#BBBBBB;font-size:1.5em;font-family:Roboto Condensed,Tahoma,Arial;font-weight:700;text-transform:uppercase;letter-spacing:.5px;cursor:cell;margin:10px 0;background:#59636F;border:5px solid #DDD;transition:all .3s}#disqusshow:after{display:inline-block;content:"\f086";font-family:fontAwesome;font-style:normal;font-weight:normal;font-size:23px;color:#BBBBBB;border-left:3px dashed #fff;top:0;right:0;padding:12px 20px;position:absolute}#disqusshow:hover,#disqusshow:active{color:#f8695f}
</style>

LIGHT VERSION WITHOUT BORDER

This is for template with white background:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#comments,.post-comment-link{visibility:hidden!important;display:none!important}#disqus_thread{background:none!important;margin:10px 0 0;padding:12px;box-shadow:none!important}#disqusshow{position:relative;overflow:hidden;display:block;padding:28px 33px;text-align:center;color:#E85E54;font-size:1.5em;font-family:Roboto Condensed,Tahoma,Arial;font-weight:700;text-transform:uppercase;letter-spacing:.5px;cursor:cell;margin:10px 0;background:#FFEB96;border:3px solid #DDD;transition:all .3s}#disqusshow:after{display:inline-block;content:"\f086";font-family:fontAwesome;font-style:normal;font-weight:normal;font-size:23px;color:#e85e54;border-left:3px dashed #fff;top:0;right:0;padding:12px 20px;position:absolute}#disqusshow:hover,#disqusshow:active{color:#f8695f}
</style>

FOR SITE WITH BLACK BACKGROUND

Simply add new line after the last code, except the origins version. This is makes Disqus's comments text with gray color, but not the box title.

.btn-block,.input-block-level{color:#cbd2d6}