The Plurk development team is busy working on several new features and functions. They are also doing a little housecleaning and preparing the user database to become more useful. As such they needed to initiate an email validation routine for users. This will impact new users as they sign up but was rolled out to everyone in order to verify that the email message on record was correct and that users are receiving emails from Plurk. They therefore had the system request that each user validate their email address with the system. As you logged in you were notified with a bright reddish pink box in the title bar asking to validate your email. Well I couldn't just let that pass up since it clashed with the other messages on the system so I themed it. At first I thought why bother but then decided to do this in the off chance that Plurk will use the same CSS tag for other future messages then this will set them up to look more aesthetically pleasing and match the overall theme.
As is always the case we'll start with giving you all of the code so that you can cut and paste it into your profile then follow up with a detailed description of what each section does.
/* Validate Your Email */
#validate_email {
background: #ff6600 none repeat scroll 0 0;
color: #000000;
padding: 1px 6px 2px 6px;
-moz-border-radius: 4px 4px 0px 0px;
-khtml-border-radius: 4px 4px 0px 0px;
-webkit-border-bottom-left-radius: 4px;
-webkit-border-bottom-right-radius: 4px;
border-radius: 4px 4px 0px 0px;
}
a#validate_email {
text-decoration: none;
}
a#validate_email:hover {
color: #ffffff;
text-decoration: underline;
}
/* End Validate Your Email */
As is always the case I strongly suggest that you document your code so that you can remember what each section was used for in case you want to make changes later.
#validate_email {
background: #ff6600 none repeat scroll 0 0;
color: #000000;
padding: 1px 6px 2px 6px;
-moz-border-radius: 4px 4px 0px 0px;
-khtml-border-radius: 4px 4px 0px 0px;
-webkit-border-bottom-left-radius: 4px;
-webkit-border-bottom-right-radius: 4px;
border-radius: 4px 4px 0px 0px;
}
The first set of code will theme the overall message box for the validate email string as defined by the "#validate_email" object. The first statement will define the background of the validate email box. Within the background element are several parameters. The first parameter sets the background color to the same orange as we use throughout the theme. The next parameter sets the URL of the background image. In this case we set it to "none" to use only the background color. The remaining parameters are used for the background image and are set to repeat the image horizontally and vertically, scroll with the page and set the background position. Since we are not using an image these have no bearing.
The next statement sets the text color to black. This is followed by padding to give some white space around the message. Padding is for top, right, bottom, and left respectively. We set it for 1 pixel at the top, 6 pixels on the right side, 2 pixels at the bottom, and 6 pixels on the left side. Feel free to adjust this to make the spacing look right for your theme. The final four statements are CSS3 statements that will round the corners of the box. In our case we are rounding just two of the corners (top left and top right) and leaving the other two straight which gives the box a tabbed look.
a#validate_email {
text-decoration: none;
}
This next section of code deals with the link within the "validate_email" box. It sets the text to plain meaning it will not have an underline associated with it on the screen.
a#validate_email:hover {
color: #ffffff;
text-decoration: underline;
}
The final section of code tells the system how to handle the link when the mouse is pointed at it. In this case we are changing the color of the text to white using the "color" statement. We then add an underline to the text to give the user feedback that they are pointing at a link.
That is all there is to it. The code is fairly straight forward. It might seem excessive to theme this element (and it is) but if down the road Plurk uses the same CSS element for other important messages you will have set yourself up to automatically have your profile handle that without any additional coding. If nothing else it is a great exercise for learning how to theme an element that you can use on other pieces. Good luck and be sure to let everyone know you found this on Plurk Skins.
Leave a comment