Jeff Summers

  shares  User Info Menu Theming

As is always the case, let's start with posting the entire code snippet to allow you to copy and paste it into your profile.

/* Color Box on User Menu */
.AmiMenu.info_menu {
background: transparent url(http://jeffdsummers.com/images/plurk/hd/blacktrans.png) repeat scroll top left;
border-color: #FF6600 #710012 #710012 #FF6600;
-moz-border-radius: 6px 6px 6px 6px;
-khtml-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
}
.AmiMenu.info_menu .block {
background: transparent url(http://jeffdsummers.com/images/plurk/hd/orangetrans.png) repeat scroll top left;
}
.AmiMenu.info_menu td.on, .AmiMenu.info_menu .user_info.on {
background: transparent url(http://jeffdsummers.com/images/plurk/hd/orangetrans.png) repeat scroll top left;
}
.AmiMenu.info_menu .separator {
background: url(http://jeffdsummers.com/images/plurk/hd/separator.png) no-repeat scroll left top;
}
.AmiMenu.info_menu .user_info.on b {
color: #000000;
font-weight: bold;
}
/* Color Box on User Menu */

/* Drop Arrow on User Menu */
.drop_arrow div img[src="/static/info_list/down.png"] {
background-position: left top;
background-repeat: no-repeat;
overflow: hidden;
height: 0px;
width: 0px;
}

.drop_arrow div img[src="/static/info_list/down.png"] {
height: 17px;
padding-left: 22px;
background: url(http://jeffdsummers.com/images/plurk/hd/down.png) no-repeat scroll left top;
}
/* End Drop Arrow on User Menu */

/* Up Arrow on User Menu */
.drop_arrow div img[src="/static/info_list/up.png"] {
background-position: left top;
background-repeat: no-repeat;
overflow: hidden;
height: 0px;
width: 0px;
}

.drop_arrow div img[src="/static/info_list/up.png"] {
height: 17px;
padding-left: 22px;
background: url(http://jeffdsummers.com/images/plurk/hd/up.png) no-repeat scroll left top;
}
/* End Up Arrow on User Menu */

We'll next break down each section of the code and explain it so that you can understand what it is we are accomplishing with each statement.  I will once again strongly recommend that you document your code so that you can remember what each section does when you go back to visit it at a later point in time.

.AmiMenu.info_menu {
background: transparent url(http://jeffdsummers.com/images/plurk/hd/blacktrans.png) repeat scroll top left;
border-color: #FF6600 #710012 #710012 #FF6600;
-moz-border-radius: 6px 6px 6px 6px;
-khtml-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
}

This first section refers to the overall box that appears  when you click the down arrow next to the author's name.  In it's natural state this is a medium steel blue box with square corners; hardly something we could live with when compared to the rest of our profile.  Don't get me wrong, I love blue but not on a Harley-Davidson motorcycle theme.

The first statement within this section will define the background.  We are going to replace the blue solid color with a semi-transparent PNG file.  This will give our template depth.  You could do this using CSS on a background color then modifying it with "filter:alpha(opacity=70); -moz-opacity:.70; opacity:.70;" but the problem with that approach is that everything in the box becomes translucent including avatars and text.  Instead I chose to create a PNG file that has a transparancy keeping just the background see-thru. The problem with that is that some browsers namely Internet Explorer 6 does not do PNG transparancy well so your box ends up being solid but I'm willing to live with that.  In our "background" statement we set the background color to transparent if the image is not large enough to cover the entire area.  The next parameter is the URL of where the image is stored on-line. You will want to change that otherwise you will get my black semi-transparant background.  The remaining parameters tell the system to repeat the image horizontally and vertically, allow it to scroll with the screen and to put the image in the top left corner.

The "border-color" statement will put a colored border around the box.  It puts a lighter color on the top and left and a darker color on the bottom and right.  If you want you can eliminate the border completely by setting the border-width to 0 pixels.  The remaining four statements are the same as those we have used previously to round the corners of the box.  These are CSS3 commands so your browser must support CSS3 for these to work.  Basically that is everything except Internet Explorer.

.AmiMenu.info_menu .block {
background: transparent url(http://jeffdsummers.com/images/plurk/hd/orangetrans.png) repeat scroll top left;
}

This next section is responsible for the Block User box at the bottom of the menu.  This again uses the standard "background" statement we have used in the past.  We are setting the background color transparant, telling the system where to find the image, having the image repeat horizontally and vertically, scrolling with the page, and positioning it in the top left corner.

.AmiMenu.info_menu td.on, .AmiMenu.info_menu .user_info.on {
background: transparent url(http://jeffdsummers.com/images/plurk/hd/orangetrans.png) repeat scroll top left;
}

When you move your mouse over one of the menu items it changes color. This section defines what we want the system to do for this mouse over.  In this case we are going to have the mouseover change the background to a translucent orange color using the same background statement that we have used previously.

.AmiMenu.info_menu .separator {
background: url(http://jeffdsummers.com/images/plurk/hd/separator.png) no-repeat scroll left top;
}

In the menu there are separator bars to differentiate the sections of the menu.  The system uses an image with a height of 2 pixels. The image has a light blue 1 pixel line with a 1 pixel darker blue pixel line below it.  I have created a new image but used orange rather than blue to match our theme.  We use the background statement to tell the system where to find the new image.  You will need to modify the URL statement of this code otherwise you will get the orange line we are using in this example.  You could use a background color rather than an image if you so choose.

.AmiMenu.info_menu .user_info.on b {
color: #000000;
font-weight: bold;
}

This section of code is not really necessary but I put it in to make the user's name stand out better against the new background.  I found that the default color was harder to read on the new background when I moused over the user info section so I changed its color and made the text bold to set it apart from the other text.

This is all the code it takes to change the color on the user info menu and would suffice for most people. But hey, we are not most people.  We are the CSS warriors that want to continue to push the envelope so we're going to go that one extra step.  When you point at the Plurk message author's name you are given a blue down-arrow button.  When you click on it the user info menu appears and the down-arrow button becomes an up-arrow button. Let's change these buttons so that they match the color scheme of the rest of our profile.

/* Drop Arrow on User Menu */
.drop_arrow div img[src="/static/info_list/down.png"] {
background-position: left top;
background-repeat: no-repeat;
overflow: hidden;
height: 0px;
width: 0px;
}

.drop_arrow div img[src="/static/info_list/down.png"] {
height: 17px;
padding-left: 22px;
background: url(http://jeffdsummers.com/images/plurk/hd/down.png) no-repeat scroll left top;
}
/* End Drop Arrow on User Menu */

We are going to use the same techniques that we did to replace the Plurk creature.  The first section will hide the existing image and the second section will replace it with our new unique image.  We'll go through each section.  The down-arrow is defined as ".drop_arrow div img[src="/static/info_list/down.png"]" which tells the system we only want to modify this specific image.  We tell the system that we want a background image positioned at the top left corner with a height of 0 pixels and a width of 0 pixels and that we want anything outside of this dimension to be hidden.  Basically what that does is slide the existing image under the covers making it invisible with CSS.

The second block of code begins by telling the system that we want to work with the exact same image as above.  This time we set the height to the height of the new image which in this case is 17 pixels.  The "padding-left" pushes the old image out of the way 22 pixels which is 2 pixels more than the new image.  The "background" statement tells the system to use the new image located in the URL statement and to not repeat it, scroll with the page and set it to the top left corner.  This will allow the new image to display and the old image to disppear.  Kind of sneaky but it works.

/* Up Arrow on User Menu */
.drop_arrow div img[src="/static/info_list/up.png"] {
background-position: left top;
background-repeat: no-repeat;
overflow: hidden;
height: 0px;
width: 0px;
}

.drop_arrow div img[src="/static/info_list/up.png"] {
height: 17px;
padding-left: 22px;
background: url(http://jeffdsummers.com/images/plurk/hd/up.png) no-repeat scroll left top;
}
/* End Up Arrow on User Menu */

This section of code is nearly identical as the one above but instead of working with the down arrow we are now working with the up arrow.  This is defined by the ".drop_arrow div img[src="/static/info_list/up.png"]" declaration.  We again set the image position to the top left corner, tell it not to repeat the image, hide anything larger than the width and height and finally define the dimensions to 0 pixels by 0 pixels.  The second set of code then works on the new image establishing the height as the height of the new image then moving the old image to the left just outside the visible range.  The final statement we define the new up arrow and set it on the screen.  You will need to modify the URL statements for both the up arrow and the down arrow otherwise you will get the orange arrows I have defined in this tutorial.

That's pretty much it.  By using this code and pointing it to a few new graphics of your choice you have themed the new user info menu with something of your own choosing.  Good luck and be sure to let everyone know you found this on Plurk Skins.