[CSS phpBB3] Apparence de la Barre de Navigation

[lezebre]

Voici quelques trucs et astuces pour personnaliser l'apparence de la barre de navigation grâce au CSS, sur un forum en version phpBB3.

Barre de navigation de départ, dont nous allons travailler le style :

1.- Ligne de séparation
2.- Couleur d'arrière-plan de la zone NavBar
3.- Champ de recherche rapide

Les codes CSS peuvent être ajoutés dans la feuille de Style CSS personnalisé de votre forum :

Panneau d'administration
Thêmes
Images et Couleurs -> Couleurs
Onglet "Feuille de stule CSS

1.- Barre de séparation

• Modifier la couleur de la barre de séparation :
  Dans cet exemple, nous alons mettre la ligne de séparation en rouge (couleur HTML #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 le menu
  

  Code:

  .navbar ul{border-bottom:none;}

  
  
• Décaler cette barre de séparation vers le bas :
  Internet explorer a pour facheuse habitude de mettre les bordures à l'intérieur de l'élément HTML, ce qui fait que les boutons du menu se retrouvent par dessus le trait de séparation.
  Voici donc comment espacer le trait de séparation, pour le décoler des boutons du menu
  

  Code:

  .navbar ul{padding-bottom : 5px;}

2.- Couleur de Fond

• Modifier la couleur de fond de la zone NavBar :
  Dans cet exemple, nous allons modifier la couleur d'arrière-plan de la zone NavBar en bleu ciel (couleur HTML #e5f1f9;)
  

  Code:

  .navbar{background-color: #e5f1f9;}

  
  
• Modifier la couleur de fond de la barre de menu :
  Voici comment limiter ce changement de couleur à la seule barre de menu
  

  Code:

  .navbar ul{background-color: #e5f1f9;}

3.- Zone recherche

• Supprimer le champ de recherche dans la NavBar :
  Vous voulez cacher la fonction "Recherche" sous la barre de navigation ?
  Avec le CSS, rien de plus simple...
  

  Code:

  #search-box{visibility:hidden;}

  
  
• Réduire la hauteur de la zone Recherche de la NavBar :
  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;}

4.- Cumul des styles
Voyons maintenant comment tirer profit de ces différentes astuces pour, dans cet exemple:

• Définir la couleur d'arrière-plan de la zone NavBar à transparent
• Supprimer la ligne de séparation
• Masquer le champ "Rechercher"
• Réduire la hauteur de la zone Navbar
  

  Code:

  .navbar{background-color: transparent;}
.navbar ul{border-bottom:none;}
#search-box{height:1px;visibility:hidden;}