Le Deal du moment : -24%
Purificateur d’air & Ventilateur Dyson TP02 ...
Voir le deal
399 €

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 versions] Personnaliser les balises "spoiler" Empty [Toutes versions] Personnaliser les balises "spoiler"

Mer 5 Juin 2019 - 14:25

Personnaliser les balises "spoiler"


Bonjour !

Idea Si tu n'arrives pas à voir l'image correctement dans les spoilers, j'ai mis les liens des images pour les voir en grand dans ton navigateur à coté Smile

Par défaut, les balises de "spoilers" sont carrées avec la couleur de fond paramétrée dans le panneau d'administration et avec quelques variantes selon la version, et on a un style ouvert et un style fermé.
PhpBB2 :
Spoiler:
PhpBB3 :
Spoiler:
PunBB :
Spoiler:
Invision :
Spoiler:
ModernBB :
Spoiler:
AwesomeBB :
Spoiler:

Idea Tous les codes donnés sont à placer dans la feuille de style CSS de ton forum : PA > Affichage > Couleurs > Feuille de style CSS

Sommaire

Comme le tutoriel est assez long juste parce qu'il y a une partie par version, clique sur ta version pour aller directement à la bonne partie Smile
phpBB2
phpBB3, punBB &  ModernBB
Invision
AwesomeBB

PhpBB2

Ce qu'il faut retenir

Les codes en HTML sont construits comme ceci :
Code:
<dl class="codebox spoiler">
<dt style="cursor: pointer;">Spoiler:</dt>
<dd class="spoiler_closed">&nbsp;</dd>
<dd>
<div class="spoiler_content">
Contenu du spoiler
</div>
</dd>
</dl>
Arrow La seule différence quand c'est "ouvert" ou "fermé", c'est la classe "hidden" qui s'ajoute sur l'une ou l'autre balise simplement pour cacher ou non le contenu.

Tout va se passer avec ces classes :
codebox ou  spoiler : qui est l'ensemble de la boîte contenant le spoiler (titre + cadre du contenu qu'il soit fermé ou ouvert)
spoiler_closed: qui est la boite telle qu'elle est quand elle est fermée.
spoiler_content: qui est le contenu du spoiler (boite contenant le texte)
genmed : qui correspond au mot "spoiler".

Exemple

Si je veux que mon bloc de spoiler soit moins large que mon message et centré, je mets mon style sur la classe codebox :
Code:
.codebox{
  width:70%;
  margin:auto;
}
Fermé:
Ouvert:

Maintenant, si je veux personnaliser le texte (Spoiler ou alors le titre que je lui ai mis) on va cibler la class genmed de ma class codebox :
Code:
.codebox .genmed{
 font-size:16px;
 font-style:italic;
  font-variant:small-caps;
}
Fermé:
Ouvert:

Idea Comme souvent depuis le début de ces tutoriels de personnalisation de citation, code, etc : ici le style qu'on a appliqué jusqu'ici s'applique aussi au texte "citation" et "code". Mais cette fois on a moyen de le cibler seul en utilisant non pas la classe codebox mais la classe spoiler
Code:

.spoiler{
  width:70%;
  margin:auto;
}
.spoiler .genmed{
 font-size:16px;
 font-style:italic;
  font-variant:small-caps;
}
Exemple de ciblage :

Et pour finir on va pouvoir personnaliser vraiment l'intérieur du spoiler.
Quand il est fermé on va utiliser la classe spoiler_closed. Juste pour te montrer les possibilités, je vais mettre le fond quand c'est fermé en rouge et je laisse les coins carrés.
Code:
.spoiler_closed{
 background:red !important;
}
Spoiler:

Et pour personnaliser le spoiler qui est ouvert, on utilise la classe spoiler_content : si je veux un fond vert (pour bien montrer la différence), une écart du texte par rapport aux bordures, un texte "justifié" et des bords arrondis :
Code:

.spoiler_content{
  padding:10px;
  text-align:justify;
  background:green;
  border-radius:30px;
}
Spoiler:

Oui mais là il reste un fond blanc et un cadre qui gâche un peu tout. On va aller l'enlever :
Code:
.spoiler dd{
 background:none;
  border:none;
}
Spoiler:


PhpBB3, PunBB & ModernBB

Ce qu'il faut retenir

Les codes en HTML sont construits comme ceci :
Code:
<dl class="codebox spoiler">
<dt style="cursor: pointer;">Titre du spoiler:</dt>
<dd>
<div class="spoiler_content">
Contenu du spoiler
</div>
</dd>
</dl>
Arrow La seule différence quand c'est "ouvert" ou "fermé", c'est la classe "hidden" qui s'ajoute au "spoiler_content" en position ouverte.

Tout va se passer avec ces classes :
codebox ou  spoiler : qui est l'ensemble de la boîte contenant le spoiler (titre + cadre du contenu qu'il soit fermé ou ouvert)
spoiler_content: qui est le contenu du spoiler (boite contenant le texte)

Exemple

Pour personnaliser le contenu du spoiler qui est ouvert, on utilise la classe spoiler_content : si je veux un écart du texte par rapport aux bordures, un texte "justifié" :
Code:

.spoiler_content{
  padding:10px;
  text-align:justify;
}
Spoiler:

Si je veux que mon bloc de spoiler soit moins large que mon message, centré et ait les bords arrondis, je mets mon style sur la classe codebox :
Code:
.codebox{
  width:70%;
  margin:auto;
 border-radius:10px;
}
Fermé:
Ouvert:

Idea Ce style s'applique aux codes, spoiler et hide. Il est possible de ne l'affecter qu'au spoiler en ciblant la classe spoiler et non la codebox :
Code:
.spoiler{
  width:70%;
  margin:auto;
 border-radius:10px;
}

Maintenant, si je veux personnaliser le texte (Spoiler ou alors le titre que je lui ai mis) on va cibler la class genmed de ma class codebox :
Code:
.codebox dt{
 font-size:16px !important;
 font-style:italic;
  font-variant:small-caps;
}
Fermé:
Ouvert:

Idea Comme souvent depuis le début de ces tutoriels de personnalisation de citation, code, etc : ici le style s'applique aussi au texte "citation" et "code". Mais cette fois, comme juste au dessus, on a moyen de le cibler seul en utilisant non pas la classe codebox mais la classe spoiler
Code:
.spoiler dt{
 font-size:16px !important;
 font-style:italic;
 font-variant:small-caps;
}
style avec ciblage sur le spoiler:

Invision

Ce qu'il faut retenir

Les codes en HTML sont construits comme ceci :
Code:
<dl class="spoiler">
<dt style="cursor: pointer;">Titre du spoiler:</dt>
<dd>
<div class="spoiler_content hidden">
Contenu du spoiler
</div>
</dd>
</dl>
Arrow La seule différence quand c'est "ouvert" ou "fermé", c'est la classe "hidden" qui s'ajoute au "spoiler_content" en position ouverte.

Tout va se passer avec ces classes :
spoiler : qui est l'ensemble de la boîte contenant le spoiler (titre + cadre du contenu qu'il soit fermé ou ouvert)
spoiler_content: qui est le contenu du spoiler (boite contenant le texte)

Exemple

Les exemples et codes seront exactement les mêmes que pour les versions phpBB3, PunBB ou ModernBB, la seule différence est que la class codebox n'existe pas ici : il faut cibler directement avec la classe spoiler.
Code:
.spoiler_content{
  padding:10px;
  text-align:justify;
}
.spoiler{
  width:70%;
  margin:auto;
 border-radius:10px;
}
.spoiler dt{
 font-size:16px !important;
 font-style:italic;
  font-variant:small-caps;
}
Fermé:
Ouvert:

AwesomeBB

Ce qu'il faut retenir

Les codes en HTML sont construits comme ceci :
Code:
<div class="spoiler">
<div class="spoiler_title">Titre du spoiler :</div>
<div class="spoiler_content">
Contenu du spoiler
</div>
</div>
Arrow La seule différence quand c'est "ouvert" ou "fermé", c'est la classe "hidden" qui s'ajoute au "spoiler_content" en position ouverte.

Tout va se passer avec ces classes :
spoiler : qui est l'ensemble de la boîte contenant le spoiler (titre + cadre du contenu qu'il soit fermé ou ouvert)
spoiler_content: qui est le contenu du spoiler (boite contenant le texte)
spoiler_title: qui est le contenu du "titre" du spoiler (soit "spoiler" soit le titre qu'on lui a mis)

Exemple

Les exemples et codes seront exactement les mêmes que pour les versions phpBB3, PunBB ou ModernBB, à 2 différences près :
• la class codebox n'existe pas ici : il faut cibler directement avec la classe spoiler (comme pour Invision)
• le "titre" du spoiler a une classe et est dans une div, on va donc le cibler directement
Code:
.spoiler_content{
  padding:10px;
  text-align:justify;
}
.spoiler{
  width:70%;
  margin:auto;
}
.spoiler_title{
 font-size:16px !important;
 font-style:italic;
  font-variant:small-caps;
}
Fermé:
Ouvert:

Exclamation Pour que l'arrondi soit correct il va falloir retirer le fond du titre. Pour te montrer je mets une couleur de fond en rouge :
Code:
.spoiler_content{
  padding:10px;
  text-align:justify;
}
.spoiler{
  width:70%;
  margin:auto;
 border-radius:30px;
  background:red;
}
.spoiler_title{
 font-size:16px !important;
 font-style:italic;
  font-variant:small-caps;
  background:none;
}
Fermé :
Si on laisse le fond du titre:
Si on retire le fond du titre:
Ouvert :
Si on laisse le fond du titre:
Si on retire le fond du titre:



Et voilà ! Tu sais maintenant comment personnaliser les balises spoiler sur ton forum !
Beaucoup de choses sont faisables Smile Si tu as des questions ou besoin d'aide pour personnaliser le tout, n'hésite pas à demander une aide. Nous t'aiderons avec plaisir.

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