Recent Changes - Search:

Cookbook

PmWiki

pmwiki.org

Skins

PmWiki makes it easy to develop and change "skins" for the look and feel of the pages. You can preview available skins in the Skins Gallery in a reduced size or see how a test page looks with some assorted markup. (The old test page is still available, and here's another one.)

If you've developed a skin for PmWiki that you'd like to share, feel free to add it to the Cookbook here! After it's uploaded, Pm will generally configure pmwiki.org to display pages in the new skin. Be sure to look at skin guidelines for suggestions about creating skins that others can use.

  • A Bit Modern ..... A PmWiki port of the oswd.org template; left menu, 800 pixels wide
  • Alalike ..... Loosely based on the look of alistapart.com; 3-columns
  • Barthelme ..... A minimalist skin where white space and margins can show culture and aestheticism
  • BeeblebroxNetGila
  • BlueBerry ..... css and xhtml conform blue skin
  • BlueFur ..... Kind of a 60's rounded look
  • Bluehead ..... Elegant white skin with blue header
  • Blues ..... This skin has the blues
  • Blog ..... Use this relatively low-frills skin to make your wiki, blog, or non-blog site visitor-friendly.
  • Blix ..... 2-Column Wordpress port, provides a top-level tab navigation, and right-sidebar. Autumn and Spring color sets.
  • Bonny ..... A fully CSS-driven skin, 2 or 3-column layout, with variations in layout and appearance, and optional CMS mode.
  • Bs-001 ..... A Dark-Themed skin.
  • Cinnamon ..... Clean skin with red, brown and gray highlights.
  • DropDown ..... Uses a Dropdownmenu for the sidebar and has tabs for easy editing
  • Drop Shadow .... Simple blog-oriented, fixed-width, 2 column skin, with upper tab-navigation, and additional color-themes. Based on the WordPress Drop Shadow skin.
  • Evolver ..... Greenish skin based on an OSWD design that integrates usage of, but does not require, UserAuth and CMSLike
  • FixFlow ..... As Gemini, plus fixed or flowing sidebar, left or right
  • Flexi ..... Based entirely on CSS, highly configurable, title menu etc. based on wiki-files
  • Gemini ..... Highly configurable with many colour-schemes, plus optional rightbar
  • Glossy Hue ..... 2-column Wordpress port, with a right-sidebar, top level tabbed navigation, and a 3-section footer.
  • Grayness ..... This is a blue and gray skin that is easy on the eyes in most lighting conditions.
  • Grease ..... Minimalistic skin inspired by the Dive Into Greasemonkey online book.
  • Green .... Tableless skin in green.
  • JH
  • JHMP
  • Lean ..... A clean, minimalist skin that was created with usability in mind
  • Leaves ..... A three-column skin using orange, gray and white, adapted from a SmallPark template
  • Lens ..... Extremely and easily configurable, accessible, and supports ViewModes
  • Light ..... A more configurable CMS-friendly derivative of Lean Skin with many changes
  • Lines ..... Created for use in a CMS-like environment, thus edit links are barely visible
  • Marble ..... This skin has a dark marble background with a semi-transparent appearance for the wiki content
  • Marinee ..... aka "Green Marinee", a port of the highly popular Green Marinee skin for Wordpress.
  • Monobook ..... Makes PmWiki look like MediaWiki/Wikipedia
  • Maguila ... Tableless skin for PmWiki based on design by Haran from OSWD.
  • Netstreams
  • Neutral ..... Designed to be usable by most people for any wiki use
  • NewsPaper ... A newspaper-like skin
  • NotSoSimple ..... Based on the excellent Simple Skin, but with Sidebar and 900px wide
  • Not2Simple ..... Based on the NotSoSimple, but with CSS based multi level popup menu Sidebar
  • Parchment ..... This is a tan skin with brown hilights and mimics aged papyrus for its background.
  • PhpNet ..... Roughly the look of www.PHP.net
  • Plain ..... Emphasizes content with an easy-to-read default font size and no graphical frills.
  • PlainBlog ... A blog-oriented skin that emphasizes content, with an easy-to-read default font size and no graphical frills
  • PmWiki V1 ..... skin that was distributed with PmWiki v1 and PmWiki v2 beta series
  • PmWiki2Bars ..... An extension of the default PmWiki skin to add another side bar on the right side.
  • Recurve ..... A tab driven skin for PmWiki
  • RedBerry .... dark read, gray skin, based on blueberry
  • Rose Trellis ..... A clean, fast-loading skin designed for single-author sites
  • Rounded ..... A blue and white skin with rounded corners, great for blogs.
  • Simpla ..... A clean, minimalist skin. Ported from the Simpla Wordpress theme.
  • SimpleTab ..... A K2 inspired skin with menu tabs
  • Sinorca ..... A nice, tableless skin
  • Skidoo ..... Provides a simple, low distraction interface provides rapid access to the information you need. I use it for the various wiki's I use to take notes on a daily basis.
  • SomethingCorporate ..... Functional CSS skin
  • ssofb_joomla_rhuk ..... CSS Skin based on the Joomla rhuk_milkyway template.
  • Stripped ..... A skin for debugging HTML errors
  • Technobabble ..... A two column layout based on a idea of dreamLogic
  • TextPattern ..... Inspired by TextPattern. Designed for smaller documents such as poetry, short stories, etc. Very elegant.
  • Triad ..... A three column layout, highly configurable.
  • Useless Tuesday ..... Dark blue tones dominate this rather narrow skin
  • WikiLove ..... Modification of default skin with a nice clean look.

Other PmWiki skins (some unmaintained):

To find skins for PmWiki v.1a, see Cookbook-V1.Skins. If you'd like to use one of them with PmWiki 2, most of them will probably work fine with a little modification and help from Changes from PmWiki 1.


The following part is included from PmWiki.LayoutBasics:

Modifying the "pmwiki" skin

The pmwiki skin (i.e., pub/skins/pmwiki/) is part of the PmWiki installation, so any changes you make to these files are likely to be overwritten when you upgrade. Thus, instead of editing the files directly, you should start by making a copy of the files in pub/skins/pmwiki/ into a new skins directory (say, pub/skins/xyzskin/).

Once you've made a copy of the skin directory, you can then edit the .tmpl and other files in that directory. You then tell PmWiki to use the skin in pub/skins/xyzskin by setting

$Skin = 'xyzskin';

in your local/config.php file.


Discussion

Skins don't seem to take effect.

I can get the wiki to install fine, but I can't get any skins to change the appearance, and I followed the very simple directions to the letter. Any ideas?

Make sure the skin name is exactly the same as the name of the skin directory you installed, paying attention to capitalization. For example the Sinorca skin instructions say to set the config variable to Sinorca but actually it should be sinorca. -a user

Also be sure to remove the # character from the beginning of the line, so that it reads $Skin instead of # $Skin . -Joel

Styles not included within CSS or PHP

I've been trying to optimize the colors on my wiki but these two styles don't seem to be inside any CSS or PHP file.

    
    <p style='background-color: #eee;' ><span class='wikitrail'>
    <td style='font-size:12px; font-family:Arial;'
      bgcolor='#ffeedd' colspan='2'><p> PmWiki/TextFormattingRules
      - PmWiki/TipsForEditing
    

How do I fix this? Thank you. [ Adraeus? December 07, 2004, at 02:18 AM ]

The first one is probably listed in PmWiki.GroupHeader (you'll have to edit the page or view the source to see it).

The second one is included in the PmWiki.EditQuickReference page, which is included as part of the edit text form. --Pm

Multiple themes for the same wiki

Are there any instructions for using multiple themes on the same wiki? For example, the way the Cookbook has demos for several of the different themes.

Thanks! [ stormspotter January 18, 2005, at 14:02 ]

See Skin Change - Klonk
Excellent. Very helpful tutorial, thanks! [ stormspotter February 11, 2005, at 23:45 ]

Make H1 and H2 only available in the skin.

In one of the V1 skins I was using I could use $DoubleBrackets['/^!/'] = '!!!'; in my config.php in order to make sure that headings used within the entry do not conflict with headings I am using elsewhere -- my concern here is with having the page index correctly by search engines. I know I need to use the Markup command to emulate this function but I'm not yet that comfortable with regular expressions. Any suggestions?

Thanks. JKeim

Here is one way:

 Markup('^!', 'block',
  '/^(!{1,2})\\s?(.*)$/e',
   "'<:block,1><h'.strlen('$1').PSS('>$2</h').strlen('$1').'>'");

This will limit to <H1> or <H2>. If you change the {1,2} you can adjust this range. For example, if you have {2,6}, you will disable <H1> in the page, which is what I do BenWilson March 06, 2006, at 09:07 AM

So how would you slide all of them down so that ! make <h3>, !! made <h4>, etc?

Skin for a page.

Can i set a skin for a single page or a group of pages, with no usage of ?skin= (set it in page or something like that)?

You can try by adding to config.php a custom markup to set the skin from within a wiki page:

      # Add a (:skin skinname:) markup
      Markup('skin', 'fulltext',
        '/\\(:skin\\s+([-\\w]+)\\s*:\\)/e',
        "PZZ(SetSkin(\$pagename,'$1'))");

Embedded skin

Any idea/critics about embeddeding style skin where template page and css could be edited online, at site or at group level? For example, I try having the Site.CSS page as a stylesheet adding the following lines to the header of the .tmpl file:

    <link rel='stylesheet' href='$SkinDirUrl/pmwiki.css' type='text/css' />
    <link rel='stylesheet' href='{$ScriptUrl}/{$SiteGroup}/CSS/?action=source' type='text/css' />
    <link rel='stylesheet' href='{$ScriptUrl}/{$Group}/CSS/?action=source' type='text/css' />

It would cascade stylesheets from skin's stylesheet, then to the CSS page (using source only) at site level and then at group level...

TV

Add a scroll bar to the "main window" of a skin

Just in case some of you are interested ;)

I find it annoying that you have to scroll the whole page down if the text in the main "frame" gets too long. Here is a possible modification. I'm using it with the greyness skin, but it should work with others too.

In the file grayness.tmpl look for the entry

 <td id="pagetext" valign="top">
 <!--PageText--> 
 </td>

This defines the main window. Now you can modify it to:

 <td id="pagetext"  valign="center">
 <div id="page_d" style="overflow: auto; padding-top:10px; height:640px">
 <!--PageText-->
 </div>
 </td>

If now your text gets too long you will get a nice scrollbar and still be able to see the menu and the page header while reading the bottom of the page.

Have fun. Golo


Edit - History - Print - Recent Changes - Search
Page last modified on December 15, 2008, at 05:08 PM