As users begin to theme their Plurk Profile they typically start with modifying the background image or color and slowly migrate to other aspects of the page. Before long they have a fairly unique representation of their personality or mood. They take a step back and admire their handiwork and immediately want to share it with the world. Before doing that they'll usually run through a quick check to make sure everything is just right. As new Plurk messages arrive they suddenly notice that there is a standard image that appears on the middle of their time line that says "Loading...". The excitement of a custom profile fades as they realize that this graphic is the same as ever other user on Plurk. Part of the goal of a theme is to make their profile unique so obviously having this standard image just will not do. Follow along with this post and before you know it you'll have an image that is unique just to you.
The first thing we'll do is provide you with all the code necessary to make this happen. We'll follow that up with an explanation of what each section does.
/* Blue Loading Fish -> Custom Image */We'll now follow up by discussing each line of code so that you will understand what each section does and why it is in the profile. As I always do, I strongly recommend documenting the code by making notes for yourself so that you can remember why you added the code. This is extremely important if you ever need to go back to your profile and troubleshoot or modify it.
background: transparent url(http://jeffdsummers.com/images/plurk/customloading.png) no-repeat scroll 0 0;
/* End Blue Loading Fish */
This code has changed dramatically from when this tutorial was first written. The reason for this is that on October 28, 2008 the Plurk Development team made substantial changes to the CSS of Plurk which broke the existing code used for this tutorial. It has now been updated to include the new code with a description of with it does.
With the changes to CSS, Plurk introduced a new tag called .cmp_loading. Where the old loading graphic was an embedded image, the new element uses a background image which is substantially easier to modify.
The first line will set the background for this graphic. We will be using the background command as we have in other tutorials on Plurk Skins. The background command has several parameters which we will discuss. The first parameter is for background color. In this case we are setting the background color to transparent so that only the image displays on our page. The next parameter is the background image. With the value of the URL we tell the system where to find the background image. In this case we are using a baseball graphic. You will want to change this to whatever graphic you want to use for your theme. The next parameter tells the system not to repeat the image making it appear only once. The scroll parameter tells the system to allow the background image to move with the screen when the user horizontally and vertically scrolls the window. The final parameter tells the system to place the image at coordinates 0,0 basically putting it in the top left.
The next line of code will set the width of the graphic. The graphic I am using is 200 pixels wide so that is what I used for the element. The final line of code sets the vertical height of the element. Since my graphic is 130 pixels high I set that for the height so that it shows up without being cut off.
That's really all there is to it. With a custom graphic and these few lines of CSS code you'll never have to see the loading fish graphic again. Instead you'll see your own personal message whenever the time line is loading. Good luck and be sure to let everyone know you found this on Plurk Skins.