AKSW - Projects/OntoWiki/DefaultStylesheet

2007-08-31 15:40:33

Comparison for /Projects / Onto Wiki / Default Stylesheet of 2007-08-31 15:40:33 and 2007-10-19 13:45:19

Additions:

Deletions:

2007-08-31 15:20:52

Comparison for /Projects / Onto Wiki / Default Stylesheet of 2007-08-31 15:20:52 and 2007-08-31 15:40:33

Additions:

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.

Deletions:

You can combine those class values except vertical spacing with vertical separation and horizontal spacing 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.

2007-08-31 15:16:36

Comparison for /Projects / Onto Wiki / Default Stylesheet of 2007-08-31 15:16:36 and 2007-08-31 15:20:52

Additions:

<h2 class="title">Window Title</h2>

Deletions:

<h2 class="title">Window Title</h1>

2007-08-29 19:21:44

Comparison for /Projects / Onto Wiki / Default Stylesheet of 2007-08-29 19:21:44 and 2007-08-31 15:16:36

Additions:

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

Deletions:

TODO

2007-08-28 17:58:04

Comparison for /Projects / Onto Wiki / Default Stylesheet of 2007-08-28 17:58:04 and 2007-08-29 19:21:44

Additions:

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: %%(html)

<!-- left column goes here >

~~<div class="width50 float-right">~~

<! right column goes here -->

<br class="clearall"/>
You also can use it together with grouping elements for forms:
<fieldset><legend>Registration</legend>

<label for="f2n">Surname</label>
<input class="text" name="f2n" id="f2n" type="text">
<br class="clearall">

<label for="f2p1">Password</label>
<input class="password" name="f2p1" id="f2p1" type="password">
<br class="clearall">

<label for="f2p2">Repeat password</label>
<input class="password" name="f2p2" id="f2p2" type="password">
<br class="clearall">

<label for="f2e">Email address</label>
<input class="text" name="f2e" id="f2e" type="text"><br class="clearall">

<input class="checkbox" name="f2agb" id="f2agb" type="checkbox">
<label for="f2agb" class="checkboxradio">I have read the conditions!</label>
<br class="clearall">

<button type="submit">Register now!</button>

</div></div>

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>

<ul>

<li>Error message One!</li>
<li>Error message Two!</li>
<li>Error message Three!</li>

</ul>
<p>Please remember: Don't panic!</p>

2007-08-27 23:05:50

Comparison for /Projects / Onto Wiki / Default Stylesheet of 2007-08-27 23:05:50 and 2007-08-28 17:58:04

Additions:

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.

Deletions:

Please take care about your document sructure. 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.

2007-08-27 21:53:37

Comparison for /Projects / Onto Wiki / Default Stylesheet of 2007-08-27 21:53:37 and 2007-08-27 23:05:50

Additions:

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:

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:

Deletions:

Using input-row 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:

2007-08-27 21:51:41

Comparison for /Projects / Onto Wiki / Default Stylesheet of 2007-08-27 21:51:41 and 2007-08-27 21:53:37

Additions:

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

Deletions:

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

2007-08-27 18:31:28

Comparison for /Projects / Onto Wiki / Default Stylesheet of 2007-08-27 18:31:28 and 2007-08-27 21:51:41

Additions:

Default Theme Styles

links styled like buttons: <a href="#" class="formbutton">Button Text</a>
Text area: <textarea></textarea>

Deletions:

Default Template Styles

links styled like buttons: ##<a href="#" class="formbutton">Button Text</a>
Text area: ##<textarea></textarea>