Crear temas para Chromium

Existe un gran número de temas creados por diseñadores y usuarios para este navegador. Sin embargo, también es posible crear nuestros propios temas para obtener la mayor personalización posible.

Tema Chromium

Para empezar es necesario crear una carpeta que va a contener a los archivos necesarios para la compilación del tema. A modo de ejemplo, podemos crear el tema de la imagen por lo que la carpeta se llamaría Red (igual que el tema). Luego debemos crear un archivo y lo llamaremos manifest.json el cual editaremos con un editor de texto como Gedit, Kwrite, etc. En él escribiremos lo siguiente:

{
"name": "Red",
"theme": {
"colors": {
"bookmark_text": [ 107, 10, 10 ],
"frame": [ 0, 0, 0 ],
"ntp_background": [ 45, 42, 41 ],
"ntp_header": [ 0, 0, 0, 1 ],
"ntp_link": [ 255, 255, 255 ],
"ntp_section": [ 68, 68, 68, 0.3 ],
"ntp_section_link": [ 107, 10, 10 ],
"ntp_section_text": [ 107, 10, 10 ],
"ntp_text": [ 107, 10, 10 ],
"tab_background_text": [ 0, 0, 0 ],
"tab_text": [ 0, 0, 0 ],
"toolbar": [ 0, 0, 0 ]
},
"images": {
"theme_frame": "Image/theme_frame.png",
"theme_ntp_attribution": "Image/theme_ntp_attribution.png",
"theme_ntp_background": "Image/theme_ntp_background.png",
"theme_tab_background": "Image/theme_tab_background.png",
"theme_toolbar": "Image/theme_toolbar.png"
},
"properties": {
"ntp_background_alignment": "bottom",
"ntp_background_repeat": "no-repeat",
"ntp_logo_alternate": 1
},
"tints": {
"buttons": [ 0, 0, 0 ]
}
},
"version": "0.1"
}

Este archivo sirve para definir los colores e imágenes que van a utilizarse en el tema. En el caso de querer personalizar aún más parametros del tema puede utilizarse la guía publicada acá. Luego debemos crear una carpeta dentro de la del tema con el nombre Images en la cual pondremos las imágenes utilizadas en el tema.

  • theme_frame.png: Imagen de fondo que veremos tras las pestañas del navegador.

  • theme_ntp_attribution.png: Firma del tema que aparece en la esquina inferior derecha de las pestañas vacías.

  • theme_ntp_background.png: Imagen de fondo en la pestaña vacía.

  • theme_tab_background.png: Color en el que aparecerán las pestañas no activas. Conviene que no sea opaco, sino una capa que incluya blanco sobre el color de fondo sin perder del todo la transparencia.

  • theme_toolbar.png: Color de la barra de navegación y la pestaña activa.


Para finalizar debemos tener la carpeta Red con el archivo manifest.json y una subcarpeta Images con las 5 imágenes colocadas en esta entrada. Entonces estamos en condiciones de compilar nuestro tema.

Para dicha tarea debemos ejecutar el Chromium y abrimos Menú herramientas > Extensiones o escribimos chrome://extensions/ en la barra de direcciones. Luego apretamos el botón Pack extension… y elegimos la carpeta Red.

Si lo acemos bien, debería crearse un archivo llamado red.crx el cual es nuestro tema. Para poder instalarlo, solamente debemos arrastrarlo hasta la ventana del navegador o poner en la barra de direcciones:

file:///carpeta donde tengas el tema/red.crx

Si diseñan otros temas o le realizan modificaciones a este, pueden publicarlos en los comentarios!

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s