FixedLeft Theme

Contents

  1. FixedLeft Theme
    1. Flexing the Sidebar
    2. Edit Log Comments
    3. Page Comments
    4. Sortable Tables
    5. Google Search
    6. Browser Testing
    7. Changes
    8. Download
    9. Installation of FixedLeft Theme
      1. Customizing The Optional Themes
      2. Colors
    10. Discussion

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.

fixedleft1.png

An optional theme, fixedleftmanager, has a default configuration that copies the Icon Bar from the old Classic theme. The icon bar may be configured with any or all of 15 actions. Configuration hints are in the wikiconfigSamples.py file. Access to all page actions is achieved by adding a More Actions icon that links to actions=PageActions (courtesy of the Mandarin theme). Use of the Icon Bar eliminates the need for the Page Actions and More Actions panels and reduces the height of the sidebar.

fixedleftmanager.png

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.

fixedleft2.png

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, the "Page Contents" panel is about to be dropped at the top of the stack.

fixedleft8.png

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.

fixedleft3.png

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.

fixedleft5.png

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.

fixedleft7.png

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.

fixedleftpagecomments.png

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).

fixedleftsortabletable.png

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 3.6 and 4, IE8, IE9, Safari for Windows, Google Chrome, and Opera. IE8 works well when running in IE8 mode, but does not support the box-shadow and border-radius CSS features used in the sidebar and table of contents.

Use of this theme with IE6, IE7 or IE8 running in IE7 compatibility mode is not recommended.

Changes

Download

* Tested with MoinMoin 1.9.3

FixedLeft193.zip 2011-04-20 may work with any 1.9.x

Installation of FixedLeft Theme

  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

MoinMoin: ThemeMarket/FixedLeft (last edited 2011-04-21 05:40:11 by RogerHaase)