Sigo en mi tarea de crear un tema personalizado y a mi gusto (ventajas que tiene el usar Linux, que te permite cambiar muchos aspectos del sistema operativo). ahora le ha tocado el turno al navegador Google Chrome / Chromium. Seguramente si usas este navegador conoceras los temas .crx con los que puedes cambiar el aspecto del navegador. Aqui por ejemplo, puedes encontrar una buena seleccion. Pues bien, ahora veremos como crear nuestro propio tema, ademas que no es nada complicado.
Lo primero es crear una carpeta con el nombre de nuestro tema, por ejemplo creamos una carpeta nueva y la llamamos “Wolf” (o el nombre que quieras usar para el tema). Dentro de esa carpeta creas una carpeta llamada “Images” que es donde iras dejando los ficheros graficos que utilizaras para crear el tema. En la carpeta principal tendras que crear un fichero nuevo llamado “manifest.json“, con un contenido similar al siguiente:
{
"name": "nombre_de_vuestro_tema",
"theme": {
"colors": {
"bookmark_text": [ 255, 255, 255 ],
"frame": [ 255, 255, 255 ],
"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": [ 255, 255, 255 ],
"ntp_section_text": [ 255, 255, 255 ],
"ntp_text": [ 255, 255, 255 ],
"tab_background_text": [ 0, 0, 0 ],
"tab_text": [ 255, 255, 255 ],
"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": [ 1, 1, 1 ]
}
},
"version": "0.1"
}
Si examinas el contenido del fichero veras que basicamente defines las imagenes que formaran parte del tema y estableces los colores de los diferentes elementos.
Ahora añadiremos las imagenes. Las tienes que colocar dentro de la carpeta “Images”, son las siguientes:
- theme_frame.png: Es el color o imagen de fondo que veremos tras las pestañas del navegador.
- theme_ntp_attribution.png: La firma del tema que aparece en la esquina inferior derecha de las pestañas vacías. Conviene que tenga el fondo transparente.
- theme_ntp_background.png: la imagen de fondo en la pestaña vacía, en nuestro caso un hermoso lobo ibérico.
- theme_tab_background.png: el 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: El color de la barra de navegación y la pestaña activa.
Aqui puedes ver una captura de como iria quedando la estructura de carpetas en el tema que estoy creando en mi caso:
Y ya esta todo!! solo nos hace falta crear el tema y eso lo podemos hacer directamente desde el browser usando los herramientas de desarrollo que lleva incorporadas. Para ello, abre el navegador y pon en la barra de direcciones la siguiente URL:
chrome://extensions/
Te aparecera una ventana similar a la siguiente:
Pues ahi haces click en “Pack extension…” y en la ventana que aparece ya indicas la ruta de la carpeta donde estas creando el tema. Pulsas en “Aceptar” y automaticamente ya te crea un tema nombre_de_la_carpeta.crx que podras utilizar con tu navegador. Tambien te creara un fichero con extension .pem que sera un fichero de clave de permisos que tendras que usar si quieres volver a editar el tema.
Para usar el tema .crx puedes arrastrarlo y soltarlo sobre una ventana vacia del browser o tambien poner en la barra de de direcciones file:///ruta_a_la_carpeta/donde/tengas/el/tema/.crx
Nota: si no te carga el tema .crx (p.ej desde Google Chrome) usa el boton “Load Unpacked Extension…” y pasandole la ruta del directorio donde has creado el tema, no la ruta del fichero .crx
Como ejemplo os dejo mi tema Wolf2.crx (nota: wordpress no me permite subir directamente ficheros .crx asi que esta como .doc, una vez descargado renombralo de .doc a .crx)
Espero vuestros temas, si creas uno realmente interesante, no dudes en dejarme el enlace en los comentarios, si es de lobos le dare +1 punto mas ^^
Mas informacion | Como hacer Google Chrome themes | CasitaWeb
Comentarios recientes