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 🙂
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)
Bueno, una vez lo tengas localizado, haz click derecho encima de header.php y selecciona Ver/Editar
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">
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)
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!
2 respuestas
Hola, para hacerlo en prestashop 1.7 cómo se hace?? en mi plantilla no encuentro el header.tpl
Podrias hacer un tutorial??
Hola Rafa, siento contestar tan tarde.
Es raro que no encuentres un header.tpl
Que plantilla usas ?
Un saludo!