Your Search Results

    Theme changes 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!

    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
         

    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.

    All file list

    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").

    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.

    Changes in browser

    ---

    Changes in global

    All platforms

    The yellow background for the location bar has been deprecated; instead, themes should style the new #identity-box element depending on its verifiedDomain/verifiedIdentity class.

    The Go button is now located inside the location bar, so the image for it (chrome://browser/skin/Go-arrow.png) needs to be smaller. The rule that's needed to show and hide the Go button and other location bar icons is:

    #urlbar[pageproxystate="invalid"] > #urlbar-icons > :not(#go-button) ,
    #urlbar[pageproxystate="valid"] > #urlbar-icons > #go-button {
      visibility: collapse;
    }
    
    Images to add

    Add the following images:

    chrome://global/skin/icons/information-16.png
    Used when presenting information notices.
    chrome://global/skin/icons/warning-16.png
    Used when displaying warnings.
    Images to remove

    The following images were removed:

    chrome://mozapps/skin/extensions/question.png
    No longer used.

    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.

    Image Changes

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

    Changes in mozapps

    See also

    Document Tags and Contributors

    Contributors to this page: Sheppy, GavinSharp, ethertank, wbamberg, W.woods, Mgjbot, Potappo
    Last updated by: wbamberg,