Yesterday I talked about the new US Elections 2008 tab that appeared below the timeline. At the the time there were several people who complained that they didn't want to see this tab so I provided a quick CSS hack that would hide the tab from view using the opacity command. Never let it be said that the Plurk developers don't listen. This morning we awoke to changes that were implemented that will allow the user to hide this tab from view. The tab now has a close box associated with it. Unfortunately the tab and associated close box are a beastly gray color that doesn't match our theme at all. In this tutorial I'll walk you through theming this new tab to match the others on your timeline.
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.
/* Election Tab */
#filter_tab .election a {
background: #D55602 url(http://jeffdsummers.com/images/plurk/hd/eofftab.jpg) no-repeat scroll top left;
color: #000000;
}
#filter_tab .election #hide_election {
background: transparent url(http://jeffdsummers.com/images/plurk/hd/x.jpg) no-repeat scroll 0 -15px;
}
/* End Election Tab */
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.
/* Election Tab */
#filter_tab .election a {
background: #D55602 url(http://jeffdsummers.com/images/plurk/hd/eofftab.jpg) no-repeat scroll top left;
color: #000000;
}
This first section of code will deal with the tab itself. You'll first notice that the election tab is a more specific version of the #filter_tab tag which is used for all the other tabs. This is great because many of the changes we made previously to the tabs continue on to the election tab such as rounded corners and borders. The difference is that Plurk chose to give this particular tab its own background. In the case of the original they made the background gray and overlaid a GIF image of a voting machine. Since we have previously used a gradient for the background it makes things a little more complex. Basically I had to take the gradient used for the button background and add the voting machine graphic to it. I made this new background longer to take into consideration the longer text. Other than that it is basically the same.
The first instruction in this line of code is the background command we have used throughout these tutorials. The first parameter is background color. The #D55602 is an orange color that is used if the background image is not large enough to cover. The next parameter is background image and defines the location of the background image. You will need to change the value in the URL statement otherwise you will be using the gradient orange graphic I used in the example. The next parameter tells the system not to repeat the background image. The "scroll" parameter tells the browser to move the image with the background when the user uses the horizontal and vertical scroll bars. The final parameter is the background location. In this case we want the background image to start at the upper left corner of the tab.
The next line of code controls the text color of the tab. Here we are telling the system to make the text black (#000000) so that it matches the other tabs.
#filter_tab .election #hide_election {
background: transparent url(http://jeffdsummers.com/images/plurk/hd/x.jpg) no-repeat scroll 0 -15px;
}
/* End Election Tab */
This next section of code deals with the close box on the upper right of the tab which allows you to hide the tab. The default is an X surrounded by a box with a gray background.
You will notice that when you mouse over the box the X goes from a light gray to white giving the user feedback of their mouse action. This effect is accomplished by having a graphic that is actually made up of 2 images. One image is for the off-state and the other for the on-state or mouse over. The effect is executed by moving the background image when the user hovers over the item by moving the background image location. This is important information particularly with the first line of code in this section.
We are again using the standard "background" command to give this element it's distinct look and feel. The first parameter is the background color which we have set to transparent. The next parameter is background image location. You will need to change the value within the URL or you will be using the gradient X graphic I created for the example. The background image should be 12 pixels wide and 30 pixels high. The graphic is divided vertically into 2 images 12px X 15px. The top image is the on-state and the bottom image is the off-state. After the background image comes the background repeat parameter. Here we are telling the system that we do not want to repeat the background. The next parameter tells the system to scroll the background image with the screen as the user scrolls. The final parameter is background position. Here you will notice that we used the value "0 -15px". This is telling the system that we want to set the background image on the left side of the element but that we want it offset or moved up 15 pixels. This will set the image to the off-state by default.
There is another element which we are not changing that tells the system to move the background image down 15 pixels during a mouse over basically changing the image from off to on. It's a great trick that makes coding much easier.
Well that's about all there is to theming the new election tab and its corresponding close button. After this tutorial you will have a customized election tab that fits in with the rest of your theme. Hopefully you will find this useful. Good luck and be sure to let everyone know you found this on Plurk Skins.
Leave a comment