Mudando a cor da barra de navegação do Chrome para Mobile


Olá pessoal, o tema de hoje é um recurso muito bacana, que eu já utilizo a algum tempo em meus projetos, são pouquíssimos sites no Brasil que estão utilizando o recurso de mudar a cor da barra de navegação do chrome para mobile, confira como é exibido um site que não utiliza o recurso.

A barra de navegação do Google Chrome é branca por dentro e cinza por fora

Agora confira como é exibido um site com o novo recurso liberado, note que a barra de navegação do google chrome muda de cor.

Gostou? Então vamos botar a mão no código!

Mas nem tudo são flores, antes de iniciar, devo lembrar que esse recurso por enquanto só funciona a partir da versão 39 do Chrome para Android da versão Lollipop e posteriormente qualquer versão superior que venha a ser lançada.

Acredite é super simples fazer essa implementação, você só precisará acrescentar uma linha de código. Sim, você leu certo, somente uma linha de código.

Ferramentas para começar

  • Ter acesso ao FTP do site ( FilleZila ou WebFTP do seu Servidor de Hospedagem)

Vou mostrar como funciona esse exemplos para as seguintes plataformas:

  • Sites em HTML
  • Sites em Wordpress
  • Sites em Joomla

Aplicando em sites HTML

Obs: dentro de content =” #COLOCAR O CODIGO HEXADECIMAL DA IDENTIDADE VISUAL DA SUA MARCA/ SITE”

Site que informa todos os códigos das cores em Hexadecimal:

Agora confira o resultado:

Aplicando em sites Joomla

Após entrar na página de administração do Joomla, siga as instruções abaixo:
Extensões > Gerenciador de Temas > Temas >Editar Página Principal do Tema

Confira o passo a passo

  1. Abra o painel de Administração do Joomla;
  2. Vá em Extensões;
  3. Selecione a Opção Gerenciador de Temas;
  4. Escolhe a opção Tema;
  5. Selecione o tema que você esta utilizando;
  6. No Item Arquivos principais do Tema clique sobre Editar página principal do Tema;

Aplicando em sites Wordpress

  1. Acesse o FTP do site pelo FilleZila ou WebFTP do seu Servidor de Hospedagem.
  2. Procure pela pasta Themes (Normalmente fica dentro de wp-content/themes/);
  3. Selecione a pasta do template que o site esta utilizando
  4. Procure pela página head-meta.php ou header.php (Pode variar dependendo do tema);

E ai gostou da dica? super fácil né?

Lembrando que só funciona em chrome com a versão Lollipop, acredito que em 2016 o numero de distribuição do Lollipop deve aumentar consideravelmente e quem sabe essa tendencia não se espalhe para outros sistemas operacionais como IOS e WP.

Espero que tenha gostado, quaisquer duvidas, fico a disposição.

Like what you read? Give Irlen Menezes a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.