EXTENSION : Insert Template Code - Insertion de code personnalisé

[Raphaël]

► Nom officiel et nom francisé : Insert Template Code - Insertion de code personnalisé
► Auteur(s) et pseudo(s) respectif(s) sur (phpBB.com & GitHub.com) : martti (martti & marttiphpbb)

► Description : Cette extension pour phpBB 3.1.x & 3.2.x permet de modifier le code des fichiers du style utilisé en injectant du code HTML/CSS/JAVASCRIPT au moyen des évènements du style (template events). Cette extension permet aussi de créer ses propres fichiers de style personnalisés. Si vous avez plusieurs styles il est possible de modifier ces derniers indépendamment les uns des autres. Cette extension remplace celle présentée dans le viewtopic.php?f=11&t=136 qui était devenue obsolète avec l’apparition de phpBB 3.1.6.

Voir quelques exemples, mis en place sur EzCom :

• un logo personnalisé ;
• six images aléatoires dans le bandeau de l’en-tête de la page ;
• une image d’arrière plan personnalisée ;
• un fond transparent au niveau de ce qui est nommé #WRAP ;
• une balise META description pour les moteurs de recherches ;
• le copyright imagé en pied de page.

► Version stable : Aucune
► Version de développement : 0.1.0 (pour phpBB 3.1.x) & (pour phpBB 3.2.x)
► Compatible : phpBB 3.1.12 & 3.2.2

► Page(s) officielle(s) : phpBB (pour phpBB 3.1.x) & (pour phpBB 3.2.x)
► Page(s) de développement : GitHub (pour phpBB 3.1.x) & (pour phpBB 3.2.x)

► Page(s) de la traduction française : Aucun traduction nécessaire.

► Accès aux paramètres : Aucun paramètre disponible.

► Note(s) :

• obtenir des exemples de modifications au moyen de l’extension « Insert Template Code » :
  • ajouter des évènements du style (template events) supplémentaires,
  • intégrer son code Piwik analytics (voir Use case: Piwik analytics),
  • remplacer le bleu du bandeau du header par une image (voir Use case: Styling),
  • remplacer le bleu du bandeau du header par des images aléatoires (voir Use case: Random Header Image),
  • ajouter des icônes, à droite, dans la barre de navigation,
  • ajouter des liens dans la barre de navigation en prenant en compte la langue utilisée,
  • ajouter des liens dans le menu : « Accès rapide »,
  • afficher un message de bienvenue sur la page de l’index du forum et uniquement pour les invités (voir Use case: Welcome message),
  • ajouter du contenu dans le premier message de chaque page des sujets ou seulement le premier message des sujets,
  • afficher une publicité tous les x messages, voire uniquement à certains groupes,
  • utiliser Google Adsense dans les sujets (voir Use case: Google Adsense) et dans la vue des forums (viewforum). Pour aller plus loin, consulter cette page,
  • afficher un message personnalisé sur la page de contact (voir Use case: Message on the contact page),
  • personnaliser un copyright en pied de page du forum (voir la seconde image du message),
  • jouer un fichier audio selon une situation particulière,
  • appliquer une transparence sur la zone du forum appelée « WRAP »,
  • personnaliser l’image d’arrière-plan du forum ;
• obtenir les extensions et styles concernés par cette extension :
  
  • EXTENSION : Group Template Variables,
  • EXTENSION : Parameter Template Variables,
  • EXTENSION : Template Events.

[Raphaël]

Parmi les étapes de personnalisation de son forum, il y a la question de l’image de l’arrière-plan.

---

Personnaliser l’image d’arrière-plan du forum :

1. ouvrir le fichier : ./ext/marttiphpbb/inserttemplatecode/styles/all/template/event/overall_header_stylesheet_after.html ;
2. ajouter le code suivant :

   Code : Tout sélectionner

   <style>
html, body {
   color: #536482;
   background-color: #7a540c;
   margin:0;
   background: url("{ROOT_PATH}images/arriereplan/nomdelimagedarriereplan.png");
   -webkit-background-size: cover; /* pour Chrome et Safari */
   -moz-background-size: cover; /* pour Firefox */
   -o-background-size: cover; /* pour Opera */
   background-size: cover; /* version standardisée */
   background-attachment: fixed;
   background-position: 50% 0%;
   background-repeat: no-repeat;
}
</style>
   La ligne importante débute par background: url(" dont il est spécifié le chemin depuis le répertoire du forum, celui contenant le fichier config.php) et indique le fichier image utile pour l’arrière-plan ;
3. créer le répertoire ./images/arriereplan/ ;
4. transférer l’image d’arrière-plan dans le répertoire nouvellement créé, de telle sorte d’avoir le chemin suivant : ./images/arriereplan/nomdelimagedarriereplan.png ;
5. purger le cache du forum.

[Raphaël]

Parfois il est nécessaire de donner une transparence à son forum si l’on souhaite mettre en valeur l’image d’arrière-plan du forum.

---

Appliquer une transparence sur la zone du forum appelée « WRAP », qui est par défaut sous le style prosilver de couleur blanche :

1. ouvrir le fichier : ./ext/marttiphpbb/inserttemplatecode/styles/all/template/event/overall_header_stylesheet_after.html ;
2. ajouter le code suivant :

   Code : Tout sélectionner

   <style>
#wrap {
   background-color: #FFF;
   border-color: #E6E9ED;
   background-color: rgba(255, 255, 255, 0.9);
}
</style>
   La valeur 0.9 est le degré de transparence de la zone appelée « WRAP » c’est avec cette valeur qu’il faut jouer. Comprise entre 0 et 1 plus cette valeur est élevée et plus la transparence sera faible ;
3. purger le cache du forum.

[Raphaël]

Cette extension, comme déjà dit dans sa description, permet d’injecter du code HTML, CSS, JAVASCRIPT dans les fichiers HTML mis à disposition par cette extension correspondant aux évènements du style (template events). Si l’on souhaite injecter du code pour d’autres événements, voici comment procéder.

---

Ajouter des évènements du style (template events) supplémentaires pour l’extension « Insert Template Code » :

1. si cette extension est déjà activée sur son forum, il est recommandé d’installer l’extension disponible sur le viewtopic.php?f=11&t=328 afin de localiser les évènements du style (template event) qui nous intéressent, puis de suivre la démarche suivante :
   
   1. de créer dans le répertoire de son espace FTP : ./ext/marttiphpbb/inserttemplatecode/styles/all/template/event/ les fichiers HTML portant le même nom que les évènements du style souhaités, tel que par exemple les évènements « overall_header_navigation_prepend » & « overall_header_navigation_append » permettant d’insérer du code respectivement avant et après les liens de la barre de navigation (navbar). Ainsi, les fichiers créés auront le chemin suivant :

      Code : Tout sélectionner

      ./ext/marttiphpbb/inserttemplatecode/styles/all/template/event/overall_header_navigation_prepend.html
./ext/marttiphpbb/inserttemplatecode/styles/all/template/event/overall_header_navigation_append.html
   2. de saisir les codes respectifs dans les fichiers nouvellement créés ;
   3. de purger le cache de son forum pour constater les changements apportés.

[Raphaël]

Voici la question de l’ajout de nouveaux liens dans la barre de navigation, c’est possible si l’on a appliqué les actions du précédent message.

---

Ajouter des liens dans la barre de navigation en prenant en compte de la langue utilisée :

1. avant toute chose l’un ou les deux événements du style (template events) suivants overall_header_navigation_append & overall_header_navigation_prepend doivent avoir été créés tel que décrit dans ce message ;
2. ouvrir le fichier suivant :

   Code : Tout sélectionner

   ./ext/marttiphpbb/inserttemplatecode/styles/all/template/event/overall_header_navigation_prepend.html
3. saisir le code suivant, tel que cet exemple :

   Code : Tout sélectionner

   <!-- FAQ nomdusite -->
<li class="small-icon icon-faq" <!-- IF not S_USER_LOGGED_IN -->data-skip-responsive="true"<!-- ELSE -->data-last-responsive="true"<!-- ENDIF -->><a href="{ROOT_PATH}faq.php?mode=nomdusite" rel="help" title="<!-- IF S_USER_LANG eq 'fr' -->Aide<!-- ELSE -->Help<!-- ENDIF -->" role="menuitem"><!-- IF S_USER_LANG eq 'fr' -->Aide<!-- ELSE -->Help<!-- ENDIF --></a></li>
   Dans ce code apparaissent deux fois les mots « Help » et « Aide », mots à remplacer par le nom qui l’on souhaite donner à sa nouvelle page de la FAQ en anglais et en français ;
4. purger le cache de son forum pour constater les changements apportés.

L’exemple est affiché en haut du forum dans la barre de navigation, trouver « Aide » ou « Help » selon la langue utilisée.

Source du code : https://www.phpbb.com/community/viewtop ... #p13821851 (des idées sont fournies pour modifier l’icône du nouveau lien).

[Raphaël]

Voici la question de l’ajout de code, tel que par exemple, d’une publicité qui sera affichée tous les x messages.

---

Afficher une publicité tous les x messages :

1. l’extension « Insert template code » doit être installée ;
2. OUVRIR le fichier :

   Code : Tout sélectionner

   ./ext/marttiphpbb/inserttemplatecode/styles/all/template/event/viewtopic_body_postrow_post_after.html
3. AJOUTER dans ce fichier le code suivant :

   Code : Tout sélectionner

   <!-- Publicité affichée après le cinquième message dans les sujets -->
<!-- IF postrow.S_ROW_COUNT == 4 -->
Code de sa publicité
<!-- ENDIF -->
   Où Code de la publicité est à remplacer par la code de sa publicité ;
4. VIDER le cache de son forum.

La valeur de postrow.S_ROW_COUNT == 4 correspond à afficher la publicité après le cinquième message, c’est ainsi que c’est défini, le premier message correspond à postrow.S_FIRST_ROW, le second message à postrow.S_ROW_COUNT == 1, etc..

Si l’on souhaite afficher la publicité uniquement à certains groupes, voir la démarche suivante.

---

Voici une démarche complémentaire à celle précédemment détaillée dans ce message, permettant l’ajout de code, tel que par exemple, d’une publicité qui sera affichée uniquement à certains groupes tous les x messages.

---

Afficher une publicité à certains groupes tous les x messages :

1. il est nécessaire d’effectuer les actions listées plus haut dans ce message avant de passer à l’étape suivante ;
2. INSTALLER l’extension présentée sur le viewtopic.php?f=11&t=327 ;
3. OUVRIR le fichier :

   Code : Tout sélectionner

   ./ext/marttiphpbb/inserttemplatecode/styles/all/template/event/viewtopic_body_postrow_post_after.html
4. TROUVER : <!-- IF postrow.S_ROW_COUNT == 4 --> ;
5. REPLACER PAR : <!-- IF (S_GROUP_4 or S_GROUP_5) and (postrow.S_ROW_COUNT == 4) -->. Où le premier 4 & 5 correspondent aux ID des groupes à autoriser, donc la méthode est de lister toutes les ID des groupes que tu souhaites autoriser et non l’inverse (lister les groupes interdits) car ce n’est pas permis par l’extension. Pour d’avantage de groupe à autoriser, AJOUTER à la suite de or S_GROUP_5 ceci or S_GROUP_XX où XX est l’ID du groupe à autoriser ;
6. VIDER le cache de son forum.

Pour connaitre l’ID d’un groupe :

1. se rendre dans le PCA (panneau d’administration) ;
2. dans l’onglet « MEMBRES ET GROUPES » ;
3. sur la page « Gérer les groupes » ;
4. survoler avec la souris le bouton « Paramètres » correspondant à un groupe ;
5. le lien se termine par g=3 où 3 est l’ID du groupe dans cet exemple.