[pmwiki-users] Small icons for links (and how to vertical align small images)

Dominique Faure dominique.faure at gmail.com
Sat Apr 29 03:04:16 CDT 2006


On 4/29/06, H. Fox <haganfox at users.sourceforge.net> wrote:
> On 4/28/06, Thomas Kindler <thomas.kindler at gmx.de> wrote:
> > Hi!
> >
> > Is there a recipe for adding small icons next to each link? DokuWiki
> > does this -- a small globe for external links, a letter for mail
> > adresses, etc..
> >
> > I'm just trying to do this by hand:
> >
> > [[Site/AllRecentChanges?action=rss|Attach:feed-icon.png]]
> > [[Site/AllRecentChanges|Recent Changes]]
> >
> > But how can i get the icon to be vertically centered with the text?!
> >
> > feed-icon.png is 16x16 pixels and the bottom of the image is aligned
> > with the baseline of the text, which looks quite ugly. I couldn't find
> > an option to do a "vertical-align: center" or similar..
>
> Maybe superscript or subscript?
>
> > many greetings from Bochum, Germany,
>
> I know it can be done because the Monobook skin produces links with icons
>
> http://www.pmwiki.org/wiki/Cookbook/MonobookSkin
>

The following link:

  <a class='urllink' href='http://www.php.net' rel='nofollow'>PHP</a>

 is styled using the monobook skin's way (css only) with:

  a.urllink {
    background: url(external.png) center right no-repeat;
    padding-right: 13px;
  }

Intermap links may be restyled the same way providing they belong to
their own class:

  $IMapLinkFmt['mailto:'] = "<a class='maillink'
href='\$LinkUrl'>\$LinkText</a>";

or even handle directly the related icon:

  $IMapLinkFmt['mailto:'] = "<a class='maillink'
href='\$LinkUrl'>\$LinkText<img src='$PubDirUrl/mailicon.png' /></a>";

Dom




More information about the pmwiki-users mailing list