Il suffit de quelques minutes pour personnaliser le graphisme de
WikiNi. Cette page donne quelques recettes, sans longues explications, pour changer rapidement l'aspect de
WikiNi. Si vous souhaitez aller plus loin, il vous faut consulter la
DocumentationGraphiste.
Principes
Deux mots de théorie
Pour personnaliser le graphisme, seul le fichier /wakka.css est utilisé. Ce fichier est un feuille de style au format CSS.
- Il contient toutes les règles qui concourent à la mise en forme graphique de WikiNi.
- Une règle se présente de la manière suivante : body { background-color: #FFD688; color: black }
- Une règle est composée d'un sélecteur : par exemple body
- Vient ensuite, après le sélecteur, la déclaration : { background-color: #FFD688; color: black }
- La déclaration est elle-même formée d'une ou plusieurs propriétés : color, font-style, etc.
- à chaque propriété on affecte une valeur : par exemple : color: red indique que la propriété color prend la valeur red
- les propriétés sont séparées par un point-virgule
Note sur les valeurs de couleur
[...]
Recettes
[On pourra lire préalablement la documentation sur les
CouleursDUnePageWeb.]
Couleur de fond
Pour modifier la couleur de fond il faut changer la propriété
background-color du sélecteur
body ; la ligne :
- BODY { background-color: #F5F5F5; color: black; }
- deviendra par exemple :
- BODY { background-color: red; color: black; }
- pour avoir un fond rouge
Couleur des caractères
Pour modifier la couleur des caractères on agira sur la propriété
color du sélecteur
body ; la ligne :
- BODY { background-color: #F5F5F5; color: black; }
- deviendra par exemple :
- BODY { background-color: #F5F5F5; color: maroon; }
- pour avoir un caractère de couleur marron
Couleur de fond de la page
Pour changer la couleur de fond des pages, Il vous suffit de modifier la ligne
- .page { background-color: #ffffff; padding: 10px; border: 1px inset; border-bottom: none; }
- de votre fichier css en changeant #ffffff pour la couleur de votre choix ( pour des couleurs, voir Couleurs HTML de WikiNi ).
- Contribution de Aweb
Insérer un logo à côté du titre
Pour insérer un logo à côté du titre du wiki on agira sur la classe de style "wiki_name" auquel on ajoutera les propriétés :
Par exemple :
.wiki_name { font-size: 150%; background-image: url(chemin/nom_de_l_image.jpg); background-repeat: no-repeat; background-position: left; width: 200px; height: 50px; text-align: right; float: left; margin-right: 10px; }
Pour modifier les liens [...]
Corrélats