Custom CSS Classes



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.


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.




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


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



Use div class="tip" for formatting tips:

This is a tip


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


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.


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