Introduction to Plurk Theming: Timeline Holder

Hi again, Plurkers!

Now I'd like to continue my tutorial about theming Plurk. Previously, I've mentioned how to theme the body element. On this post, I will continue explaining how to theme the timeline holder. Again, this tutorial is intended for CSS beginners. If you think yourself as an expert, please don't bother read this post. You would get bored.

Timeline holder is where you can see the nice bars showing your plurks and your friends' plurks. Now to theme this, first of all, you should edit your profile, then click customize profile.

Previously, you would need Karma over 25 points to edit your theme. However, reading Plurk's latest blog post, now you can just change your theme right away, regardless what Karma point you currently have.

Under your body CSS code, type this:


#timeline_holder {
background: #000000;
}


This would change your timeline holder to solid black color. If you want to add an image as your background, you could use many free image uploading sites, such as Plurkpix.com. As an example I've already uploaded my image. The image link is: http://www.plurkpix.com/pix/Vt.png. Now we modify the CSS code to this:


#timeline_holder {
background:#000000 url("http://www.plurkpix.com/pix/Vt.png") no-repeat;
}


As I said in the previous tutorial, the no-repeat was to make sure that the uploaded image is not tileable all over the screen.

If you want to add a grey border on top and bottom of the timeline, you can add this CSS code:


#timeline_holder {
background:#000000 url("http://www.plurkpix.com/pix/Vt.png") no-repeat;
border-top: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
}


Using this CSS code will add a 1px solid line with grey color on top and bottom of the timeline holder. For variation, you could also change the solid code to dotted or dashed. If you want to have a thicker line, then change 1px to higher number, such as 3px.

The timeline holder element is actually on top of the background element. You could make the theme more interesting by changing the transparancy of the timeline holder, so that you can see the body element underneath. Add this CSS code to your timeline holder element:


#timeline_holder {
background:#000000 url("http://www.plurkpix.com/pix/Vt.png") no-repeat;
border-top: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
opacity: 0.7; filter:alpha(opacity=70);
}


This would give you 70 percent transparancy on your timeline holder. Try changing it to opacity: 0; filter:alpha(opacity=0); to make it totally invisible.

Next post, how to change your dahsboard holder's theme.