Summary: Three Column, Responsive Skin, with Group specific, and (SQL) Table features.
Version: 1.0
Prerequisites: None
Status: Maintained
Maintainer: Kirk Siqveland
License: GPL2
Categories: Skins, PHP72, Mobile
Users: (view? / edit)
Discussion: Steamport-Talk?

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

Steamport Skin

Clean Backgrounds


As an embeded page not everything works here, see below for link to demo page

Tuned over several years in use, this is a Three-column, responsive skin with a post-industrial feel, designed for easy installation and modification. This Skin has a CSS-Responseve design: It changes appearance according to the size of the screen you are viewing on; sidebars will appear, disappear and corresponding horizontal navigation bars will likewise disappear and appear. As a fun feature the SideBar Logo floats down the page as you scroll, while the GroupBar moves with the page.

Markup defined in the demo config.php file allows for the hiding of the SideBar, GroupBar and SearchBar with simple markup:

This is a pure HTML and CSS skin.

Especially developed for use with Groups:

The Skin comes ready to drop into a clean PMWiki install with little or no change to the supplied /local/config.php file, allowing you to give it an easy test run, and learn how to use it.

Pages Generated by this Skin are CSS level 3 + SVG ! validated

See Notes below on how to pass HTML Validation

Responsive Design


2019.01.18 - Updated files:

Unzip the file to its Steamport_Skin folder.
The zip-archive has all necessary and demo files in ready-to-use order.

The Zip file is built for two methods of installing:

Method 1 - Simplest start for the less experienced or if you want a fully working copy to play around with:

Starting with a clean install (no config.php set yet).
If you are installing to the default folder/directory named pmwiki:
You can simply unzip the file, 'select all' and copy into the same folder as pmwiki.php.
The included demo config.php is designed to work without modification until you want to customize.

If your pmwiki.php file is in a different folder/directory then edit the demo /local/config.php file to match your folder, save and follow the directions above.

in config.php find and change this:
if (!defined('WikiRoot')){ define('WikiRoot', '/pmwiki'); }

Replace the '/pmwiki' with the name of your folder e.g.:
if (!defined('WikiRoot')){ define('WikiRoot', '/mypages'); }

Or if you are on the root: (Not recommended)
if (!defined('WikiRoot')){ define('WikiRoot', ""); }

Or if you are several directories deep:
if (!defined('WikiRoot')){ define('WikiRoot', '/somefolder/someotherfolder/mypages'); }

The complete zip file includes demo pages, GroupBars, NavBars, and Groups as well as images to give you the best feel for how it works.

Once you have copied the files you can start customizing your site as you wish or take what you have learned and:

Method 2 - Existing PMWiki site, or more advanced user:

Unzip the file, locate the pub/skins/steamport file and copy it to your pmwiki installation pub/skins/
Edit your /local/config.php file to use the Steamport skin:

remove or comment this
$Skin = 'pmwiki';
add this
$Skin = 'steamport';

That's the minimum.

For best results you will want to look at the demo /local/config.php file for code to add to your installed config.php file.
The special things to know are:

...pmwiki/pmwiki.php/Main/NavBar?action=edit -- Navigation Menus

...pmwiki/pmwiki.php/Main/SplashBarTitle?action=edit -- Title at the Top of the GroupBar
...pmwiki/pmwiki.php/Main/SplashBar?action=edit -- Area on GroupBar meant for an image or logo
...pmwiki/pmwiki.php/Main/GroupBar?action=edit -- Menu area of GroupBar
...pmwiki/pmwiki.php/Main/GroupBarFooter?action=edit -- Footer for The GroupBar

You will want to do that for every group as you add new ones. don't forget:

Built in Table Row Shading

The steamport.css includes style information to highlight alternating rows on tables and select rows while hovering. This was developed while using the SelectQuery recipe.


Very Basic configuration is done with the START_HERE.css file to set the background images.
The steamport.css file is well organized and commented to help find what you are looking for,
as is the steamport.tmpl template file in case you need to add or tweak anything.
Again, I have included a demo /local/config.php file, with the settings to allow Markup to hide the
SideBar, GroupBar and SearchBar.
Code can easily be added to hide the NavBar unless an authorized user is logged in.


The thresholds for size changes can be adjusted in the CSS file. Currently the right GroupBar hides when
the screen is smaller than 1024 wide. And the left SideBar hides when the sceen gets smaller than 770,
at which point the NavBar appears at the Top and Bottom of the page.

HTML validation: to pass Validation several edits to the PMWiki ver. 2.2.11 are required:

deprecated style type='text/css'

 * in pmwiki.php line 192  	"<style type='text/css'><!--",&$HTMLStylesFmt,"\n--></style>");
 - replaced with		"<style><!--",&$HTMLStylesFmt,"\n--></style>");

 * in scripts/skins.php line 37		    $HTMLHeaderFmt[] = "<link rel='stylesheet' type='text/css' href='$v' />\n";
 - replaced with			    $HTMLHeaderFmt[] = "<link rel='stylesheet' href='$v' />\n";

 * The pmwiki skin needs edits to remove the same text as well.

deprecated <br clear='all' />

 * in scripts/stdmarkup.php			Markup('[[<<]]','inline','/\\[\\[&lt;&lt;\\]\\]/',"<br clear='all' />");
 - replaced with				Markup('[[<<]]','inline','/\\[\\[&lt;&lt;\\]\\]/',"<br/>");
- REQUIRES replacement function in CSS: br.clear { clear: both; }

To do / some day / maybe

If you have future plans or wishes for this recipe.

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

See also

Demo Page available at:
Edit pw is vItqcEh1

Earlier renditions:


Kirk Siqveland.


See discussion at Steamport-Talk?

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

Page last modified on February 19, 2019, at 08:09 AM