Fix Flow Skin

(:showright:)see also: FixFlow Tips  -  FixFlowSkin-Comments << | Index | >>

Summary: Highly configurable skin with many color-schemes, plus optional RightBar, plus fixed or flowing SideBar, on left or right Status: Stable Version: 2007-03-05 Prerequisites: pmwiki-2.1.17 Maintainer: Hans Categories: Skins Download: Attach:fixflow.zip Δ

Overview

  • FixFlow grew out of my desire to create a skin with a fixed sidebar menu (which does not scroll with the content of the page), for all who like small compact sidemenus and use a small logo.
    FixFlow is a skin similar in look to the GeminiTwo Skin, it is build on the same modular css design, and is highly configurable. But the template does not use tables and is entirely css based, and the page content appears before the menu content in the html output.

Details

I realise that on pmwiki.org the sidebar is very long and therefore to fix it is not too sensible, but it is done here for demonstration. It is possible to attach links to the Sidebar to switch from fixed to scrolling menu, but I did not want to do this here since these links have no meaning for other skins, and I cannot show them conditionally only for the FixFlow skin, because it needs a general "if enabled" condition defined, which is not the case on pmwiki.org. See FixFlowTips on how to do this.
  • FixFlow does not use a window wide header or footer, and a logo should fit into the width of the sidebar, perhaps not wider than 150px.
  • FixFlow is designed to co-exist with GeminiTwo, it uses the same css modules for color schemes and fonts. You could view it just as a slighly different layout, but its entirely css based structure makes it rather different. It shares with GeminiTwo also the pages Site.PageTopMenu and Site.PageFootMenu and their group equivalents for configuring the action links, as well as Site.PageFooter for any footer info and (optional) Site.PageHeader? for header info, like logo.
  • FixFlow can like GeminiTwo display a RightBar, which is just another wiki page displayed inside the page content area, with the page content flowing around it. Rightbar is not displayed by default. Enable with markup (:showright:), or edit skin.php to change SetTmplDisplay('PageRightFmt', 0) from 0 to 1, and then dispable with markup (:noright:) as appropriate. (Read more about it at Gemini Skin). When the Sidebar is right it can still be disabled with markup (:noleft:) and the rightbar with (:noright:), i.e. the markup terms left and right are not reversed.)
  • With version 3a an individual RightBar can be assigned to each page, by creating a page with the name Group.Pagename-RightBar, i.e. "-RightBar" is appended to the page name to form a new page.
  • Here are the various style options to try. Each is set via a cookie. This can be easily disabled and different defaults choosen in the file skin.php. The preferred scheme for a user is remembered via a cookie setting. To change the default see FixFlowTips. Try out different schemes here from the right bar:
  • A theme markup: (:theme colorname fontname:) has been added, which gives the possibility to display individual pages, or groups, with their own colour and font schemes via markup. See Test.GeminiThemes?.
  • Site.Gemini-EditForm provides a skin-customised edit form, which is maximised for easier work, also the title displayed acts as a link back to the page view, since the normal title has been excluded. Same modifications are done to the history window and the uploads window via code in the skin.php file. The uploads form has been changed too to give a long input box for the file selection, since I never could read the name of the file to be uploaded in the default box.
  • New: Site.Popup-EditForm as default edit form: As Gemini-EditForm, but with additional popup preview and help panes. No more scrolling down to see the preview. This uses ShowHide? buttons with javascript. For browsers not supporting javascript the edit window behaves as normal. As the skin includes a version of showhide.php, older versions of showhide.php installed in the cookbook/ should be uninstalled. The new version of showhide.php is now smart enough to be detected by the skin, so the skin will not load the script if already installed.
  • The SideBar supports the use of second level list elements, which are indented from the first level. See Expanding Menus for details how this can be used and see the sidebar there as demonstration. Pmwiki.org's sidebar causes a few problems since it uses in some places two links on the same line. Gemini always puts each link on a separate line, and puts any text after a link on a separate line as well. So it is good to write your sidebar menu accordingly.
  • New: Built-in fontsizer for easy text sizing, preferences are saved via cookie setting. The fontsizer buttons are by default displayed on the sidebar, but can be disabled and located anywhere with markup (:fontsizer:). If a browser does not support javascript the buttons will not be shown and this function will not be available.

Browser Compatibility

This is an incomplete listing of the browsers which have been seen working with this skin.
Please add.

Windows:
  • Works with Firefox 2, Firefox 1, IE7, IE6, Netscape 7, Opera 7, Mozilla 1.7.3, IE5.5, IE5.0
Mac:
  • Works with Safari, Firefox 2, Firefox 1, Netscape 6, IE5.1 Mac classic, IE5.2 OSX
Linux:
  • Works with Firefox 1, Konqueror, Opera 8

Comments & Discussion: see FixFlowSkin-Comments

Installation

Detailed installation instructions are enclosed in the zip file.
Install in the usual way by unzipping into skin directory. A directory named fixflow will be created with all the files. Upload this including its subfolders, and add to config.php: $Skin = 'fixflow';

Update history

  • 2007-03-05: Fixed (:theme :) markup, broken since introducing new css load order (2006-11-03).
  • 2007-02-17: Fixed bug in page header displaying two logo images by default. PageHeader is now always used.
  • 2007-01-27: Fixed ordered list styling when part of an unordered list. Changed {$LastModified} in PageFootMenu to {*$LastModified} for pmwiki beta 2.2.0 compliance. Removed spurious hidden field from searchbox.
  • 2006-12-07: More improvements of Popup-EditForm and the way it is called.
  • 2006-12-06: Fixed small bug in conditional in Site.Popup-EditForm. Removed #content .inputbox {width:..}. Fixed background images in some colour css files.
  • 2006-11-25: Added global variables $HTMLTitleFmt, $GroupTitleFmt, $TitleFmt. Fixed bug in searchbox, which prevented IE to clear searchbox when focussed. Removed show/hide preview button with no label in Popup-EditForm.
  • 2006-11-20: Added support for Cookbook:GroupTitle recipe, to display GroupTitle as link in titlebar.
  • 2006-11-11: Added variables to switch off user options individually for the different types of options (colors, fonts, rightbar-width, sidebar position, menu scroll/fixed) to give more admin control via config.php or other local configuration files.
  • 2006-11-03: Major rewrite of skin core. New improved load order for css files. Support for pmwiki-core.css file. Reduced code in page head and body. New improved technique for IE5 and IE6 to simulate fixed sidebar with just one css file for IE. IE7 support. Css code tidy up. Sidebar width can be set with variable. Fixed bug in fontsizer script which did not display fontsizer buttons on first site visit, but only on subsequent page loads.
  • 2006-10-28: Added $RecipeInfo
  • 2006-10-05: Changed edit (and other) links to work with relative urls in PmWiki 2.2.0-betas, added backward compatibility for with prior versions
  • 2006-09-02: Added SideBarFooter page to replace skin version info. Added page variables SkinName, SkinVersionDate, SkinVersionNum, SkinVersion (SkinName and SkinDate), SkinRecipeName, SkinSourceUrl. Added access keys to fontsizer.
  • 2006-08-31: Some template changes regards to javascript employed for sizing width and sidebar height.
  • 2006-08-28: Template now uses HTMLHeader and HTMLFooter, also added var $BodyAttrFmt to <body> tag. Please upgrade your pmwiki to version later than 2.1.17!
  • 2006-08-21: Improved cookie settings.
  • 2006-08-19: Added support for .lnav and .rnav div classes for top menu (left and right floating like Triad skin). Fixed bug so showhide will not load if already loaded from cookbook.
  • 2006-06-25: Fixed bug in layout-print.css to hide sidebar when printing etc.
  • 2006-06-02: Fixed upload form for IE. Corrected StyleOptions page.
  • 2006-05-03: Added savedraft button to edit form.
  • 2006-04-28: Removed onkeypress event from fontsizer.js, which interfered with tab navigation.
  • 2006-04-09: Fixed body font size for verdana font css.
  • 2006-04-08: Changed custom searchbox to accept optional target= parameter for displaying search results on a specific target=GroupName.PageName page.
  • 2006-04-07: Fixed a few development left-overs. Changed link on Site.Gemini-Configuration page from Site.Gemini-EditForm to Site.Popup-EditForm?.
  • 2006-03-27: Updated README text file.
  • Version 5.3 (24 March 2006): Fixed bug in upload form alignment, change to upload form spacings. Fixed bug in pagetop menu which jerked the menu to the right a little when clicking on an item.
  • Version 5 (22 March 2006): Major new release for pmwiki 2.1. Updated searchbox. Added new full-width edit window with popup preview and help panes, using ShowHide? and Popup EditForm?. Added font-sizer buttons for easy text sizing. Added color support for full CommentBoxPlus? integration. Updated font styling, especially vertical header spacings. Updated cookie setting to make it fully skin-specific. Added horizontal double rule markup ====. Added support for (:noaction:), which combines (:notopmenu:) and (:nofootmenu:).
  • Version 4b (26 November 05): Fixed bug in Firefox which placed cursor in sidebar searchbox too far left. This is same as version 3g, but I thought that Firefox was mended, and removed the fix. Turns out Firefox is still buggy and needs this fix.
  • Version 4a (24 October 05): Fixed bug which prevented correct background in IE with scrollling menu. Adjusted internationalisations in config files. Corrected some colour problems in reverse colour schemes (night and stars).
  • Version 4.03 (5 September 05): Small Firefox bug fix for pixel correct styling: changed line-height in font css files to use % rather than em units.
  • Version 4.02 (3 September 05): Adjusted rightbar header sizes. Fixed topnav display to show left when sidebar is on the right.
  • Version 4.01 (2 September 05): Corrected right sidebar header height.
  • Version 4 (2 September 05): Added Georgia font scheme for a better readable serif font. Added support for %sidehead% SideBar headings. Small revision of spacings and font colours in the sidebar. Added support pages GeminiTips and an "About" page linked from the sidebar footer. Revised Gemini-EditForm to use styling of buttons.
  • Version 3m (19 August 05): Removed some empty spaces in SearchBoxFmt code, which lead to <p> or <pre> tags around the searchbox html code.
  • Version 3l (18 August 05): Bug fix in searchbox, which crept into v3i.
  • Version 3k (18 August 05): Added style support for newpagebox2.php. Revised heading styling. Changed title to use <h1> tags. Fixed bug which prevented individual righbars to show if no general rightbar was present.
  • Version 3i (14 August 05): Corrected bug with sidebar searchbox. Mended link in Site.Gemini-EditForm. Improved silver scheme.
  • Version 3h (15 August 05): Added style support for all header sizes in sidebar. Adjusted some font sizes and title layout.
  • Version 3g (9 August 05): Added (:theme:) markup. Added 'silver' colour scheme. Added automatic installation of skin config pages. Fixed Firefox bug which showed a lagging behind cursor in the sidebar searchbox when the menu position was fixed. Updated all colour and font css files. Rightbar background & border styling now inside each color css file. Removed parch-red colour scheme.
  • Version 3f (16 July 05): Removed PageEditFmt definition, edit form can now be changed by editing Site.EditForm. Sample Editform included with the skin. Removed altforms.php and moved some of its code to skin.php.
  • Version 3e (13 July 05): Further adjustments to pmwiki 2 beta 44 release. Site.Search is now supported instead of Main.SearchWiki. Missing Searchbox button text repaired. Update to documentation. Support for a Pagename-TitleBar page added, which willl display instead of the standard title, for displaying titles in form of images of special fonts.
  • Version 3d (10 July 05): Adjustments to pmwiki 2 beta 44 release.
  • Version 3c (5 July 05): Small correction in template, improved README and wiki.d support pages.
  • Version 3b (29 June 05): Added stylesheet for print support, pages can now be printed directly without needing first to open Print View.
  • Version 3a (25 June 05): Added support for unique RightBar pages for individual pages of the form Pagename-RightBar. Introduced $SiteGroup as variable for the admin group in the template. Updated README and set up skin to use default 'Site' group for admin pages (from previous PmWikiAdmin). Fixed bug which prevented Rightbar background to show at times when used first time. Fixed bug which showed PageHeader content as well as logo specified with $PageLogoUrl.
  • Version 3 (15 June 05): Greatly enhanced support for IE6, and improved IE6 layout, by changing the core css elements for IE6 and using javascript to adjust the width of the main division. It will work also without javascript being enabled, but it will look a lot better with it. Added support for IE5.5. Corrected a bug which showed a horizontal scrollbar in Opera (7.5).
  • Version 2d (15 June 05): Added support for Internet Explorer 5.5. Changed css code for links in PageFootMenu. Links can be now either list items, which will display as buttons, or simple links, which will display inline as underlined links (good for creating a discret edit link without the highly visible buttons).
  • Version 2c (15 May 05): Restored logo display via $PageLogoUrl definition in config.php. Logo thus defined will display, unless a PageHeader page exists (in PmWikiAdmin, Main or the current group).
  • Version 2a (7 May 05): A change in the way the defaults are declared in skin.php. It is now possible to set new defaults in config.php (or a group's GroupName.php file for instance to set different colours to different groups)
  • Version 2 (5 May 05): This is a major upgrade and requires some reconfigurations. Brief summery:
    • Added inclusion of PmWikiAdmin.PageHeader for configuration of logo or wiki title text. This replaces the logo inclusion via config.php and skin-template markup.
    • The other configuration pages (PageTopMenu, PageFootMenu, `Pagefooter) can be placed also in the new PmWikiAdmin group.
    • Added nine more colour schemes, some with textured backgrounds.
    • Some parts of the template, skin.php and css code redesigned to provide more configuration options and different skin stylings.
    • Sidebar redesign with better line(rule) support, and restyled searchbox.
    • Sidebar searchbox can be disabled with switch in skin.php, or added at different locations with markup (:searchbox:).
    • Group name in titlebar can be disabled for all pages with switch in skin.php, or disabled on individual pages or groups with custom markup (:nogroup:).
    • skin.php rewritten for easier setting of options, and more commentaries added.
    • Many files renamed and image folder added.- It is best to update to this version by deleting previous files, or renaming previous skin directory first.
  • version 1b 20-03-05: Added css layout support for Internet Explorer 5. Works now with IE5.5
  • version 1a- 20-03-05: Fixed bug to eliminate horizontal scrollbars when window gets narrower. Horizontal scrollbars will only appear when text lines go outside the window width.

Contributors

HansB?


Category: Skins