Hi,

I try to replace the "friendlist" action links like "Add to friends" or "Remove from friends" with appropriate icons and have the actual link text in the hoover help text. I use popups, so at the moment the hoover text is "[Popup]".

I tried to use the tipps of the readme in section 6 (see below), but I wasn't able to get it done.

ul.friendlist-user-links-multiple li a.popups-form-reload friendlist_ui_TW_BOTH_delete popups-processed {
display: block;
height: 25px;
text-indent: -9999px;
background: url(images/icons/buddy-remove.png) no-repeat left bottom;
}

Can you give me any further help.

Thank you and regards,

Ben

Comments

mariusooms’s picture

mariusooms commented

Hi Ben...classes can take several elements per class. So the correct code for your instance would:

ul.friendlist-user-links-multiple li a.friendlist_ui_TW_BOTH_delete {
  display: block;
  height: 25px;
  text-indent: -9999px;
  background: url(images/icons/buddy-remove.png) no-repeat left bottom;
}

The two classes, 'popups-form-reload' and 'popups-processed', are inserted by the popups module so that the script can act on the link. 'friendlist_ui_TW_BOTH_delete' is the key class for friendlist depicting the state of the current link.

Also popups alters the title link to [Popup]. I'm not sure why they have it like that. For my site I just commentc it out in their module. You could open a feature request there and ask what the purpose for overriding the title is and if the behavior can be changed.

Regards,

Marius

mariusooms’s picture

mariusooms commented

Also I would say the code for that section would be better like so, I have to adjust the manual:

Make sure you set correct height and width properties for the icon that needs to be displayed:

/* set li to block and specify width and height of your replacement image */

ul.friendlist-user-links-multiple li {
  display: block;
  height: 25px;
  width: 25px;
}

then ( the overflow attribute makes sure that focus lines don't stretched across the viewport from right to left):

/* The class of the link. Use text-indent to hide text. */

ul.friendlist-user-links-multiple li a.(replace with link class) {
  display: block;
  height: 100%;
  width: 100%;
  text-indent: -9999px;
  overflow: hidden;
  background: url(path/to/your/images/image.gif) no-repeat left top;
}

if you'd like to have the icon change on hover (this assumes you know how to make the icon behave like a sprite, see link below):

/* On hover the background will move from 'left top' to 'left bottom' */

ul.friendlist-user-links-multiple li a.(replace with link class):hover {
  background-position: left bottom;
}

Here is a good article that explains on how to use sprites, this can come in handy when doing icon replacements. http://www.alistapart.com/articles/sprites/

Regards,

Marius

mariusooms’s picture

mariusooms commented
Status: Active » Fixed

I'm assuming you got this figured out?

bensemmel’s picture

bensemmel commented

Hi Marius,

sorry for not answering for a long time.
Unfortunately I didn't get it done by taking the approach you suggested in 2. It still just shows the normal friendlist links. Don't know why, but have to investigate a little bit further.
Unfortunately I don't have the time at the moment, but as soon as I can get back to it and can't get it done, I'll reopen this issue.

Thanks again
Ben

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

bensemmel’s picture

bensemmel commented
Status: Closed (fixed) » Active

Coming back to this...

Unfortunately I haven't had success with Marius' solution. So I changed it sligtly that it worked for me. So I added the following code to my style.css:

a.friendlist_ui_TW_1_TO_2_P_add,
a.friendlist_ui_TW_2_TO_1_P_add, 
a.friendlist_ui_TW_NONE_add, 
a.friendlist_ui_TW_1_TO_2_P_delete,
a.friendlist_ui_TW_2_TO_1_P_delete, 
a.friendlist_ui_TW_BOTH_delete {
  display: block;
  height: 25px;
  width: 25px;
  text-indent: -9999px;
  overflow: hidden;
}

a.friendlist_ui_TW_2_TO_1_P_add, 
a.friendlist_ui_TW_NONE_add, 
a.friendlist_ui_TW_1_TO_2_P_add {
  background: url(images/icons/buddy-add.png) no-repeat left top;
}

a.friendlist_ui_TW_2_TO_1_P_delete, 
a.friendlist_ui_TW_BOTH_delete, 
a.friendlist_ui_TW_1_TO_2_P_delete {
  background: url(images/icons/buddy-remove.png) no-repeat left top;
}

With this the friendlist links are shown as icons, the text is hidden.
As described above I use the popups module and on hovering the icon the link title is only shown as [popup]. By commenting out this in the popups.js, the [popup] addition is gone, but it still doesn't show a descriptive title of the action of the icon.

So I recognized, that the link which is build in the friendlist_ui.module doesn't get a title so I changed line 333 of the friendlist_ui.module
from

'class' => "$popups_style friendlist_ui_${status}_$op",

to

'class' => "$popups_style friendlist_ui_${status}_$op",'title' => t($link_text, array('!rt_name' => $rt->name, '!rt_name_p' => $rt->name_p))

Like this now on hovering the link text is also shown as the link title and the user knows what action is done by using the icon.

Can you review this and maybe add it to the module

Regards Ben

mercmobily’s picture

mercmobily commented

Hi,

Quick question: will adding the title affect the way anything looks in FriendList, when people don't use your CSS?
If "not", I don't see why we wouldn't commit it!

Merc.

bensemmel’s picture

bensemmel commented

Hi Merc,

I think adding the title hasn't a direct relation with the above css. It adds only the link text on hovering the link.
At the moment you don't have a hovering text or if popups is installed you see "[popups]".
Adding the title attribute you are going to see eon hovering the "link text" or "link text [popups]".

Thank you

Ben

mercmobily’s picture

mercmobily commented
Status: Active » Fixed

Hi,

Bensemmel: OK I made the change. However, I can't test it properly right now.
Can you please get the latest CVS and check that everything is in order, with or without your CSS theming?

Thanks a lot!

Merc.

bensemmel’s picture

bensemmel commented

thanks for comitting, it works as expected...

mercmobily’s picture

mercmobily commented
Status: Fixed » Closed (fixed)