In part 2 of the series on modifying the buttons we are going to turn our focus back to the dashboard as we make some changes under the Friends and Fans segments. Plurk recently made some changes to the buttons included in these sections many of which don't work well with our theme. There are large buttons for Inviting friends to Plurk, a leather looking section containing the URL for sharing your Plurk link, and three rotating buttons for embedding your Plurk widget, finding friends on Twitter, and a link to the Plurk mobile page. There are also two text links for showing all of your friends and showing all of your fans. Through the next three tutorials we will be modifying all of these to provide a look and feel to these buttons that will add some style to your theme. These tutorials can be followed individually or done in series to get the full effect for all of these changes. This is part 2 of this series and will focus on the invite friends button under the Friends section. Part 1 in this series is titled Create Dashboard Buttons for Twitter Contacts, Widget, Mobile.
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.
/* Fade Info Boxes in Dashboard for Invite Friends */
a#dashboard-invite {
background: transparent url(http://jeffdsummers.com/images/plurk/hd/invite-friends.png) no-repeat scroll 0 8px;
height: 63px;
overflow: hidden;
color: transparent !important;
margin-left: auto;
margin-right: auto;
border: 0px none #000000;
}
a#dashboard-invite:hover {
background: transparent url(http://jeffdsummers.com/images/plurk/hd/invite-friends.png) no-repeat scroll 0 -58px;
height: 63px;
overflow: hidden;
color: transparent !important;
}
/* End Fade Info Boxes in Dashboard for Invite Friends */
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.
a#dashboard-invite {The first section of code will theme the default Invite Friends button under the Friends Section of the dashboard. This code will be executed when the page is loaded and remain in effect until the user hovers over the button. Most of the commands within this section have been used elsewhere in other tutorials so they should begin to look familiar to you. I'll try to explain what each line of code does so you have a context for the command.
background: transparent url(http://jeffdsummers.com/images/plurk/hd/invite-friends.png) no-repeat scroll 0 8px;
height: 63px;
overflow: hidden;
color: transparent !important;
margin-left: auto;
margin-right: auto;
border: 0px none #000000;
}
The first line of code is the background. This is the same command as we have used in the past and it is the code that will actually display the button image on the screen. The background command is made up of several parameters which we'll now explain. The first parameter is for background color. In this case we are setting the background color to transparent so that only the image displays on our page. The next parameter is the background image. With the value of the URL we tell the system where to find the background image. In this case we are using a 3-D green button similar to the original but with a reflection that fades to the background. The next parameter tells the system not to repeat the image making it appear only once. The scroll parameter tells the system to allow the background image to move with the screen when the user horizontally and vertically scrolls the window. The final parameter tells the system to place the image at coordinates 0,8px basically putting it on the left edge 8 pixels from the top.We set the vertical height of the button to be 63 pixels high with the height command. This gives the button enough space to show both the button itself and its reflection. A height less than 63 will begin to cut off the image at the bottom and any more than that will show the other button (which we'll describe later).
The overflow command tells the system what to do with any content that is larger than the size of our container. In this case we set it for hidden meaning that we don't want to show any content that doesn't fit within this screen area.
The color command tells the system that we want the text color to be transparent. This is needed because our button itself has the text embedded in it. I chose to include the text in the graphic because I wanted a subtle green drop shadow on the text which cannot be duplicated in CSS easily. We used the !important qualifier to make the system use this value over any other defined for this attribute in other places.
The margin commands reset the margin values for the left and right allowing the system to position the button within the Friends section of the Dashboard dynamically.
The final command attempts to fix something that Plurk just introduced. In the past week they added a border around this box. With this border command we are basically hiding that white border by setting it to zero pixels with no line type. Without this command it will default to a 1 pixel white solid border defeating the 3-D effect we were attempting to describe.
a#dashboard-invite:hover {This second code section defines the attributes of the Invite Friends button when the user
background: transparent url(http://jeffdsummers.com/images/plurk/hd/invite-friends.png) no-repeat scroll 0 -58px;
height: 63px;
overflow: hidden;
color: transparent !important;
}
hovers over the button. Here we are doing some image sleight of hand. The button image I am using (invite-friends.png) is actually two images stacked vertically. The top image is the default normal image while the bottom image is the hover image. We will call out which image to show using the background command.
The first line in this section is the background command and looks nearly identical to the one defined above for the normal image with one important exception. You'll see the same transparent background color and the same background image defined. You'll also notice that we continued the no-repeat and scroll parameters from the section above. The image location is different. The normal image we used 0 8px while here we are defined a location of 0 -58px. What this does is move the background image up 58 pixels. This has the effect of moving the normal image out of view and instead showing the hover image. I did this rather than using a separate image because it is much faster. The background image is already loaded and in the browser's cache so there is nothing to download when the user hovers over it making the change instantaneous.
The remainder of this code section is the same as the section above. We set the height to 63 pixels which is the size of the button with the reflection. We set the overflow to hidden to hide any content that does not fit within the box and set the text color to transparent so that the text does not show up on the screen. Using this technique we have given the user a visual queue when they hover over the button and still retained control over the way the text displays on the screen.
Well that's about all there is to theming the Invite Friends button that appears in the Friends section of the dashboard. After this tutorial you will have a customized 3-D button for your Invite Friends link 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