In part 4 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 4 of this series and will focus on the Share your plurk page area. Part 1 in this series is titled Create Dashboard Buttons for Twitter Contacts, Widget, Mobile, Part 2 of this series is titled Create Dashboard Button for Invite Friends and Part 3 of this series is titled Create Dashboard Buttons for Show All Friends, Show All Fans.
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.
>/* Share Plurk Button */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.
#sharePlurk {
background: transparent url(http://jeffdsummers.com/images/plurk/hd/shareplurk.png) no-repeat scroll top left;
border-style: none none none none;
border-width: 0px 0px 0px 0px;
height: 66px;
margin-left: -2px;
margin-right: -10px;
}
#sharePlurk div {
border-style: none none none none;
border-width: 0px 0px 0px 0px;
padding: 0px 0px;
}
#sharePlurk span {
background: transparent none no-repeat scroll left bottom;
}
#sharePlurk #invite_url {
margin-left: -11px !important;
}
#sharePlurk p {
margin: 4px 35px 0;
}
.cmp_wj {
height: 21px;
}
/* End Share Plurk Button */
The Share Plurk Page consists of several elements. This was done partly so the development team could use multiple background colors and images. As a result you could do some serious changes but we will limit our changes to making a button consistent with the others we have done in this series.
#sharePlurk {The overall element for managing the Share Plurk Page is #sharePlurk. It is the overall container with additional containers within it. It is at this level that we are going to begin our theme changes.
background: transparent url(http://jeffdsummers.com/images/plurk/hd/shareplurk.png) no-repeat scroll top left;
border-style: none none none none;
border-width: 0px 0px 0px 0px;
height: 66px;
margin-left: -2px;
margin-right: -10px;
}
The first line of code is the standard background command we have been using.
The background command has several parameters which I'll describe individually. 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 brown 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 default Share Plurk Page uses different sizes and styles of borders to give the impression of being 3-dimensional. Since we have already accounted for this through the graphic itself we will be turning these off. This is accomplished with the border-style and the border-width commands. Using the border-style we set all four sides of the box to none making the border line type be non-existent. With the border-width we set each of the four sides to zero pixels again making the border disappear from view.
The height command gives us the proper vertical height for our background image. In this case we are setting it to be 66 pixels high which is enough to show the button and the reflection.
The final two lines of code set the margins for this button. The margin-left command moves the box to the left 2 pixels to better center it within the Fans box. The margin-right moves the right edge in 10 pixels to keep it within the confines of the Fans section of the dashboard.
#sharePlurk div {Within the #sharePlurk element is a DIV. In the default section this is used to provide a container for another layer of background and provided a way for the Plurk developers to have what looks like leather stitching. This isn't really pertinent to our needs so basically we are going to be turning things off at this level.
border-style: none none none none;
border-width: 0px 0px 0px 0px;
padding: 0px 0px;
}
The first two lines of code are setting the border style to blank and the width of the border to zero pixels so that it won't show. The final line of code sets the padding within the box to zero pixels on all sides both horizontally and vertically.
#sharePlurk span {Within the div is a span where the text "Share your plurk page:" appears. We will still use the text but we need to eliminate the background image that was being use. In the default this is the layer that included the icon of the boy and girl. Since we have incorporated that into the overall background image they are not needed here.
background: transparent none no-repeat scroll left bottom;
}
To eliminate the background image we will use the background command. With the parameters we are telling the system to use a transparent background color, no background image, not to repeat the image, scroll it horizontally and vertically and place it in the bottom left corner of the container.
#sharePlurk #invite_url {This section of code deals with the input box that contains the URL to your Share your plurk page. The default uses the entire width of the Fans section on the Dashboard. That puts the box too far to the left of our button. Using the margin-left command we moved the input box 11 pixels to the left centering it in the button.
margin-left: -11px !important;
}
#sharePlurk p {The text within the Share Plurk section now includes a paragraph designation as of October 28 when the Plurk developers updated the CSS. As such we need to modify the margins slightly in order for the text to fit properly on our button. We are doing this with the margin command. We are telling the system to add a 4 pixel margin to the top, 35 pixels to the right, and zero pixels to the bottom. This will basically center the text within the upper half of the button.
margin: 4px 35px 0;
}
.cmp_wj {A new tag was defined with the October 28 CSS upgrade. This tag is used to add an icon to this section. Since the icon is built into the graphic of our button this is unnecessary. The icon was set to empty in Part 1 of this tutorial. Here we are adjusting the height of that box so that the input field fits properly within our button. We are doing this with the height command by defining the box height to 21 pixels thereby centering the input box in the lower half of the button.
height: 21px;
}
Well that's about all there is to theming the Share Your Plurk page that appears in the Fans section of the dashboard. After this tutorial you will have a customized 3-D button for your Share Your Plurk Page 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