Personaliza la barra de navegaci贸n de Chrome en Android

personalizar color barra portada
脥ndice del Post
Tardar谩s en leerlo: 4 minutos




5/5 - (15 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 馃檪

 

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….

Tambi茅n te puede interesar:  MiniCurso: Email Marketing con Mailchimp

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!

Escrito por

Alex Sanchez
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.

Por llegar hasta 锘縜qu铆 锘縯e mereces 2 REGALITOS

Creo que te mereces estos 2 ebooks, y tambi茅n recibir el contenido nuevo directamente en tu email, solo necesito estos datos tuyos para indicarte c贸mo descargarlos gratuitamente

Posts relacionados

2 comentarios en 芦Personaliza la barra de navegaci贸n de Chrome en Android禄

Deja un comentario

  Acepto la pol铆tica de privacidad

Informaci贸n sobre protecci贸n de datos

  • Responsable: Alex Sanchez Onofri (MASQUEUNAWEB)
  • Fin del tratamiento: Controlar el spam, gesti贸n de comentarios
  • Legitimaci贸n: Tu consentimiento
  • Comunicaci贸n de los datos: No se comunicar谩n los datos a terceros salvo por obligaci贸n legal.
  • Derechos: Acceso, rectificaci贸n, portabilidad, olvido.
  • Contacto: info@masqueunaweb.com.
  • Informaci贸n adicional: M谩s informaci贸n en nuestra pol铆tica de privacidad.

Espera un momento...

驴Tienes una tienda online verdad?

驴Y si me encargo yo del mantenimiento de tu tienda online?

5 Shares
Share via
Copy link