Default Theme Styles

With Onto Wiki 0.8 we change the default theme. Using generic classes it should be easier to enhance Onto Wiki by new functionality.

Generally we have two sections, one for the main content like views on information in the knowledge bases, one for side content like lists of knowledge bases or class overviews.

<div class="section-mainwindows">
    <!-- main content goes here -->
</div>
<div class="section-sidewindows">
    <!-- side content goes here -->
</div>

Windows

We are using window boxes for all content. Windows can be added to section-mainwindows as well as to section-sidewindows. Each window must have a title and content. It can be extended by a window specific context menu, a drop down menu, tabs for different contents and content specific windows laying inside other windows.

A basic window is done by:

<div class="window">
   <h1 class="title">Window Title</h1>
   <div class="content">
       <!-- your content goes here -->
   </div>
</div>

Drop down menu and Context menu

You can add menus by adding them after the content:

<div class="window">
   <h1 class="title">Window Title</h1>
   <div class="content">
       <!-- your content goes here -->
   </div>

   <ul class="menu">
       <!-- this is the drop down menu -->
       <li>Menupoint One<ul>
           <li><a href="http://yourlink">Menu Sub Point One</a></li>
           <li><a href="#">Menu Sub Point Two</a></li>
           <li><a href="#">Menu Sub Point Three</a></li></ul>
       <li><a href="http://yourlink">Menupoint Two</a></li>
       <li><a href="#">Menupoint Three</a></li>
       <!-- and so on -->
   </ul>

   <div class="contextmenu">
       <!-- this is the context menu -->
       <ul>
           <li><a href="#">Point One</a></li>
           <li><a href="#">Point Two</a></li>
           <li><a href="#">Point Three</a></li>
       </ul>
   </div>
</div>

Without Javascrip both menus are displayed under the content in the order you placed them. With Javascript you will get a real drop down menu and and context menu (under the left symbol at the title) like you know it from desktop applications.

Tabbed content

Sometimes it is helpful to have different tabs and tab related content, for example for different views on same information or collateral content (like the tabs in your browser).

<div class="window">
   <h1 class="title">Window Title</h1>
   <ul class="tabs">
       <li><a href="#local-link-to-content-1">Tab title One</a></li>
       <li class="active"><a href="#content-2">Tab title Two</a></li> <!-- second tab is active -->
       <li><a href="#content-3">Tab title Three</a></li>
       <!-- and so on -->
   </ul>

   <div class="content" id="local-link-to-content-1">
       <h2>Tab title One</h2>
       <!-- your content goes here -->
   </div>
   <div class="content" id="content-2">
       <h2>Tab title One</h2>
       <!-- your content goes here -->
   </div>
   <div class="content" id="content-3">
       <h2>Tab title One</h2>
       <!-- your content goes here -->
   </div>

   <!-- your drop down and context menu go here -->
</div>

Without javascript it is displayed as linear content with upper navigation links, with javascript only the active content is displayed and the tabs can be used to switch between the different contents. You have to declare at the tab section which content is displayed on initiation (use li.active).

Inside windows

It may be helpful to have windows laying inside other windows, for example to pick different tools to work on displayed content. You only need to part your content from the section for inside windows:

<div class="window">
   <h1 class="title">Window Title</h1>
   <div class="content">
       <div class="innercontent">
           <!-- your content goes here -->
       </div

       <div class="innerwindows">
           <div class="window">
               <h2 class="title">Window Title</h2>
               <!-- for a good structure you should use level 2 headlines for inside windows -->
               <div class="content">
                   <!-- content goes here -->
               </div>
           </div>
           <!-- add more inside windows -->
       </div>

       <!-- add your menus here -->
   </div>
</div>

Please take care about your document structure. When you have tabbed content — where you use level 2 headlines for each content — you should use level 3 headlines for titles of inside windows. Like in normal windows you can use drop down menu and context menu for inside windows.

Window buttons

Buttons for the context menu, minimize/restore window and close window will be automatically generated by javascript. The Button for the context menu is inserted if you added a context menu to the window. Buttons for minimize/restore and close window will be inserted in every window. You can change this behaviour by adding some class values to the div.window: <div class="window added-value">. Possible values are:

• is-minimized: window is minimized when rendered first
• dont-resize: window cannot be minimized/restored or vertically resized (not implemented yet)
  
• dont-close: window cannot be closed (not implemented yet)

List elements

We are using generic class values for layouting ordered and unordered lists:

• bullets-none: list without bullets or counting numbers
• bullets-disc: use a disc (filled circle) as bullet for list items
• bullets-square: use a filled square as bullet for list item
• bullets-decimals: use counting numbers for list items (makes only sense with ordered lists)

We have two class values for vertical and horizontal separations between list items (our standard style sheet uses a dotted light gray line):

• separated-vertical: list items will be displayed one below the other and they are separated by a horizontal line
• separated-horizontal: list items will be displayed like inline elements (like text) in a row, separated by small vertical lines

You can combine those class values, e.g.: <ul class="bullets-none separated-vertical">.

Tables

You can style tables by using following generic class values:

• .separated-vertical: table rows are displayed separated by a dotted line, if you use several table bodies (<tbody> elements) then rows from different table bodies are separated bei a solid line
• .separated-horizontal: table columns are displayed separated by a dotted line
• .backgrounded: table cells have a grey background color, if you only want a darker background for the table header then please directly use thead.backgrounded
• .spaced-vertical: table rows have a small space between each other
• .spaced-horizontal: table columns have a small space between each other

You can combine those class values except for vertical spacing combined with vertical separation and horizontal spacing combined with horizontal separation (due functional lack in MSIE, they don't suppert cell spacing). You can alter table row background colors by using tr.odd.

Forms

Buttons

• Buttons in forms: <button type="submit">Button Text</button>
• links styled like buttons: <a href="#" class="formbutton">Button Text</a>

Input elements

• Text input: <input type="text" class="text" />
• Checkboxes: <input type="checkbox" class="checkbox" />
• Radio buttons: <input type="radio" class="radio" />
• Text area: <textarea></textarea>

Of course you may use other attributes like name, id, value or other html standard attributes for input fields. On select fields we also recommend an exact class value (it works without but it looks nicer with):

• <select size="1"> for drop down selects
• <select size="5" class="bigsize"> for spanned selects
• <select size="10" multiple="multiple" class="bigsize multiple"> for multi selects

We recommend <label> elments for each input field.
For example: <label for="name">Your name</label> <input type="text" class="text" id="name" name="name" value="..." />

Grouping form elements

We recommend the use of <fieldset> and <legend> elements to group and structure your forms. Also nested fieldsets are appreciated. Additionally we provide some generic layout elements to improve usability on forms (not to forget that it looks nicer). You can group a label and an input field by <div class="row-input">, for example:

<form>
<fieldset><legend>Register now</legend>
    <div>
        <label for="name">Your name</label> <input type="text" class="text" id="name" name="name" value="" />
    </div>
    <div class="row-input">
        <label for="email">Your email</label> <input type="text" class="text" id="email" name="email" value="" />
    </div>
    <button type="submit">Register!</button>
</fieldset>
</form>

Using row-input brings effort like highlighting that rows on mouse over (through CSS) and marking that rows while nested input elements are focused through javascript (not implemented yet). You can justify labels and input elements (looks a little bit like used design tables) by using class value input-justify-left, that means label first and input field second (the opposite on checkboxes and radio buttons). You als can combine those classes:

<form>
<fieldset><legend>Register now</legend>
    <div class="row-input input-justify-left">
        <label for="name">Your name</label> <input type="text" class="text" id="name" name="name" value="" />
        <br class="clearall" />
    </div>
    <div class="row-input input-justify-left">
        <label for="email">Your email</label> <input type="text" class="text" id="email" name="email" value="" />
        <br class="clearall" />
    </div>
    <div class="actionbuttons">
        <button type="submit">Register!</button>
    </div>
</fieldset>
</form>

div.actionbuttons is used to set the button at one axial alignement with the input fields. Please take aware of the use <br class="clearall" /> at last element in justified rows because we have to clear the floats. You also can use the same class values at the form element:

<form class="row-input input-justify-left">
<fieldset><legend>Register now</legend>
    <div>  <!-- row-input and input-justifiy-left is inherited -->
        <label for="name">Your name</label> <input type="text" class="text" id="name" name="name" value="" />
        <br class="clearall" />
    </div>
    <div>  <!-- row-input and input-justifiy-left is inherited -->
        <label for="email">Your email</label> <input type="text" class="text" id="email" name="email" value="" />
        <br class="clearall" />
    </div>
    <div class="actionbuttons">
        <button type="submit">Register!</button>
    </div>
</fieldset>
</form>

You can use other generic design elements to layout nice but good structured forms.

Layout helper

Design helper

We provide some simple support to design your content elements. Basically we implemented some classes for sizes and floats:

• for elements by a width of 25%, 33%, 50%, 67%, 75% use .width25, .width33, .width50, .width67 and .width75
• float elements by using .float-left and .float-right, please don't forget to use a <br class="clearall"/> to clear floats
  
• you can combine those classes, for example display your content in two columns:

  <div class="width50 float-left">
      <!-- left column goes here -->
  </div>
  <div class="width50 float-right">
      <!-- right column goes here -->
  </div>
  <br class="clearall"/>

You also can use it together with grouping elements for forms:

<fieldset><legend>Registration</legend>
    <div class="width50 float-left">
        <label for="f2v">Name</label>
        <input class="text" name="f2v" id="f2v" type="text">
        <br class="clearall">
    </div>
    <div class="width50 float-right">
        <label for="f2n">Surname</label>
        <input class="text" name="f2n" id="f2n" type="text">
        <br class="clearall">
    </div>
    <br class="clearall">

    <div class="width50 float-left">
        <label for="f2p1">Password</label>
        <input class="password" name="f2p1" id="f2p1" type="password">
        <br class="clearall">
    </div>
    <div class="width50 float-right">
        <label for="f2p2">Repeat password</label>
        <input class="password" name="f2p2" id="f2p2" type="password">
        <br class="clearall">
    </div>
    <br class="clearall">

    <div class="width50 float-left">
        <label for="f2e">Email address</label>
        <input class="text" name="f2e" id="f2e" type="text"><br class="clearall">
    </div>
    <div class="width50 float-right">
        <input class="checkbox" name="f2agb" id="f2agb" type="checkbox">
        <label for="f2agb" class="checkboxradio">I have read the conditions!</label>
        <br class="clearall">
    </div>
    <br class="clearall">
    
    <div class="width50 clearall"><div class="actionbuttons">
        <button type="submit">Register now!</button>
    </div></div>
</fieldset>

Message boxes

You can simple display a message box by using the .messagebox class, and it is possible to specify it by combination with .info, .error, .warning and .success.

<p class="messagebox info">This is a info box, please read. The answer is 42.</p>

<div class="messagebox warning">
    <p>Attention, this is a warning message.</p>
    <p>You better read it! You forget your towel.</p>
</div>

<div class="messagebox error">
    <ul>
        <li>Error message One!</li>
        <li>Error message Two!</li>
        <li>Error message Three!</li>
    </ul>
    <p>Please remember: Don't panic!</p>
</div>