SERGIOIGLESIAS

Blog sobre Joomla

Cómo cambiar el color de la barra de navegador al ver tu web desde el móvil

@sergiois Tips Joomla 1 - 2 minutos Visto: 49050

Una de las cosas que últimamente más me preguntan es la que viene en el título de este artículo: ¿cómo haces cambiar el color de la barra del navegador cuando un usuario ve tu web desde el móvil?.

Como ya te he dicho muchas veces en este blog, la personalización es un factor importante a la hora de desmarcarte de tu competencia.

Vamos a ver cómo cambiar este color.

¿De qué me estás hablando Sergio?

Si no sabes de lo que te estoy hablando prueba a acceder a esta web desde el móvil.

A parte de ver que el diseño se adapta a tu dispositivo ya que es responsive, verás que la barra de navegación cambia de color (de tonos blancos y grisáceos a tonos azulados).

Si no puedes verlo ahora te pongo una captura de mi móvil a continuación.

web sergioiglesiasnet movil android

Eso sí. Tengo que decirte que solo lo he visto funcionando en Android (tanto en el navegador nativo como en Chrome).
Para iPhone no sé si esto funciona.

¿Y cómo hago esto para mi sitio web?

Pues muy fácil.

Se trata de una meta etiqueta de nombre "theme-color" (Tiene toda la información de esta etiqueta en la web oficial de Google Developers).

Tan solo tienes que poner la siguiente línea entre las etiquetas head de tu código HTML.

En este ejemplo se utilizará el color azulado (#083756) que viene en mi web, pero puedes poner el que tu quieras para que se adapte a tus colores corporativos.

Cómo agregar un campo de personalización en tu plantilla Joomla!

Una vez te he explicado qué es y cómo funciona la meta etiqueta "theme-color" voy a mostrarte cómo poder crear un campo personalizado para la misma.

Desde el enlace anterior puedes ver más información sobre esto.

Aquí te voy a poner simplemente el código que tienes que utilizar en el XML del fichero templateDetails de tu plantilla y el código que tendrás que usar en tu fichero index.php

Código XML

Código PHP

$app = JFactory::getApplication();
$templateparams = $app->getTemplate(true)->params;

Espero que este artículo te ayude a personalizar tu plantilla Joomla! y a cambiar el color de la barra de navegador de tu sitio web al verlo desde el móvil.

Recuerda que puedes aprender más sobre desarrollo de plantillas Joomla! en el curso gratuito que te ofrezco.

¿Te ha gustado el artículo?

Suscríbete a mi newsletter y recibe contenido exclusivo.
Podrás hacer gratis un Curso de desarrollo de plantillas Joomla.

7 comentarios

  • Hola Sergio<br />me interesa el tema y me gustaria poder adaptarlo en mi tienda online.<br />lo estoy intentando y no lo consigo<br />es prestashop 1.6<br /><br /><br />me puedes ayudar<br /><br />desde ya muchas gracias por toda la informacion interesante que tienes en tu web<br /><br />un saludo
  • Hola Sergio,<br /><br />lo comento aquí a ver si crees que tiene que ver con el tema móvil, y si no te pido disculpas de antemano y lo movemos al tema que creas que corresponde mejor.<br /><br />La cosa es que estoy haciendo una versioncilla responsive para la plantilla de un e-commerce que funciona bien, pero que aún está con Joomla 2.5. Lo hago directamente en CSS y media queries.<br /><br />En el navegador todo funciona bien cuando hago pequeña la ventana, y cuando la hago más estrecha, y detecta que el width es menor (tal y como indico en la media query) pues me aplica el CSS que le pongo.<br />Pero en mobile no hace ni caso jejeje y siempre veo lo mismo.<br />¿En qué me puedo estar equivocando?<br /><br />Te digo de antemano que aún no tengo definido ningún viewport, así que no sé si pueda ser por eso, y dónde tengo que ponerlo exactamente para que "tenga efecto".<br /><br />Gracias de antemano crack, eres una referencia para todos
  • Sergio!! La desesperación me hizo probarlo todo, y puse esto:<br /><br /><br />en el header del archivo default.php dentro de layouts de mi plantilla, y al menos ya me lo pone bien!<br /><br />lo que no me mantiene la vista cuando voy a otra pestaña, y me muestra un zoom muy grande al cambiar, no sé... poco a poco, creo
  • Hola aprendiz<br /><br />Prueba a poner los siguientes metas en el de tu template:<br /><br /><br /><br /><br /><br />Y si tienes la web online puedes enviarnos la URL: así podemos verla y ayudarte mejor ;-)
  • 2020 y sigue funcionando, no suelo comentar pero te lo mereces por salir en el primer lugar de google. Gracias

Artículos relacionados

Solicita presupuesto

¿Quieres una página web que funcione?

Contacta conmigo y hablemos de tu proyecto.