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