(back to css)

The Anatomy of a Plurk Page

This is by no means complete or authoritative - I'm still working on it!. Please note that I use dummy text here and there for images (ie "http://blah/blah.png") or colors, so just copying and pasting the code below will not magically produce what you want! If you'd like something added to this page, please let me know.

a sample page body,html #top_bar #top_login #page_title #timeline_holder #plurk-dashboard div.plurk .submit_holder #bottom_line #karma #dash-profile


Use this to set the background of the whole page (typically what shows outside of the timeline and dashboard). You can also set some page-wide defaults here, such as for fonts and colors.

body,html {
  background: #9ae4e8 url(http://blah/twitterclouds.gif)!important;


"My Profile", "My Friends", and "Alerts" are all links here, so to change their color, do this:

#top_bar a { color:#f15a22!important }

I also found the alert indicator too small so I targetted it to make it more obvious like this:

#alert_beacon.count {
  padding:0 1em;
  margin:0 1em;


As in #top_bar, these are all links, so target their <a>

#top_bar a { color:#f15a22!important }


This one is simple:

#page_title {


This is where you show off - you probably want to change the background here. For a fixed image, you want to specify "no-repeat". In the example below, I'm aligning the image to the right of the timeline, and shifting it down 65px because of the source image.

#timeline_holder {
    background:#6cc5c3 url(http://blah/failwhale.png) no-repeat right 65px;

If you have a background that tiles, leave out stuff after url().


This one is pretty complex, the selector div.plurk will suffice for most of your targetting needs here. To make it translucent, you can do this:

div.plurk_cnt, .dots .inner, .response_count {
  background: url(http://xs229.xs.to/xs229/08311/opacity.5875.png)!important
.new .response_count {
  padding:0 0.25em

This also makes the "new response" indicator more obvious (bigger and redder).


Outside of the timeline, this is the other big box you might want to fiddle with. You target it like so:

#plurk-dashboard {
  border:1px solid #87bc44

It also contains 4 "columns", specified as div.dash-segment, so you can change them independently:

div.dash-segment {


Fun! This illustrates how to fake content, by hiding what's there (in this case, the button) and setting a background image for its container to "create" new content. The hard part is creating the graphic, and here, I didn't match the font of plurk's button, but close enough for me!

.submit_holder img { opacity:0;filter:alpha(opacity=0);zoom=1 }
.submit_holder { background:url(http://www.fumpr.com/fumprd/viu1216766312m.png) no-repeat  }

Here are some other images to try:


This is something you might want to change to better match your timeline background. The bar at the bottom (#bottom_line), the column that marks days and the current time (.day_bg .div_inner), and the times displayed can be modified en masse as:

#bottom_line, .day_bg .div_inner, #time_show {


Here is your karma score. You can "change" it via the replace-by-background-image technique a la:

#karma { opacity:0;filter:alpha(opacity=0);zoom:1 }
#karma_div { background:url(http://blah/fakekarma.png) no-repeat 0 7px }

#karma contains your real score, so you we hide that one, then apply a background image of the new karma score to its container "below" it (#karma_div). The hard part will be generating the new score image as every browser/operating system displays that differently. But infinity is nice and ambiguous.

You can also make it "peek" your real score when you hover your mouse over it, just in case you want to check it every once in a while:

#karma:hover { opacity:1; filter:alpha(opacity=100)}
#karma_div:hover { background:none }

This just resets to the original when the mouse hovers over it.


This one covers your avatar and the age/location information. If you want to put a border around the image, you would do this:

#dash-profile img { border:1px solid #87bc44 }