This post is a 101 of Plurk theming. I hope to give you CSS noobs a chance to modify your own theme. First, you should check Plurk styling help here. It was mentioned that Plurk's important page style are divided to 3 elements:
If you know CSS coding, I think you would be bored with my explanation here. However, most Plurkers don't understand what CSS is about. So, I try to explain as simple as I can, and hope that my tutorial here will give you noobs a bit of knowledge about CSS.
First of all, the body element. The body element covers in overall how your page will be displayed. You can choose how you want to display the background color, background image, font style, font color, font size, etc. Changing color would require you to type the hex color code. If you don't have an image editing software, you could check this online application from Febooti. Just select any color that you want, and you can see its hex color.
Edit your profile, and click customize profile. If you have Karma over 25, then you should see box editor for typing the CSS code. Try typing this CSS code:
body, html {
color: #FFFFFF; // this is the font color. You should see that all texts that don't have link are changed to white
font-size: 12px; // this is to change the default font size.
background: #1B0000; // this is to change the background color of the page.
}
Don't forget to close each line with the ; character. Now to extend it further. What if you want to add image as your background? You could check free image uploading sites. For Plurk, I usually use Plurkpix. Upload your image there, and you will be given an URL. For example: http://www.plurkpix.com/pix/Vu.png. Now try typing this CSS code:
body, html {
color: #FFFFFF;
font-size: 12px;
background: #1B0000 url("http://www.plurkpix.com/pix/Vu.png");
}
If your image is smaller than the screen size, that image will be tileable to the right and bottom. That's okay if what you upload is an image that was designed to be tileable. However, if you (for example) upload your own photo, then it would look ugly, seeing your photo repeated over and over again. Now edit your CSS code to this:
body, html {
color: #FFFFFF;
font-size: 12px;
background: #1B0000 url("http://www.plurkpix.com/pix/Vu.png") no-repeat;
}
You can change no-repeat to repeat-x to make it tileable to the right or repeat-y to make it tileable to the bottom. If you don't want to repeat your background, then you should also align the uploaded photo, by typing this:
body, html {
color: #FFFFFF;
font-size: 12px;
background: #1B0000 url("http://www.plurkpix.com/pix/Vu.png") no-repeat top left;
}
This is to align the uploaded image to top left of the screen. If you want to align it at the bottom, then change it to bottom left.
Next post, how to change your timeline color and background.
