mozilla
Your Search Results

    Custom CSS classes for MDN

    Warning: The content of this article may be out of date. Last updated : Apr 3 2014 8:00:31 AM

    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.
    .cleared Use this class on the first block after text that's wrapped around an image using the "alignment direction" option in the "Image properties" dialog.
    .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.
    ignore-external Use this class on images that are inside links to prevent them from getting the external reference icon displayed next to them.
    pre.brush:xml 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.
    pre.brush:css Syntanx highlighter for CSS.
    pre.brush:js Syntax highlighter for JavaScript.
    .threecolumns Displays text in three columns (on browsers supporting CSS3 columns).
    .cols-2 Displays text in two columns (on browsers supporting CSS3 columns).
    .cols-3 Displays text in three columns (on browsers supporting CSS3 columns).
    .cols-4 Displays text in four columns (on browsers supporting CSS3 columns).
    .cols-5 Displays text in five columns (on browsers supporting CSS3 columns).

    Examples

    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.

    Document Tags and Contributors

    Last updated by: stephaniehobson,
    Hide Sidebar