Header
Partagez | 

[CSS] Personnaliser les balises "quote", "code" et "spoiler"

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Magma

Doyenne
Bons Points (BP) : 60
Voir le profil de l'utilisateur

Message Sujet: [CSS] Personnaliser les balises "quote", "code" et "spoiler"   Dim 6 Jan - 21:07

Changer la mise en page des balises "code", "quote", "spoiler" etc.



Vous en avez marre de l'aspect trop... carré, des balises "quote", "code" etc. de votre forum ? Envie d'un peu d'originalité ? Pas de soucis, la personnalisation de ces balises est tout à fait faisable. Pour cela, je vous invite tout d'abord à lire ces tutoriels qui posent la base des codes CSS vous permettant une personnalisation facile : [Clic] & [Clac].

Les balises de contenu


Ici, on va se pencher sur les balises suivantes :
Code:
[quote][/quote] | [code][/code] | [spoiler][/spoiler]

Pour cela, on va travailler dans la feuille CSS de votre forum (Affichage >> Couleur >> Feuille de style CSS).
La balise quote, pour commencer, se définit ainsi dans le css :
Code:
.quote{
     style 1;
     style2;
    etc;
    }

La balise code :
Code:
.code{
     style 1;
     style2;
    etc;
    }
Et pour la balise spoiler, il y a la partie où le spoiler est fermé, et celle où il est ouvert :
Code:
.spoiler_closed{ /*Spoiler fermé*/
     style 1;
     style2;
    etc;
    }

.spoiler_content{ /*Spoiler ouvert*/
     style 1;
     style2;
    etc;
    }

Pour personnaliser le tout, il suffit simplement de remplacer "style 1; style 2; etc;" par les caractéristiques de votre choix. Il est possible par exemple de modifier la couleur de fond, voir mettre une image de fond, modifier la police, le contour, arrondir les angles...
En associant plusieurs choses, on peut, par exemple, arriver à quelque chose comme ceci :

Code:
.quote{
  color : #5a4421; /* couleur de la police */
  -moz-border-radius: 15px 0px 15px 0px;
  -webkit-border-radius: 15px 0px 15px 0px;
  border-radius: 15px 0px 15px 0px;
  border : 2px solid #31381c; /* taille, type et couleur de la bordure */
  padding : 5px; /* marge entre texte et bordure */
  }


Les balises de police



Pour les balises de police, c'est à dire celles qui permettent de mettre un texte en italique, ou en souligné, c'est le même principe.
La balise italique se définit ainsi dans le CSS :
Code:
i{
   style1;
  style2;
   etc;
   }

La balise de soulignement se définit de la sorte :
Code:
u{
   style1;
  style2;
   etc;
   }

Il suffit, là encore, d'ajouter les caractéristiques que vous souhaitez. C'est ainsi que tous les mots en italiques d'un texte, sur mon forum, sont blancs, ombrés, et en petites majuscules :
Code:
i{
  color: #faf9f5;
 text-shadow: 1px 1px 5px #000000;
  font-variant: small-caps
  }


En ce qui concerne la balise [ b ], dans la feuille de CSS, il faut la nommer en html. Je m'expliquer. Sur une page html, pour mettre un texte en gras, on utilise la balise
Code:
<strong></strong>
On la définira donc ainsi dans la feuille de CSS :
Citation :
strong{
  style1;
  style2;
  etc;
  }

Un petit exemple pour la route peut-être ?
-> dans la feuille CSS :
Code:
strong{
   font-family: arial;
   color: darkred;
   }

-> dans mon post :
Code:
[b]texte en gras[/b]

-> rendu :




Vous rencontrez un souci avec ce tutoriel ? Venez poser votre question [ici].

Idea N'oubliez pas de lire et de suivre les [règles de la section].

 

Je soussignée, MAGMA,  accepte / n'accepte pas [barrez la mention inutile] qu'un directeur reposte tous les tutoriels tel que je les ai rédigés.
Revenir en haut Aller en bas







Merci Clo ♥

Mes diplômes:
 
[CSS] Personnaliser les balises "quote", "code" et "spoiler"
Page 1 sur 1
 Sujets similaires
-
» [PHPBB3] Personnaliser les balises hide code quote et spoiler
» QEEL Personnalisé [Lixyr]
» code pour inséré les anime (Fond transparent)
» Desktop Takeover : personnaliser son bureau
» manuel de code e-anim
Réponse rapide

School of Progress :: La bibliothèque :: Tutoriels :: Informatique :: Codage+