Bienvenidos a mi post.
Aqui os voy a explicar como crear temas como este para el Chrome.
Aqui os voy a explicar como crear temas como este para el Chrome.
Para descargar este tema
Para la correcta visualizacion la resolucion del escritorio ha de ser 1920x1080
Para descargar este y otros temas similares visita mi otro post
Para descargar el manifest.json de este tema
Para descargar el manifest.json general con comentarios
Para la correcta visualizacion la resolucion del escritorio ha de ser 1920x1080
Para descargar este y otros temas similares visita mi otro post
Para descargar el manifest.json de este tema
Para descargar el manifest.json general con comentarios
Primero: Necesitamos un editor de texto para crear el archivo manifest.json.
Yo utilizo el recomendado por Google que lo podéis descargar desde aquí:
Link del autor
http://download.tuxfamily.org/notepadplus/6.3/npp.6.3.Installer.exe
Segundo:Tras instalar el programa pegar el texto de abajo e ir poniendo los valores que queráis.
Tercero : Guardar el archivo en la carpeta que queráis, junto a las imágenes que necesita el tema. (Recordad que tienen que ser .PNG)
Cuarto: Ir a chrome://extensions/ , marcar "Modo desarrollador"
Quinto: Para probar el tema darle a "Cargar extensión descomprimida" y buscáis la carpeta que habéis creado y que contiene el archivo manifest.json con las imágenes y clic en "Aceptar"
Sexto: Cuando tengáis un tema que os guste en chrome://extensions/ darle a empaquetar extensión y seleccionáis el manifest.json
{
"manifest_version": 2,
/* Este archivo a sido creado por BYLokura el 26/02/2013 para http://www.taringa.net/ como tutorial para crear temas en Google Chrome*/
"version": "1.0",
/*La version que querais*/
"name": "BY Lokura & Barriera XX",
/*El nombre que querais*/
"theme": {
"images" : {
/*En esta seccion se definen los nombres de las imagenes para cada elemento en formato, .PNG */
"theme_frame":".png",
/*El marco del navegador de chrome y el área que está detrás de las pestañas. ++ x 80 */
"theme_frame_inactive" :".png",
/*El área igual al anterior, sólo que esta representa el estado inactivo. ++ x 80 */
"theme_frame_incognito" :".png",
/*La misma zona en el modo incógnito, cuando la ventana está activa. ++ x 80 */
"theme_frame_incognito_inactive" :".png",
/* La misma zona, pero en el modo de incógnito, cuando la ventana está inactiva. ++ x 80 */
"theme_toolbar":".png",
/* Esto representa tanto la pestaña actual y la barra de herramientas. ++ x 120 */
"theme_tab_background":".png",
/*Esta es la zona que cubre las pestañas que no son activos. ++ x 65 */
"theme_tab_background_incognito" :".png",
/*Lo mismo que arriba, pero que se utilizan para el modo incógnito. ++ x 65 */
"theme_tab_background_v" :".png",
/*Pendiente de confirmacion, sin uso*/
"theme_ntp_background":".png",
/*La imagen de detras de las aplicaciones de google minimo. 800 x 600 */
"theme_frame_overlay" :".png",
/*La imagen de la parte superiror izquierda del marco. 1100 x 40 */
"theme_frame_overlay_inactive" :".png",
/*Igual que el anterior pero aparece cuando la ventana está inactiva. 1100 x 40 */
"theme_button_background" :".png",
/*Este es el área que cubre los botones de la barra de herramientas. */
"theme_ntp_attribution" :".png",
/*Esta es la imagen que se mostrará en la seccion "tema creado por" */
"theme_window_control_background" :".png"
/*El fondo para los botones de control de la ventana: cerrar, maximizar, minimizar... */
},
"colors" : {
/*Aqui se definen los colores en formato RGB Dec va desde el 0, 0, 0 negro hasta el 255, 255, 255 blanco. */
"frame" : [0, 0, 0],
/*El color del marco exterior más pequeño. */
"frame_inactive" : [0, 0, 0],
/*El color del mismo elemento, pero en modo inactivo. */
"frame_incognito" : [0, 0, 0],
/*El color del mismo elemento, pero en modo incógnito*/
"frame_incognito_inactive" : [0, 0, 0],
/*El color del mismo elemento, pero en incógnito, el modo inactivo. */
"toolbar" : [0, 0, 0],
/*El color del fondo de la barra de herramientas (visible pulsando Ctrl + B) */
"tab_text" : [0, 0, 0],
/*El color del texto, en el título de la pestaña activa. */
"tab_background_text" : [0, 0, 0],
/*El color del texto, en el título de todas las pestañas inactivas. */
"bookmark_text" : [0, 0, 0],
/*El color del texto de los marcadores. */
"ntp_background" : [0, 0, 0],
/*El color de fondo del tema. */
"ntp_text" : [0, 0, 0],
/*El color de todo el texto que se presenta en el fondo. */
"ntp_link" : [0, 0, 0],
/*El color de los links que aparecen en el fondo del área. */
"ntp_link_underline" : [0, 0, 0],
/*El color del subrayado de todos los enlaces de la zona de fondo. */
"ntp_header" : [0, 0, 0],
/*El color de los marcos de sección cuando el puntero del ratón esta encima. */
"ntp_section" : [0, 0, 0],
/*El color de la zona cerrado recientemente y otros dispositivos. */
"ntp_section_text" : [0, 0, 0],
/*El color del texto de la misma zona que el anterior. */
"ntp_section_link" : [0, 0, 0],
/*El color de los enlaces de la misma zona que el anterior. */
"ntp_section_link_underline" : [0, 0, 0],
/*El color del subrrayado de la misma zona que el anterior. */
"button_background" : [0, 0, 0],
/*Sin confirmar aún: el color de los botones de control de la ventana (cerrar, maximizar, etc) */
"control_background" : [0, 0, 0]
/*El color de fondo de todos los botones de la barra de herramientas. */
},
"tints" : {
/*Cambiar el tono, la saturacion y la luminosidad de las imagenes los valores van de 0 a 1. */
"buttons" : [0.0, 0.0, 0.0],
/*El tono de los botones atras adelante recargar etc. */
"frame" : [0.0, 0.0, 0.0],
/*El tono del marco*/
"frame_inactive" : [0.0, 0.0, 0.0],
/*El tono que se aplica cuando la ventana esta inactiva. */
"frame_incognito" : [0.0, 0.0, 0.0],
/*El tono del marco cuando esta en modo incognito. */
"frame_incognito_inactive" : [0.0, 0.0, 0.0],
/*El tono del marco cuando esta en incognito y inactivo*/
"background_tab" : [0.0, 0.0, 0.0]
/*El tono de las pestañas inactivas. */
},
"properties" : {
"ntp_background_alignment" :"",
/*La propiedad que indica la alineación de la imagen de fondo. (top, bottom, left, right) */
"ntp_background_repeat" :"",
/*La propiedad que indica si se repite la imagen de fondo para abarcar todo el area (repeat, no-repeat, repeat-x, repeat-y. */
"ntp_logo_alternate" :""
/*Puede ser 0 o 1 */
}
}
}
/* Este archivo a sido creado por BYLokura el 26/02/2013 para http://www.taringa.net/ como tutorial para crear temas en Google Chrome*/
PD: Para las imágenes he utilizado el Gimp e descargado fotos de Internet y he recortado cada una arreglo a la resolución de mi pantalla para que todo quede bien, en mi caso 1920x1080:
images
"Frame" : Todos de 1920x85
"theme_ntp_background" : 1920x956
"theme_ntp_attribution" : 150x150
Y para la imagen en las pestañas en lugar de un color solido:
Tints
"frame_inactive" : [0.6, 0.5, 0.5],
"frame" : [0.6, 0.5, 0.5],
Espero os haya servido de ayuda, cuidado con las comas y los corchetes si os da error, seguramente sea por eso.
Saludos