Utilisateur d’Android depuis quelques temps, je me suis rendu compte que de nombreux sites renforcent leur identité visuelle en adaptant la couleur de la fenêtre à leur image (sur smartphone – Chrome).

Site couleur fenêtre : exemple

Exemple de sites avec des couleurs de fenêtre différentes sur Android (Chrome)

Après une rapide recherche sur internet, cette modification est en fait toute simple et rapide à réaliser en 3 petites « étapes ».

 

1. En effet il vous suffit de copier la ligne de code suivante :

<meta name="theme-color" content="#f5bf4f">

 

2. Coller cette ligne de code dans la partie <head> de votre site web :

Les balises meta servent à informer les navigateurs et moteurs de recherches. Par exemple : la langue de votre site, le titre d’une page, le codage de caractère utilisé, etc… Dans ce cas de figure il s’agit tout simplement de la couleur de l’onglet sur smartphone (google chrome).

 

3. Choisir votre couleur :

Il ne vous reste plus qu’à adapter le code hexadecimal pour choisir la couleur que vous souhaitez. C’est à dire la partie en rouge ci-dessous :

<meta name="theme-color" content="#f5bf4f">

Remarque : Si vous êtes un utilisateur peu habitué du code couleur en Hexa, voici un petit site bien pratique pour connaitre le code correspondant à la couleur que vous souhaitez : code-couleur.com

 

Votre site tourne sur WordPress ? 

Afin de pouvoir ajouter la balise <meta> dans la partie <head></head> de votre site il vous suffit d’éditer le fichier « header.php« . C’est dans celui-ci que vous pourrez le traiter.

 

Remerciements : je tiens à préciser que j’ai découvert cette astuce par le biais du site Oboqo et je vous invite donc évidemment à jeter un coup d’oeil sur cette agence 🙂

 

Dresseur de Pokemon depuis ma tendre enfance, je suis ici pour partager mes passions avec vous : musique, cinéma, photos. Plein de trucs cool quoi !