(Tiempo estimado: 1 - 2 minutos)

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.

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

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

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

Código PHP

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

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.

Sobre el autor, Sergio Iglesias

Sergio Iglesias

Sergio Iglesias es formador, desarrollador y front-end del CMS Joomla!. A través de su blog y sus cursos puedes aprender a desarrollar tu propio portal web autogestionable.

 

¿Te ha gustado el artículo? ¡Suscríbete YA!

¿Necesitas un sitio web que funcione?

¿No quieres depender de nadie para gestionar tu página web?

Recibe contenido exclusivo y GRATIS mi curso sobre desarrollo de plantillas Joomla!


Me apunto ya!

Comentarios

#6 Josue Orizano Lopez 19-12-2018 16:17
gracias me sirvio mucho para mi pagina web online
Citar
#5 sergiois 28-10-2017 09:16
Hola aprendiz

Prueba a poner los siguientes metas en el de tu template:





Y si tienes la web online puedes enviarnos la URL: así podemos verla y ayudarte mejor ;-)
Citar
#4 aprendiz 27-10-2017 19:36
Sergio!! La desesperación me hizo probarlo todo, y puse esto:


en el header del archivo default.php dentro de layouts de mi plantilla, y al menos ya me lo pone bien!

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
Citar
#3 aprendiz 27-10-2017 19:27
Hola Sergio,

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.

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.

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.
Pero en mobile no hace ni caso jejeje y siempre veo lo mismo.
¿En qué me puedo estar equivocando?

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

Gracias de antemano crack, eres una referencia para todos
Citar
#2 Andrés Rico 30-11-2016 20:05
Muchas gracias...

¡Funcionó perfecto!

Saludos
Citar
#1 Ramon 19-09-2016 06:27
Hola Sergio
me interesa el tema y me gustaria poder adaptarlo en mi tienda online.
lo estoy intentando y no lo consigo
es prestashop 1.6


me puedes ayudar

desde ya muchas gracias por toda la informacion interesante que tienes en tu web

un saludo
Citar

Escribir un comentario

Puedes publicar el comentario que quieras, pero si lo considero SPAM será eliminado automáticamente.



Código de seguridad
Refescar

SergioIglesias.NET te informa que los datos de carácter personal que nos proporciones rellenando este formulario serán tratados por Sergio Iglesias Sánchez como responsable de esta web. La finalidad de la recogida y tratamiento de los datos personales que te solicitamos es, únicamente, para gestionar los comentarios de este blog. La legitimación se realiza a través del consentimiento del interesado. Te informamos que los datos que nos facilitas estarán ubicados en los servidores de SiteGround (proveedor de hosting). Ver política de privacidad de Siteground. El hecho de que no introduzcas los datos de carácter personal que aparecen en el formulario como obligatorios podrá tener como consecuencia que no pueda atender tu solicitud. Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en info@sergioiglesias.net así como el derecho a presentar una reclamación ante una autoridad de control. Puedes consultar la información adicional y detallada sobre Protección de Datos en mi política de privacidad.

¿Quieres tener un sitio web que funcione?

Contacta conmigo