Le deal à ne pas rater :
Enceinte Ultimate Ears Boom 3
79.99 €
Voir le deal

Aller en bas
Mäven
Mäven
Râleuse (Admin)
Informations : Présente quelques heures par semaine =)
----
Idea Viens papoter avec nous sur le discord

Messages : 3991
https://tambouille-raleuses.forumactif.com/

[Toutes les versions] Ajouter un élément personnalisé à coté / en dessous du titre des catégories (Texte ou image) Empty [Toutes les versions] Ajouter un élément personnalisé à coté / en dessous du titre des catégories (Texte ou image)

Jeu 30 Mai 2019 - 19:27

[Toutes les versions] Ajouter un élément personnalisé à coté / en dessous du titre des catégories (Texte ou image)


Salut salut !

Suite à une aide quelque part sur le net, voilà un tutoriel qui peut s'avérer très utile.
Comme tu le sais peut-être, ForumActif limite le nombre de caractères dans les titres de catégories. Pas toujours facile quand on veut ajouter une petite description ou une image personnalisée à chaque titre.
Je viens t'expliquer comment contrer cette limitation !

Voilà ce que ça pourrait donner :
Spoiler:

[Toutes les versions] Ajouter un élément personnalisé à coté / en dessous du titre des catégories (Texte ou image) Ajoute10
Ou pour faire un peu plus concret :
Spoiler:

[Toutes les versions] Ajouter un élément personnalisé à coté / en dessous du titre des catégories (Texte ou image) Ajoute11

Arrow Il est nécessaire de comprendre le HTML et le CSS pour comprendre ce tutoriel
Arrow Il ne faut pas avoir peur de faire un peu de Javascript
Exclamation L'accès aux templates est nécessaire

Exclamation Pour le tutoriel je pars de templates non modifiés : c'est à adapter selon les modifications.
Exclamation La hiérarchie du forum (PA > Affichage > Structure et hiérarchie) doit être sur la ligne 2, en colonne 1 ou 2.

Mise en place du contenu

Tout d'abord, on prépare notre texte, ou notre image, que nous voulons ajouter.
Pour cela, on va aller dans PA > Général > Catégories et forums.
Ici, je veux ajouter quelque chose au titre de ma première catégorie. Pour cela, je vais aller dans le premier forum qui suit cette catégorie et le modifier (petit écrou) :
Spoiler:

[Toutes les versions] Ajouter un élément personnalisé à coté / en dessous du titre des catégories (Texte ou image) 114

Et on va y ajouter du texte (ou une image) dans une classe description_cate , à la suite de la description de ce forum :
Code:
<span class="description_cate">  J'ajoute ce texte sous le nom de ma catégorie</span>
Spoiler:

[Toutes les versions] Ajouter un élément personnalisé à coté / en dessous du titre des catégories (Texte ou image) 212

On enregistre et on peut passer à la modification suivante.

Préparation du template

On a de la chance ici, c'est pareil partout Smile
PhpBB2, PhpBB3, PunBB, Invision, ModernBB et AwesomeBB

Dans le template Index_box (PA > Affichage > Template ), on va rechercher ceci :
Code:
{catrow.tablehead.L_FORUM}

Puis juste après cela, on colle la classe qui va recevoir le texte / l'image :
Code:
<span class="conteneur-description"></span>

Petit ajout pour PunBB

Pour préparer notre js, on va faire une petite modification sur PunBB.

Dans le même template, juste après :
Code:
<!-- BEGIN tablehead -->
On va ajouter ça :
Code:
<div class="categorie">
Et juste avant :
Code:
<!-- END tablefoot -->
On ajoute ça :
Code:
</div>

Idea Pour pouvoir adapter le js plus tard, on va aussi récupérer la classe qui contient toute la catégorie (généralement celle de la balise juste après :
Code:
<!-- BEGIN tablehead -->
Sur les templates non modifé on retrouve :
> Pour phpBB2 : forumline
> Pour phpBB3 : forabg
> Pour punBB : categorie
> Pour Invision : borderwrap
> Pour ModernBB : forabg
> Pour AwesomeBB : forum

On valider et on publie le template

Préparation du javascript

Dans Modules > Gestion des codes javascripts > Créer, tu vas coller ceci :
Code:
$(function(){
 $('.forumline').each(function(){ // Pour chaque catégorie
  var desc;
  if($(this).find('.description_cate').length){ // On regarde s'il y a un texte / une image à récupérer
  desc=$(this).find('.description_cate')[0].innerHTML; // Si oui on le récupère
  $(this).find('.conteneur-description')[0].innerHTML = desc; // et on l'insère dans la bonne classe.
    }
  });
});

Et modifier les informations suivantes :
.forumline -> par la classe récupérée à la fin de l'étape précédente
.description_cate et .conteneur-description si tu leur a donné un nom différent.

Ensuite tu enregistres et on passe à la partie suivante =)

Préparation de la mise en page (CSS)

Ici, on va simplement cacher ce qu'on a mis dans la description du forum :
Code:
.description_cate{
 display:none;
}

Et on met en forme ce qu'on veut ajouter au besoin :
Code:
.conteneur-description{
    color:#fff;
  font-weight:bold;
  font-style:italic;
}




Et voilà, tu sais maintenant comment contrer la limitation du nombre de caractère dans les descriptions !

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