Creating a look in your application that resembles the rest of Enano is essential to maintaining a good user experience. Enano has several visual elements that you can incorporate into your application.

Tables

Tables that are part of forms, and many tables in general, should be wrapped with a div containing the class tblholder. Header cells do not need to have any classes assigned, but will be of a lighter or otherwise secondary color when the class "subhead" is used.

All tables should use the attributes: border="0" cellspacing="1" cellpadding="4". If you are using a smaller font size or if space is limited, set cellpadding to 2 or 3.

Table cells have several possible classes. The three basic classes are row1, row2, and row3. Of the three, row1 is typically darker, row2 is typically lighter, and row3 should be in the middle. Use row1 and row2 to alternate row colors in tables; use row3 when you have a larger cell with only text in it, or otherwise varies from the normal pattern of the table.

Example

<div class="tblholder">
  <table border="0" cellspacing="1" cellpadding="4">
    <tr>
      <th colspan="2">A sample table</th>
    </tr>
    <tr>
      <td class="row1">Sample</td>
      <td class="row1">Sample</td>
    </tr>
    <tr>
      <td class="row2">Sample</td>
      <td class="row2">Sample</td>
    </tr>
    <tr>
      <td class="row3" colspan="2">This cell is certainly an exception to the norm.</td>
    </tr>
    <tr>
      <td class="row1">Sample</td>
      <td class="row1">Sample</td>
    </tr>
    <tr>
      <td class="row2">Sample</td>
      <td class="row2">Sample</td>
    </tr>
    <tr>
      <th class="subhead" colspan="2">
        A submit button usually goes here
      </th>
    </tr>
  </table>
</div>

This produces:

Forms and fields

These are an important thing to keep consistent. Writing forms like this can be a challenge to design, but it builds a powerfully simple user experience.

Checkboxes and RadioButtons

Always wrap these with <label> tags so that the user can click the text to toggle the button.

<label><input type="checkbox" name="wiki_mode" /> Enable Wiki Mode</label>

Tables, forms, and inline descriptions

Often a field in a form will do things that aren't obvious or has implications for other parts of the way your plugin operates. As the developer, only you fully understand these. You should document any behavioral considerations using a short description inside a <small> tag.

Example

Submit buttons

Your save button should have bold text (style="font-weight: bold;"). If you have a Cancel button, its font-weight should be normal.

If you have file uploads in your form, or you expect it to take a long time to process, you can add onsubmit="whiteOutForm(this);" to your <form> tag to add an animated spinner that covers the entire form when a submit button is clicked.

Username or page inputs

Form fields that take a username or page as their input type should use class="autofill username" or class="autofill page" to enable AJAX auto-completion in the field.

Example

<p>
  Username: <input type="text" class="autofill username" /><br />
  Page: <input type="text" class="autofill page" />
</p>

Username:
Page:

Notifications

There are several CSS classes you can use for messages displayed after form processing and in other places. Generally, you should use the full-sized ones for form-processing messages, and the mini ones for AJAX-initiated notifications. Use your judgment: what looks best, probably is best.

• info-box and info-box-mini: For informational text, or notifying the user of a successful operation.
• warning-box and warning-box-mini: For precautionary statements, or notifying the user that an operation succeeded with warnings.
• error-box and error-box-mini: For any type of error message or validation issue.
• question-box and question-box-mini: Rarely used; for some prompts.
• wait-box and wait-box-mini: Also rarely used; for short operations that are in progress. You usually want to use an AJAX spinner for in-progress operations.

Samples

<div class="info-box">This is an info-box.</div>
<div class="warning-box-mini">This is a mini warning box.</div>
<div class="error-box">This is an error box.</div>

Messages on pages

The usermessage CSS class can be applied to a div for a bright orange message. This is usually used for messages unrelated to the page or form; instead it is used for notifying the user of some account-related message, such as a new PM or an expired admin session.

Sample

<div class="usermessage">
  <b>You have 1 <a href="../Special:PrivateMessages">unread private message</a>.<br />
  Messages: <a href="../Special:PrivateMessages/View/1">So I got the new Mudvayne CD...</a>
</div>

Redlinks

Redlinks are links to wiki pages that do not exist. To style a link as a redlink, add the CSS class wikilink-nonexistent.

Sample

<a href="../Test" class="wikilink-nonexistent">Example</a>

Example

General wrapper boxes

The class mdg-comment, which ironically is no longer used for comments (since the "Midget CMS" days) but retained for historical reasons, can be used for some general box elements. It's used, among other things, for the category/tag box at the bottom of each page and the Uploaded File box on File: pages.

jBox menus

jBox is the Javascript based menu system used in Enano. New menus can be created using normal HTML. The class you should use is indeed menu_nojs; this will be changed automatically by jBox later.

<div class="menu_nojs">
  <a href="#" onclick="return false;">Link 1</a>
  <a href="#" onclick="return false;">Link 2</a>
  <a href="#" onclick="return false;">Link with menu</a>
  <ul>
    <li><a href="#" onclick="return false;">Submenu link 1</a></li>
    <li><a href="#" onclick="return false;">Submenu link 2</a></li>
    <li><a href="#" onclick="return false;">Submenu link 3</a></li>
  </ul>
  <a href="#" onclick="return false;">Link 3</a>
  <a href="#" onclick="return false;">Right-aligned menu</a>
  <ul class="jbox_right">
    <li><a href="#" onclick="return false;">Submenu link 1</a></li>
    <li><a href="#" onclick="return false;">Submenu link 2</a></li>
    <li><a href="#" onclick="return false;">Submenu link 3</a></li>
  </ul>
  <span class="menuclear"></span>
</div>

Get creative!

Do not feel like you are forced to adapt to use just the classes on this page. If you have a new visual element you need to design for your plugin, go for it. If it's very well-written and may have general usage, you can also submit it to the Enano project for possible inclusion in the core.