Theme development: Difference between revisions

From MozillaZine Knowledge Base
Jump to navigationJump to search
(Adding info on Help skinning update to @import platform CSS)
(update)
 
(47 intermediate revisions by 26 users not shown)
Line 1: Line 1:
=Introduction=
See [http://developer.mozilla.org/en/Themes Themes] at the Mozilla Developer Center.
There isn't a good central resource for themes developers (yet - keep an eye on this page).
There's also a [http://forums.mozillazine.org/viewforum.php?f=18 Theme Development forum] at MozillaZine.
 
[[Category:Redirects]]
So far, the best place to go for theme development info is the [http://forums.mozillazine.org/viewforum.php?f=18 MozillaZine Themes Forum].
 
 
=Requirements=
 
==Knowledge==
 
===CSS===
'''''Tip:''''' The quality of your CSS rules can have a real affect on how fast your theme is rendered.  Optimize your stylesheets with the guidelines in David Hyatt's document [http://www.mozilla.org/xpfe/goodcss.html ''Writing Efficient CSS''].
 
* Mozilla/Firefox uses [http://xulplanet.mozdev.org/references/elemref/ref_StyleProperties.html custom CSS properties] to style various elements
* [http://w3.org/style/ W3C: CSS]
 
===XUL===
* [http://xulplanet.mozdev.org/ XULPlanet]
* [http://www.mozilla.org/projects/xul/ Mozilla Projects: XUL]
 
===HTML/XML===
* [http://w3.org/tr/html401 W3C: HTML]
* [http://www.w3.org/XML/ W3C: XML]
 
===RDF===
* [http://www.w3.org/RDF/ W3C: RDF]
 
==Tools==
 
===Text Editors===
* [http://editplus.com EditPlus]
* [http://www.liquidninja.com/metapad/ Metapad]
* [http://www.notetab.com/ NoteTab]
* [http://www.editpadlite.com/editpadlite.html EditPad Lite]
 
===Image Editors===
* [http://www.adobe.com/products/photoshop/main.html Adobe Photoshop]
* [http://www.macromedia.com/software/fireworks/ Macromedia Fireworks]
* [http://www.jasc.com/products/paintshoppro Paint Shop Pro]
* [http://www.gimp.org/ GNU Image Manipulation Program]
 
===File Compression Utility===
 
===[http://cdn.mozdev.org/themer/ Themer extension]===
: Themer provides a button on the Themes panel of Options to allow installation of .jar packaged themes previously downloaded from a website.
 
===The [[DOM Inspector]]===
While not actually required to develop themes, any self-respecting theme author wouldn't be caught dead without this invaluable tool.  Use it to find out what CSS files and images are used to style interface elements; find node names, IDs, and classes needed to target elements in CSS; browse XUL files and style sheets; and more.
 
=Theme Structure=
As of Firefox 0.9 and Thunderbird 0.8, the structure of theme packages will be slightly modified to be compatible with the new Theme Manager and associated infrastructure.  The new format is outlined in <cite>Ben Goodger</cite>'s document [http://www.bengoodger.com/software/mb/extensions/packaging/themes.html Packaging Firefox/Thunderbird Themes].  The major changes are the addition of a manifest file (install.rdf), an icon, and a new preview image to fit in the preview window of the themes manager.  Please review the document for full details.
 
=Setup=
 
===Extracting the Chrome===
See http://www.eightlines.com/neil/mozskin/gssetup.html
 
This technique allows you to work directly with the CSS and images without having to compress it into a JAR file and reload the theme every time you make a change.
 
===Disabling XUL Cache===
The XUL cache (a.k.a. [http://bugzilla.mozilla.org/show_bug.cgi?id=68045 fastload]) saves the many files that make up the user interface into one file for faster loading [http://forums.mozillazine.org/viewtopic.php?t=49254].  Disabling the cache allows you to immediately see changes made to the chrome without having to restart the program, or switch back and forth between themes.  To disable the XUL cache [http://xul.andreashalter.ch/download/html/installation.10510808361051080595.html], add the following to your user.js or in about:config:
user_pref("nglayout.debug.disable_xul_cache", true);
 
 
=Editing=
Neil Marshall has some decent info about theme editing at [http://www.eightlines.com/neil/mozskin/ Creating a Skin for Mozilla].  The site is a bit aged, but the information is still relevant, and can be applied to theme editing in recent builds.
 
Netscape has a slightly outdated [http://wp.netscape.com/eng/mozilla/ns6/themes/creating.htm collections of document about creating Netscape 6 themes].
 
=Issues/Bugs=
==Theme Changes==
* 2003-11-20 [http://forums.mozillazine.org/viewtopic.php?t=36049 widgets/bindings un-change]
* 2003-11-22 [http://bugzilla.mozilla.org/show_bug.cgi?id=30579 Bug 30579] - themeable scrollbar corner
* 2003-11-30 [http://bugzilla.mozilla.org/show_bug.cgi?id=215467 Bug 215467] - Download Manger / [http://forums.mozillazine.org/viewtopic.php?t=37838 discussion]
* 2003-12-09 [http://bugzilla.mozilla.org/show_bug.cgi?id=214527  Bug 214527] - expander button in Add Bookmarks dialog / [http://forums.mozillazine.org/viewtopic.php?t=39812 discussion]
* 2004-01-03 [http://forums.mozillazine.org/viewtopic.php?t=43634 Firebird help contents]
* 2004-03-07 [http://bugzilla.mozilla.org/show_bug.cgi?id=214893 Bug 214893] - Mail button / [http://forums.mozillazine.org/viewtopic.php?t=59777 discussion] / [http://forums.mozillazine.org/viewtopic.php?p=479864#479864 hack]
* 2004-03-11 [http://forums.mozillazine.org/viewtopic.php?t=60684 emoticons (smilies) now themeable]
* 2004-03-12 [http://bugzilla.mozilla.org/show_bug.cgi?id=233607  Bug 233607] - About Firefox dialog unthemeable
* 2004-03-20 [http://bugzilla.mozilla.org/show_bug.cgi?id=207403 Bug 207403] - URLs in Javascript Console should appear as links
* 2004-04-03 [http://bugzilla.mozilla.org/show_bug.cgi?id=234739 Bug 234739] - "Show" replaced with "Open" in Download Manager / [http://forums.mozillazine.org/viewtopic.php?t=67062 discussion]
* 2004-05-10 [http://bugzilla.mozilla.org/show_bug.cgi?id=243091 Bug 243091] - remove mozilla suite cruft
* '''2004-05-17 [http://www.bengoodger.com/software/mb/extensions/packaging/themes.html New Theme API] - new theme package format to go into effect for Firefox 0.9 / [http://forums.mozillazine.org/viewtopic.php?t=77446 discussion]'''
 
==Fixes==
* 2004-01-09 [http://bugzilla.mozilla.org/show_bug.cgi?id=230343 Bug 230343] - CSS2.1 progress cursor
* 2004-01-13 [http://bugzilla.mozilla.org/show_bug.cgi?id=15608 Bug 15608] - CSS3 dynamic adjacent sibling combinators fixed (:hover +)
* 2004-01-14 [http://bugzilla.mozilla.org/show_bug.cgi?id=135141 Bug 135141] - CSS3 indirect adjacent combinator (~) support
* 2004-02-23 [http://bugzilla.mozilla.org/show_bug.cgi?id=93156 Bug 93156] - CSS3 "opacity" support / '-moz-opacity' is now an alias for 'opacity'
* 2004-03-09 [http://bugzilla.mozilla.org/show_bug.cgi?id=235337 Bug 235337] - odd and even tree row properties / [http://forums.mozillazine.org/viewtopic.php?t=60559 discussion]
* 2004-05-02 [http://bugzilla.mozilla.org/show_bug.cgi?id=235300 Bug 235300] - Bookmarks Toolbar Items icon fixed in palette [Ff0.8.0+/Ff0.9]
* 2004-05-02 [http://bugzilla.mozilla.org/show_bug.cgi?id=238186 Bug 238186] - "text-link" class removed from URL textbox in Page Info [Ff0.8.0+/Ff0.9]
* 2004-05-05 [http://bugzilla.mozilla.org/show_bug.cgi?id=242712 Bug 242712] - '-moz-resizer' property removed [Mz1.8a]
* 2004-05-06 [http://bugzilla.mozilla.org/show_bug.cgi?id=237959 Bug 237959] - mail button orientation changed to "vertical" [Ff0.8.0+/Ff0.9]
* 2004-08-12 [http://bugzilla.mozilla.org/show_bug.cgi?id=254508 Bug 254508] - add @import for platform-specific CSS rules in Help ([http://forums.mozillazine.org/viewtopic.php?t=113530 details])
 
==Bugs==
* 2000-12-19 [http://bugzilla.mozilla.org/show_bug.cgi?id=63336 Bug 63336] - pixel rounding errors
* 2001-01-11 [http://bugzilla.mozilla.org/show_bug.cgi?id=65133 Bug 65133] - CSS3 selector support
* 2003-10-17 [http://bugzilla.mozilla.org/show_bug.cgi?id=222654  Bug 222654] - native scrollbar widgets aren't cross-platform
* 2003-11-19 [http://bugzilla.mozilla.org/show_bug.cgi?id=226274 Bug 226274] - dropmarker hover/click states
* 2004-05-10 [http://bugzilla.mozilla.org/show_bug.cgi?id=243387 Bug 243387] - about:plugins broken by cruft removal ([http://bugzilla.mozilla.org/show_bug.cgi?id=243091 Bug 243091])
 
 
==Issues==
* [[Em_units_versus_ex_units|em units versus ex units]] - pixel rounding problems with relative units
 
=Related Links=
*[http://members.shaw.ca/lucx/theme.htm Creating a theme: taking your first step]

Latest revision as of 17:48, 14 December 2009

See Themes at the Mozilla Developer Center. There's also a Theme Development forum at MozillaZine.