[Toutes versions] Personnaliser les citations

Bonjour !

Par défaut, les citation sont carrées avec la couleur de fond paramétrée dans le panneau d'administration et avec quelques variantes selon la version :
PhpBB2 :

Spoiler:

PhpBB3 :

Spoiler:

PunBB :

Spoiler:

Invision :

Spoiler:

ModernBB :

Spoiler:

AwesomeBB :

Spoiler:

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


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
phpBB2
phpBB3, punBB, Invision & ModernBB
AwesomeBB


C'est la seule version un petit peu "galère". En tout cas, là où on a le plus à modifier


Les citations en HTML sont construite comme ceci :

Code:

<dl class="codebox">
<dt>
<span class="genmed">
<b>Citation :</b>
</span>
</dt>
<dd class="quote">
Contenu de la citation
</dd>
</dl>

Tout va se passer avec ces classes :
• codebox : qui est l'ensemble de la boîte contenant la citation (titre + cadre du contenu)
• quote : qui est le contenu de la citation (boite contenant le texte cité)
• genmed : qui correspond au mot "citation".


Si je souhaite mettre en forme le contenu même de la citation, je vais utiliser la seconde classe. Par exemple, je veux que le texte ne colle pas aux bords, que les bords soient arrondis et que la police soir en italique (la couleur de fond je l'ai géré via les couleurs du forum, mais on peut l'ajouter ici aussi !) :

Code:

.quote{
  padding:10px;
  border-radius:20px;
  font-style:italic;
  text-align:justify;
  font-size:13px;
}

Si je veux personnaliser maintenant le texte "citation :" il va falloir appliquer la CSS à la class genmed qui suit la classe codebox
Ici, ça va toucher également le texte de la partie "code".

Code:

.codebox .genmed{
 font-size:14px;
  color:#663300;
  font-style:italic;
}

Et enfin, on peut toucher au bloc complet : par exemple réduire la largeur. Pour cela on applique les propriétés à la classe codebox.

Code:

.codebox{
 width:70%;
}

Très peu de différence entre toutes ces versions. Je regroupe donc tout ici

La structure est la même pour toutes les versions.

Code:

<blockquote>
<div>Contenu citation</div>
</blockquote>

Tout va donc se passer avec la balise directement.

Si je veux remettre la même chose que précédemment, c'est à dire texte de la citation en italique, justifié, en 14px, et le bloc à 70% de largeur, c'est tout simplement :

Code:

blockquote{
  padding:10px;
  border-radius:20px;
  font-style:italic;
  text-align:justify;
  font-size:13px;
  width:70%;
  margin:auto;
}

Sur PhpBB3, pour la couleur de fond, bien utiliser background-color pour ne pas que l'image de fond disparaisse

PhpBB3 :
PunBB :
Invision :
ModernBB :


Cette version est très similaire aux précédentes, mais la structure n'est pas tout à fait la même.

Comme on le voit, les "quote" d'ouverture et de fermeture sont dans un span différent. Ca permet de modifier la taille des quotes, ou la couleur, etc...

Code:

<blockquote>
<span class="open_quote">“</span>
<span class="quote_content">
Contenu de la citation
</span><span class="close_quote">”</span>
</blockquote>

Tout va donc se passer avec :
• La balise blockquote directement pour tout ce qui concerne la globalité : le bloc et le contenu.
• Les classes open_quote et close_quote pour ce qui concerne les 2 guillemets au début et à la fin
• La classe quote_content pour personnaliser le texte à l'intérieur des guillemets.


Si je veux remettre la même chose que précédemment, c'est à dire texte de la citation en italique, justifié, en 14px, et le bloc à 70% de largeur, on peut tout simplement :

Code:

blockquote{
  padding:10px;
  border-radius:20px;
  font-style:italic;
  text-align:justify;
  font-size:13px;
  width:70%;
  margin:auto;
}

Et si je veux grossir un peu les guillemets :

Code:

.open_quote ,
.close_quote{
    font-size: 25px;
}

La classe quote_content ne servira que pour modifier le style du texte entre les guillemets. Aucune modification du bloc ne peut être faite par là

---

Et voilà ! Tu sais maintenant comment personnaliser les citations sur ton forum !
Beaucoup de choses sont faisables 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.