[manifold|reality]

Dis­qus is a pretty cool ser­vice. It’s one a new breed of com­ment host­ing ser­vices (along with IntenseDe­bate and JS-Kit) that allows peo­ple to com­ment on this and many other blogs after log­ging in via their exist­ing Twit­ter or Face­book account, instead of hav­ing to cre­ate a site-specific account.

But the default look-and-feel of the Dis­qus wid­gets could be bet­ter. In par­tic­u­lar, the inclu­sion of mul­ti­ple logos and the generic web 2.0-ish rounded but­ton style both leave a lot to be desired. While you can cus­tomize via CSS, the doc­u­men­ta­tion for the classes and ids used in the HTML they inject into your site is some­what lacking.

I wasn’t about to let this detract from the design I recently devel­oped using Blue­print, so I spent part of this past week­end adapt­ing Dis­qus to my needs. Here’s the CSS I’m using to pare down and clean up their Nar­cis­sus 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 Dis­qus 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 some­thing about the latency…