Cómo hacer tu propio tema de Google Chrome

¿Alguna vez ha querido personalizar el aspecto de su navegador web? Los temas para Google Chrome se pueden usar para hacer exactamente eso. Chrome Theme Store puede tener una amplia gama de opciones, desde temas espaciales hasta autos y hermosos paisajes, pero ¿qué pasa si ninguna de esas opciones es lo que desea o si desea personalizar Chrome para tener una de sus propias fotos como un fondo en su lugar? Bueno, afortunadamente puedes hacer eso.

Hay dos métodos para crear su propio tema. Chrome tiene una función incorporada simple que le permite importar una imagen de fondo para la página de nueva pestaña y personalizar el esquema de color de la interfaz de usuario a partir de una serie de ajustes preestablecidos. Si la función de Chrome incorporada no tiene la cantidad de opciones de personalización que desea, un sitio web llamado ThemeBeta lo tiene cubierto, con un creador de temas de Chrome rico en funciones, pero fácil de usar, (aunque el proceso de instalación es un poco mas complejo). En este artículo, lo guiaremos a través del proceso de creación de su propio tema de Chrome con ambas herramientas.

La sencilla herramienta integrada de Chrome

Para utilizar el editor de temas de Chrome integrado, abra una nueva pestaña. En la esquina inferior derecha de la página de la nueva pestaña hay un ícono de lápiz, haga clic en él para personalizar la apariencia de su Chrome.

Haga clic en el icono de lápiz para abrir el editor de temas.

En la ventana emergente que aparece una vez que ha hecho clic en el icono del lápiz, su primera opción es configurar la imagen de fondo. Aquí puede elegir entre un número muy limitado de opciones preestablecidas o puede cargar su propia imagen. Esta imagen de fondo solo se aplicará a la página de nueva pestaña, no se convertirá en un fondo en ningún sitio web real.

Seleccione una imagen de fondo para la página de nueva pestaña.

Una vez que haya seleccionado una imagen de fondo, vaya a la pestaña "Color y tema". Aquí puede elegir entre una selección de combinaciones de colores. Estas opciones de color afectan los colores de la pestaña y las barras de búsqueda y marcadores que forman la interfaz de usuario de Chrome. En otras palabras, en la mayoría de los sitios que visite, estos colores serán más notables que su imagen de fondo simplemente porque la barra superior del navegador siempre será de este color.

Seleccione un esquema de color preestablecido.

Si ninguno de los esquemas de color preestablecidos es lo que desea, la opción de color superior izquierda le permite elegir su propio esquema de color, con un espectro completo de opciones de color para elegir. Para seleccionar un color, primero, haga clic en el símbolo superior izquierdo, luego use la ventana emergente que aparece para elegir su color. Ajuste la mira en el espectro de color para obtener su tono y la flecha negra a la derecha de la ventana para elegir el brillo del tono. Si no está seguro de cómo funciona esto, cuanto más hacia arriba o hacia abajo mueva la flecha negra, más claro o más oscuro se volverá su color. Para tonos más intensos, coloque la cruz cerca de la parte superior y la flecha en el medio. Para colores más pálidos, mueva la mira un poco más abajo y la flecha hacia arriba.

Una vez que haya seleccionado el color que desea, haga clic en "Agregar a colores personalizados" en la parte inferior derecha. A continuación, seleccione su color personalizado de la lista "Colores personalizados" en la parte inferior izquierda, y luego haga clic en "Aceptar" para aplicar. Si elige un esquema de color personalizado, solo puede elegir un color, Chrome elegirá un segundo color similar para completar el tema con lo que crea que se adaptará mejor.

Consejo: Chrome casi siempre asume que el color que elegiste es el más oscuro de los dos colores del tema y elegirá un segundo tono más claro. ¡Elija en consecuencia!

Seleccione un esquema de color personalizado.

Una vez que esté satisfecho con su imagen de fondo y conjunto de colores, haga clic en "Listo" para guardar su tema personalizado, ¡y estará listo para comenzar!

Temas de terceros simplificados

Si desea un tema simple, entonces la herramienta incorporada de Chrome debería ser suficiente, pero si desea más individualidad, ThemeBeta ofrece más control. El sitio web le permite modificar manualmente los colores de las pestañas de primer plano y de fondo, el texto en las barras de pestañas y más.

En primer lugar, debe navegar al sitio web de ThemeBeta. Puede explorar los temas enviados por el usuario en su página de inicio , o puede ir directamente a la página de su creador de temas para comenzar con el suyo. El primer paso una vez que esté en el creador del tema es elegir una imagen de fondo. Haga clic en “1. Cargue una imagen ”y luego cargue una imagen desde su disco duro. Esta imagen será la base de su tema y será la imagen de fondo en la página de nueva pestaña.

Sugerencia: cualquier imagen que cargue debe estar en formato de archivo PNG o JPG, ya que estos son los únicos formatos admitidos. Utilice un convertidor en línea si su imagen es diferente.

Si la imagen que ha subido no se ve bien, es posible que esté demasiado ampliada o tenga barras a los lados o en la parte superior, entonces debería intentar cambiar las opciones de "Imagen de fondo". Respectivamente, configuran la alineación horizontal, la alineación vertical, si la imagen se repite si es demasiado pequeña para la pantalla, cómo se escala la imagen para ajustarse a la pantalla y un ajuste de escala manual. ¡Pruebe las opciones hasta que encuentre algo con lo que esté satisfecho!

Configure el posicionamiento de su imagen de fondo.

Una vez que se cargue su imagen, la vista previa en el lado derecho de la página se actualizará para representar cómo se verá su tema. El segundo paso es hacer clic en “2. Generar colores ”, este botón usará los colores presentes en la imagen que cargó, para crear una paleta de colores similares para usar en el resto de la interfaz de usuario.

Si el esquema de color generado automáticamente se adapta al aspecto que desea, puede pasar aquí a las instrucciones de instalación . Pero si desea configurar manualmente los colores de cosas como pestañas de primer plano, pestañas de fondo y la barra de herramientas, los detalles se tratan en la sección de configuración avanzada a continuación.

Configuración avanzada

Hay dos pestañas de opciones de configuración avanzadas disponibles en la parte superior izquierda, la primera es "Imágenes". Aquí puede configurar una imagen de fondo para ciertos elementos. Cuando pase el mouse sobre cada una de las opciones, resaltará en rojo el elemento que esa configuración modificaría en la vista previa.

Pase el mouse sobre las opciones para ver qué parte de la interfaz de usuario cambian.

Sugerencia: NTP significa "Página de nueva pestaña", las opciones que comienzan con este acrónimo solo están presentes en la página de nueva pestaña, otras son visibles en otras páginas.

• "Fondo NTP" configura el fondo principal, si importó una imagen anteriormente, esta ya estará "Cargada".
• “Marco” configura la interfaz de usuario excluyendo la lista de pestañas, la barra de búsqueda y la barra de marcadores.
• "Barra de herramientas" configura la pestaña activa, la barra de marcadores y el área que rodea la barra de búsqueda.
• “Tab Background” configures the background colour for non-active tabs.
• “Frame overlay” allows you to configure a second image that overlays the image in “Frame”.
• “NTP Attribution” adds an image to the bottom left corner of the new tab page, generally for watermark purposes.

Tip: If you’ve uploaded an image and don’t like how it looks, you can remove it by clicking the “X” button next to the relevant “Loaded” marker. If uploading an image changed the background colour for that element you can either set it back manually or click “Generate Colors” in the “Basic” tab again to reset the colour scheme.

The second advanced tab is titled “Colors”. Here – as with the options on the previous page that had a box next to them – you can use the box to open a colour picker and pick a solid colour for the respective elements. Once again, if you mouse over the configuration option, it will highlight the affected element in the preview in red.

Click the box to open the colour picker for the respective elements.

• “Toolbar” configures the background colour of the ThemeBeta attribution label in the bottom left of the new tab page.
• “Tab Text” configures the colour of the text in the currently active tab in the tab list. It also sets the colour of the ThemeBeta attribution text in the bottom left corner of the new tab page.
• “Background Tab Text” configures the colour of the text in the inactive tabs in the tab list.
• “Bookmark Text” configures the colour of the text of items in the bookmarks bar.
• “NTP Text” configures the colour of the text or the recommended/regular page links in the centre of the page.
• “NTP Link” doesn’t have any effect.
• “Control Buttons” configures the colour of the minimise, maximise and close buttons in the top right corner.
• “Buttons” configures the colour of the forwards, backwards, reload and home buttons.

Once you’ve configured all of the advanced options the way you want them, you’re ready to proceed to the installation process.

Installation of a third-party theme

Por razones de seguridad, Google ahora solo permite instalar extensiones y temas a través de Chrome Webstore. Para instalar su tema personalizado, deberá habilitar una función de desarrollador. Desafortunadamente, este cambio significa que el simple botón "Empaquetar e instalar" tanto en la pestaña "Básico" como en la pestaña "Empaquetar" ya no funciona. Si prueba el método "Empaquetar e instalar", obtendrá un mensaje de error.

Los archivos CRX de terceros no se pueden instalar en Chrome.

Para solucionar este problema, vaya a la pestaña "Empaquetar" y haga clic en "Empaquetar y descargar archivo zip"

Haga clic en el botón "Empaquetar y descargar archivo zip" en la pestaña "Empaquetar".

Una vez descargado el archivo zip, extraiga los archivos y guárdelos en su disco duro. Haga doble clic en el archivo que ha descargado y seleccione Extraer en la parte superior de su visor de archivos. Deberá seleccionar dónde extraer sus archivos. Recuerda dónde los guardas para que puedas volver a subirlos más fácilmente.

Sugerencia: si cambia el nombre de la carpeta para indicar cuál es el tema, puede que sea más fácil encontrarlo nuevamente en el futuro, si alguna vez desea reutilizarlo.

Extraiga los archivos del archivo ZIP y guárdelos en su disco duro.

El siguiente paso es la página de extensiones de Chrome. Puede acceder a él haciendo clic en los tres puntos en la esquina superior derecha, en "Más herramientas", luego en "Extensiones", o puede hacer clic aquí .

Haga clic en los tres puntos y luego en Más herramientas> Extensiones.

Una vez que esté en el menú de extensiones, en la esquina superior derecha de la página, hay un control deslizante marcado como "Modo de desarrollador". Permitirle. Una vez que el modo de desarrollador está habilitado, deberían aparecer tres botones en la esquina superior izquierda. El que necesita es "Cargar sin empaquetar". Haga clic en "Cargar descomprimido" e importe la carpeta que extrajo del archivo zip anteriormente.

Habilite el modo de desarrollador y luego haga clic en "Cargar sin empaquetar".

Sugerencia: desea importar la carpeta principal, no la carpeta de "imágenes" que contiene. Si no le cambió el nombre antes, se le asignará un nombre similar a "theme1234567890".

Una vez que el tema se ha importado, aparecerá una alerta en la pestaña actual, confirmando que el tema fue instalado y ofreciendo un botón para deshacer. Antes de cerrar esta alerta, abra una nueva pestaña y asegúrese de que todo se vea como lo deseaba.

¡No oculte la alerta de confirmación hasta que esté seguro de que está satisfecho con el resultado!

Si su tema no resultó como esperaba, haga clic en "Deshacer" e intente modificar su plantilla nuevamente. Una vez que esté satisfecho con los resultados, no dude en cerrar la página "Extensiones" y continuar navegando con su nuevo y brillante tema personalizado de Chrome.