Yesterday I described how to replace the Loading image in the Plurk response box. Previously I documented replacing the Loading image on the main Plurk timeline. In those two discussions I alluded to the fact that there was a third place where the loading image was used. This third area is in the Edit Profile page. The Loading image is displayed as the system retrieves your data from the database. In many cases this image does not even have time to load before the page is refreshed with your profile data. During times of slow response or if you lose network connectivity the image stays up much longer. After several attempts to capture the CSS element identifiers I was finally able to find it. This then is the third and last installment for replacing the Loading image.
Before we get started I need to provide a disclaimer. The code below is correct and accurate. Unfortunately the Profile Settings page does not appear to read the customer CSS stylesheet at the present time. I have sent a request to the Plurk development team asking if they would please add an include statement for the customer stylesheet for the Profile Settings pages. Hopefully they will do so and when that happens the following code will replace the graphic on that page.
As always is the case I will start by providing you all the code necessary to complete this change. This will be followed by a more detailed description of what the code does.
/* Loading Fish Image in the Profile Setting Page */
div#loading img {
background-position: left top;
background-repeat: no-repeat;
overflow: hidden;
height: 0px;
width: 0px;
}
div#loading 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 the Profile Setting Page */
The changes are nearly identical to the ones we used for replacing the loading graphic in the response box. We'll break down the code piece by piece and explain it.
div#loading img {
background-position: left top;
background-repeat: no-repeat;
overflow: hidden;
height: 0px;
width: 0px;
}
The first line describes the context for the attribute we are theming. In this case we are only interested in modifying the style for images within the "loading" container that is within a DIV. This makes sure that we are only modifying that instance rather than all images. Remember that the more specific you make the rule the fewer surprises you'll have.
The statements within this section are tasked with 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. Like in the other instances of image replacement, the overflow:hidden statement is extremely important. This statement tells the system to hide the previous graphic by sliding it out of view. The height and width define the size boundaries of the image box that we are creating anything outside of these parameters is hidden.
div#loading 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;
}
This second section of code is for dealing with the new unique image we'll 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 loading container within the DIV statement. 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. You want to give the padding-left statement a size at least as large as the new image you are using otherwise some of the old image will be on top of the new background image you'll be using. 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. You can use any kind of graphic file that you want and are not required to use just GIF. The image file can be JPG, PNG, animated GIF, or really any other image format that your browser supports. 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 will be able to have a custom image file within the Profile Setting page. Remember this is not yet implemented by the Plurk development team (and may not be). If you want to be proactive and have the code ready this should do it. 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