Cookbook

PmWiki

pmwiki.org


Flckr < Skins > Gemini   (talk? | users | test page | RWD? | set as default | unset | validate: HTML, CSS)

Summary: Extremly flexible skin; created to make final design via CSS; All contents through separate wiki documents
Version: (14-Oct-2015)
Prerequisites: None
Status: Active
Maintainer: Klonk
Categories: Skins
Download: flexi.zipΔ
License:
Users: +4 (View / Edit)

edit page

About

Category: Skins

I created this skin with flexibility in mind. Therefore there is no fixed text or edit link within the .tmpl file. Also no tables were used. All elements are built using DIVs. Design and layout is only done through a (selectable) CSS file. Therefore everything is possible. You could see it almost as skinable Skin. See http://www.csszengarden.com for examples if you need ideas for your own layout. There you can see what is possible with the same HTML code and just with use of different CSS files.

Due to this flexibility this skin requires some knowledge about CSS to get the desired results. But there are some good webpages out there describing CSS and the command. A very good page in german language could be found at http://de.selfhtml.org.

The special thing on this skin is that all the displayed header, footer etc. are created from special wiki pages. The only things that are predefined are the anchors "Topp" and "Bottomm" which are located directly before and after the wikitext (for fast jumping to the beginning or end of the document). Also available is the anchor "BodyTopp" which allows easy jumping directly to the beginning of the page.

If you want to have an e.g. last modified information at the end, well, then just place {*$LastModified} in the file FlexiFooter. If you want to use menus take a look at HorizontalVerticalMenu and HorizontalMenu.

By default there are also no edit, history etc. links available. Just edit e.g. FlexiRight and add something like [[{*$Name}?action=edit|edit page]]

As you can see this skin could be perfectly used as starting point for own skins or highly individual pages. Well this is the real reason for this skin. I was asked to create a web site and just didn't want to invent the wheel again.

Internals

All wiki pages that may contain any content are located within DIVs with the pagename as ID. The whole page is written within an overall DIV with ID FlexiAll and the current action as CLASS. Available actions are e.g. "browse", "edit", "attr", "diff", "upload", "print" etc. See pmwiki.php for more. With this the current action is handed through to the CSS file.

The wiki pages could be in the Group Site oder the actual SiteGroup or in the actual group. Due to the possibility to select the used CSS file within the config.php even each group/page could have a totally unique layout.

For compatibility reasons Site.SideBar is displayed when no FlexLeft exists. First is checked whether one of the below files exists for the actual group, then it is displayed. If it does not exist, the file in the defaultgroup is displayed. And if this does not exist also the file in the Site group is displayed.

Files used are:

  • FlexiTop
  • FlexiBottom
  • FlexiLeft
  • FlexiRight
  • FlexiHeader
  • FlexiFooter
  • FlexiTitle

In the CSS file you can refer to the separate files via e.g. "#FlexiTop {some properties}". You can access the main area in which the wikitext is displayed with "#FlexiMain". Every DIV has also the actual action as class which could be accessed and used for e.g. tabs (e.g ".edit" for special display when editing the actual file)

The name of the files show the intended use of the DIV (e.g. FlexiLeft to be displayed at the left side), but of course you can place it on the screen whereever you want (using appropriate CSS settings). If you use own graphics with your own CSS file, you should place them in the subdirectory "gfx" within the flexi skin directory.

It would be better if the images were taken from "local". Changing the "gfx" subdirectory creates issues when upgrading to a new version of FlexiSkin.
I have no good idea how to make sure that the default images from the skin installation directory are used if local/ doesn't contain them though... maybe the PHP part can take care of that.
Joachim Durchholz March 30, 2005, at 05:32 AM
No, you should use a subdirectory of the skins directory. This allows usage of relative paths to the graphics from within the CSS file. Placing the graphics (e.g. background graphics) in the "local" directory does not give any advantage. And if you use graphics as part of your wiki then it should be uploaded to "uploads". BTW: I don't plan too much updates as it is already extremly flexible and everyone can create his own custom layout from this skin. It's more like a framework. For customization youonly have to create a new CSS file. - Klonk

Download

You can find version information in the file readme.txt which is contained in the ZIP file. Just search for the last history entry...

Installation

Copy the content of the above ZIP-file to /path/to/pmwiki/pub/skins/ and add the following code to your local configuration file:

  $Skin = 'flexi';

If you also want to use the different print layout you also have to add:

  $ActionSkin['print'] = 'flexi';

Available additional markup

(:notop:)
hide file FlexiTop for the actual page
(:nobottom:)
hide file FlexiBottom for the actual page

of course standard wiki markup like (:noheader:), (:nofooter:) and (:notitle:) do still work.

Extended functionality

Below you find some variables, which could be set in your config.php and allow additional control over this skin:

$FlexiSkin['CSS']
allows setting an own CSS file for your wiki/group/page. Default is "flexi.css". This file is just a small example to show the different areas.
$FlexiSkin['Favicon']
allows setting an own page icon which is displayed e.g. in your bookmarks. (Place it in the subdirectory "gfx" Defaults to "flexi/favicon.ico". To disable it just clear the string.
$FlexiSkin['FlexiLeft']
allows disabling display of the file FlexiLeft. Defaults to "1" (show file)
$FlexiSkin['FlexiRight']
allows disabling display of the file FlexiRight. Defaults to "1" (show file)
$FlexiSkin['FlexiHeader']
allows disabling display of the file FlexiHeader. Defaults to "1" (show file)
$FlexiSkin['FlexiFooter']
allows disabling display of the file FlexiFooter. Defaults to "1" (show file)
$FlexiSkin['FlexiTitle']
allows disabling display of the file FlexiTitle. Defaults to "1" (show file)
$FlexiSkin['FlexiTop']
allows disabling display of the file FlexiTop. Defaults to "1" (show file)
$FlexiSkin['FlexiBottom']
allows disabling display of the file FlexiBottom. Defaults to "1" (show file)

Hints

Of course to get an identical look in IE and Gecko based browser lies totally in your responsibility. The provided example gives the same display in IE and FireFox.

If you don't want a totally different look than provided by the sample CSS file it is a good idea to position FlexiLeft and FlexiRight absolutely.

As you can see on this page the default configuration displays some text as background for every area. This should help you identifying the positions of each area. Just remove the "background:url..." from the CSS file when you don't need then anymore.

You have to

Contributor

Karl Loncarek (Klonk)

History

  • 2005-02-12 First version, just .TMPL file and additional functionality provided. No CSS file yet.
  • 2005-02-14 Added flexi.css as sample and for showing the available areas. Fixed minor bug in flexi.tmpl file. This CSS file could still be improved, but here it works as a showcase.
  • 2005-02-17 Added posibility to set own favicon.ico with variable $FlexiSkin['Favicon']
  • 2005-02-24 updated to use new SetTmplDisplay function in PmWiki 2.0beta22
  • 2005-03-04 Added anchor "BodyTopp" for easy jumping to the Top of the page
  • 2005-07-11 Reflects now changes introduced in PmWiki 2.0beta45
  • 2006-06-06 Changed $Action in the .tmpl file to $ActionTitle Klonk
  • 2010-03-05 Fixed some compatibility problems Klonk
  • 2015-10-14 Changed markup, so no "deprecated" error messages occur anymore Klonk

Alternative CSS and graphics

If you want to share your own CSS file and graphics you used for this skin just feel free to add it here. You can also add your Flexi... files if you like.

  • flexi_dropdown.zipΔ - This is just a quick hack of mine to mimic the DropDownSkin. It's not perfect, but you can see that even the tabs work (just with the right CSS properties).

Known issues

  • If you want to integrate a logo image you have to place it in some other editable area (e.g. FlexiLeft) and position it absolutely

Question

  • Thanks for a very nice and configurable skin. It is a great base for develloping my own skin. But now I have a question: Is there a way to display the "FlexiBottom-page" only when the user is logged-in? (I have Editing password protected, using the default PmWiki passwords) Han, 24 april at 18.38 CEST
    • You should take a look at PmWiki/ConditionalMarkup . - Klonk
  • I'm struggling with a problem that occurs whenever the height of FlexiTitle + FlexiHeader + FlexiMain + FlexiFooter is less than that of FlexiLeft - you can see what happens when you edit this page, FlexiBottom 'rides up' and overlaps with the menu. Is there some elegant CSS way to specify that FlexiMain should expand so that FlexiFooter is bottom-aligned with FlexiLeft? I don't like the idea of using a fixed value for min-height, since that depends on FlexiLeft not changing. -shi
    • I've had some measure of success hacking the skin (at least without FlexiRight) to do this, based on the concept presented here -shi
    • As this skin is intended to be controlled fully by CSS there is no real way that is compatible with all browsers. There is a CSS property "min-height" which is suitable for your problem, but IE does not know this property. This problems happens because FlexiLeft and FlexiRight are positioned absolute. Thus everything that is below is overlapped. The only way to solve this so it works on all browser is to add some (invisible) content at the end of your text to get the area FlexiMain that high or you could define a left margin for FlexiBottom (same as FlexiMain) - Klonk
    • What about this solution? I tested it with FlexiRight disabled. FlexiBottom goes under the highest element between FlexiMain or FlexiLeft. Maybe not optimal but seems to be working - Cedric.
      • Position FlexiLeft as position:relative
      • Remove the margin-left:22% element on FlexiMain
      • Set FlexiLeft as float:left and FlexiMain as float:right
      • Set FlexiBottom as clear:both
  • I'm getting errors pointing to line94 for skin.php when I try to load FlexiSkin. How should I troubleshoot these (I am testing on a standalone - "OS X" apache - where I should have full permissions) Pico August 19, 2006, at 09:16 AM

**Warning: file(./pub/skins/flexi/flexi.tmpl): failed to open stream: Permission denied in /Path/to/Site/pmwiki/scripts/skins.php on line 94

Warning: implode(): Bad arguments. in /Path/to/Site/pmwiki/scripts/skins.php on line 94
Warning: Cannot modify header information - headers already sent by (output started at /Path/to/Sitepmwiki/scripts/skins.php:94) in /Path/to/Site/pmwiki/pmwiki.php on line 870
  • I've gotten the same thing under the same circumstances. Try chmod 777 on everything. If there's a way to make it recursive, do it. That should solve the problem, though it is of course a bad idea on an actual server.
  • Unfortunately (:notop:) and (:nobottom:) don't work – PHP5.6, PmWiki 2.2.86. I've changed line 30 through 31 in flexi.php:
     Markup_e('notop','directives','/\\(:notop:\\)/i',"SetTmplDisplay('PageTopFmt',0)");
     Markup_e('nobottom','directives','/\\(:nobottom:\\)/i',"SetTmplDisplay('PageBottomFmt',0)");
     //Note: There was an additional typo: (''PageBottomFmt',0)
    
And I am happy now. mfwolff? May 26, 2016, at 02:25 PM Translater for german pages since 2010

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