mozilla

Revision 168180 of Extension Theming Guidelines

  • Revision slug: Extension_Theming_Guidelines
  • Revision title: Extension Theming Guidelines
  • Revision id: 168180
  • Created:
  • Creator: Mossop
  • Is current revision? No
  • Comment New page: This is a set of guidelines on how to control the look and feel of your extension while leaving it open for styling by custom themes. =Skin Packages= Just as extension code should exist ...

Revision Content

This is a set of guidelines on how to control the look and feel of your extension while leaving it open for styling by custom themes.

Skin Packages

Just as extension code should exist in chrome content packages, all of the styling for an extension including CSS and images should exist in a chrome skin package. Custom themes may then register a replacement for your skin package allowing them to provide their own styles for all of your content.

Branding

Certain items of your extensions style, in particular logos and icons can be kept in the chrome content package such that they are not replaceable by custom themes

Stylesheets guidelines

Include Stylesheets

For every new window that your extension adds and for every window that your extension overlays content into be sure to add a stylesheet from your chrome skin package. While it may be tempting to use the same stylesheet in multiple places try to avoid this so that themes can correctly target the right windows.

CSS Selectors

When writing stylesheet rules for windows that you are overlaying always try to be specific with the css selector. If you are not then you run a risk of conflicting with content that other extensions add to the window.

XUL guidelines

XBL Bindings

XBL bindings are applied using style rules. However these are rarely part of the style of the widgets but more about adding custom widgets. In this case you should add a stylesheet to your chrome content package and apply the bindings there. This is one of the rare cases where it is sensible to put the stylesheet into the content area.

Style attributes

Style attributes should only be used in rare circumstances. They are impossible to override from styleheets so anything you put in there cannot be adjusted by custom themes.

Revision Source

<p>This is a set of guidelines on how to control the look and feel of your extension while leaving it open for styling by custom themes.
</p>
<h2 name="Skin_Packages">Skin Packages</h2>
<p>Just as extension code should exist in chrome content packages, all of the styling for an extension including CSS and images should exist in a <a href="en/Chrome_Registration#skin">chrome skin package</a>. Custom themes may then register a replacement for your skin package allowing them to provide their own styles for all of your content.
</p>
<h3 name="Branding">Branding</h3>
<p>Certain items of your extensions style, in particular logos and icons can be kept in the chrome content package such that they are not replaceable by custom themes
</p>
<h2 name="Stylesheets_guidelines">Stylesheets guidelines</h2>
<h3 name="Include_Stylesheets">Include Stylesheets</h3>
<p>For every new window that your extension adds and for every window that your extension overlays content into be sure to add a stylesheet from your chrome skin package. While it may be tempting to use the same stylesheet in multiple places try to avoid this so that themes can correctly target the right windows.
</p>
<h3 name="CSS_Selectors">CSS Selectors</h3>
<p>When writing stylesheet rules for windows that you are overlaying always try to be specific with the css selector. If you are not then you run a risk of conflicting with content that other extensions add to the window.
</p>
<h2 name="XUL_guidelines">XUL guidelines</h2>
<h3 name="XBL_Bindings">XBL Bindings</h3>
<p>XBL bindings are applied using style rules. However these are rarely part of the style of the widgets but more about adding custom widgets. In this case you should add a stylesheet to your chrome content package and apply the bindings there. This is one of the rare cases where it is sensible to put the stylesheet into the content area.
</p>
<h3 name="Style_attributes">Style attributes</h3>
<p>Style attributes should only be used in rare circumstances. They are impossible to override from styleheets so anything you put in there cannot be adjusted by custom themes.
</p>
Revert to this revision