[Toutes versions] Personnaliser les balises "codes"

Bonjour !

Par défaut, les balises de codes 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 & ModernBB
punBB
Invision
AwesomeBB



Les codes en HTML sont construits comme ceci :

Code:

<dl class="codebox">
<dt>
<span class="genmed"><b>Code:</b></span>
</dt>
<dd class="code">
<div class="cont_code">
Contenu du code
</div>
</dd>
</dl>

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


Si je souhaite mettre en forme le contenu même du code, je vais utiliser la seconde classe. Par exemple, je veux que les bords soient arrondis et que la police soit en italique et à 13px :

Code:

.code{
  border-radius:20px;
  font-style:italic;
  font-size:13px;
}

Spoiler:

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

Code:

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

Spoiler:

On peut toucher au bloc complet : par exemple réduire la largeur. Pour cela on applique les propriétés à la classe codebox.
Ici, ça va toucher également le bloc des balises "spoiler", "citation" et "hide".

Code:

.codebox{
 width:70%;
}

Spoiler:

Et pour finir, on va pouvoir gérer la hauteur du bloc pour afficher (ou non) la scrollbarre.

Code:

.cont_code{
 max-height:300px !important;
}

Spoiler:

Les codes en HTML sont construits comme ceci :

Code:

<dl class="codebox">
<dt>Code:</dt>
<dd>
<code>
Contenu du code
</code>
</dd>
</dl>

Tout va se passer avec ces balises et classes :
• La classe codebox : qui est l'ensemble de la boîte contenant le code (titre + cadre du contenu)
• La balise code code: qui est le contenu du code (boite contenant le texte et qui permet de gérer la scrollbarre)


Si je souhaite mettre en forme le contenu même du code, je vais utiliser la balise code. Par exemple, je veux que la police soit en italique et en 13px et que la hauteur max du code soit de 300px :

Code:

code{
  font-style:italic !important;
  font-size:13px !important;
max-height: 300px !important;
}

Spoiler:

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

Code:

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

Spoiler:

On peut toucher au bloc complet : par exemple réduire la largeur et arrondir les bords. Pour cela on applique les propriétés à la classe codebox.
Ici on touche aussi la largeur des blocs "spoiler" et "hide"

Code:

.codebox{
 width:70%;
margin:auto;
border-radius:20px !important;
}

Spoiler:

Les codes en HTML sont construits comme ceci :

Code:

<dl class="codebox">
<dt>Code:</dt>
<dd class="cont_code">
<code>
Contenu du code
</code>
</dd>
</dl>

Tout va se passer avec ces balises et classes :
• La classe codebox : qui est l'ensemble de la boîte contenant le code (titre + cadre du contenu)
• La classe cont_code: qui est le contenu du code ( boite contenant le texte + gestion de la scrollbarre)
• La balise code code: qui est le contenu du code (boite contenant le texte)


Si je souhaite mettre en forme le contenu même du code, je vais utiliser la balise code. Par exemple, je veux que le texte soit en italique et 13px :

Code:

code{
  font-style:italic !important;
  font-size:13px !important;
}

Spoiler:

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

Code:

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

Spoiler:

On peut toucher au bloc complet : par exemple réduire la largeur et arrondir les bords. Pour cela on applique les propriétés à la classe codebox.
Ici on touche aussi la largeur des blocs "spoiler" et "hide"

Code:

.codebox{
 width:70%;
margin:auto;
border-radius:20px;
}

Spoiler:

Et pour finir, on va pouvoir gérer la hauteur du bloc pour afficher (ou non) la scrollbarre.

Code:

.cont_code{
 max-height:300px !important;
}

Spoiler:

Les codes en HTML sont construits comme ceci :

Code:

<dl class="codebox contcode">
<dt>Code:</dt>
<dd>
<code>
Contenu du code
</code>
</dd>
</dl>

Tout va se passer avec ces balises et classes :
• La classe codebox : qui est l'ensemble de la boîte contenant le code (titre + cadre du contenu)
• La balise code code: qui est le contenu du code (boite contenant le texte et qui permet de gérer la scrollbarre)


Si je souhaite mettre en forme le contenu même du code, je vais utiliser la balise code. Par exemple, je veux que le texte ne colle pas aux bords, que la police soit en italique et en justifiée :

Code:

code{
  font-style:italic !important;
  font-size:13px !important;
}

Spoiler:

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

Code:

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

Spoiler:

On peut toucher au bloc complet : par exemple réduire la largeur. Pour cela on applique les propriétés à la classe codebox.
Ici on touche aussi la largeur des blocs "spoiler" et "hide"

Code:

.codebox{
 width:70%;
margin:auto;
}

Spoiler:

Et pour finir, on va pouvoir gérer la hauteur du bloc pour afficher (ou non) la scrollbarre.

Code:

.codebox dd{
 max-height:300px !important;
}

Spoiler:

Sur cette version, pour le code on peut arrondir les bords de la partie du titre comme ceci (si on a déjà .codebox dt, on ne le remet pas 2 fois, on ajoute la propriété au précédent) :

Code:

.codebox dt {
    border-radius: 20px 20px 0 0;
}

Mais les bords "du bas" ne peuvent pas être arrondis dû à la scrollbarre

Spoiler:

Les codes en HTML sont construits comme ceci :

Code:

<div class="codebox">
<p>Code:</p>
<code>
Contenu du code
</code>
</div>

Tout va se passer avec ces balises et classes :
• La classe codebox : qui est l'ensemble de la boîte contenant le code (titre + cadre du contenu)
• La balise code code: qui est le contenu du code (boite contenant le texte et qui permet de gérer la scrollbarre)


Si je souhaite mettre en forme le contenu même du code, je vais utiliser la balise code. Par exemple, je veux que le texte ne colle pas aux bords, que la police soit en italique et en justifiée :

Code:

code{
  font-style:italic !important;
  font-size:13px !important;
  max-height: 300px !important;
}

Spoiler:

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

Code:

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

Spoiler:

On peut toucher au bloc complet : par exemple réduire la largeur et arrondir les bords. Pour cela on applique les propriétés à la classe codebox.
Ici on touche aussi la largeur des blocs "spoiler" et "hide"

Code:

.codebox{
 width:70%;
margin:auto;
border-radius:20px;
}

Spoiler:

---

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