This is a continuation to the miscellaneous aspects of your theme. These are small details that are often overlooked but have the ability to differentiate your profile from the others that are out there. If you happen to look at a user's profile when you are not logged in you will notice a bright pink bar at the top right side of the screen in the title bar. It tells the user to either login or sign up for the Plurk service. While I am ok with the color pink overall, it doesn't really fit in well with the orange and black we are using for our current theme. This code will change the background to a translucent black and set the text to a color compatible with that background.
/* Top Login/Validate Email */
#top_login a#sign_up {
background: transparent url(http://jeffdsummers.com/images/plurk/hd/blacktrans.png) repeat scroll top left;
color: #ff6600;
}
/* End Top Login/Validate Email */
As always I highly recommend that you comment your code so that you can remember what the block of code does if you need to go back and change it. Since this is just a single set of code we will go directly to the explanation of what each line does.
The element that controls the sign-up/log-on link at the top right hand side of the page is referred to as "#top_login a#sign_up". this basically tells the system only to modify this single HTML element. We are going to use the background command that we have used elsewhere in our tutorials. Background has several parameters we will be setting. The first parameter tells the system to use a transparent background color where the image does not cover. The next parameter is the location of the image. You will need to modify the address in the URL section otherwise you will get the translucent black image I am using. The repeat parameter tells the system to repeat the graphic horizontally and vertically covering the space. Scroll tells the system to allow the background graphic to move horizontally and vertically when the window is scrolled. Finally we tell the system to start the background in the top left corner of the container. The second statement defines the text color as the bright orange color we are using throughout the theme.
That's really all there is to changing the sign-up/login area in the top menu. Good luck and be sure to let everyone know you found this on Plurk Skins.
Leave a comment