For some inexplicable reason I have become obsessed with the loading graphic that shows Blinky the Nuclear fish. Recently I posted an entry describing how to replace this graphic on your main time line. I wrongfully assumed this fix would replace all instances of this graphic but that is not the case. The loading image shows up on two additional places within Plurk. It shows within the Plurk response box and within the window when you click Edit Profile. I had not really noticed these two probably because Plurk was going so quickly that there was not time to display the image. In the past few days the system has been running slowly allowing the images to sit on the screen longer. This was especially the case with the Plurk response window. This graphic has been hanging on long enough to pull up the editor and find exactly what CSS element is controlling the graphic. Once that was identified it became quite easy to create a CSS rule that would allow you to replace it with a unique graphic of your own.
As always the first thing we'll do is provide the entire code snippet so that you can cut and paste it into your profile. We'll follow that with a breakdown of what each piece of code does to help you better understand why this works.
/* Loading Fish Image in Plurk Response */
.list img[src="http://static.plurk.com/static/indicator.gif"] {
background-position: left top;
background-repeat: no-repeat;
overflow: hidden;
height: 0px;
width: 0px;
}
.list img[src="http://static.plurk.com/static/indicator.gif"] {
height: 50px;
padding-left: 125px;
background: url(http://jeffdsummers.com/images/plurk/umpireloading.gif) no-repeat scroll left top;
}
/* End Loading Fish Image in Plurk Response */
The changes are very similar to those we used to Replace the Plurk Character. We'll break down the code piece by piece to see what it does.
.list img[src="http://static.plurk.com/static/indicator.gif"] {
background-position: left top;
background-repeat: no-repeat;
overflow: hidden;
height: 0px;
width: 0px;
}
The first line tells the system that we want to change the behavior just on the "http://static.plurk.com/static/indicator.gif" image that occurs in the .list container. It is important that we have that distinction. If you chose to leave off the source contained within the img statement the result would be to hide all graphics which would include emoticons, GIF, JPG, or any other image in the Plurk response box.
The statements within this section are basically hiding the existing Blinky the Nuclear Fish graphic. The background-position statement tells the system to place our new image in the top left corner of the current location of the image. The background-repeat statement tells the system that we do not want to see the new image more than once in the background. The overflow:hidden statement is extremely important. This is what actually hides the previous graphic as what we are doing is sliding it out of view and telling the system to keep it from view. The height and width define the parameters of the image box that we are creating anything outside of these parameters are hidden with the overflow statement above.
.list img[src="http://static.plurk.com/static/indicator.gif"] {
height: 50px;
padding-left: 125px;
background: url(http://jeffdsummers.com/images/plurk/umpireloading.gif) no-repeat scroll left top;
}
The next section of code is the new image we will be using. The first statement defines the exact image we are modifying. In this case it is the loading indicator image that is within the list container. The height parameter is the height of the new image you will be using as a replacement. The padding-left statement tells the system to take the existing image and move it basically sliding it out of view since we listed the width as 0 pixels in the code section above. The background statement is the actual new image you want to use in place of the Blinky the Nuclear Fish. You will need to change the file location contained within the URL statement to one of your own liking. I used an animated GIF but you can use any kind of graphic file that you want. The other parameters within the background statement tell the system not to repeat the image, have it scroll with the screen and place it at the top left-hand corner of the image container.
That's basically all there is to it. With this code you should now see a new custom graphic in place of the standard loading image in the Plurk response box. Good luck and be sure to let everyone know you found this on Plurk Skins.
Note: 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.
Leave a comment