Mise en page avancée

Ce guide vous permettra d’améliorer la mise en forme de vos articles en Textile.

Ajout de balises CSS dans vos tags Textile

Syntaxe

Les balises CSS doivent être insérées entre le début et la fin de votre tag Textile. Elles doivent être placées entre accolades.

Exemple: pour la balise h1., on doit inserer le CSS ainsi - h1{code css}. (le point symbolise la fin de la balise h1)

Codes de couleur | Recapitulatif des appelations

Vous pouvez définir une couleur en CSS grâce à son code hexadecimal (de la forme #xxxxxx) où à son nom HTML (du type “blue”, “white” etc…)

Vous pouvez récuperer le code hexadecimal d’une couleur dans un logiciel de dessin type Paint Shop Pro ou Photoshop. Des utilitaires nommes “Color Picker” permettent même de recuperer la couleur de n’importe quel element sur votre bureau.

Si vous n’avez pas ces outils, utilisez le lien Récapitulatif des appelations pour trouver les références de toutes les couleurs web.

Couleurs souvent utilisées dans les articles

Bleu RBD: #3B7DD7
Orange RBD: #FFAA48
Rouge (Articles Guild Wars): #AF3200
Bleu (Articles Freeware de la Semaine): #243ABE
Bleu (Titres des articles): #F1F2F7

Exemples de mise en forme

Titre coloré

Voici le code à utiliser entre le début et la fin d’une balise titre type h1, h2 etc. Background définit la couleur de fond. Color définit la couleur de la police. Border définit une bordure dont vous pouvez spécifier la couleur.

{background: #xxxxxx; color: #xxxxxx; border: 1px solid #xxxxxx;}

Texte encadré flottant

Pour obtenir ce type d’effet, les balises textile ne suffisent plus, on utilise donc du code XHTML.

L’attribut float détermine où se trouvera votre encadré (vous avez le choix entre “left” et “right”). L’attribut width va de pair avec l’attribut float. Spécifiez sa largeur en pourcentage par rapport à la largeur totale de l’article.

Padding détermine l’espacement entre le bord de l’encadré et le texte à l’interieur de l’encadré. Margin détermine l’espacement entre le bord de l’encadré et le texte hors de l’encadré.

<div style="float: right; width: x%; padding: 4px; margin: 4px; background: #xxxxxx; color: #xxxxxx;"> Texte de votre encadré (texte simple ou balises textiles etc) </div>

Retour au sommaire de l’aide

Pas de commentaire »

Pas encore de commentaires.

Laissez un commentaire

Recherche :

Catégories :

Newsletter

Archives :

  • Méta :