C

ette page montre tous les styles de typographie et vous fournit un assortiment énorme d’options de configuration et des paramètres pour vous donner plus de contrôle pour afficher votre contenu dynamique lors de la rédaction de vos articles.

Les styles de titres :

<h2 class="componentheading">Un titre à puce</h2>

<div class="contentheading">Titre Content</div>

<h1>En-tête H1</h1>

<h2>En-tête H2</h2>

<h3>En-tête H3</h3>

<h4>En-tête H4</h4>

<h5>En-tête H5</h5>

Les styles d’avis :

Des informations très importantes, copiez le code suivant : <span class=”attention”>….</span>Une simple notice d’information, copiez le code suivant : <span class=”notice”>….</span>Des alertes aux utilisateurs, copiez le code suivant :<span class=”alert”>….</span>Un fichier à télécharger, copiez le code suivant : <span class=”download”>….</span>Pour féliciter un utilisateur, copiez le code suivant : <span class=”approved”>….</span>Pour présenter un fichier média, copiez le code suivant : <span class=”media”>….</span>Pour se souvenir d’une note, copiez le code suivant : <span class=”note”>….</span>Pour mettre en vente un objet, copiez le code suivant : <span class=”cart”>….</span>Pour montrer une séquence filmée, copiez le code suivant : <span class=”camera”>….</span>Pour mettre en évidence un document, copiez le code suivant : <span class=”doc”>….</span>

Mettre du texte entre <pre>...</pre> du style :

div.modulebox-black div.bx1 {
  background: url(../images/black/box_bl.png) 0 100% no-repeat;
}

div.modulebox-black div.bx3 {
  background: url(../images/black/box_tl.png) 0 0 no-repeat;
  padding: 0;
  margin: 0;
}

Les styles Blocs :

Pour faire apparaître un bloc sur fond gris clair, utiliser le code : <blockquote>….</blockquote>

Pour faire apparaître un bloc avec écriture bleue sur fond blanc, utiliser le code : <blockquote class=”blue”>….</blockquote> avec du texte à l’intérieur……………

Pour faire apparaître un bloc avec écriture rouge sur fond blanc, utiliser le code : <blockquote class=”red”>….</blockquote> avec du texte à l’intérieur…………

Pour faire apparaître un bloc avec écriture verte sur fond blanc, utiliser le code : <blockquote class=”green”>….</blockquote> avec du texte à l’intérieur………..

Pour faire apparaître un bloc avec écriture violette sur fond blanc, utiliser le code : <blockquote class=”purple”>….</blockquote> avec du texte à l’intérieur……….

Pour faire apparaître un bloc avec écriture orange sur fond blanc, utiliser le code : <blockquote class=”orange”>….</blockquote> avec du texte à l’intérieur…..

Pour faire apparaître un bloc avec écriture marron sur fond blanc, utiliser le code : <blockquote class=”brown”>….</blockquote> avec du texte à l’intérieur.

Pour faire apparaître un bloc avec écriture grise sur fond blanc, utiliser le code : <blockquote class=”grey”>….</blockquote> avec du texte à l’intérieur……..

Les Styles List – Bullets

• Ce style de liste s’obtient avec le code : <ul class=”bullet1“><li>….</li><li>….</li>…</ul>.

• Ce style de liste s’obtient avec le code : <ul class=”bullet2“><li>….</li><li>….</li>…</ul>.

• Ce style de liste s’obtient avec le code : <ul class=”bullet3“><li>….</li><li>….</li>…</ul>.

• Ce style de liste s’obtient avec le code : <ul class=”bullet4“><li>….</li><li>….</li>…</ul>.

• Ce style de liste s’obtient avec le code : <ul class=”bullet5“><li>….</li><li>….</li>…</ul>.

• Ce style de liste s’obtient avec le code : <ul class=”bullet6“><li>….</li><li>….</li>…</ul>.

• Ce style de liste s’obtient avec le code : <ul class=”bullet7“><li>….</li><li>….</li>…</ul>.

• Ce style de liste s’obtient avec le code : <ul class=”bullet8“><li>….</li><li>….</li>…</ul>.

Les Styles List – Spécial Icons

• Ce style de liste s’obtient avec le code : <ul class=”special-1“><li>….</li><li>….</li>…</ul>.

• Ce style de liste s’obtient avec le code :<ul class=”special-2“><li>….</li><li>….</li>…</ul>.

• Ce style de liste s’obtient avec le code :<ul class=”special-3“><li>….</li><li>….</li>…</ul>.

• Ce style de liste s’obtient avec le code :<ul class=”special-4“><li>….</li><li>….</li>…</ul>.

• Ce style de liste s’obtient avec le code :<ul class=”special-5“><li>….</li><li>….</li>…</ul>.

• Ce style de liste s’obtient avec le code :<ul class=”special-6“><li>….</li><li>….</li>…</ul>.

• Ce style de liste s’obtient avec le code :<ul class=”special-7“><li>….</li><li>….</li>…</ul>.

• Ce style de liste s’obtient avec le code :<ul class=”special-8“><li>….</li><li>….</li>…</ul>.

• Ce style de liste s’obtient avec le code :<ul class=”special-9“><li>….</li><li>….</li>…</ul>.

• Ce style de liste s’obtient avec le code :<ul class=”special-10“><li>….</li><li>….</li>…</ul>.

• Ce style de liste s’obtient avec le code :<ul class=”special-11“><li>….</li><li>….</li>…</ul>.

• Ce style de liste s’obtient avec le code :<ul class=”special-12“><li>….</li><li>….</li>…</ul>.

• Ce style de liste s’obtient avec le code :<ul class=”special-13“><li>….</li><li>….</li>…</ul>.

• Ce style de liste s’obtient avec le code : <ul class=”special-14“><li>….</li><li>….</li>…</ul>.

• Ce style de liste s’obtient avec le code : <ul class=”special-15“><li>….</li><li>….</li>…</ul>.

Les Styles List – Lettre ou Nombre

AUtiliser une lettre de couleur verte sur fond de cercle :<p><span class=”number“>A</span>.somfgldfg ldfjgldk jfglkdjfkgjs dfsjlsjf lslfsfjgldntent…..</p>

6Utiliser un nombre sur fond carré sans couleur :<p><span class=”number“>6</span>.somfgldfg ldfkjsld fsd flsljflslfsfjgldntent…..</p>

1Un chiffre de couleur rouge :<p><span class=”number-red“>1</span>.…votre contenu….</p>

2Un chiffre de couleur bleue :<p><span class=”number-blue“>2</span>.…votre contenu….</p>

3Un chiffre de couleur verte :<p><span class=”number-green“>3</span>.…fgld ….</p>

4Un chiffre de couleur violet :<p><span class=”number-purple“>4</span>.…du contenu….</p>

5Un chiffre de couleur orange :<p><span class=”number-orange“>5</span>.…du contenu….</p>

6Un chiffre de couleur marron :<p><span class=”number-brown“>6</span>.…du contenu….</p>

7Un chiffre de couleur grise :<p><span class=”number-grey“>7</span>.…fgldfg ldfjgldk jfglkdjfkgjs dfsjlsjf lslfsfj….</p>

Les Styles Surligné

Ce style vous permet de surligner des mots ou des phrases.
Vous devrez utiliser le formatage suivant : <span class=”highlight“>…</span>

Ce style vous permet de surligner des mots ou des phrases, ici en rouge.
Vous devrez utiliser le formatage suivant : <span class=”highlight-red“>…</span>

Ce style vous permet de surligner des mots ou des phrases, ici en bleu.
Vous devrez utiliser le formatage suivant : <span class=”highlight-blue“>…</span>

Ce style vous permet de surligner des mots ou des phrases, ici en vert.
Vous devrez utiliser le formatage suivant : <span class=”highlight-green“>…</span>

Ce style vous permet de surligner des mots ou des phrases, ici en orange.
Vous devrez utiliser le formatage suivant : <span class=”highlight-orange“>…</span>

Ce style vous permet de surligner des mots ou des phrases, ici en marron.
Vous devrez utiliser le formatage suivant : <span class=”highlight-brown“>…</span>

Ce style vous permet de surligner des mots ou des phrases, ici en violet.
Vous devrez utiliser le formatage suivant : <span class=”highlight-purple“>…</span>

Ce style vous permet de surligner des mots ou des phrases, ici en gris.
Vous devrez utiliser le formatage suivant : <span class=”highlight-grey“>…</span>

Ce style vous permet de surligner des mots ou des phrases, ici en gras.
Vous devrez utiliser le formatage suivant : <span class=”highlight-bold“>…</span>

Les Styles d’Insertion

Pour une insertion d’image à droite dans votre pavé de texte, utilisez le code suivant :
<span class=”inset-right”>…votre image ou fichier multimédia par exemple…</span>

Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed euismod magna a nibh.Sed euismod magna a nibh. Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt nonummy. Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et magnis dis parturient montes, mus.Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Pour une insertion d’image à gauche dans votre pavé de texte, utilisez le code suivant :
<span class=”inset-left”>…votre image ou fichier multimédia par exemple à insérer…</span>

Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed euismod magna a nibh.Sed euismod magna a nibh. Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt nonummy. Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et magnis dis parturient montes, mus.Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Les Styles Dropcap

Président aesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede nascetur ridiculus mus. Sed euismod magna a nibh. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et magnis dis parturient.

Vous devrez utiliser le formatage suivant : <p><span class=”dropcap“>P</span></p>

Président rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. nascetur ridiculus mus. Sed euismod magna a nibh. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt natoque penatibus et magnis dis parturient.

Vous devrez utiliser le formatage suivant : <p><span class=”dropcap-red“>P</span></p>

Purger rutrum sapien ac. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et magnis dis parturient.

Vous devrez utiliser le formatage suivant : <p><span class=”dropcap-blue“>P</span></p>

Purger raesent rutrum sapien ac felis. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et magnis dis parturient.

Vous devrez utiliser le formatage suivant : <p><span class=”dropcap-green“>P</span></p>

Président rutrum sapien ac felis. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et magnis dis parturient. Phasellus elementum dolor quis turpis.

Vous devrez utiliser le formatage suivant : <p><span class=”dropcap-purple“>P</span></p>

Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis.

Vous devrez utiliser le formatage suivant : <p><span class=”dropcap-orange“>P</span></p>

Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis.

Vous devrez utiliser le formatage suivant : <p><span class=”dropcap-brown“>P</span></p>

Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis.

Vous devrez utiliser le formatage suivant : <p><span class=”dropcap-grey“>P</span></p>

Les Styles d’Encadrement Important