[CSS phpBB3] Apparence de la Barre de Navigation

Voir le sujet précédent Voir le sujet suivant Aller en bas

  • 0

Astuce [CSS phpBB3] Apparence de la Barre de Navigation

Message par Lezebre Dim 16 Mar 2008 - 17:43

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 :

[CSS phpBB3] Apparence de la Barre de Navigation Barre110

  1. Ligne de séparation ;
  2. Couleur d'arrière-plan de la barre de navigation ;
  3. 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.

[CSS phpBB3] Apparence de la Barre de Navigation Barre210

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 :

[CSS phpBB3] Apparence de la Barre de Navigation Barre310

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 :

[CSS phpBB3] Apparence de la Barre de Navigation Barre410

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.

[CSS phpBB3] Apparence de la Barre de Navigation Barre510

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 :

[CSS phpBB3] Apparence de la Barre de Navigation Barre610

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 :

[CSS phpBB3] Apparence de la Barre de Navigation Barre710

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

[CSS phpBB3] Apparence de la Barre de Navigation Barre810

Code:
#search-box{
height:1px;
visibility:hidden;
}

Lezebre

Lezebre
Membre actif

Masculin
Messages : 3055
Inscrit(e) le : 07/03/2007

http://lezebre.superforum.fr
Lezebre a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum