Mozilla Developer NetworkWarning:
Defined 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 the documentation team lead.
| 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. |
<del>.float-left</del> |
<del>For creating a left-float element (usually an image).</del> |
<del>.float-right</del> |
<del>For creating a right-float element (usually an image).</del> |
<del>.figure</del> |
<del>Defined for future use, does not currently contain any style information</del> |
.standard-table |
Basic standard table styling. |
.fullwidth-table |
Table that has width set to 100%. (This table is an example.) |
.standard-table td.header |
Header styling for standard-table. |
.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. |
<del>div.side-note-left div.side-note-right</del> |
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. |
<del>div.highlight</del> |
Highlights a section of the page with a 3px-wide blue bar on the left side. |
<del>.highlightred</del> |
<del>Changes text color to red.</del> |
<del>.highlightblue</del> |
<del>Changes text color to blue.</del> |
<del>.highlightgreen</del> |
<del>Changes text color to green.</del> |
<ins>pre.brush:xml</ins> |
<ins>Syntax highlighter for HTML, XML, and all XML-base Syntax. If you want to use this class, great JS library will rewrite to other HTML elements from your <pre> element.</ins> |
<ins>pre.brush:css</ins> |
<ins>Syntanx highlighter for CSS.</ins> |
<ins>pre.brush:js</ins> |
<ins>Syntax highlighter for JavaScript.</ins> |
<del>.threecolumns</del> |
<del>Displays text in three columns (on browsers supporting CSS3 columns).</del> |
<ins>.cols-2</ins> |
<ins>Displays text in two columns (on browsers supporting CSS3 columns).</ins> |
<ins>.cols-3</ins> |
<ins>Displays text in three columns (on browsers supporting CSS3 columns).</ins> |
<ins>.cols-4</ins> |
<ins>Displays text in four columns (on browsers supporting CSS3 columns).</ins> |
<ins>.cols-5</ins> |
<ins>Displays text in five columns (on browsers supporting CSS3 columns).</ins> |
Examples
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:
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 a very interesting note.