Styles by monkey6

VIEWS: 33 PAGES: 5

More Info
									                   Styles Used in KEWL.Nextgen

Standard Text, Paragraphs
<body> … </body>
<p> … </p>
<div class="text"> … </div> - to
be deprecated

This is the standard text for KEWL.NextGen without any styles applied. Where
possible, always try to enclose your text in <p> tags

Headers
<h1>   …   </h1>
<h2>   …   </h2>
<h3>   …   </h3>
<h4>   …   </h4>
<h5>   …   </h5>
<h6>   …   </h6>

The tags h1 to h6 should be used as
headers for pages. Never ever use classes
to get an header effect!

Apart from degrading well it old
browsers, this is also important for
accessibility and screen readers.

Each page should have at least one header
tag, preferably <h1> and headers should
be generated using the htmlheading class
of htmlelements.


Table Headers
<thead>
     <th> ... </th>
     <th> ... </th>
</thead>

<td class="heading"> - to be
deprecated
Table Headers are achieved using the HTML tags <thead> and <th>. The CSS styles
are directly applied to these tags. This feature is catered for in the htmltable class in
the htmlelements module.

Please do not use other styles to get this effect. We are including the class .heading
here for the time being. Will have to become deprecated – useless purpose.
Tables – Odd & Even Rows
<tr>
<td class="odd"> ... </td>
</tr>

<tr>
<td class="even"> ... </td>
</tr>
These styles may either be applied to rows <tr> or columns <td>. You can use the
htmltable class in htmlelements to generate odd and even rows. If you use array to
table, these are generated by setting alternate_rows to TRUE. You can alternate rows
in table by using $oddOrEven = ($rowcount == 0) ? "odd" : "even"; and then
incrementing $rowcount at the end of a loop. Apply the style to the table by applying
syntax something like $objMyTable->addCell($MyText, NULL, "top", "left",
$oddOrEven);

Please do not use these styles for anything except tables. I’m planning to rename this
style to td.odd, td.even, tr.odd, tr.even. This way it can’t be used by other elements.

Tables – Table Ruler
<tr class="tbl_ruler">
<td>... </td>
</tr>

The table ruler is used with javascript to highlight the active row (row that has a
mouseover if you like) in a table.

Please do not use this style for anything except tables. I’m planning to rename this
style to td.tbl_ruler, tr.tbl_ruler. This way it can’t be used by other elements

Pseudobutton
<a href="..."
class="pseudobutton"> ... </a>
A link that you want to make appear as a button. Will be redesigned to make look as a
button. Defined as a.pseudobutton, so it can’t be used by other elements

Content Background
<div class="content"> ... </div>


This class can be used when you want a ‘content’ background, but unable to used the
#ID version.
Wrappers
<div class="wrapperDarkBkg">
</div>
<div class="wrapperLightBkg">
</div>

This wrapper style is useful for many modules. It has an outside and inside color. This
can be used for FAQ, and also to distinguish fields in Internal Mail, Forum and
Instant Messaging.
Consists of two different background colors, both distinct from the content color –
Has a three pixel padding.

No Records Found
<div class="noRecordsMessage">
... </div>
Originally added for the forum, but can be used by other modules as well to show no
records found for a match.

This text is much bigger than normal, is defined to align center, and has 2em padding.
We can change this if it causes display problems.


Error Message
<span class="error"> … </span>
Show error messages to the user. Preferable to use in a <span> rather than <div> or
<p>


Input Error
<input type="text"
name="textfield"
class="inputerror" value="Error
Message">
May deprecate. Used by one of the Chinese students to apply a style to a text input
box indicating an error. Should we keep this?


Dimmed Text
<span class="dim"> … </span>
May deprecate: Dim or grey text – not seemed to be used. Color to be changed to gray
Warnings
<span class="warning"> … </span>
Warnings to users about the possible consequences of an action. Color definitely
needs to be changed. Bright Orange with Bold?

Confirm
<span class="confirm"> … </span>
Sending a confirmation message to the user

Highlighted Text
<span class="HighLightText"> …
</span>
This is used to show highlighted text, usually from search engine results. Perhaps the
background needs be a neon color (green) so that it stands our more.

Minute / Small Text
<span class="minute"> … </span>
This specifies the color and size of the notes or short little descriptive wording.
Example is the abstract for stories (postlogin) and the text below it which says:

Posted by Administrative User On 2004-11-13 18:11:02


High Impact
<span class="highimp"> … </span>
May deprecate: specify the color of the text thats very important on the kewlstats.
Only used by context


Forum Tangent Indent
<div class="forumTangentIndent">
</div>
The forum uses this class to show tangents at the top of a post. Let me if anyone else
would like to use. Has 10px padding.
Other Styles that Exist
This is a list of styles that exist for specific situations and shouldn’t be used in
general.


Body Background Help
<body class="help-popup">

This style is specifically for a help popup
window. Has a background image of a
question mark




Incomplete
The following sections must still be covered in this document:

       Blog                                             Internal Mail
       Login Stats                                      Code Blocks
       Chat                                             Instant messaging
       Forum                                            Mailman
       Debug Layers                                     Accessibility (legend and
       View Source                                       fieldset)

Of the above, only blog offers styles that could be used by other modules, so feel free
to check it out in the meantime.

								
To top