MDC:Custom CSS Classes
From MDC
- How to help: contents
- Lists
- Documentation wishlist
- Editing/review to do list
- Migration list
- Guides
- Getting started
- Writer's guide
- Page naming guide
- Disambiguation pages
- Starting a new MDC localization
- Copyrights and licensing
- References
- Wiki markup reference
- Custom CSS classes
- Custom templates
- MediaWiki extensions
- External redirects
- Needs redirect
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 Dria.
Contents |
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:
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.
Notes
Use div class="note" for highlighting notes within the documentation.
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
Categories: MDC Project