Les Typographies disponibles dans le template

Les titres | Contenu spécial | Les listes | Les paragraphes | Les bulles | Les boites et légendes | Les modules

1- Les titres

Titre 1

pour obtenir cette typographie, il faut utiliser la syntaxe <h1>contenu </h1>

Titre 1: dégradé jaune centré

pour obtenir cette typographie, il faut utiliser la syntaxe <h1 class="h1_jaune">contenu </h1>

Titre 1 : dégradé centré

pour obtenir cette typographie, il faut utiliser la syntaxe <h1 class="titre1Centre">contenu </h1>

Titre 1 : dégradé

pour obtenir cette typographie, il faut utiliser la syntaxe <h1 class="titre1Degrade">contenu </h1>

Titre 2

pour obtenir cette typographie, il faut utiliser la syntaxe <h2>contenu</h2>

Titre 3

pour obtenir cette typographie, il faut utiliser la syntaxe <h3>contenu</h3>

Titre 4

pour obtenir cette typographie, il faut utiliser la syntaxe <h4>contenu</h4>

Titre 5

pour obtenir cette typographie, il faut utiliser la syntaxe <h5>contenu</h5>

Titre 6

pour obtenir cette typographie, il faut utiliser la syntaxe <h6>contenu</h6>

2- Contenu spécial

Insersion de Code :

#ja-rightcol {
width: 180px;
float: right;
color: #EEEEEE;
}

Pour obtenir cette typographie, il faut utiliser la syntaxe <pre></pre> ou <div class="code"> à noter que celà fonctionne aussi avec  la balise <p>.

Lettrine :

Nous allons utiliser la syntaxe <p><span class="dropcap">1ere lettre</span>contenu</p>

CCeci est un exemple d'utilisation de la classe dropcap. On utilise souvent ce style pour la première lettre d'un article ou d'un paragraphe dans les magazines ou journaux. Si vous essayez cette pseudo classe, il faut avoir suffisament de mots pour que l'affichage soit sur plusieurs lignes, sinon le rendu ne sera pas terrible.

Citations :

Pour obtenir ce résultat, il faut utiliser la syntaxe suivante :

<blockquote><span class="open"></span>contenu<span class="close"></span></blockquote>

 Il faut impérativement désactiver le nettoyage du code du plugin de l'éditeur, sinon les quotes ne seront pas affichées

3- Les styles de listes

01Ceci est un exemple de bloc de nombre. Utiliser <p class="blocknumber-1"><span class="bignumber">01.</span>Votre contenu ici!</p> pour avoir un bloc de nombre!

152Voici un autre exemple de bloc de nombre. Utiliser <p class="blocknumber-2"><span class="bignumber">152.</span>Votre texte ici!</p> pour avoir un bloc de nombre !

199Ceci est encore un exemple de bloc de nombre. Utiliser <p class="blocknumber-3"><span class="bignumber">199.</span>votre texte ici !</p> pour former un bloc de nombre !

4- Les styles de paragraphes

5- Les bulles

6- Les styles de boites et légendes

Ceci est une note. Utilisez la syntaxe : <p class="box-sticky">Le texte de votre note ici</p> pour afficher votre note.

Ceci est une boite de téléchargement. Utilisez la syntaxe : <p class="box-download">Le texte de votre boite de téléchargement ici</p> pour afficher ceci.

Ceci est une boite grise. Utilisez la syntaxe : <p class="box-grey">Le texte de votre boite grise ici</p> pour afficher ceci.

Ceci est une boite hilite. Utilisez la syntaxe : <p class="box-hilite">Le texte de votre boite hilite ici</p> pour afficher ceci.

7- Style de module spécial