La date/heure actuelle est Mar 7 Mai 2024 - 7:17

1 résultat trouvé pour e5f1f9

[CSS phpBB3] Apparence de la Barre de Navigation

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 :

Tag e5f1f9 sur Forum gratuit : Le forum des forums actifs 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.

Tag e5f1f9 sur Forum gratuit : Le forum des forums actifs 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 :

Tag e5f1f9 sur Forum gratuit : Le forum des forums actifs 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 :

Tag e5f1f9 sur Forum gratuit : Le forum des forums actifs 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.

Tag e5f1f9 sur Forum gratuit : Le forum des forums actifs 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 :

Tag e5f1f9 sur Forum gratuit : Le forum des forums actifs 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 :

Tag e5f1f9 sur Forum gratuit : Le forum des forums actifs 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

Tag e5f1f9 sur Forum gratuit : Le forum des forums actifs Barre810

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.
par Lezebre
le Dim 16 Mar 2008 - 17:43
 
Rechercher dans: Trucs et astuces
Sujet: [CSS phpBB3] Apparence de la Barre de Navigation
Réponses: 0
Vues: 17732

Revenir en haut

Sauter vers: