Ce tutoriel a été publié par ze_chaofan sur SOS-Forum. Afin que les tutoriels de SOS-Forum restent en libre accès, ainsi que par respect du travail accompli, tout tutoriel copié ou s'en inspirant publié ailleurs qu'ici, devra en citer le ou les auteurs ainsi que la provenance via un lien vers ce sujet sur le SOS-Forum.

Hello everybody.
Un petit tutoriel sympa pour vous aider à personnaliser vos spoilers et codes en phpbb3.
Tout d'abord, un petite partie pratique avec des codes intéressants et tous simples?


Rendez vous donc dans votre CSS, et collez (en complétant) ce qui vous intéresse :

dl.codebox {background-color: #000000;}

Remplacez #000000 par la couleur qu vous souhaitez donner au bloc.

dl.codebox {border: none;}

Supprime la bordure du bloc.

dl.codebox dt {color: #000000;}

Remplacez #000000 par la couleur que vous souhaitez donner aux intitulés "SPOILER :" et "CODE :"

dl.codebox dt {border: none;}

Supprime la bordure sous l'intitulé.

.codebox dd {color: #000000;}

Remplacez #000000 par la couleur que vous souhaitez donner aux textes d'un spoiler.

dl.codebox code {color: #000000;}

Remplacez #000000 par la couleur que vous souhaitez donner aux textes d'un code.

-------------------------------------------

Maintenant, une petite modification intéressante à faire, qui vous permet de passer de ceci :

A ceci :


Rendez-vous donc dans votre CSS, et collez y ceci en complétant :

dl.codebox {background-color: transparent; border: none;}
dl.codebox dt {background-color: #color1; width: 70px; text-align: center; border: 1px solid #color2; color: #color3;}
.codebox dd { color: #color4;}
dl.codebox code {color: #color5; border: 1px solid #color6; background-color: #color7;}

#color1 > Couleur de fond du bouton
#color2 > Couleur du contour du bouton
#color3 > Couleur du texte du bouton
#color4 > Couleur du texte spoilé
#color5 > Couleur du texte codé
#color6 > Couleur de la bordure autour du code
#color7 > Couleur de fond du code


Et voilà !

Très, très bon code.

Merci ze_chaofan.



On peut même y mettre une image en background en remplaçant :

dl.codebox dt {background-color: #color1;

Par

dl.codebox dt {background-image: url('url de l'image');

.

Bonjour,

On peut aussi limiter le bloc du [code] en hauteur...
Il suffit d'y intégrer ce complément dans le CSS du "code" :

display: block;
height: auto;
max-height: 250px;
overflow: auto;

Bien sur que vous adaptez le max-height à votre aise.