This is a hard topic to cover because with CSS there are so many different ways you can design your layout that there is no real “one way”, cut in stone ten commandments sort of way to make your graphics or layout.

If you are a beginner though, it is nice to have a guide to help you practice with and get accustom to CSS, its rules, and applications.

So remember, these are guidelines, not rules.  Let me say that again, these are not rules!  Try some of these tricks and then add your own flair with it as you go along to make your own original Plurk creations.

Main Background:

This covers the whole screen, not the timeline, so this one is tricky.  Decide if this picture is going to embrace the whole screen, left or right screen, top or bottom.  For this section your CSS will look something like this:

}
Let’s break it down

body, html {
background-image: url(http://www.yoururl.com/backgroundimage.gif);
background-repeat: repeat
color: black;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #ffffff

}

What we have here is a background image that will repeat across the whole screen.  This would be good for a pattern that repeats or for a large image that will not repeat.

color: black;

This is for any text that will appear in the background part.  Everything in the CSS code above after the color involves the text.

Recommended size for a background if it is going to be full size is: 2000 pixels by 1000 pixels.  Now remember some CSS positions to help you decide the background placement(if it is an image).

background-repeat: no-repeat

This will place the image on the page only once.

background-position: top left

The following codes can be used with the background-position code:
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x% y%
xpos ypos

If you just want a background color use the following code:

background-color: #ffffff;

Of course you would replace the letters ffffff with the color you wanted.  To learn more about these colors go here.

That takes care of the main body of the plurk background.  Let’s move on to the timeline holder.  For the timeline background size I recommend the following size: 1400 width x 400 height.  The rules we covered above apply to the timeline’s css as well, as well as the css on any page.

For the bottom of the timeline where it shows the times you made your plurks the background size should be about 60 pixels width x 40 pixels height.  To modify the bottom timeline put your css code in the following brackets:

#bottom_line {
}

For the dashboard the size should be about 990 pixels width x 300 pixels height.  It’s CSS should be put in the following brackets:

#plurk-dashboard {
}

Like I said this is just a starter guide if you want to use images in your Plurk theme and is not set in stone.  There are many more CSS codes to modify to change your Plurk, but like I said just use some of our free templates, and mess around with the code and see what happens!