Jeff Summers

  shares  Custom Time of Day Tabs and Time Show

As always we will 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.

/* Evening, Night, Day, Morning */
.evening, .night, .day, .morning {
    background: transparent URL(http://jeffdsummers.com/images/plurk/hd/time-container.png) no-repeat scroll 0 0;
}

.evening, .night {
    background-position: -65px 0;
}

#time_show span {
    color: #000000;
}
/* End Evening, Night, Day, Morning */

We will now follow up by discussing each line of code so that you will understand what each section of code 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.

Before we get started let me explain a litle bit about how Plurk is creating this effect. They are using a graphic image called time-container.png that has several tabs in different colors. They set the image to be the background and position it accordingly to use the right colors depending on the default profile colors you chose. In order for our customization to work we will modify the image file and create our own custom time-container.png. With the custom file I modified the first two tabs within time-container.png to match the orange colors we are using for our template. Once I modified the tabs I saved the file as a PNG24 file to support the transparency. I then uploaded the new customized time-container.png. Once this was completed we can return to the CSS customization.

.evening, .night, .day, .morning {
    background: transparent URL(http://jeffdsummers.com/images/plurk/hd/time-container.png) no-repeat scroll 0 0;
}

The CSS elements that control the use of this image appearing above the bottom timeline are ".evening", ".night", ".day", and ".morning". Each of these represent a different part of the day. The tab with the sun is used for ".day", and ".morning" while the tab with the moon and stars is used for ".evening" and ".night". Our customization will use the background command. This again is very similar to the background changes we have made in other tutorials. The first parameter tells the system to set the background color to transparent. The second parameter tells the system where it can find our new custom graphic. You will need to change the URL value with your own image otherwise you will be using my orange tabs. The next parameter tells the system not to repeat the background image meaning we will have only one copy of it on the screen. The "scroll" parameter tells the system to allow the background to scroll with the window when the user invokes the horizontal or vertical scroll bars. The final two parameters position the background image.

.evening, .night {
    background-position: -65px 0;
}

This section of code is what allows the tab to change from the sun tab to the moon tab. Using the "background-position" command we are telling the system that if the message was created during the evening or night to move the background image 65 pixels to the left which essentially hides the day image and shows the moon image. This is an important code segment. If you don't add this section to your profile then you will always get the sun image regardless of what time of day it is. This is one of the most common problems that I see in people's customizations.

#time_show span {
    color: #000000;
}

The final section of code will change the text color that appears within the new customized tabs. Here I am changing the text to be black which shows up nicely against the orange background.

This tutorial is basically just modifying the time-container.png image and using it just like Plurk's normal behavior. There are of course several other things that you could do. For example, you could change the time-container.png file to have 4 custom tabs instead of 2. This way you could differentiate each part of the day. If you wanted to do that you would just create a separate code section for evening, night, day, and morning. Within that code you would just move the background image accordingly. For example, if you made your tabs 65 pixels wide and set the tabs to be day, night, morning, and evening you would set the background-position and give it an appropriate value. This code would look something like this:

.night {
    background-position: -65px 0;
}
.morning {
    background-position: -130px 0;
}
.evening {
    background-position: -195px 0;
}

This would differentiate each section of the day with a different tab. There really isn't anything that says that the image has to be a tab either. You could create any image that matches your theme. If you are doing a car theme you could have the tabs be cars. If your theme is flowers the tabs could be flowers. You could eliminate the image completely if you want and have just the text float. If that is your goal you could set the background as transparent and none in place of the URL and it disappears. My only recommendation is to try and keep the image to 65 pixels wide and 23 pixels high. You can change these dimensions if you want but it will take additional code to set the width and height of the images.

As you can see, you have a lot of options to create a look that is unique just to you. That's really all there is to it. Hopefully you found this useful. Good luck and be sure to let everyone know you found this on Plurk Skins.