Hot Relief, typo PDF Imprimer Envoyer
Écrit par Administrateur du site   
Vendredi, 01 Avril 2011 13:12

Cette page montre les éléments typographiques disponibles avec le thème Hot Relief...

  • Apprenez à utiliser les qualités typographiques, quelques balises insérées dans le code html telles que <p>, <h1>, <h2>, <h3>, <img> et <a>.
  • Ce template (interface graphique) a été validé XHTML.
  • Vous pouvez vous familiariser aisément avec les feuilles de style intégrées à ce thème.
  • Ne copiez/collez jamais directement du texte issu de Microsoft Word ou OpenOffice... Essayez de copier le texte brut, sans effet (gras, italique...) et appliquez les effets depuis l'espace de rédaction.
  • Utilisez l'éditeur WYSIWYG (visuel) fourni par défaut avec Joomla! ou installez-en un qui vous convient mieux.

Ma mère me disait "Si tu dois être un militaire, tu deviendras un général. Si tu dois être un prêtre, tu deviendras le pape." Au lieu de cela j'ai voulu être peintre, et suis devenu Picasso... Pour obtenir ce genre de citation, utilisez la classe "quote" pour le paragraphe que vous rédigez.
Exemple de code : <p class="quote">...votre texte ici...</p>

H1 : en-tête 1

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

H2 : en-tête 2

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

H3 : en-tête 3

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

H4 : en-tête 4

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Voici un message d'avertissement. Ajoutez la balise appropriée afin d'obtenir ce résultat.
Exemple de code : <p class="warning">...votre texte ici...</p>.
Voici un peu texte pour remplir le truc...

Voici un message d'information. Ajoutez la balise appropriée afin d'obtenir ce résultat.
Exemple de code : <p class="info">...votre texte ici...</p>.
Voici un peu texte pour remplir le truc...

Voici un message d'erreur. Ajoutez la balise appropriée afin d'obtenir ce résultat.
Exemple de code : <p class="error">...votre texte ici...</p>.
Voici un peu texte pour remplir le truc...

Voici une présentation de code Ajoutez la balise appropriée afin d'obtenir ce résultat.
Exemple de code : <p class="code">...votre texte ici...</p>.
Ici, vous pouvez constater que chauqe ligne dispose d'une couleur de fond.
Voici un peu texte pour remplir le truc...

Exemple de liste non ordonnée :

  • élément un de liste
  • élément deux de liste
    • sous-élément un de liste
    • sous-élément deux de liste
    • sous-élément trois de liste
  • élément trois de liste
  • élément quatre de liste

Exemple de liste ordonnée :

  1. élément un de liste
  2. élément deux de liste
    1. sous-élément un de liste
    2. sous-élément deux de liste
    3. sous-élément trois de liste
  3. élément trois de liste
  4. élément quatre de liste

Exemple de liste de vérification :

  • pour activer cet effet
  • ajoutez la classe "checklist" à votre liste non ordonnée
  • comme ceci <ul class="checklist">

Exemple de liste avec flèche :

  • pour activer cet effet
  • ajoutez la classe "arrow" à votre liste non ordonnée
  • comme ceci <ul class="arrow">

Star list sample:

  • pour activer cet effet
  • ajoutez la classe "star" à votre liste non ordonnée
  • comme ceci <ul class="star">
Mise à jour le Vendredi, 01 Avril 2011 14:40