Le Deal du moment : -15%
TV 4K de 43″ Philips 43PUS7555/12 à ...
Voir le deal
339.99 €

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 citations Empty [Toutes versions] Personnaliser les citations

Mar 28 Mai 2019 - 18:06

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:

[Toutes versions] Personnaliser les citations Quote_13
PhpBB3 :
Spoiler:

[Toutes versions] Personnaliser les citations Quote_14
PunBB :
Spoiler:

[Toutes versions] Personnaliser les citations Punbb010
Invision :
Spoiler:

[Toutes versions] Personnaliser les citations Invisi10
ModernBB :
Spoiler:

[Toutes versions] Personnaliser les citations Modern10
AwesomeBB :
Spoiler:

[Toutes versions] Personnaliser les citations Awesom10

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

PhpBB2

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

Ce qu'il faut retenir

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".

Exemple

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;
}
[Toutes versions] Personnaliser les citations Quote_10

Si je veux personnaliser maintenant le texte "citation :" il va falloir appliquer la CSS à la class genmed qui suit la classe codebox
Exclamation Ici, ça va toucher également le texte de la partie "code".
Code:
.codebox .genmed{
 font-size:14px;
  color:#663300;
  font-style:italic;
}
[Toutes versions] Personnaliser les citations Quote_11

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%;
}
[Toutes versions] Personnaliser les citations Quote_12

PhpBB3, PunBB, Invision & ModernBB

Très peu de différence entre toutes ces versions. Je regroupe donc tout ici
Ce qu'il faut retenir

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.
Exemple

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;
}

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

PhpBB3 :
[Toutes versions] Personnaliser les citations Quote_15
PunBB :
[Toutes versions] Personnaliser les citations Punbb_10
Invision :
[Toutes versions] Personnaliser les citations Invisi11
ModernBB :
[Toutes versions] Personnaliser les citations Modern11

AwesomeBB

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

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.

Exemple

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;
}

Idea 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à Wink
[Toutes versions] Personnaliser les citations Awesom11




Et voilà ! Tu sais maintenant comment personnaliser les citations 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