Image replacement for action links?

Do you mean to replace the link with an image? You would do that through css, since each link as a unique class it shouldn't be to hard to achieve this.

The best and easiest, shortest explanation can be found here on Mike Rundle's Weblog: http://phark.typepad.com/phark/2003/08/accessible_imag.html

Have a go at it and let us know if you run into any trouble.

Regards,

Marius

Didn't work. The background image goes to left with the text, and i can't rezise the div to fit image size ( height: 25px; width: 158px;)

Hi, actually it does...but you might need a bit more help ;) Your approach to paste HTML into the field will not work and you are right - for security reasons.

So you need to use css image replacement technique. Below I'm pasting the code you need to put into your theme stylesheet. It is for your specific image size (height: 25px; width: 158px;) and for this example I used the link for on_delete:

/* set li to block and specify width and height of your image */
ul.friendlist-user-links-multiple li {
	display: block;
	height: 25px;
	width: 158px;
}

/* The class of the link. Use text-indent to hide text. */
ul.friendlist-user-links-multiple li a.friendlist_ui_TW_2_TO_1_P_delete {
	display: block;
	height: 25px;	
	text-indent: -9999px;
	background: url(../images/example_link.gif) no-repeat left bottom;
}

/* On hover the background will move from 'left bottom' to 'left top' */
ul.friendlist-user-links-multiple li a.friendlist_ui_TW_2_TO_1_P_delete:hover {
	background-position: left top;	
}

You can repeat this code for any specific link. You only need to adjust the class of the link. Alter the sizes to match your image and paths to the correct location.

I even attached two images two show you this is tested and works fool proof. You also don't need to change anything in the Friendlist UI module.

Regards,

Marius

Hi,

Marius, I don't suppose you could add this information in a section of the User documentation?

Merc.

Yep...no problem we can add this. We can make a section for Styling. This technique can also support replacing the frid's with icons.

Regards,

Marius

Hi,

Yep -- thanks!

Merc.