Flckr < Skins > Gemini (talk? | users | test page | RWD? | set as default | unset | validate: HTML, CSS)
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.
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.
gfx" subdirectory creates issues when upgrading to a new version of FlexiSkin.local/ doesn't contain them though... maybe the PHP part can take care of that.You can find version information in the file readme.txt which is contained in the ZIP file. Just search for the last history entry...
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';
For PHP 5 - 7, please get flexi72.phpΔ, rename it to flexi.php and replace the original flexi.php with it.
(:notop:)FlexiTop for the actual page
(:nobottom:)FlexiBottom for the actual page
of course standard wiki markup like (:noheader:), (:nofooter:) and (:notitle:) do still work.
Below you find some variables, which could be set in your config.php and allow additional control over this skin:
$FlexiSkin['CSS']flexi.css". This file is just a small example to show the different areas.
$FlexiSkin['Favicon']flexi/favicon.ico". To disable it just clear the string.
$FlexiSkin['FlexiLeft']FlexiLeft. Defaults to "1" (show file)
$FlexiSkin['FlexiRight']FlexiRight. Defaults to "1" (show file)
$FlexiSkin['FlexiHeader']FlexiHeader. Defaults to "1" (show file)
$FlexiSkin['FlexiFooter']FlexiFooter. Defaults to "1" (show file)
$FlexiSkin['FlexiTitle']FlexiTitle. Defaults to "1" (show file)
$FlexiSkin['FlexiTop']FlexiTop. Defaults to "1" (show file)
$FlexiSkin['FlexiBottom']FlexiBottom. Defaults to "1" (show file)
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
Karl Loncarek (Klonk)
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.
favicon.ico with variable $FlexiSkin['Favicon']
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.
**Warning: file(./pub/skins/flexi/flexi.tmpl): failed to open stream: Permission denied in /Path/to/Site/pmwiki/scripts/skins.php on line 94
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)
User notes +4: If you use, used or reviewed "Flexi", you can add your name. These statistics appear in the Skins listings and will help newcomers browsing through the wiki.