Title: Splatter
If you need help installing the theme please click here.
Copy and Paste the following code into your customize profile section in profile settings:

/* Get your free Plurk themes at http://www.freeplurkthemes.com */

body, html {
background: #000000;
background-repeat: repeat
color: white;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #262f62;
}

#timeline_holder {
background-image: url(http://www.freeplurkthemes.com/images/timeline-holder.jpg);
}

/* Hide Karma Creature */
#dynamic_logo { opacity:0;filter:alpha(opacity=0);zoom:1
}
/* Hide Bar */
.day_bg {
opacity:0.01;filter:alpha(opacity=01);
}
/* Hide Search */
#mini_search form { opacity:0; filter:alpha(opacity=0);zoom=1
}

#mini_search form:hover { opacity:1; filter:alpha(opacity=100)
}

#bottom_line {color:#e66799;
background: transparent url(http://www.freeplurkthemes.com/images/timeline.jpg) repeat-x scroll top left;

border-top: 1px solid #cf1876;
border-bottom: 1px solid #cf1876;
}

.td_img{ opacity:0;filter:alpha(opacity=0);zoom:1}

.evening, .night, .day, .morning {
color:#ffffff;
}

#div_loading { background-position: 25%;}

#top_login {
background: #000000 url(http://www.freeplurkthemes.com/images/timeline-holder.jpg) repeat-x scroll center left;
margin: 0px 0px 0px 0px;
padding-right: 10px;
height: 20px;
}
.dark_icons {color:#e66799;}
#top_bar #edit_link {color:#ffffff;}
#top_bar #edit_link, #top_login a, #footer a, #top_bar a {color:#e66799;}
#page_title {
font-size:15px;
color: #e66799;
}

#timeline_bg .day_start .div_inner {
background: #e7adc4;
opacity: 0.4;
-moz-opacity: 0.4;
filter: alpha (opacity = 40);
}

.plurk_cnt {-moz-border-radius: 1px 11px 1px 11px;
-webkit-border-top-right-radius: 11px;
-webkit-border-bottom-left-radius: 11px; }

.qualifier, .m_qualifier, .segment-content, .dots.inner, #emoticon_selecter, #updater {
-moz-border-radius: 1px 9px 1px 9px ;
padding-left: 6px; padding-right: 5px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px; }

#more_options .on, #more_options #more_options_holder { background:transparent ;
background-color: none; -moz-border-radius: 1px 9px 1px 9px ; color: #e66799
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px; }

.plurk_box .caption {-moz-border-radius: 11px 0px 0px 0px ;
background: url(http://www.freeplurkthemes.com/images/timeline-holder.jpg) ;
color: black;
text-align: center; -webkit-border-top-left-radius: 11px; }

.plurk_box .list {-moz-border-radius: 0px 0px 0px 11px ;
-webkit-border-bottom-left-radius: 11px; }

.info_box {-moz-border-radius: 0px 0px 11px 0px ;
background: url(http://www.freethemes.com/images/gradient2.jpg) ;
color: white;
border: none;
-webkit-border-bottom-right-radius: 11px; }

.info_box.c_disabled { -moz-border-radius: 11px 0px 0px 0px;
-webkit-border-top-left-radius: 11px; }

.info_box a { color: #fff!important; }

#input_small { height: 75px; }

.response_count, .caption { background:#262f62!important; color: #ffffff!important; font-size:10px; padding:0 0.25em
}
.new .response_count { background:#e66799!important; color:#ffffff!important; font-size:10px; padding:0 0.25em
}
.dots .inner { margin-left: 3px; -moz-border-radius:8px 8px 8px 8px;
}

#updater { background:#e66799;
color:#ffffff;
border: 1px solid #e66799;
}

#plurk_form {
background: transparent url(http://www.freeplurkthemes.com/images/gradient2.jpg) repeat;
border-right: 1px solid #5e96be; border-bottom: 1px solid #5e96be;
z-index: 4; -moz-border-radius: 0px 20px 0px 20px ; padding-bottom: 5px;
-webkit-border-top-right-radius: 21px;
-webkit-border-bottom-left-radius: 21px;
}

#karma {
color: #e7adc4;
}

#plurk-dashboard {
color: #ffffff;
background: #000000 url(http://www.freeplurkthemes.com/images/gradient.jpg) no-repeat scroll left center;
border: 5px #000000;
-moz-border-radius: 18px;
-khtml-border-radius: 18px;
-webkit-border-radius: 18px;
border-radius: 18px;
}

#plurk-dashboard a{
color:#e7adc4;
text-decoration:underline;
}

#plurk-dashboard a:hover{
color:#e66799;
text-decoration:underline;
}

#plurk-dashboard h2{
text-transform:uppercase;
background:none;
color:#e66799;
font-weight:bold;
padding:0;
}

#dash-stats table td {
color:#e7adc4;
}

#dash-fans div[style]:first-child { position:absolute;opacity:0; font-size:0;height:0;
}

#dashboard-invite, #invite_url, #mobile-gfx, #widget-gfx, #twitter-gfx { height:0; position:absolute;opacity:0; filter:alpha(opacity=0); zoom=1
}

#filter_tab a.filter_selected {
-moz-border-radius: 2px 2px 2px 10px; background:#e7adc4; color: #ffffff;
-webkit-border-bottom-left-radius: 11px;}

#filter_tab .off_tab { -moz-border-radius: 2px 2px 10px 2px;
background: url(http://www.freethemes.com/images/gradient2.jpg) ;
color: #ffffff; background-color: #e66799;
-webkit-border-bottom-right-radius: 11px; }

.p_img { -moz-border-radius: 3px 5px 3px 5px; border: solid 1px #e7adc4;
-webkit-border-bottom-left-radius: 5px;},
fieldset, img { -moz-border-radius: 3px 5px 3px 5px;
-webkit-border-bottom-left-radius: 5px}

Enjoy!

Previously I showed you how to change your scroll arrows.  Now I’ll show you how to make them completely dissappear.  Navigate to your CSS console. To get there go to the upper left hand corner of your profile where it says “My Profile” and click on the Edit link,  than click on the Customize Profile tab.  Go to the bottom where it says “Customize Your Profile Even More with CSS” and paste the following code:

.browse_button div {
opacity:0; filter:alpha(opacity=0);zoom=1
}

Enjoy!

Here’s a quick hack to get rid of the search bar in the timeline holder.  Enter this code of CSS in the customize profile tab in your Profile Settings. To get there go to the upper left hand corner of your profile where it says “My Profile” and click on the Edit link,  than click on the Customize Profile tab.  Go to the bottom where it says “Customize Your Profile Even More with CSS” and paste the following code:

#mini_search form { opacity:0; filter:alpha(opacity=0);zoom=1
}

#mini_search form:hover { opacity:1; filter:alpha(opacity=100)
}

Enjoy!

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!

Here’s a quick trick to change the scroll arrow on your plurk profile.  You know the arrow that appears when you put the mouse cursor on either edge of the time line?  The default arrow is pretty boring, so we’re going to change it.

First thing you need to do is either find a picture online or make your own in Photoshop or Gimp.  I used the following:  Ye Old Pointing Finger.  You can grab him here if you want.  Or just right click on him and click “Save Image As”.

If you do decide to make your own pointer arrow you should save it as a PNG or GIF file.  This way it can have a transparent background to let your timeline show through.  And if you make it you need to upload it to an image host or to your own webhost.  A free image host I recommend is Plurk Pix.

Once you have your image taken care of, make sure you note the url.  For example the url of Ye Old Pointer Finger is “http://www.freeplurkthemes.com/images/finger-pointer.gif”.  You will need this for the code.

Okay, that’s out of the way.  So head over to Plurk and sign in.  Go to the upper left corner of your profile where it says My Profile and click on the Edit button right next to it.  Click on the Customize Profile Tab and at the botton where it says “Customize Your Profile Even More With CSS” Paste the following code:

.browse_button div {
Background:  transparent url(http://www.yourimagesurl.com/yourimage.gif) scroll 0 -51px;
}

Once you do that, click the Save and Update button.  Your results should look something like this:

Title: Kaiju Monsters!
If you need help installing the theme please click here.
Copy and Paste the following code into your customize profile section in profile settings:

/* Get your free Plurk themes at http://www.freeplurkthemes.com */

body {
color: #eeeeee;
background: url(http://www.freeplurkthemes.com/images/kaiju-bottom.jpg) bottom repeat-x;
font-size: 90%;
font-family: “trebuchet ms”, helvetica, arial;
}
/* Hide Karma Creature */
#dynamic_logo { opacity:0;filter:alpha(opacity=0);zoom:1 }
#bottom_line {
border-top: #EEEEEE solid 1px;
border-bottom: #EEEEEE solid 1px;
background: #2c2c2c;
opacity:0.7;filter:alpha(opacity=70);
}
.day_bg {
opacity:0.01;filter:alpha(opacity=01);
}
.div_inner {
border-left: #aec8f1;
border-right: #aec8f1;
opacity:0.5;filter:alpha(opacity=50);
}
#filter_tab .off_tab {
color: #EEEEEE;
border: #aec8f1;
background: #2c2c2c;
opacity:0.7;filter:alpha(opacity=70);
text-decoration: none;
}
#filter_tab a {
border: #EEEEEE !important;
color: #333333;
text-decoration: none !important;
}
#timeline_holder {
background: #111 url(http://www.freeplurkthemes.com/images/kaiju-plurk-background.jpg);
}
#top_bar a, #top_login a, #dashboard_holder a, #footer a {
color: #fff !important;
}
#dashboard_holder{
}
#plurk-dashboard {
background: #000 url(http://www.freeplurkthemes.com/images/kaiju-dashboard.jpg);
opacity:6.0;filter:alpha(opacity=60);
}
.dash-segment {
font-size:90%;
width: 225px;
}
#plurk-dashboard h2 {
color:#EEEEEE;
}

Enjoy!

Title: Purpley Peopley Eater
If you need help installing the theme please click here.
Copy and Paste the following code into your customize profile section in profile settings:

/* Get your free Plurk themes at http://www.freeplurkthemes.com */

body, html {
background: #d800e3;
color: #00fff7;
font-size: 90%;
font-family: “trebuchet ms”, helvetica, arial;
}

/* Hide Karma Creature */
#dynamic_logo { opacity:0;filter:alpha(opacity=0);zoom:1 }

#bottom_line {
border-top: #00fff7 solid 1px;
border-bottom: #00fff7 solid 1px;
background: #3e004f;
opacity:0.7;filter:alpha(opacity=70);
}
.day_bg {
opacity:0.01;filter:alpha(opacity=01);
}
.div_inner {
border-left: #00fff7;
border-right: #00fff7;
opacity:0.5;filter:alpha(opacity=50);
}

#filter_tab .off_tab {
color: #00fff7;
border: #00fff7;
background: #3e004f;
opacity:0.7;filter:alpha(opacity=70);
text-decoration: none;
}

#filter_tab a {
border: #00fff7 !important;
color: #3e004f;
background: #00fff7;
text-decoration: none !important;
}

#timeline_holder {
background: #d800e3;
}

#top_bar a, #top_login a, #dashboard_holder a, #footer a {
color: #00fff7 !important;
}
#dashboard_holder{
}
#plurk-dashboard {
background: #3e004f;
opacity:6.0;filter:alpha(opacity=60);
}
.dash-segment {
font-size:90%;
width: 225px;
}
#plurk-dashboard h2 {
color:#00fff7;
}

Enjoy!

By now you’ve probably seen the little horizontal bar across the timeline background.  It has it’s purpose:  It’s there to visually help you track the forward or reverse scrolling of the timeline if you are quickly flipping through past or future plurks.

As “useful” as this is, it’s just not aesthetically pleasing.  So let’s give it the boot.  Paste this code into your plurk theme css.  If you’ve forgot how to get there, go to the upper left hand corner of your screen and click on “Edit” right next to “Mr Profile”.  Click on the “Customize Profile” tab, and at the bottom where it says “Customize Your Profile even more with CSS” enter the following code:

.day_bg {
opacity:0.01;filter:alpha(opacity=01);
}

Enjoy!

Title: Fry Sauce
If you need help installing the theme please click here.
Copy and Paste the following code into your customize profile section in profile settings:

/* Get your free Plurk themes at http://www.freeplurkthemes.com */

body, html {
background: #f57a08;
color: #fff700;
font-size: 90%;
font-family: “trebuchet ms”, helvetica, arial;
}

/* HideKarma Creature */
#dynamic_logo { opacity:0;filter:alpha(opacity=0);zoom:1 }

#bottom_line {
border-top: #fff700 solid 1px;
border-bottom: #fff700 solid 1px;
background: #e30013;
opacity:0.7;filter:alpha(opacity=70);
}
.day_bg {
opacity:0.01;filter:alpha(opacity=01);
}
.div_inner {
border-left: #e30013;
border-right: #e30013;
opacity:0.5;filter:alpha(opacity=50);
}

#filter_tab .off_tab {
color: #fff700;
border: #e30013;
background: #e30013;
opacity:0.7;filter:alpha(opacity=70);
text-decoration: none;
}

#filter_tab a {
border: #fff700 !important;
color: #e30013;
background: #fff700;
text-decoration: none !important;
}

#timeline_holder {
background: #f57a08;
}

#top_bar a, #top_login a, #dashboard_holder a, #footer a {
color: #fff700 !important;
}
#dashboard_holder{
}
#plurk-dashboard {
background: #e30013;
opacity:6.0;filter:alpha(opacity=60);
}
.dash-segment {
font-size:90%;
width: 225px;
}
#plurk-dashboard h2 {
color:#fff700;
}

Enjoy!

Title: Boring White Notepad
If you need help installing the theme please click here.
Copy and Paste the following code into your customize profile section in profile settings:

/* Get your free Plurk themes at http://www.freeplurkthemes.com */

body, html {
background: #ffffff;
color: #000000;
font-size: 90%;
font-family: “trebuchet ms”, helvetica, arial;
}

#bottom_line {
border-top: #949799 solid 1px;
border-bottom: #949799 solid 1px;
background: #d4d4d4;
color: #000000;
opacity:0.7;filter:alpha(opacity=70);
}
.day_bg {
color: #949799;
}
.div_inner {
opacity:0.5;filter:alpha(opacity=50);
}

#filter_tab .off_tab {
color: #949799;
border: #aec8f1;
background: #ffffff;
opacity:0.7;filter:alpha(opacity=70);
text-decoration: none;
}

#filter_tab a {
border: #949799 !important;
color: #d4d4d4;
background: # 996e76;
text-decoration: none !important;
}

#timeline_holder {
background: #ffffff;
}

#top_bar a, #top_login a, #dashboard_holder a, #footer a {
color: #d4d4d4 !important;
}
#dashboard_holder{
background: #ffffff;
color: #000000;
}
#plurk-dashboard {
background: #ffffff;
opacity:6.0;filter:alpha(opacity=60);
}
.dash-segment {
font-size:90%;
width: 225px;
}
#plurk-dashboard h2 {
color:#000000;
}
.dash-segment {
color:#000000;
}

Enjoy!