FotoSkin

Screen Shot

Tob Bar and Menu Structure

This skin is
sponsored by:

• FotoSkinTopBar - top bar with menu bar, logo and search boxes (replacing WebTopBar), can be cloned and customized per web
• WebTopMenu - bullet list defining menu bar for TWiki web
• FotoSkinDefaultWebTopMenu - bullet list defining menu bar for webs that do not have a WebTopMenu topic
  • FotoSkinHomeMenu - "Home" pulldown menu with web list, included by WebTopMenu
  • FotoSkinTopicMenu - "Topic" pulldown menu with topic actions, included by WebTopMenu

NOTE: The skin is designed to incorporate the "you are here" breadcrumb into the pulldown menus:
"Home" menu => "Web" menu => List of parent topics, if any (shown as "P"s) => Current topic ("View" menu).

Web-specific Menu-Bars

The FotoSkinDefaultWebTopMenu defines the default menu structure used in any web. A WebTopMenu topic in a web can redefine the default menu structure. If the WebTopMenu topic is missing in a web, create one with content of _default.WebTopMenu and customize it. Bullets must be of format [[...][...]] or <a href="...">...</a>, and may not contain any text next to the link.

To preserve the "you are here" breadcrumb, it is important to add additional pulldown menus after the INCLUDE of %SYSTEMWEB%.FotoSkinTopicMenu. The top level menu-bar should have this structure:

• INCLUDE of %SYSTEMWEB%.FotoSkinHomeMenu
• Current Web menu
• INCLUDE of %SYSTEMWEB%.FotoSkinTopicMenu
• Additional pulldown menu(s) as needed (optional)

Example WebTopBar menu structure with additional "Bugs" pulldown menu:

%INCLUDE{%SYSTEMWEB%.FotoSkinHomeMenu}%
   * [[%BASEWEB%.%HOMETOPIC%][<img src="%ICONURL{web-bg}%" border="0" alt="" width="16" height="16" style="background-color:%WEBBGCOLOR%" /> <nop>%MAKETEXT{"[_1] Web" args="%BASEWEB{format="$current"}%"}% %ICON{menu-down}%]]
      * [[%SCRIPTURLPATH{"view"}%/%BASEWEB%/WebCreateNewTopic?topicparent=%BASETOPIC%][ %ICON{"newtopic"}% %MAKETEXT{"Create New Topic"}%]]
      * [[%BASEWEB%.WebTopicList][ %ICON{"index"}% %MAKETEXT{"Index"}%]]
      * [[%BASEWEB%.WebSearch][ %ICON{"searchtopic"}% %MAKETEXT{"Search"}%]]
      * [[%BASEWEB%.WebChanges][ %ICON{"changes"}% %MAKETEXT{"Changes"}%]]
      * [[%BASEWEB%.WebNotify][ %ICON{"notify"}% %MAKETEXT{"Notifications"}%]]
      * [[%BASEWEB%.WebRss][ %ICON{"feed"}% %MAKETEXT{"RSS Feed"}%]]
      * [[%BASEWEB%.WebStatistics][ %ICON{"statistics"}% %MAKETEXT{"Statistics"}%]]
      * [[%BASEWEB%.WebPreferences][ %ICON{"wrench"}% %MAKETEXT{"Preferences"}%]]
%INCLUDE{%SYSTEMWEB%.FotoSkinTopicMenu}%
   * [[BugTracker][%ICON{bug}% Bugs %ICON{menu-down}%]]
      * [[NewReport][Create bug report]]
      * [[OpenBugs][Open bugs]]
      * [[ConfirmedBugs][Confirmed bugs]]
      * [[FixedBugs][Fixed bugs]]

Read-Only Skin Mode

This skin and the PatternSkin support a read-only mode. This is mainly useful if you have TWiki application pages or dashboards where you do not want regular users to change content. The read-only mode is enabled with a READONLYSKINMODE preferences setting set to 1. Details in PatternSkinCustomization#ReadOnlySkinMode.

Use Menu-Bars in Topics

A menu-bar can be added anywhere in a topic:

• Include the "TWiki.FotoSkin" topic - this pulls in the CSS and JavaScript needed for the menu-bar.
• Create a nested bullet list with links:
  • The top level bullets define the menu-bar items. Bullets with/without links are supported.
  • Second level bullets define the pulldown options within a menu-bar item.
    • A second level bullet must contain exactly one link (format [[...][...]] or <a href="...">...</a>) without any text next to the link.
  • Third level bullets are not supported.
• Enclose the bullet list with a <div class="twTopMenuTab"> tag.

Example:

%INCLUDE{"%SYSTEMWEB%.FotoSkin"}%
<div class="twTopMenuTab">
   * [[WebHome][%ICON{home}% Home %ICON{menu-down}%]]
      * [[WebNotify][Subscribe]]
      * [[WebStatistics][Statistics]]
   * [[WebSearch][%ICON{searchtopic}% Search %ICON{menu-down}%]]
      * [[WebSearchAdvanced][Advanced search]]
      * [[SearchHelp][Search help]]
</div>

Renders as:

NOTE: The pulldown menus only work if the TWiki:Plugins/JQueryPlugin is installed and enabled.

CSS and JavaScript

This section defines the CSS and JavaScript used by the FotoSkin; View Raw to see the source. Some additional CSS is defined in templates/vewi.topmenu.tmpl

Installation

Note: You do not need to install anything on the browser to use this skin. The following instructions are for the administrator who installs the skin on the server where TWiki is running.

• Download the ZIP file from the Skin homepage (see below)
• Unzip FotoSkin.zip in your twiki installation directory
• Install TWiki:Plugins/JQueryPlugin and enable it using configure (if not done already)
• To turn on the skin, write in Main.TWikiPreferences:
  * Set SKIN = foto, pattern
• Test if installed
• Note on upgrading existing TWiki:
  • See Web-specific Menu-Bars above on how to retrofit and customize menu-bars.
• Note on using this skin on TWiki 4.2 and 4.3:
  • This skin depends on TWiki 5.0 specific feature %WEB{format="$current"}% to show the current web in the Web menu. To use this skin on TWiki 4.2 or 4.3, remove the parameter from the WEB variable (to show only %WEB%), or apply patch TWikibug:Item6424 (to add the format parameter feature).
  • This skin depends on TWiki 5.0 specific feature %ADDTOHEAD{}% to add style sheets to the HTML head section. Apply patch TWiki:Support.SID-01117 to inline style sheets.
  • Apply patch TWikibug:Item6430 so that Edit and Attach buttons point to the current topic instead of FotoSkinTopBar.
  • Apply patch TWikibug:Item6438 so that breadcrumb links point to the current web instead of the TWiki web.
  • Attach to TWikiDocGraphics.
  • Attach to TWikiDocGraphics.
  • If you have more than 30 webs, apply TWikibug:Item6429 to limit the number of webs shown in the "Home" menu.

Creating your own look

This skin is based on PatternSkin, and the same rules for customization apply.

The FotoSkin disables the sidebar and activates a different top bar in twiki/templates/view.foto.tmpl. Details in PatternSkinCustomization and PatternSkinCssCookbook.

The top bar FotoSkinTopBar (with menu bar, logo and search boxes) can be cloned using same topic name and customized per web.

Skin Info

• Set SHORTDESCRIPTION = Skin with pulldown menus in top bar

Skin Author:	TWiki:Main.MariuszTwardowski
Copyright:	© 2010-2011, TWiki:Main.MariuszTwardowski, Fotogrametria AGH © 2010-2011 TWiki:TWiki.TWikiContributor
License:	GPL (GNU General Public License)
Description:	Fotogrametria skin
Screenshot:
Preview:	Preview with this topic
Base Name:	foto,pattern
Skin Version:	2011-01-16
Change History:
Dependencies:	TWiki 4.2 or later; TWiki:Plugins/PatternSkin; TWiki:Plugins/JQueryPlugin
Skin Home:	http://TWiki.org/cgi-bin/view/Plugins/FotoSkin
Feedback:	http://TWiki.org/cgi-bin/view/Plugins/FotoSkinDev
Appraisal:	http://TWiki.org/cgi-bin/view/Plugins/FotoSkinAppraisal

Related topics: FotoSkinDefaultWebTopMenu, FotoSkinHomeMenu, FotoSkinTopBar, FotoSkinTopicMenu, WebTopMenu, _default.WebTopMenu, Main.WebTopMenu, Sandbox.WebTopMenu, Trash.WebTopMenu, TWikiSkins, TWikiSkinBrowser, UserDocumentationCategory, AdminDocumentationCategory