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 four 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 1 of this series and will focus on the rotating buttons for the widget, Twitter contacts, and the Plurk Mobile link.
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 Mobile, Twitter, Widget */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#twitter-gfx {
background: transparent url(http://jeffdsummers.com/images/plurk/hd/twitter-gfx.png) no-repeat scroll 0 0 !important;
height: 44px;
color: #000000 !important;
margin-left: auto;
margin-right: auto;
}
a#widget-gfx {
background: transparent url(http://jeffdsummers.com/images/plurk/hd/widget-gfx.png) no-repeat scroll 0 0 !important;
height: 44px;
margin-left: auto;
margin-right: auto;
}
a#mobile-gfx {
background: transparent url(http://jeffdsummers.com/images/plurk/hd/mobile-gfx.png) no-repeat scroll 0 0 !important;
height: 44px;
margin-left: auto;
margin-right: auto;
}
a#twitter-gfx, a#widget-gfx, a#mobile-gfx {
border: 0px none #000000;
}
.cmp_invite, .cmp_widget-gfx, .cmp_twitter-gfx, .cmp_mobile-gfx {
background: transparent none no-repeat scroll 0 0;
height: 0px;
width: 0px;
}
/* End Fade Info Boxes in Dashboard for Mobile, Twitter, Widget */
a#twitter-gfx {The three code segments are going to look very similar with the only changes being the background images that we will be using for each of the buttons. Let's get started with a description of each line of code. We will begin working on the Twitter contacts button which is controlled by the a#twitter-gfx element.
background: transparent url(http://jeffdsummers.com/images/plurk/hd/twitter-gfx.png) no-repeat scroll 0 0 !important;
height: 44px;
color: #000000 !important;
margin-left: auto;
margin-right: auto;
}
The first line will set the background for this button. We will be using the background command as we have in other tutorials on Plurk Skins. The background command has several parameters which we will discuss. 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 blue button 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,0 basically putting it in the top left. We end the background command with !important which tells the system to override any other background commands they had for this element. The next line of code sets the height to 44 pixels high to give the button enough vertical space to show on the page. Without this line the system would cut off the background image making it look chopped.
The color command tells the system to make the text color black for the Twitter contact button. We again invoke the !important attribute to make sure the element uses this text color.
The final two commands manage the left and right margins of where the button will be placed within the Fans section. Setting the left and right margin to auto will have the effect of resetting the margins to let the system decide how they should be placed in the parent container.
a#widget-gfx {The next section of code will modify the Embed Plurk Widget button which is controlled by the a#widget-gfx element.
background: transparent url(http://jeffdsummers.com/images/plurk/hd/widget-gfx.png) no-repeat scroll 0 0 !important;
height: 44px;
margin-left: auto;
margin-right: auto;
}
The first line will set the background for this button. As I described above, the background command has several parameters which we will discuss. 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 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,0 basically putting it in the top left. We end the background command with !important which tells the system to override any other background commands they had for this element.
The next line of code sets the height to 44 pixels high to give the button enough vertical space to show on the page. Without this line the system would cut off the background image making it look chopped.
The final two commands manage the left and right margins of where the button will be placed within the Fans section. Setting the left and right margin to auto will have the effect of resetting the margins to let the system decide how they should be placed in the parent container.
a#mobile-gfx {The final section of code will modify the Mobile Plurk button which is controlled by the a#mobile-gfx element.
background: transparent url(http://jeffdsummers.com/images/plurk/hd/mobile-gfx.png) no-repeat scroll 0 0 !important;
height: 44px;
margin-left: auto;
margin-right: auto;
}
The first line will set the background for this button. Again I reiterate that the background command has several parameters which we will discuss. 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 steel blue button 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,0 basically putting it in the top left. We end the background command with !important which tells the system to override any other background commands they had for this element. The next line of code sets the height to 44 pixels high to give the button enough vertical space to show on the page. Without this line the system would cut off the background image making it look chopped.
The final two commands manage the left and right margins of where the button will be placed within the Fans section. Setting the left and right margin to auto will have the effect of resetting the margins to let the system decide how they should be placed in the parent container.
a#twitter-gfx, a#widget-gfx, a#mobile-gfx {Changes were made in the Plurk CSS on October 28 and the team added a 1 pixel border around each of the three rotating boxes. The above code will eliminate that border. This is done through the border command which has 3 parameters. The first parameter is how thick the border is. In our example we set it to zero pixels making it disappear. The second parameter is the border type. Rather than a solid line we set it to none making it invisible. The final parameter is border color which we set to black.
border: 0px none #000000;
}
.cmp_invite, .cmp_widget-gfx, .cmp_twitter-gfx, .cmp_mobile-gfx {Another change that was made with the Plurk CSS upgrade on October 28 was that four new tags were created to put icons on the boxes of the Invite Frields, Embed Widget, Twitter Contacts, and Mobile link boxes. With this section of code we are going to remove these icons since we have incorporated them into the buttons. We will use three commands to do this which is of course overkill but I don't want them to appear.
background: transparent none no-repeat scroll 0 0;
height: 0px;
width: 0px;
}
The first command we use is the standard background command we have used above. 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 which we are setting to none. 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,0 basically putting it in the top left.
The next line of code sets the height of this container. We set it to zero pixels making it vertically invisible. The final line of code sets the width for this container. We again set it to zero pixels making it horizontally invisible.
Well that's about all there is to theming the rotating buttons that appear in the Fans section of the dashboard. After this tutorial you will have a customized 3-D button for your Twitter contacts, Embed widget, and Mobile Plurk 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