Is there a way to change links with icons?

Comments

kkaefer’s picture

kkaefer commented

This is a theming issue.

gregoiresan’s picture

gregoiresan commented

In view, you can choose an icon instead of a link for the "user contact link" field. It would be nice to have the same option for all links. Just choosing the icon from a library.

mattiasj’s picture

mattiasj commented

I agree this is a theming issue and should be done with css instead.

gregoiresan’s picture

gregoiresan commented

can we hide text, replace it by an image and make it clickable with CSS ? If you know how to do this, I'd be happy to learn :)

mattiasj’s picture

mattiasj commented

yes, here is an example for the fasttoggle_promote link, hide the text, specify width and height of the image.

.fasttoggle_promote a {
display:block;
width:50px;
height:20px;
background:url(images/toggle-promote.gif) top left no-repeat;
text-indent:-9999px;
}

gregoiresan’s picture

gregoiresan commented

nice way to keep text for search engines and hidding it in order to leave space for the image. But are you sure this will not generate any bug with Opera or IE ?

mattiasj’s picture

mattiasj commented

no, this will work fine!

gregoiresan’s picture

gregoiresan commented

Great trick, thanx !

nigelcunningham’s picture

nigelcunningham commented
Status: Active » Closed (works as designed)

Looks to be fixed; closing.

soundboy89’s picture

soundboy89 commented

Am I missing something, or does this CSS technique only allow to have a fixed icon that won't change with the state of the toggle link? As far as I can tell, clicking on the toggle link doesn't change or add any classes, so you'd be left with a static icon that doesn't change to reflect the state of the toggle link. Is there any way to accomplish that?

kapep’s picture

kapep commented

There is a class that changes, although I think it's a really badly chosen one.

For published nodes (internally the status field) the classes are like "fasttoggle fasttoggle-status-node-123-status-1" and for unpublished ones "fasttoggle fasttoggle-status-node-123-status-0".

To style these classes we need to use CSS3 substring selectors.

.fasttoggle[class*="-status-1"] { /* ... */}
.fasttoggle[class*="-status-0"] { /* ... */}

Separating the type (status/sticky/promoted) from the actual status like "fasttoggle fasttoggle-status-node-123 status-0 would result in easier and and more permanent CSS selectors... probably easy to patch.