Iniciando

  • Revision slug: Criando_um_visual_para_o_Firefox/Iniciando
  • Revision title: Iniciando
  • Revision id: 132025
  • Created:
  • Creator: Camaleaun
  • Is current revision? Não
  • コメント /* contents.rdf */

Revision Content

Instalação

Baixe a mais recente versão do Firefox e instale. Certifique-se de instalar a extensão DOM Inspector incluída.

Extrair tema

Você pode iniciar com qualquer tema projetado para o Firefox, porém, para uma melhor compreensão estaremos editando o Winstripe (tema padrão do Firefox). Ele está situado no arquivo <tt>classic.jar</tt> e é encontrado no diretório da instalação do Firefox. Um arquivo .jar é na realidade um zip renomeado, abra-o em um programa zip do mesmo modo que abriria um arquivo comum. Entretanto, se a aplicação zip não interpretar com um formato válido, renomeie o arquivo para <tt>classic.zip</tt> e continue a extração.

Localizações do classic.jar

Linux: /usr/lib/MozillaFirefox/chrome/classic.jar

Windows: \Arquivos de Programas\Mozilla Firefox\chrome\classic.jar

Para Mac OS X:

  • Vá até sua pasta aplicativos
  • Dê um clique pressionando o botão Control no ícone do aplicativo (íncone do Firefox), escolha Exibir Conteúdo da Biblioteca.
  • Siga até contents/MacOS/Chrome/classic.jar

Copie <tt>classic.jar</tt> para outra pasta mais facilmente acessível -- é recomendado usar <tt>Classico</tt> -- extraia o conteúdo nesta pasta, garantindo a permanência da mesma estrutura de diretório.

Nota: Você pode alterar o arquivo <tt>.jar</tt> para <tt>.jar.zip</tt> então extrair ela para colocar dentro de uma pasta!

Diretórios

Dentro do <tt>classic.jar</tt> há um diretório <tt>skin</tt>, e inclui mais dois arquivos <tt>preview.png</tt> e <tt>icon.png</tt>.

<tt>skin</tt>
<tt>skin</tt> um simples recipiente para o diretório <tt>classic</tt> que mantem todo o material importante.
<tt>classic</tt>
<tt>classic</tt> contem os seguintes diretórios.
<tt>browser</tt>
<tt>browser</tt> contem todos os ícones da barra de ferramentas, como também os ícones para a barra de navegação, sistema de feeds, segurança de navegação. organizador de favoritos, janela de opções e pesquisa.
<tt>communicator</tt>
Não é obrigatório e normalmente é esquecido.
<tt>global</tt>
<tt>global</tt> contem quase todos os mais importante arquivos CSS que definem a aparência do navegador. Este é o diretório o mais crítico em um tema.
<tt>help</tt>
<tt>help</tt> contem todos os arquivos para aplicar o tema no diálogo da janela de ajuda.
<tt>mozapps</tt>
<tt>mozapps</tt> contem todos os estilos e ícones para certos mecanismos do navegador, como o gerenciador de complementos e o assistente de atualização.

Instalar seu novo tema

Antes que você possa ver as alterações feitas no tema do Firefox (desde que a última edição seja de difícil ajuste) você deve primeiramente aprender como re-compactar o tema clássico para fazê-lo instalável. Para este exemplo chamaremos seu tema de "Meu_Tema", embora possa ser substituído por qualquer outro nome.

Copiando os arquivos necessários

O primeiro passo é mover todos os arquivos na correta estrutura do diretório. Então crie um novo diretório chamado <tt>Meu_Tema</tt>. Dentro deste diretório ponha como diretórios principais: <tt>browser</tt>, <tt>communicator</tt>, <tt>global</tt>, <tt>help</tt>, <tt>mozapps</tt> e também os arquivos <tt>icon.png</tt>, <tt>preview.png</tt> (sim, isto significa que a estrutura deste diretório e o novo <tt>classico.jar</tt> será ligeiramente diferente do classic).

Criando os arquivos de instalação
contents.rdf

Faça uma cópia do contents.rdf ponha em seu diretório <tt>Meu_Tema</tt> e abra em seu editor de texto. Este arquivo é um pequeno Banco de dados XML Database que é utilizado para descrever o visual.

No códido pesquize por todos resultados de "Meu_Tema" e substitua com o nome escolhido para o seu tema.

A seção packages lista que componentes você está alterando. Se também também tivermos visuais para o Chatzilla, necessitaríamos adicionar outra linha semelhante e alterar o parte final para Chatzilla. Porém esta lista inclui tudo que alteramos, por isto substitua apenas a parte do texto em azul para manter o nome/versão que você usou nas seções antes desta.

<RDF:li resource="urn:mozilla:skin:Meu_Tema:communicator"/>
<RDF:li resource="urn:mozilla:skin:Meu_Tema:editor"/>
<RDF:li resource="urn:mozilla:skin:Meu_Tema:global"/>
<RDF:li resource="urn:mozilla:skin:Meu_Tema:messenger"/>
<RDF:li resource="urn:mozilla:skin:Meu_Tema:navigator"/>

Salve o arquivo e sai do editor de texto.

install.rdf

Make a copy of install.rdf and place it in the My_Theme directory, then open it up in your text editor. This file is a small XML database that describes the skin.

  <Description about="urn:mozilla:install-manifest">
  <em:id>{Themes_UUID}</em:id>
  <em:version>Themes_Version</em:version>

The first section requires that you establish a UUID for your theme and that you give your theme a version number. Once you've done this, insert the information as above, and scroll down.

You will also have to update the minimum and maximum compatible versions for the target application (Firefox) in the following section:

  <em:targetApplication>
    <Description>
      <!-- Firefox's UUID -->
      <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
      <em:minVersion>Min_FF_Version</em:minVersion>
      <em:maxVersion>Max_FF_Version</em:maxVersion>
    </Description>
  </em:targetApplication>

Establishing both minimum and maximum compatible versions lets you avoid conflicts with versions of Firefox your theme wasn't designed for -- or wasn't tested on.

CSS Files

The CSS files in these directories tell the browser how to display the buttons and other controls, where to put the images, what border and padding it should put around them, and so on.

As an example, lets change the standard button.

Go into the global <tt>global</tt> directory and open <tt>button.css</tt> in your favorite text editor. Scroll down to button {. This section defines the normal button in its basic state (There is no mouse over it, it's not disabled, and it's not selected).

Change the background-color: to DarkBlue and the color: to White, and save the file.

more after I get done with some tests

Repackaging JAR

Now all you need to do is repackage a JAR file with the following directory structure, using your favorite archive manager to create a zip archive:

/browser/*
/communicator/*
/global/*
/help/*
/mozapps/*
/contents.rdf
/install.rdf
/icon.png
/preview.png
  

Make sure not to just zip up the <tt>My_Theme</tt> parent directory since that will cause the drag and drop install in the next section to fail without error messages.

Triggering the install from the web

To install the theme's JAR file directly from the web, you need to run some JavaScript.

<a href='javascript:InstallTrigger.installChrome(InstallTrigger.SKIN, 
 "myskin.jar", "My Skin Theme")'>install My Skin</a>

If you have JAR files on your hard drive and would like to install them, then download/use this form.

You can also just open the themes window in Mozilla and drag and drop your .jar file onto it.

Now to change your folder(s) back into a .jar Well it's easy! What you do is put your folder(s) into a .zip file and then when it's compressed make the .zip into a .jar

{{ wiki.languages( { "en": "en/Creating_a_Skin_for_Firefox/Getting_Started", "es": "es/Creando_un_skin_para_Firefox/Como_empezar", "fr": "fr/Cr\u00e9er_un_th\u00e8me_pour_Firefox/Premiers_pas" } ) }}

Revision Source

<p>
</p>
<h3 name="Instala.C3.A7.C3.A3o"> Instalação </h3>
<p>Baixe a mais recente versão do Firefox e instale. Certifique-se de instalar a extensão DOM Inspector incluída.
</p>
<h4 name="Extrair_tema"> Extrair tema </h4>
<p>Você pode iniciar com qualquer tema projetado para o Firefox, porém, para uma melhor compreensão estaremos editando o Winstripe (tema padrão do Firefox). Ele está situado no arquivo <tt>classic.jar</tt> e é encontrado no diretório da instalação do Firefox. Um arquivo .jar é na realidade um zip renomeado, abra-o em um programa zip do mesmo modo que abriria um arquivo comum. Entretanto, se a aplicação zip não interpretar com um formato válido, renomeie o arquivo para <tt>classic.zip</tt> e continue a extração.
</p>
<h5 name="Localiza.C3.A7.C3.B5es_do_classic.jar"> Localizações do classic.jar </h5>
<p><b>Linux:</b> /usr/lib/MozillaFirefox/chrome/classic.jar
</p><p><b>Windows:</b> \Arquivos de Programas\Mozilla Firefox\chrome\classic.jar
</p><p><b>Para Mac OS X:</b>
</p>
<ul>
<li>Vá até sua pasta aplicativos</li> 
<li>Dê um clique pressionando o botão Control no ícone do aplicativo (íncone do Firefox), escolha Exibir Conteúdo da Biblioteca.</li> 
<li>Siga até contents/MacOS/Chrome/classic.jar</li>
</ul>
<p>Copie <tt>classic.jar</tt> para outra pasta mais facilmente acessível -- é recomendado usar <tt>Classico</tt>  -- extraia o conteúdo nesta pasta, garantindo a permanência da mesma estrutura de diretório.
</p><p>Nota: Você pode alterar o arquivo <tt>.jar</tt> para <tt>.jar.zip</tt> então extrair ela para colocar dentro de uma pasta!
</p>
<h4 name="Diret.C3.B3rios"> Diretórios </h4>
<p>Dentro do <tt>classic.jar</tt> há um diretório <tt>skin</tt>, e inclui mais dois arquivos <tt>preview.png</tt> e <tt>icon.png</tt>.
</p>
<dl><dt><tt>skin</tt>
</dt><dd><tt>skin</tt> um simples recipiente para o diretório <tt>classic</tt> que mantem todo o material importante.
</dd><dt><tt>classic</tt>
</dt><dd><tt>classic</tt> contem os seguintes diretórios.
</dd><dt><tt>browser</tt>
</dt><dd><tt>browser</tt> contem todos os ícones da barra de ferramentas, como também os ícones para a barra de navegação, sistema de feeds, segurança de navegação. organizador de favoritos, janela de opções e pesquisa.
</dd><dt><tt>communicator</tt>
</dt><dd>Não é obrigatório e normalmente é esquecido.
</dd><dt><tt>global</tt>
</dt><dd><tt>global</tt> contem quase todos os mais importante arquivos CSS que definem a aparência do navegador.  Este é o diretório o mais crítico em um tema.
</dd><dt><tt>help</tt>
</dt><dd><tt>help</tt> contem todos os arquivos para aplicar o tema no diálogo da janela de ajuda.
</dd><dt><tt>mozapps</tt>
</dt><dd><tt>mozapps</tt> contem todos os estilos e ícones para certos mecanismos do navegador, como o gerenciador de complementos e o assistente de atualização.
</dd></dl>
<h4 name="Instalar_seu_novo_tema"> Instalar seu novo tema </h4>
<p>Antes que você possa ver as alterações feitas no tema do Firefox (desde que a última edição seja de difícil ajuste) você deve primeiramente aprender como re-compactar o tema clássico para fazê-lo instalável. Para este exemplo chamaremos seu tema de "Meu_Tema", embora possa ser substituído por qualquer outro nome.
</p>
<h5 name="Copiando_os_arquivos_necess.C3.A1rios"> Copiando os arquivos necessários </h5>
<p>O primeiro passo é mover todos os arquivos na correta estrutura do diretório. Então crie  um novo diretório chamado <tt>Meu_Tema</tt>. Dentro deste diretório ponha como diretórios principais: <tt>browser</tt>, <tt>communicator</tt>, <tt>global</tt>, <tt>help</tt>, <tt>mozapps</tt> e também os arquivos <tt>icon.png</tt>,  <tt>preview.png</tt> (sim, isto significa que a estrutura deste diretório e o novo <tt>classico.jar</tt> será ligeiramente diferente do classic).
</p>
<h5 name="Criando_os_arquivos_de_instala.C3.A7.C3.A3o"> Criando os arquivos de instalação </h5>
<h6 name="contents.rdf"> contents.rdf </h6>
<p>Faça uma cópia do <a href="pt/Criando_um_visual_para_o_Firefox/contents.rdf">contents.rdf</a> ponha em seu diretório <tt>Meu_Tema</tt> e abra em seu editor de texto. Este arquivo é um pequeno Banco de dados XML Database que é utilizado para descrever o visual.
</p><p>No códido pesquize por todos resultados de "Meu_Tema" e substitua com o nome escolhido para o seu tema.
</p><p>A seção packages lista que componentes você está alterando. Se também também tivermos visuais para o Chatzilla, necessitaríamos adicionar outra linha semelhante e alterar o parte final para Chatzilla. Porém esta lista inclui tudo que alteramos, por isto substitua apenas a parte do texto em azul para manter o nome/versão que você usou nas seções antes desta.
</p>
<pre class="eval">&lt;RDF:li resource="urn:mozilla:skin:<span style="color:#00D;font-weight:bold;">Meu_Tema</span>:communicator"/&gt;
&lt;RDF:li resource="urn:mozilla:skin:<span style="color:#00D;font-weight:bold;">Meu_Tema</span>:editor"/&gt;
&lt;RDF:li resource="urn:mozilla:skin:<span style="color:#00D;font-weight:bold;">Meu_Tema</span>:global"/&gt;
&lt;RDF:li resource="urn:mozilla:skin:<span style="color:#00D;font-weight:bold;">Meu_Tema</span>:messenger"/&gt;
&lt;RDF:li resource="urn:mozilla:skin:<span style="color:#00D;font-weight:bold;">Meu_Tema</span>:navigator"/&gt;
</pre>
<p>Salve o arquivo e sai do editor de texto.
</p>
<h6 name="install.rdf"> install.rdf </h6>
<p>Make a copy of <a href="pt/Creating_a_Skin_for_Firefox/install.rdf">install.rdf</a> and place it in the <code>My_Theme</code> directory, then open it up in your text editor. This file is a small XML database that describes the skin.
</p>
<pre>  &lt;Description about="urn:mozilla:install-manifest"&gt;
  &lt;em:id&gt;{Themes_UUID}&lt;/em:id&gt;
  &lt;em:version&gt;Themes_Version&lt;/em:version&gt;
</pre>
<p>The first section requires that you establish a <a href="pt/Creating_a_Skin_for_Firefox/UUID">UUID</a> for your theme and that you give your theme a version number.  Once you've done this, insert the information as above, and scroll down.
</p><p>You will also have to update the minimum and maximum compatible versions for the target application (Firefox) in the following section:
</p>
<pre>  &lt;em:targetApplication&gt;
    &lt;Description&gt;
      &lt;!-- Firefox's UUID --&gt;
      &lt;em:id&gt;{ec8030f7-c20a-464f-9b0e-13a3a9e97384}&lt;/em:id&gt;
      &lt;em:minVersion&gt;Min_FF_Version&lt;/em:minVersion&gt;
      &lt;em:maxVersion&gt;Max_FF_Version&lt;/em:maxVersion&gt;
    &lt;/Description&gt;
  &lt;/em:targetApplication&gt;
</pre>
<p>Establishing both minimum and maximum compatible versions lets you avoid conflicts with versions of Firefox your theme wasn't designed for -- or wasn't tested on.
</p>
<h4 name="CSS_Files"> CSS Files </h4>
<p>The CSS files in these directories tell the browser how to display the buttons and other controls, where to put the images, what border and padding it should put around them, and so on.
</p><p>As an example, lets change the standard button.
</p><p>Go into the global <tt>global</tt> directory and open <tt>button.css</tt> in your favorite text editor. Scroll down to <code>button {</code>. This section defines the normal button in its basic state (There is no mouse over it, it's not disabled, and it's not selected).
</p><p>Change the <code>background-color:</code> to <code>DarkBlue</code> and the <code>color:</code> to <code>White</code>, and save the file.
</p><p><i>more after I get done with some tests</i>
</p>
<h4 name="Repackaging_JAR"> Repackaging JAR </h4>
<p>Now all you need to do is repackage a JAR file with the following directory structure, using your favorite archive manager to create a zip archive:
</p>
  <pre>/browser/*
/communicator/*
/global/*
/help/*
/mozapps/*
/contents.rdf
/install.rdf
/icon.png
/preview.png
  </pre>
<p>Make sure not to just zip up the <tt>My_Theme</tt> parent directory since that will cause the drag and drop install in the next section to fail without error messages.
</p>
<h4 name="Triggering_the_install_from_the_web"> Triggering the install from the web </h4>
<p>To install the theme's JAR file directly from the web, you need to run some JavaScript.
</p>
<pre class="eval">&lt;a href='javascript:InstallTrigger.installChrome(InstallTrigger.SKIN, 
 "<span style="color:#00D;font-weight:bold;">myskin.jar</span>", "<span style="color:#00D;font-weight:bold;">My Skin Theme</span>")'&gt;install My Skin&lt;/a&gt;
</pre>
<p>If you have JAR files on your hard drive and would like to install them, then download/use <a class="external" href="http://www.eightlines.com/neil/mozskin/installjar.html">this form</a>.
</p><p>You can also just open the themes window in Mozilla and drag and drop your .jar file onto it.
</p><p>Now to change your folder(s) back into a .jar
Well it's easy! What you do is put your folder(s) into a .zip file and then when it's compressed make the .zip into a .jar
</p>{{ wiki.languages( { "en": "en/Creating_a_Skin_for_Firefox/Getting_Started", "es": "es/Creando_un_skin_para_Firefox/Como_empezar", "fr": "fr/Cr\u00e9er_un_th\u00e8me_pour_Firefox/Premiers_pas" } ) }}
Revert to this revision