Zoho wiki customization notes


Originating author: Graham Wideman

Overview

A collection of notes about configuration and customization of zoho wiki for Fab Lab SD.

Wikipedia-like styling

This wiki is deliberately styled similar to Wikipedia, so that users will immediately understand what kind of a site this is. (Idea from Kevin M.)
The actual functionality is somewhat different:
  • Zoho wiki organizes pages hierarchically: all pages, except those at top level, have parents. Some navigation features are based on this.
  • Zoho wiki's editor is quite different from Wikipedia's, as zoho stores content in html (not markup), hence the editor allows editing some things (notably tables) much more easily.
  • Zoho wiki's permissions system is different than Wikipedia users normally see. We can implement public pages, and private pages for different groups.

Bases of customization

There are several points of customization:

  • Settings > Theme: Selection of base theme
  • Settings > Customization:
    • Choice of layout
    • Custom CSS file ONLY at the wiki level. Workspaces use wiki's CSS.
      • Problem: Workspace users must have read permissions on wiki in order to receive CSS, logo and any other wiki-level files referenced in workspace styling.
      • Challenge: Zoho wiki generally does not distinguish page types with any obvious CSS Id or Class on a top-level element.
        • CSS @document might have been useful, but appears not widely supported.
    • Choice of top panel settings:
      • Default Logo+Title, or Custom html
    • Choice of side panel settings:
      • Select widgets
        • CSS to suppress unwanted features
      • Custom Page Box widget (custom html);
        • Annoyingly, shows up in lists of pages, like in navigation. Grrrr.
          • In that page's Permissions, can disable the "Navigation" permission. But that's only for site visitors, and possibly editors? Still appears for owner, so not entirely clean, and feels like piling dependencies on dependencies.
        • Despite the content being held in a regular page, there's currently no way to re-use it in the left panel of another workspace

Details

Logo and Title implementation

Requirements/Challenges:

  • Relatively large squarish logo (like wikipedia, which also has a main round element). But don't want to have it force a horizontal band that tall across entire page. So try to have it drop down into left column
  • Logo should link to main site home page
  • Title should be either title of main site, or for workspaces (sub wikis), should be title of workspace. (And link accordingly.)
Implementation alternatives:
  • Top Panel: Select the "Logo + Title" option, and add CSS so that the somewhat large Fab Lab icon can drop into the left navigation panel
    • Problem: In workspaces, the Logo+Title feature applies the workspace home link to both the logo and the title. We want the logo to point to wiki home, not workspace home.
    • Problem: On the Page Permissions page, the left nav column is omitted, hence the logo overlaps some important content.
      • After some review, the Page Permissions page seems unique in this regard. CSS can detect elements on this page and move them away from the logo.
  • Top Panel: Select the Custom option, and insert custom html for the wiki and each workspace
    • More maintenance, has to be different for every workspace
    • For workspaces, DOES allow the logo to point to wiki home instead of workspace home
    • DOES allow the "title" to be set to something more descriptive than allowed by default Logo+Title option
    • Doesn't by itself solve the logo overlapping with content below when there's no nav bar
  • Top Panel Logo + Title, but use a tiny blank logo. Add the logo using a Custom Page Box at the top of left nav column
    • Requires adding Custom Page Box manually to each wiki and workspace, but at least the html is always the same.
    • Sadly, Custom Page Box has a side effect of adding an actual page containing the Custom Page Box content, which causes it to show up in navigation, requiring a further workaround involving permissions. Arrrg!

As of 2015-10-19, I settled on the "Custom Top Panel" solution. The Custom Page Box solution was too brittle: Required coordination with the left pane, and the left pane editing feature became flaky while I was trying to set this up.

Custom Top Panel

The following shows the required html for the Custom Top Panel. Substitute applicable path and caption for the a#flsd-page-title tag.

<div id="sitetitle">
<a href="/" id="flsd-logo"><img src="/_attach/1.1/fablabsd-logo-135x120-transp-01.png"></a>
<a href="/" id="flsd-page-title">Fab Lab San Diego </a>
</div>



     RSS of this page

    .