Custom CSS Classes

Source

The following are the custom CSS classes that we have defined for the Devmo wiki. If, for whatever reason, you need a custom class defined in the CSS for this wiki, feel free to contact Chienwen.

Defined CSS classes

Class	Result
div.tip	For displaying tip text within the body of a page.
div.bug	For displaying bug text within the body of a page.
.float-left	For creating a left-float element (usually an image).
.float-right	For creating a right-float element (usually an image).
.figure	Defined for future use, does not currently contain any style information
.standard-table	Basic standard table styling.
.standard-table td.header	Header styling for standard-table.
.fullwidth-table	Table that has width set to 100%. (This table is an example.)
.fullwidth-table td.header	Header styling for fullwidth-table.
div.breadcrumbs	Styling for custom breadcrumbs extension.
div.breadcrumbs a.breadcrumbs	Styling for links in breadcrumbs string.
div.breadcrumbs span.breadcrumbs	Styling for local page title in breadcrumbs string.
div.side-note-left div.side-note-right	Used to create a sidebar or aside within an article. The created box will be 50% of the width of its parent box (usually the width of the article itself). It is recommended that you use these so that sidebar content alternates between the left and right sides of the article for better readability.
div.highlight	Highlights a section of the page with a 3px-wide blue bar on the left side.
.highlightred	Changes text color to red.
.highlightblue	Changes text color to blue.
.highlightgreen	Changes text color to green.

Examples

Highlighting parts of code

Often we will want to draw attention to certain sections of a piece of code. This is possible through the use of spans, also using the "indent-at-least-one-space" code formatting facility built into MediaWiki. Note that using spans within <pre> blocks is not useful because the MediaWiki parser ignores the spans and simply outputs them as part of the code.

<span class="highlightred">this doesn't work</span>

Instead, indent the piece of code you want to use highlighting in, and use spans within that. Note that you have to indent blank lines within the code block as well. If there is no space at the beginning of a blank line, the parser will close the codeblock then reopen it at the next line of indented code.

here is an example of
   a codeblock with a blank line

   that is not indented.

Clearly, the above example is incorrect. Here's how to do it:

here is an example of
   a codeblock with a blank line

   that is indented.

Breadcrumbs

<breadcrumbs></breadcrumbs>

• See also Core JavaScript 1.5 Reference:About for an example of a page with breadcrumbs.

table.standard-table

table header 1	table header 2
This is an example of:	table.standard-table

table.fullwidth-table

table header 1	table header 2
This is an example of:	table.fullwidth-table

Divs

Tips

Use div class="tip" for formatting tips:

This is a tip

Bugs

Use div class="bug" for referencing known bugs, with links to the relevant bugzilla entry:

Bug 176320: Minimal innerWidth/innerHeight values for popup windows

Warnings

Use div class="warning" for highlighting warnings within the documentation. Eventually we'll do something cool and add icons or something.

This is a warning.

Notes

div class="note" is used (via Template:Note) for highlighting notes within the documentation. Instead of using the div with a class directly, use the template.

This is a note. It's not a very interesting note.

Highlight Section

Example of div class="highlight":

This is an example of the section highlighting CSS. Use this to draw attention to certain sections of your code. Initially this was added for the XUL Tutorial.

an example of a
   preformatted section
   within a highlighted
      div