- PêpêcheMascotte
- Messages : 4428
Ajouter des balises BBcode à son forum
Mar 25 Juin 2019 - 9:41
Toutes versions
Ajouter des balises BBCode à son forum
Bonjour bonjour
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
Tu peux même voir ca "en vrai" sur mon forum de test en utilisant ces identifiants
On voit ensemble comment faire ca ?
Pré-requis :
• Avoir tes mises en page de prêtes,
• Avoir accès aux templates.
Ce tutoriel fonctionne pour toutes les versions.
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 :
On oublie pas de sauvegarder.
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 :
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
Ce code est commenté pour que tu comprennes ce que l’on fait.
Ici, tu as 3 choses à modifier :
• la version de ton forum
C’est tout pour le js
On sauvegarde et on récupére son url. Par exemple pour moi :
Ici, nous avons 2 templates à modifier : celui pour les réponses rapides et celui pour les messages (nouveau sujet & répondre).
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 :
N’oublie pas de changer le lien du js par le tien
On sauvegarde et on publie.
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 :
N’oublie pas de changer le lien du js par le tien
On sauvegarde et on publie.
Et voilà, c’est terminé ! Désormais, tu peux permettre à tes membres d’avoir une chouette mise en page
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.
Dans un premier temps, il faut éditer tes 2 templates pour récupérer les infos “groupes” du membre. Il faut donc ajouter ceci
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
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.
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
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:
- 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 ?
Pré-requis :
• Avoir tes mises en page de prêtes,
• Avoir accès aux templates.
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 :
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
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';
- 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>'
}
];
- Code:
var listeClassesSpeciales = ['actualisation', 'relance'];
- Spoiler:
- Code:
<div class="actualisation"><!--\n\t--><div class="titre-actu">Actualisation</div><!--\n\t--><div class="content">$1</div><!--\n--></div>
- Code:
<div class="relance"><!--\n\t--><div class="titre-actu">Où es-tu ?</div><!--\n\t--><div class="content">$1</div><!--\n--></div>
C’est tout pour le js
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>
N’oublie pas de changer le lien du js par le tien
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>
N’oublie pas de changer le lien du js par le tien
On sauvegarde et on publie.
Et voilà, c’est terminé ! Désormais, tu peux permettre à tes membres d’avoir une chouette mise en page
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>
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
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
Permission de ce forum:
Vous pouvez répondre aux sujets dans ce forum
|
|