Skins / Mouse

an HTML5 skin using wiki pages to define page elements

Monobook < Skins > MouseSkin   (talk | users? | test page | RWD? | set as default | unset | validate: HTML, CSS)

Summary: an HTML5 skin using wiki pages to define page elements
Version: 2012-09-15
Prerequisites: pmwiki-2.x
License: GPL2+ (per tamouse)
Status: abandoned
Categories: Skins, PHP72
Users: (view? / edit)
Discussion: Mouse-Talk


an HTML5 skin using wiki pages to define page elements


  1. Download mouse-skin.zipΔ some place safe.
  2. Change to your pub/skins dir
  3. Unzip mouse-skin.zip in the pub/skins directory:
      $ cd path/to/pmwiki/pub/skins
      $ unzip path/to/mouse-skin.zip
Alternatively, get a clone of the git repository at http://git.gitorious.org/pmwikistuff/mouse-skin.git:

  $ cd /path/to/pmwiki/pub/skins
  $ git clone http://git.gitorious.org/pmwikistuff/mouse-skin.git mouse


Add $Skin='mouse'; to your local/config.php file to use this skin.


MouseSkin is ostensibly a fluid, 2-column theme, utilizing the <aside> and <article> HTML5 tags to define the two areas.

The aside element is placed on the left hand side, as defined by <!--PageLeftFmt-->, in a fixed position, so it will always remain visible while the user scrolls down the page. If the contents of the aside are longer than the viewport, it will scroll independently of the page.

The article element contains the following elements:

  • page actions area, defined by <!--PageActionsFmt-->, which is also in a fixed position at the top of the page, so the actions will always be available no matter where the user is on the page.
  • header area, which is defined by a <!--PageHeaderFmt--> region
  • page title area, defined by <!--PageTitleFmt--> region
  • wiki text area, filled with <!--PageText--> region
  • footer area, which is defined by a <!--PageFooterFmt--> region


MouseSkin uses the contents of various wiki pages in order to define page elements in the layout. Pages can come from either the current group, or the Site group.

  • <!--PageLeftFmt--> includes the SideBar page.
  • <!--PageActionsFmt--> includes the PageActions page.
  • <!--PageHeaderFmt--> includes the SiteHeader page.
  • <!--PageTitleFmt--> includes the PageTitle page.
  • <!--PageFooterFmt--> includes the SiteFooter page.

Defaults for the above pages are included in the skin's wikilib.d directory (automatically bundled in the wiki page store).

Additional bundled pages which you can edit include:

  • Site.SiteBrand -- used on the left side of the header to show page logo, wiki title and wiki tag. Included by Site.SiteHeader.
  • Site.SiteActions -- used on the right side of the header to show site-wide actions including the search box. Included by Site.SiteHeader.
  • Site.SiteNews -- included after the above two to display any site new or updates on every page.
  • Site.GroupHeader -- basic stuff included before the wikitext is displayed.
  • Site.GroupFooter -- basic stuff included after the wikitext is displayed.

For the Site.GroupHeader and Site.GroupFooter pages, you can follow the recommendations in Cookbook:AllGroupHeader recipe to use the Site's group header or footer all the time, or override with a Group's own group header or footer. (Note that setting $GroupHeaderFmt or $GroupFooterFmt in the skin.php would prevent it from being overridden in local/config.php.)

To use these, the simplest recommendation is the second alternative in Cookbook:AllGroupHeader:

$GroupHeaderFmt =
  '(:include {$Group}.GroupHeader {$SiteGroup}.GroupHeader:)(:nl:)';
$GroupFooterFmt =
  '(:include {$Group}.GroupFooter {$SiteGroup}.GroupFooter:)(:nl:)';


Change log / Release notes

  • 2012-09-15: Initial release.

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".

See also



See discussion at Mouse-Talk

User notes? : If you use, used or reviewed "Mouse", you can add your name. These statistics appear in the Skins listings and will help newcomers browsing through the wiki.