Section 5.4 - Using Enano's built-in effects

The effects and dynamic applets Enano uses depend on certain Javascript libraries which expect your HTML and CSS to work a certain way. These specifications are outlined below.

AJAX editor, categorization editor, page history, and comments

All of these require a <div> with the id ajaxEditContainer to be the last tag opened in your header.tpl and the first tag closed in footer.tpl. You also need to be sure that the contents of your <head> tag are in the right order (see the blue box in the last section).

Sliding "more options" menu and highlighted tabs

The Javascript menu system that Enano uses is known as jBox and was developed specifically for use in Enano. It assumes a pure HTML-based structure which is assembled using CSS and a bit of Javascript at runtime. This structure works as follows:

<div class="menu_nojs">
  <div class="label">Label</div>
  <a href="foo">Link</a>
  <a href="foo">Link with submenu</a>
    <li><a href="foo">Link in submenu</a></li>
    <li><a href="foo">Link in submenu</a></li>
    <li><a href="foo">Link in submenu</a></li>
  <a href="foo">Link</a>

Notice that in the highest level, an <a> tag followed by a <ul> will cause that unordered list to act as a submenu. This structure is used to provide extremely easy backwards compatibility with non-Javascript browsers.

jBox also requires custom CSS to work right. A barebones jBox theme is provided in enano-shared.css; a more complete (but highly theme-specific as well) theme is provided with Oxygen. Choose the starting point that works best for you, and then copy all of the CSS under the heading "jBox menu system" in either enano-shared.css or one of the themes included with Enano to your own stylesheet. You can then customize it to your heart's content. It is recommended that you avoid changing float, margin, padding, or position settings, because this may either break the Javascript logic or cause drop-down menus to appear in the wrong place.