This is a brief labeling of right-rail parts using the Mozilla Firefox add-on Web Developer Toolbar.

This is a great help on pin-pointing which is which, and on editing your CSS codes.


























See also: Changing Right Rail Links

Here are the CSS Tags for the right rail links:

All:
.sidelist {value}

One by One:
ul.sidelist li.customize a {value}       customize
ul.sidelist li.select a {value}              promote
ul.sidelist li.contacts a {value}          contacts
ul.sidelist li.photos a {value}             photos on profile
ul.sidelist li.pm a {value}                   send a PM
ul.sidelist li.invite a {value}                invite user
ul.sidelist li.join a {value}                   join - for group
ul.sidelist li.quit a {value}                  quit - for group
ul.sidelist li.delete a {value}              delete - for group admins
ul.sidelist li.rss a {value}                   RSS feeds
ul.sidelist li.report a {value}               Report Abuse
ul.sidelist li.block a {value}                Block user




Now, for changing the icons, just remove "a" in the line "ul.sidelist li.contacts a {value}"


Let's take this line for a sample:

ul.sidelist li.contacts a {value}
into
ul.sidelist li.contacts {value} - see that "a" is omitted
then add the values

ul.sidelist li.contacts {
background:transparent url(IMAGE_URL) no-repeat scroll top left;
height:16px;
width:108px;
overflow:hidden;
white-space:nowrap;
}

or:

ul li {
list-style-image: url(IMAGE_URL);
}




See also: Right Rail Labels