In part 3 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 two 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 3 of this series and will focus on making buttons from the Show All Friends and Show All Fans text links. Part 1 in this series was titled Create Dashboard Buttons for Twitter Contacts, Widget, Mobile and Part 2 of this series is titled Create Dashboard Button for Invite Friends.
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 Show Friends Fans */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.
#show_all_friends {
padding-top: 8px;
padding-bottom: 22px;
padding-left: 9px;
padding-right: 0px;
text-align: center;
width: 198px;
background: transparent url(http://jeffdsummers.com/images/plurk/hd/showall-friends.png) no-repeat scroll top left;
font-family: Arial,Verdana !important;
font-weight: bold;
margin-left: auto;
margin-right: auto;
}
#show_all_friends a:hover {
color: #000000;
text-decoration: underline;
}
/* End Fade Info Boxes in Dashboard for Show Friends Fans */
#show_all_friends {The #show_all_friends element is used for both the "show all friends" and "show all fans" text
padding-top: 8px;
padding-bottom: 22px;
padding-left: 9px;
padding-right: 0px;
text-align: center;
width: 198px;
background: transparent url(http://jeffdsummers.com/images/plurk/hd/showall-friends.png) no-repeat scroll top left;
font-family: Arial,Verdana !important;
font-weight: bold;
margin-left: auto;
margin-right: auto;
}
links meaning that whatever theme commands you use will pertain to both of these links. This first section of code is responsible for the overall theming of this text link or in our case the creation of our button. We'll describe each line of code and why it is included.The first four lines of code will be used to create white space around the text link so that we have the screen real estate necessary to show the button. The first line will add 8 pixels of space above the text link. The second line will add 22 pixels of space below the text link. You may be wondering why we didn't center the text. Giving the graphic we will be using, centering the text vertically made it hard to read so I moved it up to make it more legible. The next two lines of code add 9 pixels of space on the left side and zero pixels of space on the right. Again I did not center it because I wanted the text slightly off center to give room for the icon on the button image.
The text-align command tells the system how to manage the text within the box. In this case I have told it to center the text in the remaining space
after the padding has been added.The width command sets the size of the box to account for the button image we will be using. Here I am setting the width to be 198 pixels which is roughly the width of my button graphic.
The background command will add the necessary background to this box. This is the same background image we have used throughout the tutorials and includes several parameters which we will explain. The first parameter is background color which we are setting to be transparent meaning no color will display, just the background image. The background image is the next parameter and its location is described in the URL parenthesis. In this case I am using a red 3-D button with a reflection that fades into the background. The next parameter tells the system not to repeat the image, only show it one time. The scroll parameter tells the system to allow the background image to move when the user scrolls horizontally or vertically. The final parameter tells the system where to place the background image which in this case is the top left corner of the element.
The next two lines of code deal with the text on the button. The first tells the system to use the Arial or Verdana font typeface. We used the !important qualifier to make sure this command is executed regardless of whether the font face is defined elsewhere for this element.
The final two lines set the left and right margins for the element. We set the values to auto so that they are reset from any previous values and allows the system to dynamically define them.
#show_all_friends a:hover {This section of the code defines the behavior when the user hovers over either of the text links. In this case all we are doing is modifying the text leaving the background and the image untouched. The first line of code tells the system to make the text color black. The second line of code tells the system to underline the text when the user hovers over it. These two lines of code are used to give the user a visual cue when they mouse over the link.
color: #000000;
text-decoration: underline;
}
Well that's about all there is to theming the Show All Friends and Show All Fans links that appears in the Friends and Fans sections respectively of the dashboard. After this tutorial you will have a customized 3-D button for your Show All Friends link and Show All Fans 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