Better Looking Disqus Widgets

23 September 2009 at 20:24

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-brlink,
#dsq-content .dsq-dc-logo {
  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...

Disqus latency




A photo travelogue

15 February 2009 at 23:18

I stumbled across this cool video a while ago.

I'm inspired try to do something similar on my next vacation.




Dreams

19 January 2009 at 10:24

Barak Obama's inauguration tomorrow is a big down payment towards fulfilling Dr. King's dream. But in the meantime, take a minute to remind yourself of the original 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 London, Köln, München, and Tokyo, my two week business trip went by in a blur.

Deutsche Bahn

The trip was good from business standpoint and I was lucky to be able to see good friends in all three countries, but boy am I thankful 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 reflection, I think I prefer the color version of this photo I took in London earlier this year.

Exiting

What do you think?




Tokyo, it’s been too long

25 May 2008 at 17:43

There's a statue outside of Shibuya station dedicated to Hachiko, the legendary Akita who faithfully 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 summer in Japan when I was growing up. After 8 years away (far too long in retrospect), would it still feel the same? Had the long economic malaise sapped the country of its vitality?

I was happy to see that while much of the urban landscape of Tokyo had changed—in particular, mega-projects like Roppongi Hills, Tokyo Midtown, and Omotesando Hills were all new to me—the essential character of place hadn't. The dynamic energy, frenetic pace, and fantastic food were still there, just enhanced by the continued organic evolution of the city.

And that's what I like most about the place, the jarring discontinuity—no doubt a legacy of the urban planning done by warlords from centuries past. Unlike other cities, Tokyo juxtaposes new and old, with seemingly little concern for continuity. Perhaps it's wabi-sabi writ large. Regardless, I'm looking forward 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 Seattle is complete when...

Walk and talk

...you spot Starbucks chairman and CEO Howard Schultz just outside the first Starbucks store on Pike Place.