FixedLeft Theme

The fixedleft theme features a left sidebar that does not scroll off the display. The right side displays the wiki page content. One of the problems with sidebar themes is the amount of display space that is wasted when when the sidebar scrolls off of the display. Fixed position sidebars solve that problem by keeping the wiki navigation controls always on your display for instant access.

An optional theme, fixedleftmanager, has a default configuration that copies the Icon Bar from the old Classic theme. Several icons for commonly used actions have been added. Access to all page actions is achieved by adding a More Actions icon that links to actions=PageActions. Use of the Icon Bar eliminates the need for the Page Actions and More Actions panels and reduces the height of the sidebar.

The edit page has a fixed left sidebar so the save button and text editor hints are always in view.

The edit page creation is not part of the theme mechanism and is not easy to modify. The normal edit form including edit buttons and editor help are written but hidden by CSS rules. These are replaced with hyperlinks and abbreviated editor hints located in the left sidebar. Clicking on an Editor Controls hyperlink triggers a Javascript function that will click the corresponding hidden form button control. One FCK Editor Javascript function is overridden to make a toggle button for Gui/Text Mode visible if the FCK Editor is available to the current user.

Flexing the Sidebar

Sometimes you may be working on a netbook with a small monitor or need to have several windows displayed at once on your large monitor. In this case, the sidebar will consume a large percentage of the display. A solution is to change the sidebar to a smaller size. The sidebar is comprised of a stack of panels arranged in a column under the site logo and name. The panels are formed by a two-level set of unordered lists (the form under the "Search Wiki" panel is an exception).

Each panel can be individually collapsed or expanded by clicking on the heading. Individual panels can be dragged to a new position in the stack. The right side of the sidebar can be moved left or right by dragging the double-line border. Shown below, some panels have been collapsed and others remain expanded. The "Page Contents" panel is about to be dropped at the top of the stack.

Fixed in the upper right corner of the sidebar is a hide icon. Clicking the hide icon hides the entire sidebar. Instead of the sidebar, a show icon and a menu icon are displayed in the top of the left margin.

Changing the sidebar creates up to three fixedleft theme cookies that are checked by a Javascript functions during page load -- after the sidebar is changed, all subsequent wiki pages will reflect the changes. One cookie contains the panel sequence and collapsed/expanded state of the view page. A second cookie contains the panel sequence and collapsed/expanded state of the edit page. The third cookie contains the show/hide status of the sidebar and the width of the sidebar.

All browsers (except IE6) will show a menu icon just below the show icon in the left margin. Rolling the mouse over the menu icon will display a sideways drop down menu with all the wiki navigation controls (except the search panel). When a page is in edit mode, the sideways drop down menu will display the edit controls.

Edit Log Comments

If you forget to enter a comment for the edit log, a reminder will appear. If you do not wish to enter a comment, just hit the enter button or click the OK button. Clicking the Cancel button cancels the page save.

Page Comments

If the page has comments, the Comments hyperlink under Page Actions will show the current display state and number of comments. When the comments are displayed, the first line or 50 characters of each comment are displayed as a list. Clicking on the comment will scroll the page to the comment.

The display of page comments are initially on or off based upon the user preference option Show comment sections. To create a comment on a page:

/* Example comment */

Sortable Tables

Support for sortable tables is included. To Use, add a <tableclass="sortable"> to your table definition like this:

||<tableclass="sortable">Head1||Head2||Head3||
||1||2||3||
||2||3||1||
||3||2||1||
||1||aaa||BBB||

Tables with sortable headings are colored blue. Clicking on a heading cell sorts the table and adds a sort sequence indicator to the cell (clicking on the example below does nothing because it is an image, not a table).

Classic Theme Icon Bar

Themes can be configured with an icon bar similar to that used in the Classic Theme. The icon bar may be configured with any or all of 15 actions. Configuration hints are in the wikiconfigSamples.py file.

Google Search

If your wiki is indexed by the Google bot, you can add a Google search button by adding a variable to wikiconfig.py defining the root url of your wiki:

    searchGoogle = 'www.myorg.org/mywiki'

Browser Testing

The above was tested with Firefox, IE8, IE7, Safari for Windows, Google Chrome, and Opera. Firefox, Safari, and Chrome work well. IE8 works well when running in IE8 mode.

IE7, IE8 running in IE7 compatibility mode, and Opera 10.54 do not allow the width of the sidebar to be changed when there is a vertical scrollbar for the sidebar.

IE7 sometimes does not allow the sidebar border to be grabbed and moved. IE7 does not support the CSS :before selector used to display the show/hide icons to the left of the sidebar headings. IE7 does not display the sideways drop down menus correctly. Whenever the sidebar has a vertical scrollbar, IE7 loops and consumes 100% of one processor -- no performance degradation was noticeable.

IE6 was not tested, but will surely have all the problems of IE7 plus several more. Use of this theme with IE6, IE7 or IE8 running in IE7 compatibility mode is not recommended.

Changes

• 2010-08-12
  • Fixed Javascript bug in saving edit log comments in comment field.
  • Replaced dubious sorttable initialization code with jQuery.

  • CSS changes to make IE6 & 7 work slightly better.

  • Removed underscore from CSS name.
  • Improved comments in wikiconfigSamples.
  • Update jQuery and jQueryUI to newer versions.
• 2010-07-01 Changes
  • Expanded functionality of Icon Bar to access all page actions.
  • Added option to search site using Google.
  • Moin Javascript functions that disable/enable the search buttons are not used.
• 2010-06-14 Changes
  • Sidebar contains links to individual comments.
  • Replaced +/- list expand/shrink icons with triangle versions.
  • Classic theme style Icon Bar added.
  • If Table Of Contents follows H1 heading, it will be floated to right.
  • Colors for links and visited links changed to higher contrast colors.
  • Visited links in CMS sidebar are color-highlighted.
• 2010-03-15 Fixes and enhancements
  • Added a "Page Contents" panel to sidebar
  • Individual sidebar panels can be collapsed/expanded
  • Sidebar panels can be moved by dragging up or down
  • Width of sidebar can be adjusted by dragging right border
    • Maximum sidebar page name length increased to 50
  • Administrators can customize sidebar by adding variables to wikiconfig.py or farmconfig.py
    • Multiple sub-themes are possible with different combinations of sidebar panels
  • Swapped +/- on Comments link to standard usage, was reversed
  • Clicking Cancel button on "forgot edit log comment" popup cancels save
  • Nicer icons for show sidebar/hide sidebar
  • Popups for More Actions and Search removed - was too ugly
  • More Actions promoted to separate sidebar panel
    • Separators and disabled options suppressed to save vertical space
  • Gradient image at top of page eliminated, was too hard to change theme colors
  • jQuery and part of jQueryUI included -- used for sidebar enhancements
  • Moved several embedded Javascript snippets from fixedleft.py to fixedleft.js

Download

* Tested with MoinMoin 1.9.3

FixedLeft193.zip 2010-07-01 may work with any 1.9.x

Older Versions

* For MoinMoin 1.9.0

FixedLeft190.zip 2010-02-05 prior to flexible sidebars

* For MoinMoin 1.8.5 (may work with any 1.8.x)

FixedLeft185.zip 2010-02-05

* Earlier version for MoinMoin 1.8.0 before minimal mode enhancements

FixedLeft180.zip

Installation

1. Unzip package
2. Copy fixedleft.py into ...mywiki/data/plugin/theme/
3. Copy img, css and js directories into ...mywiki/htdocs/fixedleft/

Customizing The Optional Themes

These instructions apply only to the March, 2010 and later versions.

The fixedleftcms theme may be useful if casual visitors to your web site are not familar with the wiki concept and sometimes get lost in the wiki underlay pages. With the fixedleftcms theme, the wiki navigation links in the left sidebar may be supplemented with links to the most important pages of your web site by adding configuration data to wikiconfig.py/farmconfig.py.

The fixedleftmanager theme is configured with the Icon Bar by default and may be useful as is if you have a small monitor (1024x768 or less) or prefer icons.

The fixedleftcms theme reverts to fixedleft (or the user's preferred theme) for any user who is logged in. One way to test changes to fixedleftcms is to log out, set the wiki's default theme to fixedleftcms, and restart the wiki server if required. The alternative approach below changes the wiki's default theme only after some testing is successful.

1. Copy fixedleftmanager.py and fixedleftcms.py into ...mywiki/data/plugin/theme/ (there are no htdocs, the fixedleft htdocs are used). Restart the wiki server if required, set fixedleftmanager as your preferred theme and test.
2. Copy the sample theme configurations from wikiconfigSample.py (in downloaded zip archive) to the bottom of your wikiconfig.py/farmconfig.py. Change the list of panels in fixedleftManagerViewPanels to reflect the requirements of the new CMS theme. You may need to restart your wiki server with each change.
3. When complete, copy the panel list from fixedleftManagerViewPanels to fixedleftCMSViewPanels. Change the default theme of your wiki to fixedleftcms. Logout and restart your wiki server if necessary.
4. Test again. Users who are not logged in will see the fixedleftcms theme. Logged in users will see their preferred theme or fixedleft.
5. Delete the fixedleftmanager theme, revert to the default configuration, or create a lightweight theme for lightweight users.

Colors

If all you want to do is change the colors, edit the bottom of the htdocs/fixedleft/css/screen.css file.

Discussion