[Sergio Iglesias](https://sergioiglesias.net) · Blog sobre Joomla

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

[ Añadir a fuentes preferidas ](https://www.google.com/preferences/source?q=sergioiglesias.net)   04 May 2016    [Tips Joomla](https://sergioiglesias.net/blog/joomla)   1 - 2 minutos    Visitas: 56896  -
- [ Formación Joomla ](https://sergioiglesias.net/etiquetas/formacion-joomla)
- [ Plantillas Joomla ](https://sergioiglesias.net/etiquetas/plantillas-joomla)

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](https://sergioiglesias.net/media/cached-resp-images//images/blog/tips/web-sergioiglesiasnet-movil-android_1230.png?version=734e0b3beb6e695b6d592dcc9a834936)

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](http://www.sergioiglesias.net/blog/joomla/261-como-crear-agregar-y-modificar-meta-etiquetas-personalizadas-en-joomla#comment-46) de nombre "theme-color" (Tiene toda la información de esta etiqueta en la [web oficial de Google Developers](https://developers.google.com/web/updates/2014/11/Support-for-theme-color-in-Chrome-39-for-Android)).

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

 ```
<meta content="#083756" name="theme-color"></meta>

```

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**](http://www.sergioiglesias.net/blog/joomla/374-como-crear-un-campo-personalizado-en-una-plantilla-joomla) 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

 ```
<field class="" default="#083756" description="Color del theme para personalizar vista en Android" label="Color del theme" name="color_theme" type="color"></field>

```

### Código PHP

 ```
$app = JFactory::getApplication();
$templateparams = $app->getTemplate(true)->params;
<meta content="<?php echo $templateparams->get('color_theme','#288888'); ?>" name="theme-color"></meta>

```

---

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](https://sergioiglesias.net/curso-online-joomla-desarrollo-plantillas/).

[ Añadir a fuentes preferidas ](https://www.google.com/preferences/source?q=sergioiglesias.net)Gratuito · Primer paso recomendado

### ¿No sabes bien en qué estado

está tu web Joomla?

Antes de decidir si hay que arreglar, migrar o mantener, conviene saber qué está pasando. Reviso el estado de tu web — versión de Joomla, extensiones y lo que se pueda ver — y te digo qué conviene hacer y en qué orden.

Versión de Joomla y ruta de actualización Estado de extensiones Plan de acción con recomendaciones Informe por email + HTML

[ Solicitar revisión gratuita sin compromiso ](https://sergioiglesias.net/revision-joomla-gratis)Respuesta en 24–48 h laborables

[![Sergio Iglesias](https://sergioiglesias.net/images/sergiois-joomla-web.png)](https://sergioiglesias.net/sobre-mi)##### Consultor Web Joomla Senior

Soy [Sergio Iglesias](https://sergioiglesias.net/sobre-mi). Ayudo a empresas, instituciones y profesionales a convertir su web en una herramienta real de negocio: segura, escalable y fácil de gestionar. Soy especialista en migraciones complejas de Joomla sin pérdida de datos, desarrollo de extensiones y plantillas a medida y ofrezco mantenimiento y evolución de tu CMS.

[](https://x.com/sergiois "Sergio Iglesias en X") [](https://www.linkedin.com/in/sergiois "Sergio Iglesias en Linkedin") [](https://github.com/sergiois "Sergio Iglesias en Github") [](https://sergiois.github.io/ "Extensiones Joomla de Sergio Iglesias")

### Suscríbete a mi newsletter

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

[Quiero apuntarme!](https://sergioiglesias.net/newsletter)

###  7 comentarios

- [ ![](https://www.gravatar.com/avatar/90a2c7d79af48af05035b7d878e3474c7094e397c1c8fe148ff572e8a0f6489d?s=48&r=G&d=mp) ](https://www.gravatar.com/90a2c7d79af48af05035b7d878e3474c7094e397c1c8fe148ff572e8a0f6489d)

     odin lopez

     [ Viernes, 21 Agosto 2020 20:34 ](https://sergioiglesias.net/blog/joomla/como-cambiar-color-barra-navegador-web-movil?akengage_cid=399#akengage-comment-399)

      2020 y sigue funcionando, no suelo comentar pero te lo mereces por salir en el primer lugar de google. Gracias
- [ ![](https://www.gravatar.com/avatar/0cfbc16f4f5e93220dcbe31438951e9efa59b74028974de1d3b9ed879ef3f623?s=48&r=G&d=mp) ](https://www.gravatar.com/0cfbc16f4f5e93220dcbe31438951e9efa59b74028974de1d3b9ed879ef3f623)

     Josue Orizano Lopez

     [ Miércoles, 19 Diciembre 2018 16:17 ](https://sergioiglesias.net/blog/joomla/como-cambiar-color-barra-navegador-web-movil?akengage_cid=244#akengage-comment-244)

      gracias me sirvio mucho para mi pagina web online
- [ ![](https://www.gravatar.com/avatar/b66fba1a78a3ea7b41e98a8e43ec390a0f33e7df0759e8a53879ec6be4be9d0f?s=48&r=G&d=mp) ](https://www.gravatar.com/b66fba1a78a3ea7b41e98a8e43ec390a0f33e7df0759e8a53879ec6be4be9d0f)

     sergiois

     [ Sábado, 28 Octubre 2017 09:16 ](https://sergioiglesias.net/blog/joomla/como-cambiar-color-barra-navegador-web-movil?akengage_cid=199#akengage-comment-199)

      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 ;-)
- [ ![](https://www.gravatar.com/avatar/c728df95fd4fa720495af1b87ec3e7c9c35009be63ee64039162c271cde8adc3?s=48&r=G&d=mp) ](https://www.gravatar.com/c728df95fd4fa720495af1b87ec3e7c9c35009be63ee64039162c271cde8adc3)

     aprendiz

     [ Viernes, 27 Octubre 2017 19:36 ](https://sergioiglesias.net/blog/joomla/como-cambiar-color-barra-navegador-web-movil?akengage_cid=198#akengage-comment-198)

      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
- [ ![](https://www.gravatar.com/avatar/c728df95fd4fa720495af1b87ec3e7c9c35009be63ee64039162c271cde8adc3?s=48&r=G&d=mp) ](https://www.gravatar.com/c728df95fd4fa720495af1b87ec3e7c9c35009be63ee64039162c271cde8adc3)

     aprendiz

     [ Viernes, 27 Octubre 2017 19:27 ](https://sergioiglesias.net/blog/joomla/como-cambiar-color-barra-navegador-web-movil?akengage_cid=197#akengage-comment-197)

      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
- [ ![](https://www.gravatar.com/avatar/534bea77aa008c37eeb60a21f765c631b059263d224102d6e108eb4af26727f0?s=48&r=G&d=mp) ](https://www.gravatar.com/534bea77aa008c37eeb60a21f765c631b059263d224102d6e108eb4af26727f0)

     Andrés Rico

     [ Miércoles, 30 Noviembre 2016 20:05 ](https://sergioiglesias.net/blog/joomla/como-cambiar-color-barra-navegador-web-movil?akengage_cid=161#akengage-comment-161)

      Muchas gracias...<br /><br />¡Funcionó perfecto!<br /><br />Saludos
- [ ![](https://www.gravatar.com/avatar/73934fff09546a5c8052a8cdb73f70b33278b04357a84f56d2089351d0169415?s=48&r=G&d=mp) ](https://www.gravatar.com/73934fff09546a5c8052a8cdb73f70b33278b04357a84f56d2089351d0169415)

     Ramon

     [ Lunes, 19 Septiembre 2016 06:27 ](https://sergioiglesias.net/blog/joomla/como-cambiar-color-barra-navegador-web-movil?akengage_cid=150#akengage-comment-150)

      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

###  Deja tu comentario

 En respuesta a Some User

 Nombre \*

 Dirección de email \*

 Texto del comentario \*

 Doy mi consentimiento para que mi información personal sea recopilada y procesada por este sitio para aceptar y mostrar mi comentario, así como para notificarme sobre las respuestas a él según la [Declaración de privacidad](https://sergioiglesias.net/politica-privacidad) del sitio. \*