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

Three-Column Design


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 code allows for the hiding of the SideBar, GroupBar and SearchBar with simple markup:

This works as a pure HTML and CSS skin.
(a steamport.js file is included which starts the hourglass/loading pointer while a page is loading, and serves as the place to add any new script code.)

Especially developed for use with Groups:

  • the right side-bar "GroupBar" changes according to Group, allowing for special Title, Navigation and Images.
  • The Page Commands appear on a horizontal bar,
  • as does a Navigation bar (when the view-screen is small enough).
  • Demo elements included in file include a working config.php file, Navigation and Group bars, and a detail page about the Steamport skin.

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

Responsive Design


2019.03.13 - Updated files:

Unzip the file to its SteamportSkin 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 of PMWiki (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 this:
if (!defined('WikiRoot')){ define('WikiRoot', '/pmwiki'); }

and change it to the location of your pmwiki.php file.
Just replace the '/pmwiki' with the name of your folder e.g.:
if (!defined('WikiRoot')){ define('WikiRoot', '/mypages'); }

Or if you are on the root make it blank: (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.

Simple Customization
In the pub/skins/steamport directory you will find a file named:
START_HERE.css If you use this file to customize the skin, code here over-rides other code allowing you to return to a working version by just removing the file.

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 once you have installed the Skin, in order to customize your, site 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.

To make customizing things simpler, anything added to START_HERE.css will override code in steamports.css. In other words, to change a color all you have to do is add the css to START_HERE.css, you never need to change the steamport.css; this makes it easy to be sure you have a fully working base code to fall-back on.


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.

To do / some day / maybe

  • Add js to allow row selection/highlighting - Currently has hover highlighting but not selection.

If you have future plans or wishes for this recipe.

Change log / Release notes


  • Moved hide-elements code to steamport.php
  • Added/changed code to improve machine-readability and current php/html/css compatabilitiy
  • GroupBar, if not yet defined for a Group defaults to Site.GroupBar etc.
  • Added curved effect to Footer Bar


  • Added Search-moves-to-footer during responsive resizing
  • Added CSS for page print
  • Improved Responsive layout - element alignment
  • Included notes on HTML validation
  • Removed .htaccess file - Causes editing problems. Better to just rely on config.php


  • Modified to accommodate very long SideBar menus.
  • ( I prefer to use collapsing menus and/or dynamic Group menus... but this works for both.)
  • To keep things interesting the WikiLogo now 'floats' or rather stays in place while you scroll.
  • Cleaned up a few alignment issues on different browsers.

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 March 20, 2019, at 04:28 AM

This is the Skins.Steamport-GroupBar
used by Steamport

Use this for
Group Specific

Group- Customizations