• View
• Edit
• History
• Attach
• Print
• Backlinks

PageAction-IconPack

Questions answered by this recipe

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

Description

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.

This is an example of how it looks:

Installation

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 PageAction-Iconpack-20170504.zipΔ 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:

 pub/
 |-- 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:

(: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]" ]]
(:ifend:)
* %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]" ]]
(:ifend:)
(:if enabled AuthPw:)
* %item rel=nofollow class=logout    accesskey="$[ak_logout]"%''  [-[[{*$FullName}?action=logout | {$FarmIconDirUrl}/logout.svg"Logout" ]]-]''
(:ifend:)

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

UserAuth2

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:)
(:if ! loggedin:) 
* [[Login -> {$FullName}?action=login]]
(:if:)
(:if auth admin :)
* [[{$FullName}?action=admin | $[Admin tool] ]]
(:if:)

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

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

Step 4. Edit stylesheets

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.

Configuration

Usage

Notes

• This cookbook recipe will work with Skins.Vanilla5 from version 20170506.

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

• PmWiki.SitePageActions
• PmWiki.PageVariables
• Cookbook.UserAuth2 A user-based permission granting and authentication module

Contributors

• SVG icons were made available courtesy of OpenIconic [(approve links) edit diff] . OpenIconic is an open source icon set with 223 marks in SVG, webfont and raster formats.
• PaulWiegmans

Comments

See discussion at PageAction-IconPack-Talk