Cómo crear su propio tema de Google Chrome

click fraud protection

¿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 automóviles y hermosos paisajes, pero ¿y si ninguna de ellas? esas opciones son lo que desea, o si desea personalizar Chrome para tener una de sus propias fotos como 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 integrada de Chrome 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 más 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, haz clic en él para personalizar la apariencia de tu 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 de 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 Nueva pestaña, no se convertirá en un fondo de 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 temas enviados por usuarios en sus página principal, o puede ir directamente a su página de creador de tema para empezar con el tuyo. El primer paso una vez que estás 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 alineación horizontal, alineación vertical, si la imagen se repite si es demasiado pequeño 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í al 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 Nueva pestaña", las opciones que comienzan con este acrónimo solo están presentes en la página Nueva pestaña, otras están 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.
  • "Fondo de pestaña" configura el color de fondo para las pestañas no activas.
  • "Frame overlay" le permite configurar una segunda imagen que se superpone a la imagen en "Frame".
  • "Atribución NTP" agrega una imagen en la esquina inferior izquierda de la página de nueva pestaña, generalmente con fines de marca de agua.

Sugerencia: si ha subido una imagen y no le gusta cómo se ve, puede eliminarla haciendo clic en el botón "X" junto al marcador "Cargado" correspondiente. Si cargar una imagen cambió el color de fondo de ese elemento, puede volver a configurarlo manualmente o hacer clic en "Generar colores" en la pestaña "Básico" nuevamente para restablecer el esquema de color.

La segunda pestaña avanzada se titula "Colores". Aquí, al igual que con las opciones de la página anterior que tenían un cuadro junto a ellas, puede usar el cuadro para abrir un selector de color y elegir un color sólido para los elementos respectivos. Una vez más, si pasa el mouse sobre la opción de configuración, resaltará el elemento afectado en la vista previa en rojo.

Haga clic en el cuadro para abrir el selector de color para los elementos respectivos.
  • "Barra de herramientas" configura el color de fondo de la etiqueta de atribución ThemeBeta en la parte inferior izquierda de la página de la nueva pestaña.
  • “Tab Text” configura el color del texto en la pestaña actualmente activa en la lista de pestañas. También establece el color del texto de atribución de ThemeBeta en la esquina inferior izquierda de la página de nueva pestaña.
  • "Texto de la pestaña de fondo" configura el color del texto en las pestañas inactivas en la lista de pestañas.
  • “Bookmark Text” configura el color del texto de los elementos en la barra de marcadores.
  • “Texto NTP” configura el color del texto o los enlaces de página recomendados / regulares en el centro de la página.
  • "NTP Link" no tiene ningún efecto.
  • "Botones de control" configura el color de los botones de minimizar, maximizar y cerrar en la esquina superior derecha.
  • “Botones” configura el color de los botones de avance, retroceso, recarga e inicio.

Una vez que haya configurado todas las opciones avanzadas de la forma que desee, estará listo para continuar con el proceso de instalación.

Instalación de un tema de terceros

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 en 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 llamará algo así como "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.