Como empezar

Setup

Descargue la última versión de Firefox e instalela. Asegúrese de instalar también el módulo DOM Inspector.

Extraer el tema

Aunque en teoría puede comenzar con cualquier tema diseñado para Firefox, por motivos de consistencia, vamos a editar Winstripe, el tema por defecto de Firefox. Se encuentra ubicado en el archivo "classic.jar" dentro del directorio de instalación de Firefox. Un archivo .jar es en realidad un archivo zip renombrado que puede abrir con su programa de compresión favorito de la misma forma que abre un archivo zip. Sin embargo, si su aplicación cree que no es el formato correcto, puede simplemente renombrar el archivo a "classic.zip" y continuar la extracción.

Ubicaciones del archivo Classic.jar

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

Windows: \Program Files\Mozilla Firefox\chrome\classic.jar

Mac OS X:

• Vaya a la carpeta de su aplicación
• Haga control click sobre el icono de la aplicación (el icono de Firefox), y seleccione Mostrar el contenido del paquete.
• Vaya a contents/MacOS/Chrome/classic.jar

Copie el archivo classic.jar a una carpeta de fácil acceso ("Clasic" es una ubicación recomendable). Ahora extraiga el contenido a esta carpeta, manteniendo la estructura de directorios.

Directorios

Dentro del archivo classic.jar encontrará un directorio, skin, así como dos archivos preview.png e icon.png.

skin 

Skin simplemente contiene otro directorio, classic.

• classic 

  Classic contiene los siguientes directorios.

  • browser 

    Browser contiene todos los iconos de la barra de herramientas, así como los iconos del administrador de marcadores y la ventana de preferencias.

    global 

    Global contiene casi todos los archivos CSS importantes que definen la apariencia del explorador. Este es el directorio más importante en un tema.

    mozapps 

    Mozapps contiene todos los estilos e iconos para los accesorios del explorador, como el administrador de extensiones y el asistente de actualización.

    help 

    Help contiene todos los archivos para la ventana de ayuda.

    communicator 

    Doesn't do a whole lot and can typically be forgotten about promptly.

Instalar el nuevo tema

Antes de que uno pueda ver los cambios que hace a un tema de Firefox (las ediciones sin reiniciar son difíciles de configurar), debe aprender como empaquetar el tema classic para hacerlo instalable. Para el propósito de esta discusión le llamaremos a su tema "My_Theme",aunque puede reemplazarlo con cualquier otro nombre.

Copiando los archivos necesarios

El primer paso es mover los archivos a su directorio correspondiente. Cree un nuevo directorio llamado My_Theme. En este directorio cree los directorios browser, global, communicator, help, y mozapps así como los archivos icon.png y preview.png.

Creando los archivos de instalación

Contents.rdf

Haga una copia de contents.rdf,colóquelo en \My_Theme y ábralo en su editor de texto. Este archivo es una pequeña base de datos en formato XML que se utiliza para describir el skin.

En el código busque todas las coincidencias de My_Theme y reemplácelas con el nombre de su tema.

La sección packages lista que componentes del explorador está modificando. Si también tenemos skins para Chatzilla, debemos añadir otra línea similar a las anteriores y modificarla para que apunte a Chatzilla. Esta lista incluye todo lo que hemos cambiado, así que simplemente modifique el texto azul para que apunte al nombre/versión que ha utilizado en las secciones anteriores a esta.

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

Guarde el archivo y salga de su editor de texto.

install.rdf

Haga una copia de install.rdf, colóquelo en \My_Theme y ábralo con su editor de texto favorito. Este archivo es una pequeña base de datos en formato XML que se utiliza para describir el skin.

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

La primera sección requiere a) Buscar un UUID para el skin y b) Darle un número de versión al tema. Una vez hecho esto, inserte la información como se muestra en el recuadro anterior y desplácese hacia abajo en el texto.

Archivos CSS

Los archivos CSS que se encuentran en estos directorios le indican al navegador como visualizar los botones y otros controles, donde poner las imágenes, que borde y que relleno debería colocar alrededor de ellos, etc. Para la siguiente parte, vamos a modificar el botón estándar.

Entre en \global\ y abra button.css en su editor de texto favorito. Desplácese hacia abajo hasta button {. Esta sección define el botón normal y su estado básico (Sin el puntero del ratón sobre él, sin estar deshabilitado y sin estar seleccionado).

Cambie background-color: a DarkBlue y el color: a White, y guarde el archivo.

Empaquetando el archivo JAR

Ahora todo lo que necesita hacer es empaquetar el archivo JAR utilizando su gestor de archivos con la siguiente estructura de directorios:

browser

communicator

global

help

mozapps

contents.rdf install.rdf icon.png preview.png

Ejecutar la instalación desde la Web

Para instalar su archivo jar directamente desde la Web, necesita ejecutar algo de código Javascript.

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

Si tiene los archivos jar en su disco duro y quiere instalarlos, entonces descargue o utilice este formulario.

O puede simplemente abrir la ventana de temas en Mozilla y arrastrar y soltar su archivo .jar en ella.

categorías

enlaces interwikis