[CSS phpBB3] Apparence de la Barre de Navigation

[Lezebre]

Apparence de la Barre de Navigation (phpBB3)

Dans ce tutoriel, nous vous proposons quelques astuces pour personnaliser la barre de navigation d'un forum en version phpBB3. Apparence de la barre de navigation par défaut Par défaut, la barre de navigation d'un forum en phpBB3 a cette apparence : Ligne de séparation ; Couleur d'arrière-plan de la barre de navigation ; Champ de recherche rapide Modification de l'apparence de la barre de navigation Afin de modifier l'apparence de la barre de navigation, nous allons utiliser la feuille de style CSS du forum. Panneau d'administration  Affichage  Images et Couleurs - couleurs (Onglet Feuille de style CSS) Barre de séparation Modifier la couleur de la barre de séparation Dans cet exemple, nous allons mettre la ligne de séparation en rouge dont le code hexadécimal est #ff0000. Code: .navbar ul{ border-color:#ff0000; } Supprimer la barre de séparation Voici le code CSS pour supprimer la barre de séparation sous la barre de navigation : Code: .navbar ul{ border-bottom:none; } Décaler cette barre de séparation vers le bas Internet explorer a pour fâcheuse habitude de mettre les bordures à l'intérieur de l'élément HTML, ce qui fait que les boutons de la barre de navigation se retrouvent par dessus le trait de séparation. Voici donc comment espacer le trait de séparation, pour le décoller des boutons de la barre de navigation : Code: .navbar ul{ padding-bottom : 5px; } Couleur de Fond Modifier la couleur de fond de la barre de navigation Dans cet exemple, nous allons modifier la couleur d'arrière-plan de la zone de la barre de navigation en bleu ciel dont le code hexadécimal est #e5f1f9. Code: .navbar{ background-color: #e5f1f9; } Modifier la couleur de fond de la zone de la barre de navigation Voici comment limiter ce changement de couleur à la seule barre de navigation : Code: .navbar ul{ background-color: #e5f1f9; } Zone recherche Supprimer le champ de recherche dans la barre de navigation Ce code CSS permet de supprimer le champ de Recherche dans la barre de navigation : Code: #search-box{ visibility:hidden; } Réduire la hauteur de la zone Recherche de la barre de navigation Une fois la zone de recherche cachée, on peut également diminuer la hauteur de cette zone laissée vide Code: #search-box{ height:1px; visibility:hidden; }

Cette astuce a été rédigé par Lezebre. Actualisation par Bipo (janvier 2021). Aucune reproduction possible sans notre accord, conformément à l’article L122-1 du CPI.