Iniciando

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

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

Diretórios

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

skin: skin um simples recipiente para o diretório classic que mantem todo o material importante.
classic: classic contem os seguintes diretórios.
browser: browser 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.
communicator: Não é obrigatório e normalmente é esquecido.
global: global 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.
help: help contem todos os arquivos para aplicar o tema no diálogo da janela de ajuda.
mozapps: mozapps 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 Meu_Tema. Dentro deste diretório ponha como diretórios principais: browser, communicator, global, help, mozapps e também os arquivos icon.png, preview.png (sim, isto significa que a estrutura deste diretório e o novo classico.jar será ligeiramente diferente do classic).

Criando os arquivos de instalação

contents.rdf

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

No código pesquise 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 nós possuirmos visuais para o Chatzilla, necessitamos adicionar outra linha semelhante e alterar a 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 saia do editor de texto.

install.rdf

Faça uma cópia install.rdf e ponha em seu diretório Meu_Tema, depois abra em seu editor de texto. Este arquivo é um pequeno banco de dados XML que descreve a instalação do visual.

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

A primeira seção requer que você estabeleça um UUID para o seu tema e que você dê ao seu tema um número da versão. Uma vez feito isto, insira a informação como indicado acima, e continue abaixo.

Você deverá ter também as atualizações entre máxima e mínima compatíveis para a aplicação (Firefox) na seguinte seção:

    <em:targetApplication>
      <Description>
        <!-- UUID do Firefox -->
        <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
        <em:minVersion>Versao_Minima_do_Firefox</em:minVersion>
        <em:maxVersion>Versao_Maxima_do_Firefox</em:maxVersion>
      </Description>
    </em:targetApplication>

Estabelecer versões compatíveis no limite entre mínima e máxima previne conflitos em alguma versão do Firefox para qual seu tema não foi desenvolvido ou não testado.

Arquivos CSS

Os arquivos CSS nesses diretórios dizem ao browser como deverá mostrar os botões e outros controles, onde posicionar as imagens, bordas e espaçamentos, e assim por diante.

Nesse exemplo, vamos mudar os botões de padrão do browser.

Vá para a pasta global e abra o arquivo button.css em seu editor de texto favorito. Desça até button {. Esta seção define o botão normal em sua posição estática (não está com o ponteiro sobre ele, e não é selecionado).

Mude o background-color: para DarkBlue e o color: para White, e salve o arquivo.

more after I get done with some tests

Recompactar o JAR

Agora tudo que você precisa fazer é compactar novamente os arquivos com a seguinte estrutura de diretório, usando seu programa favorito de compactação de arquivos:

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

Certifique-se de apenas compactar os arquivos de dentro do diretório que você criou Meu_Tema. Caso o contrário seu tema não será instalado corretamente.

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