Skip to main content

Visit Mozilla.org

Theme changes in Firefox 3

From MDC

This article covers features introduced in Firefox 3

DRAFT
This page is not complete.

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

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

Contents

[edit] 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

[edit] Changes to the default theme

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

[edit] All file list

[edit] All platforms

File Description of change
browser/themes/*/browser/browser.css The width of the drag and drop indicator is no longer calculated during the drag (tabbrowser.xml). Instead a '-moz-margin-start' property must be added to .tab-drop-indicator-bar, with a value that is half of the width of the indicator image. Also, the visibility of the indicator is now controlled by setting collapsed in tabbrowser.xml. As a result, the 'display' property should be removed from .tab-drop-indicator-bar (including for dragging="true").

[edit] Mac OS X

File Description of change
browser/themes/pinstripe/browser/tabbrowser/tabDragIndicator.png Removed superfluous blank pixels from the edges, so that the image is smaller. May or may not affect other Mac themes that use it.
browser/themes/pinstripe/browser/browser.css .tabbrowser-tab[first-tab="true"] > .tab-image-left no longer has a margin-left. Instead .tabs-left now displayed and given the same width as the former margin-left. It was already done this way in Winstripe.

[edit] Changes in browser

[edit] Changes in global

[edit] Mac OS X

Mac OS X themes for Firefox 3 should add these two rules to the end of chrome://global/skin/wizard.css: 

.wizard-buttons-btm {
  padding: Xpx;
}

.wizard-label-box {
  display: none;
}

The numeric value of X, the number of pixels of padding in .wizard-buttons-btm, should be the same as the value of the margin for .wizard-buttons-box-2.

[edit] Image Changes

chrome://global/skin/icons/loading_16.gif was replaced with chrome://global/skin/icons/loading_16.png .

[edit] Changes in mozapps

[edit] See also

Theme changes in Firefox 2

Retrieved from "http://developer.mozilla.org/en/docs/Theme_changes_in_Firefox_3"