this private cloud

Summary: Using SVG icons to replace text links in the Page Action menu Version: 20170504 Prerequisites: Status: Beta Maintainer: License: Cookbook:Cookbook Licenses Categories: Skins, Layout, MarkupOnly Users: (view? / edit) Discussion: PageAction-Iconpack-Talk?

Questions answered by this recipe

All sections are optional, you can remove those that do not apply to your recipe, and add new ones.


Enter your recipe's description here.

This recipe describes how to replace the default plain text links in the Page Action menu with nice looking SVG icons. It provides replacement SVG icons for all default page action links, and also for the links added when using cookbook recipe UserAuth2?.


Requirements are either:

  • PmWiki 2.2.85 or later as this version has builtin SVG support, or
  • The Svg Cookbook recipe to add SVG support manually.

Step 1. Install SVG images

Unpack in your Pub directory. If your PmWiki is part of a WikiFarm, unpack it in your Farm pub directory which is designated by $FarmPubDirUrl. You should end up with a number of SVG files in the directory pub/images/icons like this:

 |-- index.php
 `-- images/
     `-- icons/
         |-- view.svg
         |-- edit.svg
         |-- history.svg

Step 2. Edit config.php

Create a custom page variable "FarmIconDirUrl" by adding a line at the end of config.php like this:

 $FmtPV['$FarmIconDirUrl'] = '$GLOBALS["FarmPubDirUrl"]."/images/icons"';

This is to shorten the links in the PageAction page and make things more flexible.

Step 3. Edit Site.PageActions

Now modify Site.PageActions so that every link text is replaced by the corresponding SVG image link. A standard PageActions page will become like this:

(:Summary:Contains the '[[PmWiki/AvailableActions|action]]' links (like Browse, Edit, History, etc.), placed at the top of the page, see [[PmWiki/site page actions]]:)
(:comment This page can be somewhat complex to figure out the first time you see it. Its contents are documented at PmWiki.SitePageActions if you need help. :)
* %item rel=nofollow class=browse    accesskey='$[ak_view]'%      [[{*$FullName}               | {$FarmIconDirUrl}/view.svg"$[View]" ]]
* %item rel=nofollow class=edit      accesskey='$[ak_edit]'%      [[{*$FullName}?action=edit   | {$FarmIconDirUrl}/edit.svg"$[Edit]" ]]
* %item rel=nofollow class=diff      accesskey='$[ak_history]'%   [[{*$FullName}?action=diff   | {$FarmIconDirUrl}/history.svg"$[History]" ]]
(:if auth upload:)
* %item rel=nofollow class=upload    accesskey='$[ak_attach]'%    [[{*$FullName}?action=upload | {$FarmIconDirUrl}/attach.svg"$[Attach]" ]]
* %item rel=nofollow class=print     accesskey='$[ak_print]'%     [[{*$FullName}?action=print  | {$FarmIconDirUrl}/print.svg"$[Print]" ]]
(:if group Site,SiteAdmin,Cookbook,Profiles,PmWiki*:) (:comment delete if and ifend to enable backlinks:)
* %item rel=nofollow class=backlinks accesskey='$[ak_backlinks]'% [[{*$Name}?action=search&q=link={*$FullName} | {$FarmIconDirUrl}/backlinks.svg"$[Backlinks]" ]]
(:if enabled AuthPw:)
* %item rel=nofollow class=logout    accesskey="$[ak_logout]"%''  [-[[{*$FullName}?action=logout | {$FarmIconDirUrl}/logout.svg"Logout" ]]-]''

If you are using any {Group}.PageActions , you should modify them too accordingly.


If you are using UserAuth2, chances are that there are a few additional links in the PageAction menu, that provide Page action links unique to UserAuth2. These are Login, Logout and Admin tool. This icon pack provides SVG icons for these links as well.

The snippet of the PageAction that looks like this:

(:if loggedin:)
* [[Logout ({$AuthId}) -> {$FullName}?action=logout]]
(:if ! loggedin:) 
* [[Login -> {$FullName}?action=login]]
(:if auth admin :)
* [[{$FullName}?action=admin | $[Admin tool] ]]

To replace test links with SVG icons, modify like this:

(:if loggedin:)
* [[{$FarmIconDirUrl}/logout.svg"Logout ({$AuthId})" -> {$FullName}?action=logout]]
(:if ! loggedin:) 
* [[{$FarmIconDirUrl}/login.svg"Login" -> {$FullName}?action=login]]
(:if auth admin :)
* [[{$FullName}?action=admin | {$FarmIconDirUrl}/admin.svg"$[Admin tool]" ]]

Step 4. Edit stypesheets

Add the following stylesheet to the content of pub/css/local.css (create this file if it doesn't exist):

    #wikicmds ul li a img {
        height: 32px;
        margin-top: 8px;
        opacity: 0.3;

    #wikicmds ul li a img:hover {
        opacity: 1; 

This wil set the opacity of the SVG images to 0.3, and set the opacity to 1 (full opaque) when the mouse hovers over it. You can change the size of the SVG image by modifying the height attribute to your needs. You should choose the CSS height attribute so, that it has the same height as your <p> text.




  • This cookbook recipe will not work with Skins.Vanilla5? v1.0.7 (or before) because the PageActions div-container has class=wikicmds, instead of id=wikicmds. Sorry!

Change log / Release notes

If the recipe has multiple releases, then release notes can be placed here. Note that it's often easier for people to work with "release dates" instead of "version numbers".

  • 20170504 : first release

See also



See discussion at PageAction-Iconpack-Talk?