Le Deal du moment :
CRUCIAL – Disque SSD Interne – BX500 ...
Voir le deal
29.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 balises "codes" Empty [Toutes versions] Personnaliser les balises "codes"

Mar 4 Juin 2019 - 18:32

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:

[Toutes versions] Personnaliser les balises "codes" Phpbb211
PhpBB3 :
Spoiler:

[Toutes versions] Personnaliser les balises "codes" Phpbb310
PunBB :
Spoiler:

[Toutes versions] Personnaliser les balises "codes" Punbb011
Invision :
Spoiler:

[Toutes versions] Personnaliser les balises "codes" Invisi13
ModernBB :
Spoiler:

[Toutes versions] Personnaliser les balises "codes" Modern12
AwesomeBB :
Spoiler:

[Toutes versions] Personnaliser les balises "codes" Awesom13

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

PhpBB2

Ce qu'il faut retenir

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

Exemple

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:

[Toutes versions] Personnaliser les balises "codes" Phpbb212

Si je veux personnaliser maintenant le texte "code :" 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 "citation".
Code:
.codebox .genmed{
 font-size:14px;
  color:#663300;
  font-style:italic;
}
Spoiler:

[Toutes versions] Personnaliser les balises "codes" Phpbb210

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

[Toutes versions] Personnaliser les balises "codes" Phpbb213

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:

[Toutes versions] Personnaliser les balises "codes" Phpbb214

PhpBB3 & ModernBB

Ce qu'il faut retenir

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)

Exemple

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:

[Toutes versions] Personnaliser les balises "codes" Phpbb311

Si je veux personnaliser maintenant le texte "code :" il va falloir appliquer la CSS à la balise dt qui suit la classe codebox
Exclamation Ici, ça va toucher également le texte de la partie "spoiler".
Code:
.codebox dt{
font-size: 14px !important;
  color:#663300;
  font-style:italic;
}
Spoiler:

[Toutes versions] Personnaliser les balises "codes" Phpbb312

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.
Exclamation Ici on touche aussi la largeur des blocs "spoiler" et "hide"
Code:
.codebox{
 width:70%;
margin:auto;
border-radius:20px !important;
}
Spoiler:

[Toutes versions] Personnaliser les balises "codes" Phpbb314

PunBB

Ce qu'il faut retenir

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)

Exemple

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:

[Toutes versions] Personnaliser les balises "codes" Punbb_11

Si je veux personnaliser maintenant le texte "code :" il va falloir appliquer la CSS à la balise dt qui suit la classe codebox
Exclamation Ici, ça va toucher également le texte de la partie "spoiler".
Code:
.codebox dt{
font-size: 14px !important;
  color:#663300;
  font-style:italic;
}
Spoiler:

[Toutes versions] Personnaliser les balises "codes" Punbb_12

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.
Exclamation Ici on touche aussi la largeur des blocs "spoiler" et "hide"
Code:
.codebox{
 width:70%;
margin:auto;
border-radius:20px;
}
Spoiler:

[Toutes versions] Personnaliser les balises "codes" Punbb_13

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:

[Toutes versions] Personnaliser les balises "codes" Punbb_14

Invision

Ce qu'il faut retenir

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)

Exemple

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:

[Toutes versions] Personnaliser les balises "codes" Invisi14

Si je veux personnaliser maintenant le texte "code :" il va falloir appliquer la CSS à la balise dt qui suit la classe codebox
Exclamation Ici, ça va toucher également le texte de la partie "spoiler".
Code:
.codebox dt{
font-size: 14px !important;
  color:#663300;
  font-style:italic;
}
Spoiler:

[Toutes versions] Personnaliser les balises "codes" Invisi12

On peut toucher au bloc complet : par exemple réduire la largeur. Pour cela on applique les propriétés à la classe codebox.
Exclamation Ici on touche aussi la largeur des blocs "spoiler" et "hide"
Code:
.codebox{
 width:70%;
margin:auto;
}
Spoiler:

[Toutes versions] Personnaliser les balises "codes" Invisi17

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:

[Toutes versions] Personnaliser les balises "codes" Invisi16

Exclamation 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:

[Toutes versions] Personnaliser les balises "codes" Invisi15

AwesomeBB

Ce qu'il faut retenir

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)

Exemple

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:

[Toutes versions] Personnaliser les balises "codes" Awesom14

Si je veux personnaliser maintenant le texte "code :" il va falloir appliquer la CSS à la balise p qui suit la classe codebox
Exclamation Ici, ça va toucher également le texte de la partie "spoiler".
Code:
.codebox p{
font-size: 14px !important;
  color:#663300;
  font-style:italic;
}
Spoiler:

[Toutes versions] Personnaliser les balises "codes" Awesom12

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.
Exclamation Ici on touche aussi la largeur des blocs "spoiler" et "hide"
Code:
.codebox{
 width:70%;
margin:auto;
border-radius:20px;
}
Spoiler:

[Toutes versions] Personnaliser les balises "codes" Awesom15



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