Jeff Summers

  shares  Creating a Custom Update Box

As we always do we'll begin by providing all of the code to allow you to copy and paste it directly into your profile to begin using the new functionality immediately.

/* Update box with new plurks and responses */
#updater {
    color: #ffffff;
    background: transparent url(http://jeffdsummers.com/images/plurk/hd/orangetrans.png) repeat scroll top left;
    border-left: 1px solid #FF6600;
    border-top: 1px solid #FF6600;
    border-bottom: 2px solid #af4600;
    border-right: 2px solid #af4600;
    -moz-border-radius: 6px 6px 6px 6px;
    -khtml-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 8px;
    font-size: 90%;
}

#updater a:link, #updater b {
    color: #000000;
}
/* End update box with new plurks and responses */

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.

#updater {
    color: #ffffff;
    background: transparent url(http://jeffdsummers.com/images/plurk/hd/orangetrans.png) repeat scroll top left;
    border-left: 1px solid #FF6600;
    border-top: 1px solid #FF6600;
    border-bottom: 2px solid #af4600;
    border-right: 2px solid #af4600;
    -moz-border-radius: 6px 6px 6px 6px;
    -khtml-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 8px;
    font-size: 90%;
}

The HTML element that is responsible for displaying the update box is appropriately named "#updater". There are several commands within this code section but most of them we have used previously so it looks a lot more complex than it really is. The first statement is the "color" command that sets the text color in the updater to be white. White is represented by the color code of #ffffff. The next statement is our standard background statement. The first parameter tells the system to use a transparent background color if the graphic is not large enough to cover the entire area. The next parameter is the file location for our graphic. You will need to change the value in the URL statement otherwise you will get the orange translucent graphic I am using.

The "repeat" parameter tells the system to repeat the graphic horizontally and vertically. The "scroll" parameter tells the system to allow the background image to flow with the page when it is moved horizontally or vertically. The final two parameters tell the system to start the background image in the upper left corner of the element.

The next four statements are basically identical. They are putting a border around the box. We've separated each side out to allow us to change the size of the border and its color. For the top and the left sides we are creating a 1 pixel solid border in the same bright orange that we are using throughout the theme. The right and bottom sides we are adding a 2 pixel solid border in a darker orange color. By varying the width and color of the box we give the illusion of it being three dimensional.

The next four statements manage the rounding of the corners. The first statement is used by browsers that are built on the Mozilla Gecko engine such as Firefox. The "-moz-border-radius" statement tells the browser to round the top left and top right corners as square (a curve of 0 pixels) and the bottom left and bottom right corners to round with a 4 pixel radius curve. If you want a more rounded corner just increase the values from 4 to some larger number. If you want more squared corners reduce the values from 4 to a lower number. The "-khtml-border-radius" statement was an early implementation of proposed CSS3 and are used in nightly builds of Safari but not necessarily within the released version. I included it in case there is a user that is testing a build of Safari, I don't want their user experience to break. Safari is built upon the Webkit rendering engine as is the new Google Chrome browser. Both of these browsers will utilize the "-webkit-border-radius" statements. Unfortunately Webkit does not allow you to modify each corner with a single statement such as Mozilla. Instead you have to call out each individual corner. You'll notice that we have a separate statement for the bottom left and the bottom right corners. The final statement is what is the proposed CSS3 standard. Ultimately the Mozilla and Webkit specific versions of this statement will go away and be replaced with "border-radius" This is here for futureproofing when the standard is ratified.

The final statement in this section deals with the font size. I have made the text in the "updater" box slightly smaller than the other text on the screen to make it visually less important than the message text. This is a subtle effect but does make it move into the background more on the screen.

#updater a:link, #updater b {
    color: #000000;
}

The first section of code dealt with the text in the "updater" box but not with the links to view the new messages or responses. This code will modify the links themselves. It is a single line of code that changes the text color. Here we are assigning color code #000000 which is black.

That's really all there is to modifying the update box in the lower left of the timeline. If you have been following along with the previous tutorials you will notice some other changes to the page. I have changed the timeline background to be photo that was a little less busy. I have also incorporated the tutorials for Replacing the Plurk Creature and New Interesting Plurkers since those changes were previously documented. In our case the Plurk Creature was replaced with the Harley-Davidson logo and the New Interesting Plurkers icon was replaced with a black new bubble. Hopefully you have found this tutorial useful and will be on your way to modifying your own theme. Good luck and be sure to let everyone know you found this on Plurk Skins.