This article covers the changes that need to be made to update a Firefox theme to work properly in Firefox 2.

Note: We could use an article called Updating themes for Firefox 2 that would serve as a how-to guide for updating themes. If anyone with theming experience would like to write one, please do!

Browser changes requiring theme updates

There are a number of changed and deleted files in the browser that may require you to make changes to your theme. The table lists both the changed XUL file and the theme's corresponding CSS file that you might need to update.

Filename CSS File Details
browser/base/searchDialog.xul browser/base/content/searchDialog.css Removed from Firefox 2.
feeds/addFeedReader.xul feeds/addFeedReader.css New file that presents UI for adding a new feed reader.
feeds/subscribe.xhtml feeds/subscribe.css New file that presents the UI for subscribing to an RSS feed.
preferences/downloads.xul - Removed from Firefox 2.
preferences/general.xul - Removed from Firefox 2.
safebrowsing/warning-overlay.xul safebrowsing/browser-protection.css New file containing the overlay that's drawn over the browser when you browse to a suspected phishing site.
search/engineManager.xul engineManager.css New file containing the UI for the Search Engine Manager window.
toolkit/mozapps/preferences/fontscaling.xul - Removed from Firefox 2.

Changes to the default theme

The table below lists all the changes made in the default theme for Firefox 2; you can use this information as a starting point for figuring out the changes you need to make.

File Description of change
browser/bookmarks/addBookmark.css Updated to include microsummary-related CSS changes.
browser/bookmarks/bookmarksProperties.css New file; includes microsummary-related CSS.
browser/browser.css Needs to be updated to include new CSS for microsummaries, search fields, iconic bookmark menu items, and more.
browser/dropmark-nav-small.png New file; used as the drop-down menu arrow on the navigation buttons, when using small icons.
browser/dropmark-nav.png New file; used as the drop-down menu arrow on the navigation buttons.
browser/engineManager.css New file; CSS used for the Search Engine Manager.
browser/feeds/addFeedReader.css New file; CSS used for the window to add a new feed reader.
browser/feeds/feedIcon.png New file; the RSS feed icon.
browser/feeds/feedIcon16.png New file; the 16x16 pixel version of the RSS feed icon.
browser/feeds/subscribe.css New file; CSS used for the window to subscribe to a news feed.
browser/Go-rtl.png New file; Go icon to use if it's positioned at the left end of the URL field.
browser/preferences/preferences.css File that skins the preferences window.
browser/safebrowsing/browser-protection.css New file; CSS for the window that appears to warn the user that a site may be fraudulent, as well as the URL bar icon that indicates a site may be fraudulent.
browser/safebrowsing/close16x16.png New file; this is the icon displayed in the safe browsing warning window as a close box for the window.
browser/safebrowsing/dim.png New file; this is a graphic overlaid on top of the contents of the window to "dim" it when the safe browsing warning window is displayed. It should use translucency to allow the window contents to be visible through it.
browser/safebrowsing/tail.png New file; this is the "tail" of the talk-bubble style window used to indicate that a site may be fraudulent.
browser/safebrowsing/warning16x16.png New file; this is the 16x16 pixel version of the warning icon displayed in the URL bar when the safe browsing warning window is displayed.
browser/safebrowsing/warning24x24.png New file; this is the warning icon that's displayed inside the safe browsing warning window.
browser/search-bar-background-mid.png New file; the background for the middle part of the search bar. The ends of the bar are now skinned separately.
browser/search-bar-background.png Removed file.
browser/Search-bar.png Removed file.
browser/Search-go-rtl.png New file; the go button displayed when it's at the left end of the search bar.
browser/Search-go.png New file; the go button displayed when it's located at the right end of the search bar.
browser/Search-provider-bkgnd-rtl.png New file; the background drawn behind the search provider icon when it's located at the left end of the search bar.
browser/Search-provider-bkgnd.png New file; the background drawn behind the search provider icon when it's located at the right end of the search bar.
global/about.css New file; CSS used in the application's about box.
global/alltabs-box-bkgnd.png New file; the background for the "all tabs" drop-down menu at the right side of the tab bar.
global/alltabs-box-overflow-bkgnd.png New file; the background for the "all tabs" drop-down menu when there are enough tabs to activate tab bar scrolling.
global/browser.css Revised to support new styles for the main browser window.
global/globalBindings.xml Updated to support changes to the tab bar, including per-tab close buttons.
global/icons/alltabs.png Not actually used; left over from earlier drafts of the theme.
global/inactivetab-left.png Removed file.
global/inactivetab-right.png Removed file.
global/menu.css Updated to include new styles.
global/notification.css New file; defines styles used by the notification strip that appears at the top of browser windows to present notices such as "a popup was blocked."
global/scrollbox/autorepeat-arrow-dn-dis.gif New file; icon displayed for a disabled autorepeat down arrow in a scroll box.
global/scrollbox/autorepeat-arrow-dn.gif New file; icon displayed for an autorepeat down arrow in a scroll box.
global/scrollbox/autorepeat-arrow-up-dis.gif New file; icon displayed for a disabled autorepeat up arrow in a scroll box.
global/scrollbox/autorepeat-arrow-up.gif New file; icon displayed for an autorepeat up arrow in a scroll box.
global/scrollbox.css Needs to be updated to include new styles.
global/tab-arrow-end-bkgnd.png New file; the background for the scrolling tab bar arrow at the right side of the tab bar.
global/tab-arrow-end.png New file; the arrow drawn in the scrolling tab bar box at the right end of the tab bar.
global/tab-arrow-start-bkgnd.png New file; the background for the scrolling tab bar arrow at the left side of the tab bar.
global/tab-arrow-start.png New file; the arrow drawn in the scrolling tab bar box at the left end of the tab bar.
global/tab-left.png New file; the left edge of a tab.
global/tab-middle.png New file; the middle of a tab.
global/tab-right.png New file; the right edge of a tab.
global/tabbrowser-tabs-bkgnd.png New file; the background for the tab bar, displayed behind all tabs.
global/toolbar.css Needs to be updated to include new styles.
mozapps/extensions/about.css Updated with a simplified set of style names, since several styles were identical.
mozapps/extensions/extensions.css CSS for the add-ons manager window. Updated to support the new features of the Firefox 2 add-ons manager.
mozapps/extensions/itemDisabledFader.png New file; a translucent PNG used as an overlay on top of items that are disabled in the add-ons manager.
mozapps/extensions/itemEnabledFader.png New file; a translucent PNG used as an overlay on top of items that are enabled in the add-ons manager.
mozapps/extensions/notifyBadges.png New file; contains the icons used ito badge the icons for add-ons in the add-on manager window to indicate their status. These look like this in the default theme:

  • The first icon (green here) indicates that an add-on has an update available.
  • The second icon (yellow here)appears to be used for blocklisted items; trying to confirm.
  • The third icon (red here) indicates that an add-on is disabled, either by the user or because it's incompatible with the application.
  • The fourth icon (blue here)(not sure what this one means).
mozapps/extensions/question.png New file; used in the Add-ons Manager when you check for updates. If no updates are found, this icon is displayed at the left side of the message strip that appears across the top of the window.
mozapps/extensions/update.css This file, which skins the Firefox update wizard, has fewer styles in it due to the redesigned update wizard.
mozapps/extensions/viewButtons.png New file; contains icons for each of the views that may be available in the add-ons manager. In the default theme, these look something like this:


The top row contains dimmed versions of the icons below them. The first icon is for the extensions view. The second is for themes. The third is for locales, the fourth is for plugins, the fifth is for updates, and the sixth is for installs.
mozapps/pref This entire directory is no longer used in Firefox 2 and should be removed.

Changes in browser

bookmarks/addBookmark.css

The addBookmarks.css file should have the following lines added to the top:

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
@namespace html url("http://www.w3.org/1999/xhtml");

Some microsummary-related CSS also needs to be added, to provide formatting for the microsummary picker. These are used to make the picker look like a regular text box instead of like an editable menu list when there are no microsummaries available.

This file styles addBookmark2.xul.

bookmarks/bookmarksProperties.css

This is a new file in Firefox 2, and should contain the same CSS code as you added to addBookmark.css. This file styles bookmarksProperties.xul.

Note: This CSS may be moved out into a separate file that will be referenced by both files in the future.

browser.css

The following styles used in Firefox 1.5 themes are no longer used in Firefox 2 and should be removed from your theme:

The following styles need to be added to your theme to be compatible with Firefox 2:

You may need to make changes to other styles as well.

searchbar.css

The following style is no longer used in Firefox 2 and should be removed from your theme:

The following styles need to be added to your theme to be compatible with Firefox 2:

You may of course wish to make changes to other styles as well.

preferences/preferences.css

The following styles are no longer used in Firefox 2 and should be removed from your theme:

The following styles need to be added to your theme to make it compatible with Firefox 2:

You may of course wish to change other styles as well.

feeds/addFeedReader.css

This is a new file in Firefox 2. It's used to skin the window displayed to add a new feed reader, which is defined in the file browser/feeds/addFeedReader.xul.

feeds/subscribe.css

This is a new file in Firefox 2. It skins the window displayed to subscribe to an RSS feed, which is at browser/feeds/subscribe.xhtml.

The default theme also includes styles for a[href] img, body, h1, h2, and html.

safebrowser/browser-protection.css

This file, new to Firefox 2, skins browser protection features. The following styles must be implemented to support the window that appears when the user browses to a suspected phishing site:

The following styles are used to display, in the URL bar, an indicator of whether or not the site is safe:

engineManager.css

The following style needs to be implemented. This file is new in Firefox 2.

Changes in global

about.css

This is a new file for Firefox 2. It skins the Firefox about box, and needs to provide at least the following styles:

The default theme also skins the following styles: body, html, img, ul, and ul > li.

browser.css

The following styles that were used in Firefox 1.5 are no longer used in Firefox 2 and have been removed:

The following styles are new in Firefox 2:

You may of course wish to make changes to other styles as well.

The following style is no longer used in Firefox 2 and has been removed:

The Firefox 2 theme also adds the following new styles:

You may wish to change the definitions of other styles as well.

notification.css

This is a new file in Firefox 2. It is used for the notification bar along the top of the browser that displays messages to the user such as popup blocked, or a plugin is needed and so forth. There are three severity levels for messages, info, warning and critical. You should define the following styles:

scrollbox.css

The following new styles have been added to this file for Firefox 2 themes:

You may wish to change other styles as well.

Changes in mozapps

extensions/about.css

The following styles from Firefox 1.5 are no longer used in Firefox 2 and should be removed:

The following styles were added:

You may wish to make changes to other styles as well.

extensions/update.css

The following styles are no longer used in Firefox 2 and should be removed from your theme:

The following styles were also added: