Apparence navbar PHPBB3

[KAntus]

Détails techniques

Version du forum : phpBB3
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : 17/04/2015
Lien du forum : http://anomaly-rpg.forumactif.org/

Description du problème

Bonjour, bonsoir,

J'ai eu beau chercher, mais je n'ai pas réussi à trouver comment modifier l'apparence de la navbar en phpbb3 - du moins, pas comme je le souhaite. J'ai réussi à la mettre en haut du forum, fixe, comme je le souhaitais. Mais j'ai beaucoup de difficultés à la modifier. Il y a bien des tutoriels/réponses au problèmes, mais cela concerne surtout le phpbb2. Or, le template de la navbar change entre les deux versions. Donc, je me demandais, si quelqu'un savait comment y faire.

Je m'excuse d'avance si mon problème a été résolu, ou si la réponse a déjà été donnée ailleurs, mais je n'arrive pas à la trouver pour le phpbb3. Si besoin est, je peux vous montrer un lien avec la navbar comme je l'aimerai.

Cordialement.

[MlleAlys]

Bonjour,

..	Bienvenue sur le Forum des Forums ForumActif Vu que vous êtes nouveau, voici quelques sujets importants : Sécurité : mail de fondation - Ce qu'il ne faut pas faire Questions/Réponses fréquentes - Listing Trucs et astuces - Listing La fonction Rechercher La FAQ de ForumActif.com N'hésitez pas à ouvrir un nouveau sujet si vous ne trouvez pas votre réponse

L'ensemble de la barre est une liste de class .navlinks
Vous pouvez utiliser cette class pour par exemple mettre un fond à votre barre :

Code:

ul.navlinks {
  background: rgba(0,0,0,0.4);
}

ici fond noir avec une opacité de 0.4 (1=complètement opaque, 0=complètement transparent)

Chaque lien comprend une image et un texte (visibles ou non en fonction des options et images du PA).
Les liens sont de classe .mainmenu
Pour mettre en forme les liens, vous pouvez donc passer par a.mainmenu dans le css :

Code:

a.mainmenu { ... la mise en forme ici ... }

Par exemple :

Code:

a.mainmenu {
  color: yellow;
  font-family: 'time news roman';
  font-size: 15px;
  letter-spacing: 1px;
  text-shadow: 1px 1px 2px black;
  font-variant: small-caps;
}

avec :
color : couleur du lien
font-family : police du lien
font-size: taille de la police
letter-spacing : espace entre les lettres
text-shadow : décalage horizontal, vertical, étendue et couleur de l'effet d'ombre
font-variant : ici petites majuscules

Pour modifier l'apparence des liens au survol, utilisez la pseudo class :hover
Ce qui donne :

Code:

a.mainmenu:hover { ... ce qui change au survol ... }

Par exemple :

Code:

a.mainmenu:hover {
  color: red;
}

le lien deviendra rouge au survol ^^

Bref, après tout dépend de ce que vous souhaitez.

[KAntus]

Bonjour, merci de la réponse, je vais essayer de bidouiller avec ça pour voir ( couleurs, font...)

Je mets ça dans le template overall_header ?

Cordialement.

[MlleAlys]

non, ce sont des codes css que vous pouvez mettre directement dans votre feuille de style, dans affichage > couleurs > onglet feuille de style css ^^

[KAntus]

Merci beaucoup pour cette aide, je trouve que la navbar rend beaucoup mieux, je vais essayer de bidouiller pour avoir un rendu comme celui-ci. ( Désolé si ça fait pub, le forum est mort mais la navbar me plait)

Du coup, pour l'avoir dans ce genre, je continue dans le CSS, ou faut-il toucher aux templates ?

Cordialement.

[MlleAlys]

Tout ici peut se faire via css ^^
Pour faire sortir ainsi la barre de navigation du forum, vous pouvez la mettre en position fixe ou absolue :

- reprenez votre code

Code:

ul.navlinks {
  background: rgba(0,0,0,0.6);
}

- Complétez le ainsi :

Code:

ul.navlinks {
  background: rgba(0,0,0,0.6);
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  z-index: 999;
}

avec :
position : fixed pour que la barre soit positionnée en fonction de l'écran : elle reste du coup toujours visible en haut de l'écran. Remplacez "fixed" par "absolute" si vous souhaitez la positionner en fonction du forum, et donc la laisser en haut du forum.
top : la barre se trouve à 0px du haut de l'écran (ou du forum si position absolue)
left : la barre se trouve à 0px du bord gauche de l'écran
right : la barre se trouve à 0px du bord droit de l'écran (avec la ligne d'au dessus elle prendra donc toute la largeur)
z-index : un nombre élevé pour être sûr que la barre si elle est en position fixe ne passe pas en dessous de certains éléments du forum, et soit donc toujours visible.

Suivant votre modèle, vous pouvez également vous renseigner sur les bordure en css (propriété border-bottom ici pour la bordure du bas), et même les effet d'ombre (propriété box-shadow) si vous souhaitez ajouter du relief ^^

[KAntus]

Merci beaucoup de votre aide !!! Je crois bien que le problème est résolu.

( Penser à en faire un tuto pour tout le monde qui utilise du phpbb3 ?)

Bonne continuation.