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

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