Archive for the 'CSS' Category

Reposicionat del botó de tancar pestanya

Tuesday, October 24th, 2006

Per reposicionar el botó de tancar pestanya del Firefox 2.0 i passar-lo de la dreta a l’esquerra el que cal fer bàsicament és jugar amb l’ordre dels elements que composen la pestanya.

Per fer-ho els CSS de Mozilla tenen la propietat -moz-box-ordinal-group

El codi de les pestanyes es pot veure al fitxer del theme globalBindings.xml i el binding que ens interessa és:


<binding id="tabbrowser-tab" extends="chrome://global/content/bindings/tabbrowser.xml#tabbrowser-tab">
  <content chromedir="&locale.dir;" closetabtext="&closeTab.label;">
    <xul:hbox class="tab-image-left" xbl:inherits="selected"/>
    <xul:hbox flex="1" class="tab-image-middle" align="center" xbl:inherits="selected">
      <xul:stack class="tab-icon">
        <xul:image xbl:inherits="validate,src=image" class="tab-icon-image"/>
        <xul:image class="tab-extra-status"/>
      </xul:stack>
      <xul:label flex="1" xbl:inherits="value=label,crop,accesskey" crop="right" class="tab-text"/>
    </xul:hbox>
    <xul:toolbarbutton anonid="close-button" class="tab-close-button" tabindex="-1"/>
      <xul:hbox class="tab-image-right" xbl:inherits="selected"/>
  </content>
</binding>

Aquest fitxer pot canviar en funció del theme usat.

Afegint el següent codi a l’userChrome.css s’aconsegueix el resultat desitjat:


.tabbrowser-tabs {
  -moz-box-ordinal-group: 2;
}
.tab-image-middle {
  -moz-box-ordinal-group: 2;
}
.tab-image-right {
  -moz-box-ordinal-group: 3;
}
.tab-image-left {
  -moz-padding-start: 12px;
}
.tab-icon  {
  -moz-padding-start: 10px;
  margin-right: -10px;
}

Per gestionar l’userChrome.css es pot utilitzar l’extensió Stylish evitant haver d’entrar al profile.