Better Looking Disqus Widgets

23 September 2009 at 20:24

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…

Disqus latency

Update: (2010−03−10) I’ve com­pletely dis­abled com­ments on this site. Details as to why will be forthcoming.

Tags: ,



A photo travelogue

15 February 2009 at 23:18

I stum­bled across this cool video a while ago.

I’m inspired try to do some­thing sim­i­lar on my next vacation.




Dreams

19 January 2009 at 10:24

Barak Obama’s inau­gu­ra­tion tomor­row is a big down pay­ment towards ful­fill­ing Dr. King’s dream. But in the mean­time, take a minute to remind your­self of the orig­i­nal vision.




Happy holidays!

25 December 2008 at 20:51

Christmas lights




Around the world in two weeks

27 November 2008 at 23:55

With stops in Lon­don, Köln, München, and Tokyo, my two week busi­ness trip went by in a blur.

Deutsche Bahn

The trip was good from busi­ness stand­point and I was lucky to be able to see good friends in all three coun­tries, but boy am I thank­ful to be back home. Two weeks on the road is about my limit for a work-related trip.




Bugdroid at Google

20 October 2008 at 21:06

Check out what showed up at work today.

Bugdroid is now a Noogler

It’s huge!




Life can be rough for a pup

12 October 2008 at 21:27

Poor Miles—he’s had a rough weekend.

Cone head

I bet he can’t wait to be free of the cone.




Color or black and white?

6 October 2008 at 21:35

After some reflec­tion, I think I pre­fer the color ver­sion of this photo I took in Lon­don ear­lier this year.

Exiting

What do you think?




Tokyo, it’s been too long

25 May 2008 at 17:43

There’s a statue out­side of Shibuya sta­tion ded­i­cated to Hachiko, the leg­endary Akita who faith­fully waited for her owner every night, even long after he passed away.

HachikoI didn’t think much about it until my flight in April from SFO to NRT was in the air, but I spent almost ever other sum­mer in Japan when I was grow­ing up. After 8 years away (far too long in ret­ro­spect), would it still feel the same? Had the long eco­nomic malaise sapped the coun­try of its vitality?

I was happy to see that while much of the urban land­scape of Tokyo had changed—in par­tic­u­lar, mega-projects like Rop­pongi Hills, Tokyo Mid­town, and Omote­sando Hills were all new to me—the essen­tial char­ac­ter of place hadn’t. The dynamic energy, fre­netic pace, and fan­tas­tic food were still there, just enhanced by the con­tin­ued organic evo­lu­tion of the city.

And that’s what I like most about the place, the jar­ring dis­con­ti­nu­ity—no doubt a legacy of the urban plan­ning done by war­lords from cen­turies past. Unlike other cities, Tokyo jux­ta­poses new and old, with seem­ingly lit­tle con­cern for con­ti­nu­ity. Per­haps it’s wabi-sabi writ large. Regard­less, I’m look­ing for­ward to going back in June—and much more in the future. Like Hachiko, Japan waits patiently for me to return.




Seen in Seattle

1 April 2008 at 22:51

You know your trip to Seat­tle is com­plete when…

Walk and talk

…you spot Star­bucks chair­man and CEO Howard Schultz just out­side the first Star­bucks store on Pike Place.