topics.">
  • Skip to main content
  • Select language
  • Skip to search
MDN Web Docs
  • Technologies
    • HTML
    • CSS
    • JavaScript
    • Graphics
    • HTTP
    • APIs / DOM
    • WebExtensions
    • MathML
  • References & Guides
    • Learn web development
    • Tutorials
    • References
    • Developer Guides
    • Accessibility
    • Game development
    • ...more docs
Archive of obsolete content
  1. MDN
  2. Archive of obsolete content
  3. Sunbird Theme Tutorial

Sunbird Theme Tutorial

In This Article
    1. Introduction
      1. What do you need to make a theme?
    2. Making a theme
      1. Creating a unique identifier
      2. Creating information about your theme
      3. Registering your theme
      4. Creating the theme itself
      5. Modifying your theme
      6. Fixing bug 320823
      7. Using your theme
    3. Developing your theme
      1. Understanding Sunbird's user interface
      2. Testing further changes
      3. Making an icon and preview
      4. Adding other components
    4. Packaging your theme
      1. Simple packaging
      2. Normal packaging
      3. Installing a packaged theme

This tutorial is a step-by-step guide to making a theme for Sunbird 0.3a1 and later versions. It is designed for beginners. It does not cover advanced topics.

You might be able to apply the same method to other Mozilla applications by changing some of the details.

Introduction

A theme is a package that users can install in an application to change the appearance of the application, without changing how the application works.

For example, a theme can change the size and colour of the toolbar buttons, and provide different icons on the buttons. But a theme cannot provide an extra button.

What do you need to make a theme?

To make a theme, you usually need these tools:

  • A jar tool or zip tool
  • An editor for plain text files
  • Software for creating and editing images

Note:  Some zip tools only work with files whose names have <tt>.zip</tt> at the end. You can use this kind of zip tool if you rename each file before and after using the tool.

You also need knowledge of:

  • Using your operating system to create files and directories
  • Using the tools listed above
  • CSS
  • Graphic design

Knowledge of XUL, XBL and JavaScript is useful for advanced themes.

Making a theme

A theme consists of:

  • A unique identifier
  • A file containing information about the theme
  • A file that registers the theme with Sunbird
  • Some files containing the theme itself

Set up your theme in Sunbird's profile directory. For information on how to find the profile directory, see the Mozillazine article: Profile Folder

Inside the profile directory, go to the <tt>extensions</tt> directory.

Note:  If the <tt>extensions</tt> directory is empty, you are in the wrong place—start again and follow the instructions more carefully.

Creating a unique identifier

Create an identifier that is likely to be unique, in the form:

<tt>something@domain-name</tt>

It must contain an at-sign (<tt>@</tt>), making it look something like an e-mail address, but it does not need to be a real e-mail address. Before and after the at-sign, it can only contain the characters A-Z, a-z, 0-9, full stop, hyphen and underscore. If you do not own a domain name, you can make up something else. If you want to make it clear that your made-up name is not a real domain, add <tt>.invalid</tt> to the end.

Create a new directory in the <tt>extensions</tt> directory. Use the identifer as your new directory's name. This new directory is your theme directory.

Go into your theme directory.

Creating information about your theme

In your theme directory, create a plain text file named <tt>install.rdf</tt>.

Copy and paste the content from here, making sure that you scroll to get all of it:

<?xml version="1.0"?>
<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
  xmlns:em="http://www.mozilla.org/2004/em-rdf#">
  <Description about="urn:mozilla:install-manifest"
    em:id="just-testing@example.com"
    em:name="Just Testing"
    em:creator="Rod Whiteley"
    em:description="A test theme for Sunbird"
    em:homepageURL="http://developer.mozilla.org/"
    em:version="0.1"
    em:internalName="testing"
    em:type="4" >
    <em:targetApplication><!-- Sunbird -->
      <Description
        em:id="{718e30fb-e89b-41dd-9da7-e25a45638b28}"
        em:minVersion="0.2.9"
        em:maxVersion="0.4" />
    </em:targetApplication>
  </Description>
</RDF>

In the line that starts <tt>em:id</tt>, paste your identifier between the double-quote characters, replacing the identifier that is there now.

Change the next six lines to describe your theme.

Ensure that the internal name is a single word.

Note:  If your theme is for a version of Sunbird later than 0.4, then also change the maxVersion.

Save the file.

Registering your theme

To register your theme, create a plain text file named <tt>chrome.manifest</tt>.

Copy and paste the content from here (just one line):

skin calendar testing chrome/calendar/

Change <tt>testing</tt> to your theme's one-word internal name.

Save the file.

Creating the theme itself

To create the theme itself, go to Sunbird's program directory.

Note:  If you do not know where the program directory is, look at the properties of the shortcut or launcher icon that you use to start Sunbird. There you can see the location of the directory.

In the program directory, go to the <tt>chrome</tt> directory.

Use a jar tool or zip tool to unpack the file <tt>calendar.jar</tt> there.

Go to the <tt>skin</tt> directory that has just been created, then to the <tt>classic</tt> directory there. Copy the <tt>calendar</tt> directory that you find there.

In your theme directory, create a new directory named <tt>chrome</tt>.

Paste the copied <tt>calendar</tt> directory, together with all its contents, into your new <tt>chrome</tt> directory.

Now you have a theme, although it looks exactly the same as Sunbird's classic theme.

Modifying your theme

To modify your theme, change the CSS and image files in any way you like.

For testing purposes, go to the <tt>calendar</tt> directory that you have just pasted. Edit the file <tt>calendar.css</tt> there. Add this line at the end:

label {color: red;}

Save the file.

Fixing bug 320823

If you are using the Sunbird 0.3a1 release, or a test build before 2005-12-21, then you must apply a fix for bug 320823 to allow Sunbird to use themes.

Go to Sunbird's program directory, then to the <tt>defaults</tt> directory there. In the <tt>pref</tt> directory, edit the file <tt>sunbird.js</tt> and search for the <tt>pref("extensions</tt> entries. Add the line:

pref("extensions.dss.enabled", false);

Save the file.

Using your theme

To use your theme, restart Sunbird.

From the menu bar, choose Tools – Themes...

In the Themes window, check that your new theme has appeared.

Select it and press the Use Theme button.

Restart Sunbird again.

If your theme is working, you see the effect of the changes that you made.

Developing your theme

To develop your theme, make further changes to the theme files. You might prefer to do some design work in an image editor first, so that you have a clear design concept to implement.

Understanding Sunbird's user interface

To understand Sunbird's user interface, go to Sunbird's program directory, then to the <tt>chrome/content/calendar</tt> directory there. Examine the files there to understand how Sunbird's user interface is constructed.

The basic interface is written in XUL, but some parts are constructed using XBL or JavaScript.

To discover details of the interface, you can also use the DOM Inspector tool in Firefox. Install a compatible test build of the Calendar extension in Firefox 1.5, and examine its interface. The details are mostly the same as in Sunbird.

Note:  Sunbird's views changed at the end of December 2005. So do not waste time styling the old views. Work with a recent test build so that your theme will be compatible with the next release.

Testing further changes

When you make further changes to your theme, test them by restarting Sunbird.

To detect errors, choose Tools – JavaScript Console... The JavaScript Console window displays CSS errors, not just JavaScript errors.

Making an icon and preview

The Themes window can display an icon and a preview graphic. You normally make these after you have designed the rest of your theme.

Make an image file 32 by 32 pixels, and save it as <tt>icon.png</tt> in your theme directory.

Make an image file about 200 by 100 pixels, and save it as <tt>preview.png</tt> in your theme directory.

Adding other components

Your theme only modifies the calendar component. Sunbird also contains communicator, global, help and mozapps components.

To add these to your theme, unpack the file <tt>classic.jar</tt> in Sunbird's <tt>chrome</tt> directory. From the unpacked <tt>skin/classic</tt> directory, copy the extra directories into your theme.

In your <tt>chrome.manifest</tt> file, add lines like this:

skin communicator testing chrome/communicator/
skin global testing chrome/global/
skin help testing chrome/help/
skin mozapps testing chrome/mozapps/

replacing <tt>testing</tt> with your theme's one-word internal name as before.

To understand the user interface provided by these other components, unpack the other jar files.

Packaging your theme

You can package your theme and make it available on a web site for other users to download and install.

There are two methods: a simple method, and the normal method.

Simple packaging

Note:  If you use this simple method to package your theme, then it can take up much more disk space than it really needs. You might prefer to use this method only while you are developing your theme, and to use the normal method for public releases.

In Sunbird, use the default theme or some other theme.

Move your theme directory to a temporary location. This uninstalls it from Sunbird.

Use a jar tool or zip tool to pack the contents of your theme directory. It is usual to turn off compression so that your theme's speed is maximized. Make sure that the tool packs all the directories and files that make up your theme.

Name the packed file with the <tt>.jar</tt> extension.

For example, when I wrote this article I used this command in my theme directory:

zip -0r testing-0.1.jar .

Make this jar file available to users.

Normal packaging

In Sunbird, use the default theme or some other theme.

Move your theme directory to a temporary location. This uninstalls it from Sunbird.

Go to your <tt>chrome</tt> directory. Use a jar tool or zip tool to pack everything in your <tt>chrome</tt> directory into a file. It is usual to turn off compression so that your theme's speed is maximized. Make sure that the tool packs all the directories and files that make up your theme.

Name the packed file with the <tt>.jar</tt> extension.

For example, when I wrote this article I used this command in my <tt>chrome</tt> directory:

zip -0r testing.jar .

Go back to your theme directory and edit the file <tt>chrome.manifest</tt>.

Change the line for the calendar component to:

skin calendar testing jar:chrome/testing.jar!/calendar/

and make the corresponding change in any other lines that you added.

Save the file.

Use a jar tool or zip tool to pack the files in your theme directory together with your <tt>.jar</tt> file. It is usual to use maximum compression so that users can download your theme quickly. Make sure that the tool does not pack any component directories.

Name the packed file with the <tt>.jar</tt> extension.

For example, when I wrote this article I used this command in my theme directory:

zip -9 testing-0.1.jar * chrome/testing.jar

Make this jar file available to users.

Installing a packaged theme

Install your packaged theme in the normal way, by dragging the jar (or a link to it) and dropping it in Sunbird's Themes window.

Select the newly installed theme and press the Use Theme button.

Restart Sunbird.

Document Tags and Contributors

Tags: 
  • Add-ons
  • Themes
 Contributors to this page: teoli, NickolayBot, Rod Whiteley
 Last updated by: NickolayBot, Mar 9, 2006, 4:55:05 PM

  1. .htaccess ( hypertext access )
  2. <input> archive
  3. Add-ons
    1. Add-ons
    2. Firefox addons developer guide
    3. Interaction between privileged and non-privileged pages
    4. Tabbed browser
    5. bookmarks.export()
    6. bookmarks.import()
  4. Adding preferences to an extension
  5. An Interview With Douglas Bowman of Wired News
  6. Apps
    1. Apps
    2. App Development API Reference
    3. Designing Open Web Apps
    4. Graphics and UX
    5. Open web app architecture
    6. Tools and frameworks
    7. Validating web apps with the App Validator
  7. Archived Mozilla and build documentation
    1. Archived Mozilla and build documentation
    2. ActiveX Control for Hosting Netscape Plug-ins in IE
    3. Archived SpiderMonkey docs
    4. Autodial for Windows NT
    5. Automated testing tips and tricks
    6. Automatic Mozilla Configurator
    7. Automatically Handle Failed Asserts in Debug Builds
    8. BlackConnect
    9. Blackwood
    10. Bonsai
    11. Bookmark Keywords
    12. Building TransforMiiX standalone
    13. Chromeless
    14. Creating a Firefox sidebar extension
    15. Creating a Microsummary
    16. Creating a Mozilla Extension
    17. Creating a Release Tag
    18. Creating a Skin for Firefox/Getting Started
    19. Creating a Skin for Mozilla
    20. Creating a Skin for SeaMonkey 2.x
    21. Creating a hybrid CD
    22. Creating regular expressions for a microsummary generator
    23. DTrace
    24. Dehydra
    25. Developing New Mozilla Features
    26. Devmo 1.0 Launch Roadmap
    27. Download Manager improvements in Firefox 3
    28. Download Manager preferences
    29. Drag and Drop
    30. Embedding FAQ
    31. Embedding Mozilla in a Java Application using JavaXPCOM
    32. Error Console
    33. Exception logging in JavaScript
    34. Existing Content
    35. Extension Frequently Asked Questions
    36. Fighting Junk Mail with Netscape 7.1
    37. Firefox Sync
    38. Force RTL
    39. GRE
    40. Gecko Coding Help Wanted
    41. HTTP Class Overview
    42. Hacking wiki
    43. Help Viewer
    44. Helper Apps (and a bit of Save As)
    45. Hidden prefs
    46. How to Write and Land Nanojit Patches
    47. Introducing the Audio API extension
    48. Java in Firefox Extensions
    49. JavaScript crypto
    50. Jetpack
    51. Litmus tests
    52. Makefile.mozextension.2
    53. Microsummary topics
    54. Migrate apps from Internet Explorer to Mozilla
    55. Monitoring downloads
    56. Mozilla Application Framework
    57. Mozilla Crypto FAQ
    58. Mozilla Modules and Module Ownership
    59. Mozprocess
    60. Mozprofile
    61. Mozrunner
    62. Nanojit
    63. New Skin Notes
    64. Persona
    65. Plug-n-Hack
    66. Plugin Architecture
    67. Porting NSPR to Unix Platforms
    68. Priority Content
    69. Prism
    70. Proxy UI
    71. Remote XUL
    72. SXSW 2007 presentations
    73. Space Manager Detailed Design
    74. Space Manager High Level Design
    75. Standalone XPCOM
    76. Stress testing
    77. Structure of an installable bundle
    78. Supporting private browsing mode
    79. Table Cellmap
    80. Table Cellmap - Border Collapse
    81. Table Layout Regression Tests
    82. Table Layout Strategy
    83. Tamarin
    84. The Download Manager schema
    85. The life of an HTML HTTP request
    86. The new nsString class implementation (1999)
    87. TraceVis
    88. Treehydra
    89. URIScheme
    90. URIs and URLs
    91. Using Monotone With Mozilla CVS
    92. Using SVK With Mozilla CVS
    93. Using addresses of stack variables with NSPR threads on win16
    94. Venkman
    95. Video presentations
    96. Why Embed Gecko
    97. XML in Mozilla
    98. XPInstall
    99. XPJS Components Proposal
    100. XRE
    101. XTech 2005 Presentations
    102. XTech 2006 Presentations
    103. XUL Explorer
    104. XULRunner
    105. ant script to assemble an extension
    106. calICalendarView
    107. calICalendarViewController
    108. calIFileType
    109. xbDesignMode.js
  8. Archived open Web documentation
    1. Archived open Web documentation
    2. Browser Detection and Cross Browser Support
    3. Browser Feature Detection
    4. Displaying notifications (deprecated)
    5. E4X
    6. E4X Tutorial
    7. LiveConnect
    8. MSX Emulator (jsMSX)
    9. Old Proxy API
    10. Properly Using CSS and JavaScript in XHTML Documents
    11. Reference
    12. Scope Cheatsheet
    13. Server-Side JavaScript
    14. Sharp variables in JavaScript
    15. Standards-Compliant Authoring Tools
    16. Using JavaScript Generators in Firefox
    17. Window.importDialog()
    18. Writing JavaScript for XHTML
    19. XForms
    20. background-size
    21. forEach
  9. B2G OS
    1. B2G OS
    2. Automated Testing of B2G OS
    3. B2G OS APIs
    4. B2G OS add-ons
    5. B2G OS architecture
    6. B2G OS build prerequisites
    7. B2G OS phone guide
    8. Building B2G OS
    9. Building and installing B2G OS
    10. Building the B2G OS Simulator
    11. Choosing how to run Gaia or B2G
    12. Customization with the .userconfig file
    13. Debugging on Firefox OS
    14. Developer Mode
    15. Developing Firefox OS
    16. Firefox OS Simulator
    17. Firefox OS apps
    18. Firefox OS board guide
    19. Firefox OS developer release notes
    20. Firefox OS security
    21. Firefox OS usage tips
    22. Gaia
    23. Installing B2G OS on a mobile device
    24. Introduction to Firefox OS
    25. Mulet
    26. Open web apps quickstart
    27. Pandaboard
    28. PasscodeHelper Internals
    29. Porting B2G OS
    30. Preparing for your first B2G build
    31. Resources
    32. Running tests on Firefox OS: A guide for developers
    33. The B2G OS platform
    34. Troubleshooting B2G OS
    35. Using the App Manager
    36. Using the B2G emulators
    37. Web Bluetooth API (Firefox OS)
    38. Web Telephony API
    39. Web applications
  10. Beginner tutorials
    1. Beginner tutorials
    2. Creating reusable content with CSS and XBL
    3. Underscores in class and ID Names
    4. XML data
    5. XUL user interfaces
  11. Case Sensitivity in class and id Names
  12. Creating a dynamic status bar extension
  13. Creating a status bar extension
  14. Gecko Compatibility Handbook
  15. Getting the page URL in NPAPI plugin
  16. Index
  17. Inner-browsing extending the browser navigation paradigm
  18. Install.js
  19. JXON
  20. List of Former Mozilla-Based Applications
  21. List of Mozilla-Based Applications
  22. Localizing an extension
  23. MDN
    1. MDN
    2. Content kits
  24. MDN "meta-documentation" archive
    1. MDN "meta-documentation" archive
    2. Article page layout guide
    3. Blog posts to integrate into documentation
    4. Current events
    5. Custom CSS classes for MDN
    6. Design Document
    7. DevEdge
    8. Developer documentation process
    9. Disambiguation
    10. Documentation Wishlist
    11. Documentation planning and tracking
    12. Editing MDN pages
    13. Examples
    14. Existing Content/DOM in Mozilla
    15. External Redirects
    16. Finding the right place to document bugs
    17. Getting started as a new MDN contributor
    18. Landing page layout guide
    19. MDN content on WebPlatform.org
    20. MDN page layout guide
    21. MDN subproject list
    22. Needs Redirect
    23. Page types
    24. RecRoom documentation plan
    25. Remove in-content iframes
    26. Team status board
    27. Trello
    28. Using the Mozilla Developer Center
    29. Welcome to the Mozilla Developer Network
    30. Writing chrome code documentation plan
    31. Writing content
  25. MMgc
  26. Makefile - .mk files
  27. Marketplace
    1. Marketplace
    2. API
    3. Monetization
    4. Options
    5. Publishing
  28. Mozilla release FAQ
  29. Newsgroup summaries
    1. Newsgroup summaries
    2. Format
    3. Mozilla.dev.apps.firefox-2006-09-29
    4. Mozilla.dev.apps.firefox-2006-10-06
    5. mozilla-dev-accessibility
    6. mozilla-dev-apps-calendar
    7. mozilla-dev-apps-firefox
    8. mozilla-dev-apps-thunderbird
    9. mozilla-dev-builds
    10. mozilla-dev-embedding
    11. mozilla-dev-extensions
    12. mozilla-dev-i18n
    13. mozilla-dev-l10n
    14. mozilla-dev-planning
    15. mozilla-dev-platform
    16. mozilla-dev-quality
    17. mozilla-dev-security
    18. mozilla-dev-tech-js-engine
    19. mozilla-dev-tech-layout
    20. mozilla-dev-tech-xpcom
    21. mozilla-dev-tech-xul
    22. mozilla.dev.apps.calendar
    23. mozilla.dev.tech.js-engine
  30. Obsolete: XPCOM-based scripting for NPAPI plugins
  31. Plugins
    1. Plugins
    2. Adobe Flash
    3. External resources for plugin creation
    4. Logging Multi-Process Plugins
    5. Monitoring plugins
    6. Multi-process plugin architecture
    7. NPAPI plugin developer guide
    8. NPAPI plugin reference
    9. Samples and Test Cases
    10. Shipping a plugin as a Toolkit bundle
    11. Supporting private browsing in plugins
    12. The First Install Problem
    13. Writing a plugin for Mac OS X
    14. XEmbed Extension for Mozilla Plugins
  32. SAX
  33. Security
    1. Security
    2. Digital Signatures
    3. Encryption and Decryption
    4. Introduction to Public-Key Cryptography
    5. Introduction to SSL
    6. NSPR Release Engineering Guide
    7. SSL and TLS
  34. Solaris 10 Build Prerequisites
  35. Sunbird Theme Tutorial
  36. Table Reflow Internals
  37. Tamarin Tracing Build Documentation
  38. The Basics of Web Services
  39. Themes
    1. Themes
    2. Building a Theme
    3. Common Firefox theme issues and solutions
    4. Creating a Skin for Firefox
    5. Making sure your theme works with RTL locales
    6. Theme changes in Firefox 2
    7. Theme changes in Firefox 3
    8. Theme changes in Firefox 3.5
    9. Theme changes in Firefox 4
  40. Updating an extension to support multiple Mozilla applications
  41. Using IO Timeout And Interrupt On NT
  42. Using SSH to connect to CVS
  43. Using workers in extensions
  44. WebVR
    1. WebVR
    2. WebVR environment setup
  45. XQuery
  46. XUL Booster
  47. XUL Parser in Python