Revision 140904 of Cambios en los temas de Firefox 3

  • Enlace amigable (slug) de la revisión: Cambios_en_los_temas_de_Firefox_3
  • Título de la revisión: Cambios en los temas de Firefox 3
  • Id de la revisión: 140904
  • Creada:
  • Creador: Omarbenyabir
  • ¿Es la revisión actual? No
  • Comentario 32 words removed

Contenido de la revisión

<noscript>

Some features of this site require JavaScript.

</noscript>

[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.

Changes in mozapps

See also

Fuente de la revisión

<ul id="nav-access"> <li><a href="#pageContent">Skip to the main content</a></li> <li><a href="#searchInput">Skip to the site search</a></li>
</ul>
<div class="globalWrap">

<!-- end header -->
<div class="body"><noscript><div id="noscript"><p>Some features of this site require JavaScript.</p></div></noscript>
<div class="pageContent PageDW-ThemechangesinFirefox3" id="pageContent">
<div class="pageTitle">
<h1 id="title">[This article covers the changes that need to be made to update a Firefox theme to work properly in <a href="../../../../en/Firefox_3" rel="internal">Firefox 3</a>.</h1>
<div class="note"><strong>Note:</strong> We could use an article called <a href="../../../../en/Updating_themes_for_Firefox_3" rel="internal">Updating themes for Firefox 3</a> that would serve as a how-to guide for updating themes. If anyone with theming experience would like to write one, please do!</div>
<div id="section_1">
<h2 class="editable">Browser changes requiring theme updates</h2>
<p>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.</p>
<table class="standard-table"> <tbody> <tr> <td class="header">Filename</td> <td class="header">CSS File</td> <td class="header">Details</td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> </tbody>
</table>
</div>
<div id="section_2">
<h2 class="editable">Changes to the default theme</h2>
<p>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.</p>
<div id="section_3">
<h3 class="editable">All file list</h3>
<div id="section_4">
<h4 class="editable">All platforms</h4>
<table class="standard-table"> <tbody> <tr> <td class="header">File</td> <td class="header">Description of change</td> </tr> <tr> <td><code>browser/themes/*/browser/browser.css</code></td> <td>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").</td> </tr> </tbody>
</table>
</div>
<div id="section_5">
<h4 class="editable">Mac OS X</h4>
<table class="standard-table"> <tbody> <tr> <td class="header">File</td> <td class="header">Description of change</td> </tr> <tr> <td><code>browser/themes/pinstripe/browser/tabbrowser/tabDragIndicator.png</code></td> <td>Removed superfluous blank pixels from the edges, so that the image is smaller. May or may not affect other Mac themes that use it.</td> </tr> <tr> <td><code>browser/themes/pinstripe/browser/browser.css</code></td> <td>.tabbrowser-tab[first-tab="true"] &gt; .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.</td> </tr> </tbody>
</table>
</div>
</div>
<div id="section_6">
<h3 class="editable">Changes in <code>browser</code></h3>
</div>
<div id="section_7">
<h3 class="editable">Changes in <code>global</code></h3>
<div id="section_8">
<h4 class="editable">All platforms</h4>
<p>The yellow background for the location bar has been deprecated; instead, themes should style the new <code>#identity-box</code> element depending on its <code>verifiedDomain</code>/<code>verifiedIdentity</code> class.</p>
<p>The Go button is now located inside the location bar, so the image for it (<code><a class=" external" href="chrome://browser/skin/Go-arrow.png" rel="freelink">chrome://browser/skin/Go-arrow.png</a></code>) needs to be smaller. The rule that's needed to show and hide the Go button and other location bar icons is:</p>
<pre class="eval">#urlbar[pageproxystate="invalid"] &gt; #urlbar-icons &gt; :not(#go-button) ,
#urlbar[pageproxystate="valid"] &gt; #urlbar-icons &gt; #go-button {
  visibility: collapse;
}
</pre>
<div id="section_9">
<h5 class="editable">Images to add</h5>
<p>Add the following images:</p>
<dl><dt><code><a class=" external" href="chrome://global/skin/icons/information-16.png" rel="freelink">chrome://global/skin/icons/information-16.png</a></code> </dt><dd>Used when presenting information notices. </dd><dt><code><a class=" external" href="chrome://global/skin/icons/warning-16.png" rel="freelink">chrome://global/skin/icons/warning-16.png</a></code> </dt><dd>Used when displaying warnings. </dd></dl></div>
<div id="section_10">
<h5 class="editable">Images to remove</h5>
<p>The following images were removed:</p>
<dl><dt><code><a class=" external" href="chrome://mozapps/skin/extensions/question.png" rel="freelink">chrome://mozapps/skin/extensions/question.png</a></code> </dt><dd>No longer used. </dd></dl></div>
</div>
<div id="section_11">
<h4 class="editable">Mac OS X</h4>
<p>Mac OS X themes for Firefox 3 should add these two rules to the end of <code><a class=" external" href="chrome://global/skin/wizard.css" rel="freelink">chrome://global/skin/wizard.css</a></code>:</p>
<pre class="eval">.wizard-buttons-btm {
  padding: <em>X</em>px;
}

.wizard-label-box {
  display: none;
}
</pre>
<p>The numeric value of <em>X</em>, the number of pixels of padding in <code>.wizard-buttons-btm</code>, should be the same as the value of the margin for <code>.wizard-buttons-box-2</code>.</p>
<div id="section_12">
<h5 class="editable">Image Changes</h5>
<p><a class=" external" href="chrome://global/skin/icons/loading_16.gif" rel="freelink">chrome://global/skin/icons/loading_16.gif</a> was replaced with <a class=" external" href="chrome://global/skin/icons/loading_16.png" rel="freelink">chrome://global/skin/icons/loading_16.png</a> .</p>
</div>
</div>
</div>
<div id="section_13">
<h3 class="editable">Changes in <code>mozapps</code></h3>
</div>
</div>
<h2 class="editable">See also</h2>
</div>
</div>
</div>
</div>
<div class="ui-msg-wrap" id="MTMessage" style="display: none;">
<div class="ui-msg ui-errormsg" id="MTMessageStyle">
<div class="ui-msg-opt">
<ul> <li><a class="dismiss" href="#">dismiss message</a></li> <li><a class="details" href="#" id="MTMessageDetailsLink">view details</a></li>
</ul>
<div class="ui-msg-autoclose"><span id="MTMessageUnpaused" style="display: inline;">Message will close by itself in seconds</span> <span id="MTMessagePaused" style="display: none;">Message timer has been stopped</span></div>
</div>
<div class="ui-msg-desc" id="MTMessageDetails" style="display: none;">
<p>Viewing Details:</p>
</div>
</div>
</div>
<!-- Served by pm-dekiwiki02 in 0.05 secs. -->
Revertir a esta revisión