Adapter la barre de notification à son site

Une illustration représentant un Nexus 5 (téléphone) naviguant sur le site lennyobez.be
⏱ 2 minutes | 📚 Facile

Cet article est adressé à des utilisateurs expérimentés, je ne peux être tenu responsable des erreurs qui pourraient survenir en cas de mauvaise manipulation.

Les normes Material Design introduite par Google en novembre 20141 ont ajouté la possibilité d’adapter la couleur de la barre de notification ainsi que la barre de recherche du navigateur. Quelques mois après, iOS 7 sort et ajoute lui-aussi cette fonctionnalité.

Nous allons voir, ensemble, comment modifier cette barre 🙂

Naturellement, le fichier à modifier se trouve à un endroit différent selon le CMS que vous (n’)utilisez (pas), voici les chemins:

  • Drupal : www > themes > "votre thème" > header.tpl.php
  • Joomla : www > templates > "votre thème" > index.php
  • PrestaShop : www > themes > "votre thème" > header.tpl
  • Vanilla (fait soi-même) : www > index.php
  • WordPress : www > wp-content > themes > "votre thème" > header.php

Dès que vous avez trouvé votre fichier, ouvrez-le avec votre IDE préférée – personnellement, j’utilise Brackets -, ensuite rendez-vous entre les balises head afin d’ajouter trois balises meta :

<head>
...
    <meta name="theme-color" content="#"> <-- pour Android -->
    <meta name="apple-mobile-web-app-status-bar-style" content="#"> <-- pour iOS -->
    <meta name="msapplication-navbutton-color" content="#"> <-- pour Windows Phone -->
</head>

À partir de là, il ne reste plus qu’à ajouter le code hexadécimal à l’attribut content. La balise meta avec la valeur theme-color – « normalement » destiné à Android – permet aussi de modifier la couleur de l’onglet dans le navigateur Chrome, peu importe le système d’exploitation.
Capture d'écran d'un onglet coloré ouvert sur le site lennyobez.be

Et vous, quelle IDE utilisez-vous ? En quelle couleur avez-vous adapté la barre de notification ?

1 🔗 Date de sortie d’Android 5 selon Wikipédia




Lenny Obez

Passionné des nouvelles technologies, j'ai suivi des cours en ligne afin de pouvoir concevoir des sites web grâce aux langages HTML5, CSS3, PHP et SQL. Grâce à ce centre d'intérêt, j'ai de bonnes connaissances dans la télécommunication (TEL + NET + TV). Je lance mon blog le 14 février 2016 et publie mon premier article le 22 février de la même année.

Pas de commentaire


Soyez le premier à commenter :)



Tout commentaire est le bienvenue :)

627ce3eaf3d4599ef9f9089a2f5efcefJJJJJJJJJJJJJJJJJJJ
%d blogueurs aiment cette page :