Today we are going to turn our attention to the very top of the screen. There you will find a horizontal set of links that provide you access to your profile, your friends list, alerts, interesting plurkers, your account, and the ability to log off. By default these will display over the top of the background as text links. If you are using a background like our diamondplate these links can sometimes become lost. We will therefore make some CSS changes and see if we can get the top of the window to more closely match the rest of our theme.
As I always do I will start out by giving you all of the code so that you can cut and paste it into your profile and immediately begin using the full functionality.
/* Top Line with links */
#top_login {
background: #ff6600 url(http://jeffdsummers.com/images/plurk/hd/timeline.jpg) repeat-x scroll center left;
margin: 0px 0px 0px 0px;
padding-right: 10px;
height: 21px;
}
#timeline_holder {
margin-top: 0px;
}
/* End Top Line with links */
/* Page Title at Top of Screen */
#page_title {
color: #000000;
font-family: georgia, "palatino linotype", "times new roman", serif;
font-size: 130%;
font-weight: bold;
}
/* End Page Title at Top of Screen */
/* Links in Top Bar */
#top_bar a, #top_login a {
color: #ffffff;
}
/* End Links in Top Bar */
/* Underline on images in top bar */
#top_bar .on img {
border-bottom: 2px solid #000000;
}
/* Underline on images in top bar */
/* Text Hover Color Top Bar */
#top_login a:hover, #top_bar .on {
color: #000000;
}
/* End Text Hover Color Top Bar */
/* Edit Hover Background Color Top Bar */
#top_bar #edit_link:hover {
background: #853500 none repeat scroll 0 0;
color: #ff6600;
padding-bottom: 2px;
}
/* End Edit Hover Background Color Top Bar */
We'll next go through each section of code to explain what it does and why it should be in your profile. As always I strongly recommend documenting your code with notes and comments so that you can remember why you added these lines into your profile. This will definitely pay dividends in the long run when you have to modify the code.
#top_login {This first section of code will theme the overall background for the top menu bar. I decided that I wanted to have continuity between the top and the bottom of the screen so I decided to use the same background as what we used yesterday for the bottom timeline. This is a gradiated orange bar. To accomplish this effect we'll use the background command which has been used on numerous occasions. The first parameter in the background is the color.
background: #ff6600 url(http://jeffdsummers.com/images/plurk/hd/timeline.jpg) repeat-x scroll center left;
margin: 0px 0px 0px 0px;
padding-right: 10px;
height: 21px;
}
I selected the same bright orange we are using elsewhere. Since the title could grow larger if the font size is increased I want the background to fill with this orange color wherever it needs to. The next parameter tells the system to use the image located in the URL statement. You will need to change this to whatever image you want to use otherwise you will get the orange bar I am using. We then tell the system to repeat the image horizontally with the "repeat-x" parameter. The final three parameters tell the system to scroll the image with the screen and to position the image in the center of the box along the left hand side.
Plurk defaults to having margins set on this element. If we don't change the value then our background will not reach the edge of the screen. We do this by setting the margin to zero pixels on all sides. Setting the margin will put the sign-out text along the right edge of the screen. Using the "padding-right" command we move it over 10 pixels to give it some breathing room. The final command sets the height of the bar to 21 pixels to give us some needed white space below the bar.
#timeline_holder {
margin-top: 0px;
}
/* End Top Line with links */
Once we complete the first section of code you will notice that there is still approximately 4 pixels of the background showing below the menu but above the timeline. This second section of code will eliminate that and stack the timeline right on the bottom of the menu bar. This is done by setting the top margin to zero on the #timeline_holder element. Rather than having this as separate code you can just add it to the existing #timeline_holder element in your profile.
/* Page Title at Top of Screen */
#page_title {
color: #000000;
font-family: georgia, "palatino linotype", "times new roman", serif;
font-size: 130%;
font-weight: bold;
}
/* End Page Title at Top of Screen */
The title of the page is available to set on the customize profile page. It will default to a standard font used everywhere and be bold. With this section of code we'll make the text larger, make it in a specific font, and change the color to be more readable against the orange background. The first command will set the text color to be black. This will show up well over the orange background image.
The "font-family" command will tell the system what font to use. The user must have the font style loaded on their system in order for it to show up. With this command we are giving the system our preferences. It will start with the first font typeface shown, if that is not available it will try the second then the third and finally the fourth. You'll notice that the last one is not so much a type face as it is a type kind. Serif refers to the tails on the letters. San serif would be fonts without the fancy tails. an example of a Serif font would be Times while a San serif font would be Arial.
After font family we defined font size. I used a percentage rather than a pixel value to be more compliant with accessibility requirements. You could set it to a specific size if you would prefer. The final statement tells the system to make the text bold.
/* Links in Top Bar */
#top_bar a, #top_login a {
color: #ffffff;
}
/* End Links in Top Bar */
The links across the top for My Profile, My Friends, Alerts, Interesting Plurkers, My Account, Sign out are all being controlled with this set of code. Here we are merely changing the color of the text to be white. I chose white so that the links would not overpower the title that is set between them.
/* Underline on images in top bar */
#top_bar .on img {
border-bottom: 2px solid #000000;
}
/* Underline on images in top bar */
Next to My Profile you will see an icon that looks like a house. Next to My Friends is an icon that looks like an asterisk and next to Alerts is an envelope. With this section of code we are adding a border along the bottom of those icons when the user hovers their mouse over the link. The "border-bottom" command is used for that. The first parameter tells the system to make the border 2 pixels wide. The next parameter tells it to make the border a solid line. The final parameter tells the system to make the border black. This is used to give the user a visual cue of what they are about to click.
/* Text Hover Color Top Bar */
#top_login a:hover, #top_bar .on {
color: #000000;
}
/* End Text Hover Color Top Bar */
Besides the icons we also want to give the user a visual cue of where they are pointing their mouse. In this section of code we are going to change the text color of whatever link the user is hovering over in the title bar. This is done with the "color" command. Here we are telling the system to change the text color from white to black when the user hovers over the link.
/* Edit Hover Background Color Top Bar */
#top_bar #edit_link:hover {
background: #853500 none repeat scroll 0 0;
color: #ff6600;
padding-bottom: 2px;
}
You will notice that the edit text next to My Profile is a special case. We have left the text black so that the user knows that is not part of the same link as My Profile. We now need to give the user a visual cue for when they mouse over the edit text. We are doing this by changing the background and the text color. The first line of code will set the background color to be a dark orange. We are telling the system not to use an image by adding "none" as the parameter for image location. We then tell the system to repeat the non-existent image, repeat it horizontally and vertically, scroll the image with the screen and set it at location 0,0.
The second command sets the text color to be the same bright orange we are using throughout the theme. The final statement is "padding-bottom". I added this to give the edit command 2 pixels of white space along the bottom thereby vertically centering the text over the background color.
That is really all there is to it. With this little bit of code you will be able to make your top menu bar customized to match the rest of your theme. Hopefully you will find this information useful and try it on your own profile. Good luck and be sure to let everyone know you found this on Plurk Skins.
Leave a comment