[en cours] Personnaliser l'en-tête de son forumactif

Personnaliser l'en-tête de son forumactif

Vous voulez changer le logo ? Le repositionner, ou bien repositionner le menu ou en changer son apparence ? Ce tutoriel vous permettra d'apprendre à personnaliser l'entête de votre forum FA, en priorisant les manipulations sans CSS. Je ne recourrai au CSS que si nécessaire.

Sommaire

• Le header
  • Changer/Enlever le logo
    
  • Repositionner le logo
    
  • Problèmes récurrents
    
  • Changer le nom du site
    
  • Ne pas afficher le nom du site
  
  
• La barre de navigation
  
  • Changer/Enlever les icones de navigation
    
  • N'afficher que les images
    
  • Repositionner la barre
    
  • Sur une ligne ou non ?
    
  • Changer la disposition des liens
    
  • Régler les permissions des liens
    
  • Ajouter un lien personnalisé
  
  
• Personnalisation avancée
  
  • Personnalisation avancée sous phpBB2
    
  • Personnalisation avancée sous les autres versions
    

Cette documentation est publiée sour une licence CreativeCommons BY-SA.
Vous pouvez distribuer, modifier et faire une utilisation commerciale de ces travaux, sous les conditions suivantes :

• Vous devez citer l'auteur de cette documentation
  
• Tout travail dérivé de cette documentation doit être publiée sous une licence identique.

Le header

On va d'abord commencer par apprendre à personnaliser la partie qui contient le logo, le nom du site et la description du site.

Changer/Enlever le logo

Pour changer le logo, rien de plus simple ! Après avoir hébergé votre nouveau logo chez un hébergeur d'image de votre choix, allez dans votre panneau d'administration > Affichage > Gestion des images > Mode avancé Sur la page, vous changez l'adresse URL vis à vis "Logo du forum"



Si vous ne voulez pas mettre de logo, utilisez l'URL de ce gif transparent pour remplacer l'ancien logo : https://2img.net/i/fa/empty.gif

Validez le changement. Retournez sur l'index de votre forum, puis rafraîchissez votre page si nécessaire.

Repositionner le logo

Si vous avez mis une grande bannière, vous voudrez certainement la centrer. Pour cela, allez dans votre panneau d'administration > Affichage > En-tête & Navigation. Sur la page qui s'affiche, cochez "Centré" vis à vis le libellé Position du logo



Validez ensuite le changementé.

Problèmes récurrents

Voici quelques problèmes que l'on voit régulièrement chez ceux qui veulent personnaliser leur forum.

Problème #1 : Certains utilisateurs se plaignent que le forum est trop large et ils doivent scroller horizontalement pour lire le contenu

Avec la multiplication des internautes utilisant un écran large, je vois des utilisateurs personnaliser leur site en fonction de leur écran ayant une telle configuration. Dans ces cas de figure, la bannière peut monter à 1200px de large, voir plus encore, alors qu'au moins le quart des internautes utilisent une résolution de 1024*768.

Vous devez donc tenir compte de ces internautes lorsque vous personnalisez votre forum et pour cela, je vous recommande de ne pas excéder 960 pixels pour votre bannière afin d'éviter le problème de largeur chez ces utilisateurs.

Problème #2 : La bannière sort du cadre.

Ce cas peut survenir si vous utilisez une version autre que phpBB2 pour votre forumactif puisque ces versions utilisent des divisions plutôt que des tableaux pour la mise en page, ce qui influe sur le rendu par défaut.

Si vous avez ce problème, c'est soit parce que vous avez fait votre bannière trop large (voir problème #1), ou bien parce que votre forum est trop étroit.

Dans le cas où votre bannière excède les 960px, faites votre bannière moins large, puis ajustez la largeur de votre forum au besoin.

Dans le cas où votre bannière n'excède pas les 960px, augmentez tout simplement la largeur de votre forum.

Pour savoir comment régler cette largeur, un tutoriel viendra prochainemenet et j'éditerai ce post à ce moment-là.

Changer le nom du site

Venons-en maintenant au nom du site.

Pour le changer, allez dans votre panneau d'administration > Général > (Forum) Configuration. Dans la page, changez l'ancien nom du site par le nouveau, vis à vis Nom du site. Vous pouvez en profiter en même temps pour changer la description du site.



Validez le changement

Et le nom du site dans ma barre du navigateur ?

Le nom du site affiché dans le haut de la fenêtre du navigateur est indépendant de celui affiché sur les pages mêmes de votre forum. Mais ceci ne doit pas être négligé pour autant puisque c'est ce titre qui va apparaître dans les moteurs de recherche et sur l'annuaire de Forumactif. Ce titre doit donc correspondre avec le nom de votre site.

Pour le changer, allez dans votre panneau d'administration > Général > (Promotion du forum) Moteurs de recherche. Sur cette page, changer le titre de la page d'accueil



Validez le changement

Ne pas afficher le nom du site

Beaucoup d'utilisateurs utilisent une bannière contenant le nom du site et donc, ne veulent pas afficher le texte du nom du site. Or, l'erreur courante est de laisser le champ "Nom du site" vide, ce qui du coup, empêche vos utilisateurs de retourner sur l'index par le fil d'Ariane, ce qui pose donc un problème d'ergonomie.

Pour procéder proprement, tout en laissant le champ "Nom du site" renseigné, allez dans votre panneau d'administration > Affichage > En-tête & Navigation. Sur cette page, mettez Afficher le titre du forum sur Non



Validez le changement.

La barre de navigation

On poursuit maintenant avec le menu qui contient les principaux liens de navigation de votre forum.

Changer/Enlever les icones de navigation

Si vous avez fait vos icones ou que vous avez téléchargé un pack d'icones/boutons de navigation pour votre forum, vous voulez certainement les mettre à la place des icones de base.

Pour cela, allez dans votre panneau d'administration > Affichage > Gestion des images > Mode avancé. Sur cette page, remplacez les adresses URL vis à vis les libellés suivants :

• Index
  
• Calendrier*
  
• Galerie*
  
• Portail*
  
• FAQ
  
• Rechercher
  
• Membres
  
• Groupes
  
• Éditer votre profil
  
• Messages privés
  
• Nouveaux Messages privés
  
• S'enregistrer
  
• Connexion
  
• Déconnexion

(Les libellés marqués d'une étoile dans la liste ne sont pas obligatoires si vous n'avez pas activé les modules en question, mais par contre, si vous créez un thème qui sera distribué, pensez à prévoir des boutons pour ces liens qui sont trop souvent négligés par les thèmeurs.)

Si vous ne voulez pas d'images, remplacez toutes les URLs par celle de ce GIF transparent : https://2img.net/i/fa/empty.gif

Validez le changement

N'afficher que les images

Si vous avez mis des boutons contenant un texte pour chacun des liens, vous voudrez certainement virer les textes qui font doublon.

Pour cela, allez dans votre panneau d'administration > Affichage > En-tête & Navigation. Sur cette page, cochez Non vis à vis Afficher seulement les images dans la barre des liens



Validez le changement.

Repositionner la barre

Vous utilisez un thème avec une belle grosse barre de navigation, mais celle-ci est alignée à gauche, ce qui gâche l'esthétique.

Pour la centrer, allez dans votre panneau d'administration > Affichage > En-tête & Navigation. Dans cette page, mettez Position du menu sur Centré.



Validez le changement.

Sur une ligne ou non ?

Suivant la largeur de votre forum et le type de barre de navigation, il se peut que vous ayez à forcer l'affichage de votre barre sur une ligne ou ne pas la forcer.

Vous devez la forcer si vous utilisez une grosse barre dont les boutons doivent être collés ensemble. Dans ce cas, il est important que la barre ne se mette pas sur deux lignes, pour des raisons d'esthétique.

Vous n'avez pas à la forcer si vous affichez les textes avec des petits icônes à côté, ou bien que vous utilisez des gros boutons séparés. Dans ce cas, même si le menu se mettait sur deux lignes, il n'y a pas de problèmes d'esthétique.

Pour configurer cela, allez dans votre panneau d'administration > Affichage > En-tête & Navigation. Dans cette page, mettez Forcer la barre de navigation à rester sur une ligne sur Oui si vous la voulez sur une ligne, ou sur Non si vous ne voulez pas forcer cela.



Validez le changement.

Changer la disposition des liens

Suivant le thème utilisé, il se peut que vous ayez à changer la disposition des liens pour une esthétique optimale.

Pour changer ça, allez dans votre panneau d'administration > Utilisateurs & Groupes > En-tête & Navigation. Dans cette page, descendez en bas du formulaire, puis utilisez les flèches pour pour monter et descendre les liens.

Régler les permissions des liens

Vous voulez rendre certaines pages telles que la liste des membres et les groupes inaccessibles aux invités ?

Pour cela, allez dans votre panneau d'administration > Utilisateurs & Groupes > Permissions spéciales. Sur cette page, vous pouvez régler les permissions minimales de Rechercher, FAQ, Calendrier, Membres et Groupes, ainsi que d'autres sections accessibles ailleurs sur le forum.



Réglez-les tout simplement, puis validez les changements.

Ajouter un lien personnalisé

Vous voulez par exemple mettre un lien de retour vers un site ou encore vers une page HTML que vous avez faite ?

Pour cela, allez dans votre panneau d'administration > Affichage > En-tête & Navigation. Descendez jusqu'en bas de la liste des liens de navigation, puis cliquez sur Ajouter un menu personnalisé.



Vous aurez un formulaire comme ceci :



Pour vous aider à remplir, voici les correspondances.

• Menu : Il s'agit du nom du menu. Il vous sert surtout à l'identifier dans la liste des liens dans votre panneau d'admin
  
• Image : Il s'agit de l'icône ou du bouton que vous voulez mettre pour ce lien.
  
• Texte : C'est ce texte qui sera affiché à côté de votre icône (si vous affichez les textes) ainsi que dans le texte de remplacement de votre image, qui s'affiche en cas de problèmes de chargement de l'image.
  
• URL de redirection : C'est la page vers laquelle vous voulez que le lien redirige.
  
• Permissions : C'est là que vous décidez des permissions minimales d'affichage du bouton. Si par exemple "Invité" est décoché, le lien ne sera pas visible pour les utilisateurs anonymes.
  
• Affichage : Cochez cette case si vous voulez ouvrir ce lien dans une nouvelle fenêtre. Ne l'utilisez que pour les liens externes au forum.

Voici un exemple, avec un lien qui redirige vers phpBB France :



Validez ensuite !

Voilà ce que ça donne sur ma page :

Personnalisation avancée

Nous voilà enfin dans la partie sans doute la plus intéressante pour les plus bidouilleurs d'entre vous. Ici, je vais vous montrer quelques astuces qui vont bien souvent demander à mettre les mains dans le CSS, voire dans les templates (dans le cas des version phpBB2 et PunBB).

IMPORTANT : Il est fortement recommandé d'avoir des bases en HTML et en CSS pour suivre cette partie !

Personnalisation avancée sous phpBB2

Dans cette version, bien qu'on ait un