Personnaliser les balises "Code", "Quote", "Spoiler" et "Hide"

Bonjour !

Ce tutoriel vous permettra d'apprendre comment personnaliser les balises "Code", "Quote", "Spoiler" et "Hide" pour améliorer leur apparence.

Au cas où vous ne savez pas de quoi je parle, voilà ces balises :

Code:

Je suis un code.

Onyx a écrit:Je suis un quote (une citation).

Spoiler:

Petits exemples de résultats différents de balises après personnalisation :
https://2img.net/r/hpimg15/pics/296960171.jpg
https://2img.net/r/hpimg15/pics/998191602.jpg
https://2img.net/r/hpimg15/pics/833452243.jpg
https://2img.net/r/hpimg15/pics/378846444.jpg
https://2img.net/r/hpimg15/pics/234533185.jpg


Je profite aussi de l'occasion pour vous donnerles liens vers d'autres tutoriels/astuces qui pourraient vous intéresser :
Coloriser vos balises de code : cliquez ici pour voir.
Ajouter l'option "Sélectionner le contenu" à vos balises de code : cliquez ici pour voir.
Personnalisation des intitulés des balises : cliquez ici pour voir.
Ajouter des numéros de ligne à vos balises de code : cliquez ici pour voir.


À noter que les codes ci-bas sont à mettre dans le CSS.
Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > AFFICHAGE
> > > IMAGES ET COULEURS
> > > > COULEURS
> > > > > FEUILLE DE STYLE CSS

Personnalisation des balises sous phpBB2

Les balises code

Pour personnaliser les balises code :

Code:

/*Contenu de CODE*/
.code {
  propriété: valeur;
}
/*Intérieur du contenu de CODE*/
.cont_code {
  propriété: valeur;
}

Les balises quote (citer)

Pour personnaliser les balises quote (citer) :

Code:

/*Contenu de QUOTE*/
.quote {
  propriété: valeur;
}

Les balises spoiler

Pour personnaliser les balises spoiler :

Code:

/*Bloc qui contient le titre et le contenu de SPOILER*/
.spoiler {
  propriété: valeur;
}
/*Ligne du titre de SPOILER*/
.spoiler > dt {
  propriété: valeur;
}
/*Contenu de SPOILER fermé*/
.spoiler_closed {
  propriété: valeur;
}
/*Contenu de SPOILER ouvert*/
.spoiler_content {
  propriété: valeur;
}
/*Pour éliminer un espace pas rapport sous le spoiler*/
.spoiler > dd:last-child {
  border: none;
}

Les balises hide

Pour personnaliser les balises hide :

Code:

/*Bloc qui contient le HIDE*/
.hidecode {
  propriété: valeur;
}
/*Contenu de HIDE*/
.hidecode > dd:first-of-type {
  propriété: valeur;
}

Toutes les balises

Pour personnaliser tous les balises en même temps :

Code:

/*Bloc qui contient le titre et le contenu de CODE, SPOILER, QUOTE ET HIDE*/
.codebox {
  propriété: valeur;
}
/*Contenu de CODE, SPOILER FERMÉ, QUOTE ET HIDE*/
.codebox > dd:first-of-type  {
  propriété: valeur;
}
/*Ligne du titre de CODE, SPOILER ET QUOTE*/
.codebox > dt {
  propriété: valeur;
}
/*Titre de CODE, SPOILER ET QUOTE*/
.codebox > dt .genmed, .spoiler > dt {
  propriété: valeur;
}

Personnalisation des balises sous Invision

Les balises code

Pour personnaliser les balises code :

Code:

/*Contenu de CODE*/
code {
  propriété: valeur;
}

Les balises quote (citer)

Pour personnaliser les balises quote (citer) :

Code:

/*Bloc qui contient la ligne de l intitulé et le contenu de QUOTE*/
blockquote {
  propriété: valeur;
}
/*Bloc intérieur de QUOTE incluant l intitulé*/
blockquote > div {
  margin-left: 0px;
  propriété: valeur;
}
/*Intitulé de QUOTE*/
blockquote cite {
  background-image: none;
  propriété: valeur;
}


Les balises spoiler

Pour personnaliser les balises spoiler :

Code:

/*Bloc qui contient le titre et le contenu de SPOILER*/
.spoiler {
  propriété: valeur;
}
/*Ligne du titre de SPOILER*/
.spoiler > dt {
  propriété: valeur;
}
/*Contenu de SPOILER fermé*/
.spoiler_content {
  propriété: valeur;
}
/*Contenu de SPOILER ouvert*/
.spoiler .hidden {
  propriété: valeur;
}

Les balises hide

Pour personnaliser les balises hide :

Code:

/*Bloc qui contient le HIDE*/
.hidecode {
  propriété: valeur;
}
/*Contenu de HIDE*/
.hidecode > dd:first-of-type {
  propriété: valeur;
}

Toutes les balises

Pour personnaliser plusieurs balises en même temps :

Code:

/*Bloc qui contient le titre et le contenu de CODE ET HIDE*/
.codebox {
  propriété: valeur;
}
/*Contenu de CODE ET HIDE*/
.codebox > dd:first-of-type  {
  propriété: valeur;
}
/*Ligne du titre de CODE ET HIDE*/
.codebox > dt {
  propriété: valeur;
}

Personnalisation des balises sous phpBB3

Les balises code

Pour personnaliser les balises code :

Code:

/*Contenu de CODE*/
code {
  propriété: valeur;
}

Les balises quote (citer)

Pour personnaliser les balises quote (citer) :

Code:

/*Bloc qui crée l apostrophe et l espace autour de QUOTE*/
blockquote {
  margin: 0px;
  background-image: none;
  propriété: valeur;
}
/*Intitulé de QUOTE*/
blockquote cite {
  propriété: valeur;
}
/*Bloc de QUOTE incluant l intitulé*/
blockquote > div {
  margin-left: 0px;
  propriété: valeur;
}

Les balises spoiler

Pour personnaliser les balises spoiler :

Code:

/*Bloc qui contient le titre et le contenu de SPOILER*/
.spoiler {
  propriété: valeur;
}
/*Ligne du titre de SPOILER*/
.spoiler > dt {
  propriété: valeur;
}
/*Contenu de SPOILER fermé*/
.spoiler_content {
  propriété: valeur;
}
/*Contenu de SPOILER ouvert*/
.spoiler .hidden {
  propriété: valeur;
}

Les balises hide

Pour personnaliser les balises hide :

Code:

/*Bloc qui contient le HIDE*/
.hidecode {
  propriété: valeur;
}
/*Contenu de HIDE*/
.hidecode > dd:first-of-type {
  propriété: valeur;
}

Toutes les balises

Pour personnaliser plusieurs balises en même temps :

Code:

/*Bloc qui contient le titre et le contenu de CODE, SPOILER ET HIDE*/
.codebox {
  propriété: valeur;
}
/*Contenu de CODE, SPOILER ET HIDE*/
.codebox > dd:first-of-type  {
  propriété: valeur;
}
/*Ligne du titre de CODE, SPOILER ET HIDE*/
.codebox > dt {
  propriété: valeur;
}

Personnalisation des balises sous PunBB

Les balises code

Pour personnaliser les balises code :

Code:

/*Contenu de CODE*/
.cont_code {
  propriété: valeur;
}

Les balises quote (citer)

Pour personnaliser les balises quote (citer) :

Code:

/*Bloc autour de QUOTE*/
blockquote {
  propriété: valeur;
}
/*Intitulé de QUOTE*/
blockquote cite {
  background-image: none;
  propriété: valeur;
}
/*Bloc de QUOTE incluant l intitulé*/
blockquote > div {
  margin-left: 0px;
  propriété: valeur;
}

Les balises spoiler

Pour personnaliser les balises spoiler :

Code:

/*Bloc qui contient le titre et le contenu de SPOILER*/
.spoiler {
  propriété: valeur;
}
/*Ligne du titre de SPOILER*/
.spoiler > dt {
  propriété: valeur;
}
/*Contenu de SPOILER fermé*/
.spoiler_content {
  propriété: valeur;
}
/*Contenu de SPOILER ouvert*/
.spoiler .hidden {
  propriété: valeur;
}

Les balises hide

Pour personnaliser les balises hide :

Code:

/*Bloc qui contient le HIDE*/
.hidecode {
  propriété: valeur;
}
/*Contenu de HIDE*/
.hidecode > dd:first-of-type {
  propriété: valeur;
}

Toutes les balises

Pour personnaliser plusieurs balises en même temps :

Code:

/*Bloc qui contient le titre et le contenu de CODE, SPOILER ET HIDE*/
.codebox {
  propriété: valeur;
}
/*Contenu de CODE, SPOILER ET HIDE*/
.codebox > dd:first-of-type  {
  propriété: valeur;
}
/*Ligne du titre de CODE, SPOILER ET HIDE*/
.codebox > dt {
  propriété: valeur;
}

Merci 

 J'veux pas chiquer la guenille mais on en fait quoi de ces codes ?
Dans un template ?
Si oui, lequel ?
Merci

Nop, dans le CSS.

Dans le CSS oui, la précision a été ajouté au tutoriel.

Toutes les versions ont été ajoutées au tutoriel (sauf la nouvelle en version bêta), donc voilà ce tutoriel terminé ^^

Merci pour ton tuto Onyx

Je déplace le sujet dans les tuto

Au passage, HostingPics annonce qu'il va fermer (merci à Rozenbrez d'avoir averti ). Ca aura lieu dans quelques mois, mais si tu veux tu peux remplacer les images de ton tuto en les hébergeant ailleurs T_T

Merci pour le tuto

Merci pour le tuto :)

merci