While I was writing the tutorials on the Dashboard Buttons I noticed that Plurk had created a new box below the main input field to select Private Plurks, define the language of the Plurk, and allow the user to set options on the message. This used to be just a text link but now has the appearance of being a button. They added an icon of a padlock to the left side. Unfortunately the orange background color they used clashes with just about every known color on the planet. It was clear that something needed to be done with that and quickly so I created this short tutorial that will make this area more aesthetically pleasing.
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.
/* Private Plurks, languages & options */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.
#more_options_link {
background: #ff6600 url(/static/timeline/private-lock.png) no-repeat scroll 4px 3px;
border-color: #FF9955 #A14000 #A14000 #FF9955;
-moz-border-radius: 4px 4px 4px 4px;
-khtml-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
/* End Private Plurks, languages & options */
The first line of code is the now familiar background command. This is the same command as we have used in the past. 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 the bright orange that we have used throughout our theme. 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 the Plurk image of the padlock that was used in the default. If you wanted to add your own image just replace the value in the URL section of the background command. 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 4px,3px basically putting it 4 pixels from the left edge and 3 pixels from the top.
The next command will define the border colors on this box. In our case we are using a light orange color on the top and left sides of the box and a darker orange on the bottom and right sides. This gives the box a three-dimensional look that meshes well with the other theme elements we have been using.
The final four commands round the corners of this new box giving it a similar look and feel to the other buttons we have created on the site. These are the same border rounding techniques we have used in the past. These are CSS3 commands so they only work on CSS3 compliant browsers. At this point that includes Safari and Firefox but does not include Internet Explorer. In IE you will still see the square corners.
Well that's about all there is to theming the new Private Plurks box that appears below the input field and above dashboard. After this tutorial you will have a customized button for your Private Plurks and options 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