La tambouille des râleuses
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
Le Deal du moment : -29%
PC portable Gamer ERAZER DEPUTY P60 – ...
Voir le deal
999.99 €

Aller en bas
Pêpêche
Pêpêche
Mascotte
Messages : 4428

Ajouter des balises BBcode à son forum Empty Ajouter des balises BBcode à son forum

Mar 25 Juin 2019 - 9:41

Toutes versions

Ajouter des balises BBCode à son forum

Bonjour bonjour Smile

On veut souvent avoir de jolies mises en page sur son forum, mais si on n'est pas à l'aise avec le html, c'est souvent un parcours du combattant. Eh oui une balise mal fermée et pouf ! C'est la cata. Du coup quand on a trouvé une mise en page qui nous plaît, qu'on a écrit un message avec et que ca passe, on se contente de faire des copier/coller…

Et si je te disais que tu peux avoir une jolie mise en page rien qu'avec du bbcode ? Oui oui ! C'est possible ! Laisse moi te montrer :
• Le code du message
Spoiler:
• Le rendu du message
Spoiler:

Tu peux même voir ca "en vrai" sur mon forum de test en utilisant ces identifiants
• Login : Tambouille
• Mot de passe : mdpTambouille2019

On voit ensemble comment faire ca ?

Idea Pré-requis :
• Avoir tes mises en page de prêtes,
• Avoir accès aux templates.

Idea Ce tutoriel fonctionne pour toutes les versions.

C’est partie !

La CSS

Avant toute chose, on va aller déposer dans la feuille de style du forum les différentes css liées à nos mises en page.

Pour cela, on va dans :
Panneau d'administration > Affichage > Images et Couleurs > Couleurs > Feuille de style CSS.

Par exemple, voilà pour moi :
Code:
/* Tuto mep */

.titre-niv1 {
    color: #e67466;
    font-size: 24px;
    font-weight: bold;
    line-height: 30px;
    padding-bottom: 5px;
    position: relative
}

.titre-niv1::after{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 20px;
    height: 3px;
    content: "";
    background: #e67466;
}

.titre-niv2{
    color: #bd9262;
    font-size: 16px;
    font-weight: bold;
    line-height: 20px;
    padding-bottom: 5px;
    position: relative
}

.titre-niv2::after{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 10px;
    height: 1px;
    content: "";
    background: #bd9262
}

.titre-niv3{
    color: #bd9262;
    font-size: 16px;
    font-weight: bold;
    line-height: 20px;
    padding-bottom: 5px;
}

.titre-niv3::before{
  display: inline-block;
  content: "►";
  font-size: 12px;
  padding-right: 4px;
}


.actualisation{
   background: #e2e3de url('http://pvereecken.fr/zenpub/zp2017/img/bkg-mep.png') no-repeat top center;
   background-size: 100% auto;
   border: 2px solid #dbc8a4;
   border-radius: 20px;
   margin: auto;
   overflow: hidden;
   padding-top: 100px;
   width: 80%;
}

.actualisation .titre-actu{
   align-items: center;
   background: #fff;
   border-bottom: 2px solid #dbc8a4;
   border-top: 2px solid #dbc8a4;
   color: #dbc8a4;
   font: normal 26px/1 'Pacifico', cursive;
   display: flex;
   justify-content: center;
   height:80px
}

.actualisation .content{
   font-size: 14px;
   padding: 10px;
}

.actualisation .content a{
   color: #e26e26;
}

.actualisation .content a:hover{
   color: #caa38c;
}

On oublie pas de sauvegarder.

Le Javascript

On va ensuite créer un nouveau javascript. Pour cela on va aller dans :
Panneau d’administration > Modules > HTML & Javascript > Gestion des codes Javascript.

Et on ne va l'activer nulle part :
Ajouter des balises BBcode à son forum Reglag10

Vu que qu'on doit tester ou non la présence de la balise code dans le js, je ne peux l'envoyer directement dans le message. Tu le trouveras donc ici. Il te suffit de faire un clic droit sur script-all.js et de l'enregistrer sur ton ordi.

Puis, tu l'ouvres avec un éditeur de texte et tu vas le copier coller sur ton forum Smile
Ce code est commenté pour que tu comprennes ce que l’on fait.

Ici, tu as 3 choses à modifier :
• la version de ton forum
Code:
var versionForum = 'modernbb';
• la liste des mises en page, en indiquant à chaque fois un nom, le bbcode à utiliser et le HTML équivalent
Code:
var listeBbcode = [
      {
         nom: 'titre de niveau 1',
         bbcode: 't1',
         html: '<div class="titre-niv1">$1</div>'
      },
      {
         nom: 'titre de niveau 2',
         bbcode: 't2',
         html: '<div class="titre-niv2">$1</div>'
      },
      {
         nom: 'titre de niveau 3',
         bbcode: 't3',
         html: '<div class="titre-niv3">$1</div>'
      },
      {
         nom: 'Mep Miettes',
         bbcode: 'miettes',
         html: '<div class="tuto-miettes">$1</div>'
      },
      {
         nom: 'Actualisation',
         bbcode: 'maj',
         html: '<div class="actualisation"><!--\n\t--><div class="titre-actu">Actualisation</div><!--\n\t--><div class="content">$1</div><!--\n--></div>'
      },
      {
         nom: 'Relance',
         bbcode: 'relance',
         html: '<div class="relance"><!--\n\t--><div class="titre-actu">Où es-tu ?</div><!--\n\t--><div class="content">$1</div><!--\n--></div>'
      }
   ];
• indiquer le nom de la première classe HTML des éléments complexes
Code:
var listeClassesSpeciales = ['actualisation', 'relance'];
Idea Pour ce cas, il faudra toujours que le texte écrit par le membre se trouve dans une balise ayant pour class “content” :
Spoiler:

C’est tout pour le js Smile

On sauvegarde et on récupére son url. Par exemple pour moi :
Spoiler:

Les templates

Ici, nous avons 2 templates à modifier : celui pour les réponses rapides et celui pour les messages (nouveau sujet & répondre).

Les réponses rapides

On va ouvrir le template viewtopic_body (Panneau d’administration > Affichage > Templates > Général) et tout à la fin, on va copier/coller ce code :
Code:
<script src="http://miettes.lebonforum.com/29456.js" language="Javascript" type="text/javascript"></script>

Idea N’oublie pas de changer le lien du js par le tien Wink

On sauvegarde et on publie.

Les messages (nouveau sujet & répondre)

On va ouvrir le template "posting_body" (Panneau d’administration > Affichage > Templates > Poster & Messages privés) et tout à la fin, on va copier/coller ce code :
Code:
<script src="http://miettes.lebonforum.com/29456.js" language="Javascript" type="text/javascript"></script>

Idea N’oublie pas de changer le lien du js par le tien Wink

On sauvegarde et on publie.

Et voilà, c’est terminé ! Désormais, tu peux permettre à tes membres d’avoir une chouette mise en page Smile

Un petit plus

Avec la version actuelle, tous les membres ont accès à ces mises en page. Si tu veux restreindre celles-ci à une poignée de membres, tu peux t’aider de ce tutoriel ou venir nous demander de l’aide ici.

Trame à suivre

Dans un premier temps, il faut éditer tes 2 templates pour récupérer les infos “groupes” du membre. Il faut donc ajouter ceci
Code:
<div class="d-none" id="info-mb-staff"></div>
tout en bas des templates et ne pas oublier de les publier.

Pour le js, voici la version à utiliser. Tu le trouveras ici. Il te suffit de faire un clic droit sur script-groupe.js et de l'enregistrer sur ton ordi.

Puis, tu l'ouvres avec un éditeur de texte et tu vas le copier coller sur ton forum Smile
Ce code est commenté pour que tu comprennes ce que l’on fait.

En plus de modifier les éléments cité plus haut, il faut modifier :
Les groupes autorisés à voir la liste : pour cela, on va juste indiquer une information présente dans l’url de ceci, le numéro du groupe. Il te suffit d’afficher la page du groupe et de regarder dans l’url.
Spoiler:
Code:
var permissions = ['g1', 'g3']; 

Toutes les choses que tu dois modifier se trouve au début du js.




C’est tout pour cette fois. Si tu rencontres un souci avec ce tutoriel, n’hésite surtout pas à nous en parler Smile







Revenir en haut
Permission de ce forum:
Vous pouvez répondre aux sujets dans ce forum
Les coups de ♥ des Râleuses

Post-It des Râleuses