Jeff Summers

  shares  Replacing the Plurk Creature

Let's start out with the code that I used.  Since many of you are probably just looking for the CSS that you can cut and paste I'll post it here. 

/* Remove Plurk Creature */
div#dynamic_logo img {
    background-position: left top;
    background-repeat: no-repeat;
    height: 0px;
    width: 0px;
    position: absolute;
    overflow: hidden;
    left: 65px;
}

div#logo {
    border-bottom: none;
}

div#logo img {
    background-position: left top;
    background-repeat: no-repeat;
    overflow: hidden;
    height: 0px;
    width: 0px;
}

div#dynamic_logo img[src="http://static.plurk.com/static/creatures/big/8.png"] {
    padding-left: 125px;
    height: 200px;
    width: 0px;
    background: url(http://jeffdsummers.com/images/plurk/goofy.png) no-repeat scroll left top;
}

div#logo img[src="http://static.plurk.com/static/creatures/big/8.png"] {
    height: 200px;
    width: 0px;
    padding-left: 125px;
    background: url(http://jeffdsummers.com/images/plurk/goofy.png) no-repeat scroll left top;
}

div#dynamic_logo img[src="http://static.plurk.com/static/logo.png"], div#logo img[src="http://static.plurk.com/static/logo.png"] {
    opacity:0;filter:alpha(opacity=0);zoom:1
}
/* End Plurk Creature Removal */

For the more curious, you might be wondering what this code actually does.  Let's break it down a small piece at a time.

div#dynamic_logo img {
    background-position: left top;
    background-repeat: no-repeat;
    height: 0px;
    width: 0px;
    position: absolute;
    overflow: hidden;
    left: 65px;
}

The div#dynamic_logo img tag identifies the image within the dynamic_logo container inside the div.  This is basically both images for the Plurk creature on the main timeline.  There is the creature itself and there is also the Plurk text (which is actually a graphic) that appears to the left of the creature.  We are setting specifics for both images with this one statement.  Because we are working with images directly and not background images it gets a little funky.  The first two statements: background-position and background-repeat tell the CSS how to deal with our new images meaning position them in the top left-hand corder and don't repeat them.  The next two statements (height: 0px; and width: 0px;) are critical.  These tell the CSS to basically make the old graphic invisible by setting the size of the old graphics to no pixels.  Position: absolute; tells the system to place the graphic exactly where we tell it.  Overflow: hidden; will tell the CSS to hide any content that cannot be shown in the width and height.  Left: 65px; will place the creature in the appropriate spot.  This can be modified to move it around to fit your specific timeline background.

There are actually two places where the Plurk creature appears.  The div#dynamic_logo is the creature on the main timeline.  The second instance of the Plurk creature appears on the Perma-link for the individual Plurk message.  The next set of code will focus on the Perma-link page.

div#logo {
    border-bottom: none;
}

div#logo img {
    background-position: left top;
    background-repeat: no-repeat;
    overflow: hidden;
    height: 0px;
    width: 0px;
}

The first statement will remove the border that appears under the logo heading.  Without this statement your new character graphic will have a 1 pixel line under it.  The second set of code is very similar to that we used for the div#dynamic_logo above.  With this set of code we are again setting the background position, telling the CSS not to repeat our graphic, hiding the overflow content, and setting the height and width to zero.  You'll notice that we did not specify absolute position nor are we setting the left.  These are not needed since the Plurk creature on the Perma-link page will be placed correctly on this page without modification.

This next part is where we are going to modify the creature graphic specifically.  We'll start with the Plurk creature on the main timeline.

div#dynamic_logo img[src="http://static.plurk.com/static/creatures/big/8.png"] {
    padding-left: 125px;
    height: 200px;
    width: 0px;
    background: url(http://jeffdsummers.com/images/plurk/goofy.png) no-repeat scroll left top;
}

With the statement we are specifically describing the creature graphic.  In my case it is 8.png.  This is the horny Stitch guy. If you have a different creature you will need to modify this file name to associate the correct file name.  For your convenience I'll list the creatures and their associated file names.

1. Boner the Headless Wonder Dog - 1.png
2. Jabba the Plurk - 2.png
   
3. My Little Fly Kitty - 3.png
   
4. Eye Force One - 4.png
5. Blinky the Nuclear Fish - 5.png
   
6. Skrott the 2-Legged Dust Ball - 6.png
   
7. The Last Temptation of Plurk - 7.png
   
8. Horny Stitch - 8.png
   
9. Chet Elevator Eyed Slug - 9.png
   
10. SquidBob Eliptical Pants - 10.png
    
11. Karma Chameleon - 11.png
    
12. Boffo the Flaming Ghost Bunny - 12.png
    

The padding-left: 125px; will move the existing graphic beyond the width of the display window we set up essentially sliding it to the left and hiding it under the covers.  The height: 200px; statement sets the visible window to the height of the new image we will be using and the width is set to 0px to hide the old image.  The background: url(http://jeffdsummers.com/images/plurk/goofy.png) no-repeat scroll left top; statement tells the system where to find the new graphic you want to use as your replacement creature.  You will need to change the URL to tell the system where to find the graphic.  The qualifiers behind the URL tells the CSS not to repeat the graphic, to scroll it with the screen, and to place it in the top left hand corner.

The next set of code does exactly the same thing as the previous code but works on the creature image on the Perma-link page for a Plurk message.

div#logo img[src="http://static.plurk.com/static/creatures/big/8.png"] {
    height: 200px;
    width: 0px;
    padding-left: 125px;
    background: url(http://jeffdsummers.com/images/plurk/goofy.png) no-repeat scroll left top;
}

The above code could be combined with the code above if you wish to use the same graphic.  I kept it separate in case you wanted a different image for the other page.  This could give some variety to your pages.

The final set of code will hide the Plurk text image from both the main timeline page as well as the image on the Perma-link page.  The code for this is listed below.

div#dynamic_logo img[src="http://static.plurk.com/static/logo.png"], div#logo img[src="http://static.plurk.com/static/logo.png"] {
    opacity:0;filter:alpha(opacity=0);zoom:1
}

The first statement tells the CSS that you want to work on both the div#dynamic_logo image and also the div#logo image.  You could separate these out if you wanted to but since we are just going to hide it and not replace it with something new I chose to combine them.   The opacity:0;filter:alpha(opacity=0);zoom:1 statement basically says to make the opacity zero percent which basically makes it transparent.  You can change the zero to any number between 0-100 to make the image see-thru.

That is basically it.  By using this little code and pointing it to a graphic of your choice you can replace the standard Plurk creature with something of your own choosing.  Good luck and be sure to let everyone know you found this on Plurk Skins.

UPDATE: The Plurk character on the permalink page has changed.  Before it was embedded in an H1 heading.  This has been changed and the character is now in a DIV.  The code in this tutorial has been updated to reflect that.  If you have already implemented this tutorial code previously, you will need to search for "h1#logo" and replace with "div#logo".  No changes were necessary for replacing the Plurk character on the main timeline.

UPDATE 2: Updated this to include fully qualified URL to the graphic as Plurk modified their code to include "http://static.plurk.com" before the "/static/loading.gif" address.