The Anatomy of a Plurk Page

body,html

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;
  color:#3f6a8e!important;
}

#top_bar

"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 {
  background:#f00;
  padding:0 1em;
  margin:0 1em;
  font-size:150%;
}

#top_login

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

#top_bar a { color:#f15a22!important }

#page_title

This one is simple:

#page_title {
  font-weight:bold;
}

#timeline_holder

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().

#dyanmic_logo

This holds the plurk logo plus the creature mascot you've chosen for yourself. You can hide it like so:

#dynamic_logo img { opacity:0;filter:alpha(opacity=0);zoom:1 }

You can even replace it (although it's probably easier to use your timeline background for this):

#dynamic_logo img { opacity:0;filter:alpha(opacity=0);zoom:1 }
#dyanmic_logo     { background:url(http://blah/newlogo.png) }

div.plurk

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 {
  background:#f00!important;
  color:#fff!important;
  font-size:150%;
  padding:0 0.25em
}

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

#plurk-dashboard

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

#plurk-dashboard {
  background:#dfc;
  border:1px solid #87bc44
}

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

div.dash-segment {
  background:#bda;
}

.submit_holder

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:

#bottom_line

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 {
  background:url(http://blah/translucent.png)
}

#karma

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.

#dash-profile

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 }