bylokura

Sin descripción

Bienvenidos a mi post. Aqui os voy a explicar como crear temas como este para el Chrome. Para descargar este tema https://skydrive.live.com/redir?resid=D1B4DB0FF1F9E730!165 Para la correcta visualizacion la resolucion del escritorio ha de ser 1920x1080 Para descargar este y otros temas similares visita mi otro post http://www.taringa.net/posts/downloads/16438430/Temas-para-Chrome-1920x1080.html Para descargar el manifest.json de este tema https://skydrive.live.com/redir?resid=D1B4DB0FF1F9E730!166 Para descargar el manifest.json general con comentarios https://skydrive.live.com/redir?resid=D1B4DB0FF1F9E730!167 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