Disqus is a pretty cool service. It’s one a new breed of comment hosting services (along with IntenseDebate and JS-Kit) that allows people to comment on this and many other blogs after logging in via their existing Twitter or Facebook account, instead of having to create a site-specific account.

But the default look-and-feel of the Disqus widgets could be better. In particular, the inclusion of multiple logos and the generic web 2.0-ish rounded button style both leave a lot to be desired. While you can customize via CSS, the documentation for the classes and ids used in the HTML they inject into your site is somewhat lacking.

I wasn’t about to let this detract from the design I recently developed using Blueprint, so I spent part of this past weekend adapting Disqus to my needs. Here’s the CSS I’m using to pare down and clean up their Narcissus theme:

/*first, ensure that all type matches Blueprint CSS*/
#disqus_thread {
  font-size: 75%;
  color: #222;
  background: #fff;
  font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
}

/*remove the default horizontal lines*/
#dsq-content .dsq-login-buttons, #dsq-content .dsq-request-user-info {
  background-image: none;
}

/*hide the logos and options panel*/
#dsq-content .dsq-options,
#dsq-content .dsq-dc-logo,
.dsq-brlink,  {
  display: none;
}

/*resize the h3's to match Blueprint's style*/
#dsq-new-post h3 {
  font-size: 1.2em;
  line-height: 1.25;
  margin-bottom: 1.25em;
  font-weight: bold;
}

/*ditto above, but also create space between comments and entry form*/
#dsq-comments-title h3 {
  font-size: 1.2em;
  line-height: 1.25;
  margin-bottom: 1.25em;
  margin-top: 1.5em;
}

/*change the look of the buttons to be less web-2.0-ish*/
button.dsq-button,
button.dsq-button-small,
#dsq-content .dsq-sharing-options button.dsq-button-small,
#dsq-content .dsq-panel,
#dsq-content .dsq-subscribe ul {
  background-image: none;
  background: #E8E8E8;
  border: 1px solid #AFAFAF;
  font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
  border-radius: 0;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
}

/*remove rounded corners and reset text entry forms*/
#dsq-content .dsq-sharing-options:hover button.dsq-button-small {
  background-image: none;
  background: #E8E8E8;
  border: 1px solid #AFAFAF;
  border-bottom: 0;
  font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
  border-radius: 0;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
}

/*remove rounded corners from text entry boxes*/
#dsq-content .dsq-comment-header,
#dsq-content .dsq-subscribe a,
#dsq-content .dsq-textarea .dsq-textarea-wrapper,
#dsq-content .dsq-post-fields .dsq-input-wrapper, 
#dsq-content .dsq-header-avatar a.dsq-avatar, 
#dsq-content #dsq-comments .dsq-header-avatar .dsq-drop-profile,
#dsq-content .dsq-thread-settings, 
#dsq-content .dsq-badge-verified {
  border-radius: 0;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
}

If you want Disqus to look like what I have here, then you should add the above into the Settings > Customize > Custom CSS menu in your account.

Now, if only I could do something about the latency…

Update: (2010-03-10) I’ve completely disabled comments on this site. Details as to why will be forthcoming.