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

Steamport Skin

Three-Column Design

Description

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:(:nosearchbar:)(:nogroupbar:)(:nosidebar:)

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 SteamportSkin.zip 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.

Installation

Unzip the SteamportSkin.zip 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 SteamportSkin.zip 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.

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 CustomizationIn 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 SteamportSkin.zip 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:

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:...pmwiki/pmwiki.php/Site/NavBar?action=edit...pmwiki/pmwiki.php/Pmwiki/NavBar?action=edit

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.

Configuration

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.

Notes

The thresholds for size changes can be adjusted in the CSS file. Currently the right GroupBar hides whenthe 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

2019.03.13

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.