In Prestashop, WordPress
Personaliza la barra de navegación de Chrome en Android
5 (100%) 12 votos

Como le he personalizado la barra de navegación en Android a mi blog.

¡Hola!

¿Preparando ya las maletas para el viaje de semana santa? ¿O eres de los que se quedan en casita disfrutando del relax?

Yo esta vez voy a aprovechar como un campeón con un mini viaje ;P

Pues nada, estaba añadiendo el color a la barra de navegación de Chrome en Android y me he dicho, ¿Por qué no se lo explicas a todos tus lectores?
Si seguro que os encanta y le vais a sacar uso!

Pues dicho y hecho, un mini post a modo de “despedida” para estas mini-vacaciones 😀


Como ya habrás visto en varias páginas web, ahora se puede personalizar el color de la barra de navegación del navegador Chrome en Android, ¡y además es muy fácil!

Parece una tontería, pero a mi me ha molao mucho 😛

Le da un toque de color a la página web, en vez de tener la aburrida barra de navegación blanca y sosa, pues la podemos personalizar con nuestro color significativo de marca por ejemplo.

(Ahora falta que lo añadan en la versión de PC por ejemplo y los super Iphone)

Aquí te dejo unas capturas de como queda 🙂

SUSCRIBETE YA A MI BLOG Y RECIBE EN TU CORREO 2 EBOOKS GRATUITOS

¡ÚNETE YA A MI PEQUEÑA TRIBU!

Te mandaré al instante los 2 Ebooks que he preparado para ti :)

 

Bueno, vamos al lío, deja el café 5 minutitos, que en nada lo tendrás listo.

Desde la nueva versión 39 el navegador Google Chrome se integra más con el sistema operativo de nuestro móvil Android y puedes personalizar el color de la barra de navegación.

La manera de hacerlo es realmente sencilla, no esperaba menos tampoco… Solo tienes que modificar el archivo header.php en WordPress o header.tpl en PrestaShop.

Si, acabas de leer bien, vas a poder cambiar el color en la barra de navegación tanto en páginas web o blogs en WordPress como en tiendas online en PrestaShop. (digo yo que esto se aplicará también a los demás CMS, pero como no lo he probado, no lo digo 🙂 )

 

Cambiando de color la barra de navegación de tu Blog o Página web en WordPress

Vamos a empezar con WordPress,
Como ya te he dicho antes, es muy sencillo, pero tenemos que tocar un archivo que está en nuestra web. Para ello tienes 2 maneras de hacerlo, o bien desde el mismo WordPress si tienes instalado Jetpack, o desde tu FTP (que para mí, siempre es lo más sencillo.)

Al lío, abres tu FTP y te diriges a la carpeta wp-content/themes/nombredetuplantilla/ y busca el archivo header.php (aunque uses un tema hijo, busca el archivo en la plantilla original (tema padre)

localizando el archivo header.php en el FTP

 

Bueno, una vez lo tengas localizado, haz click derecho encima de header.php y selecciona Ver/Editar

editando-header.php

Una vez abierto (se te abrirá en el bloc de notas o cualquier editor php que tengas instalado),  solo tendrás que añadir el siguiente código dentro de la etiqueta <head> (Recomiendo que lo metas siempre justo debajo de <head> para asegurarte)

<meta name="theme-color" content="#3F51B5">

añadiendo el codigo necesario

 

Recuerda cambiar lógicamente el color hexadecimal por el que mas te guste a ti.

 

¡Y ya está! Ahora vacía el caché de tu página web y ves a verla en tu Android. Ya lucirá con su nuevo color 😛

 

Cambiando de color la barra de navegación de tu tienda online PrestaShop

En PrestaShop no te pienses que es mucho más complicado….

No voy a explicártelo todo otra vez, pero es básicamente lo mismo:

 

En PrestaShop, hay que hacerlo si o si desde el FTP, asi que ya sabes, el mismo proceso que he explicado antes.

Abre tu FTP y dirigete a la carpeta themes/nombredetuplantilla/ y busca el archivo header.tpl (ojo, .tpl)

headertpl

Como antes, haz click derecho encima del archivo y selecciona Ver/Editar.

 

Exactamente igual, verás la etiqueta <head> unas lineas más abajo.

Pega el código justo debajo y cambia el color hexadecimal por el que representa tu tienda online por ejemplo.

<meta name="theme-color" content="#3F51B5">

 

Ahora, hay un paso extra en PrestaShop.

Tienes que forzar la compilación para que los cambios se vean.

 

Para ello, ves al backend de tu tienda PrestaShop y accede a Parametros avanzados > Rendimiento

Una vez allí selecciona Forzar compilación y haz click en guardar.

 

Abre tu tienda online (en el móvil Android, claro), y comprueba que se vea la barra de color (no te olvides de vaciar la caché, sobre todo si usas un módulo externo!)

Una vez lo veas bien, vuelve a seleccionar Nunca recompilar los archivos de las plantillas y dale a guardar.

 

Voilá 😀 Ya tienes tu barra de navegación molona en tu tienda online PrestaShop también.


 

No me enrollo más, ¡que el café me da a mi que se te ha enfriado!

Espero que te haya gustado el post de hoy, ¿Tú ya lo sabías y no me lo habías contado? ¿Lo habías visto muchas veces y no sabías como demonios se hacia? 

Me encantaría leer muchas respuestas, nos vemos a la vuelta de este mini parón de semana santa.

¡Un abrazo!

Alex Sanchez
Entusiasta, emprendedor, amante del buen fútbol y loco por los bull terrier. Me apasiona lo que hago, las tecnologías y el deporte. Si buscas contenido interesante sobre WordPress, Prestashop, Marketing, y algo de SEO este es tu blog.
Recommended Posts

Leave a Comment

Contacta conmigo

Envíame un email con lo que necesitas y te enviaré un presupuesto ajustado a lo que buscas en menos de 48 horas.

Not readable? Change text.

Start typing and press Enter to search