[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 le Dim 16 Mar 2008 - 17:43

Apparence de la Barre de Navigation



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 :

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

1.- 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 (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 fâcheuse 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écoller 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 Wink

    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;
    }



Lezebre
+ Hyperactif +

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


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