Il suffit de quelques minutes pour personnaliser le graphisme de
WikiNi. Cette page donne quelques recettes, sans longues explications, pour en changer rapidement l'aspect. Si vous souhaitez aller plus loin, consultez la
DocumentationGraphiste.
Principes
Deux mots de théorie
Pour personnaliser le graphisme, seul le fichier /wakka.css est utilisé. Ce fichier est une 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 précisant son champ d'application. Par exemple : body
- Après le sélecteur vient la déclaration : { background-color: #FFD688; color: black }
- La déclaration est elle-même formée d'une ou plusieurs propriétés : background-color, font-style, etc.
- Ces propriétés sont affectées d'une valeur. Par exemple : color: red indique que la propriété color prend la valeur red
- les éléments de la déclaration sont séparés entre eux par un point-virgule
Note sur les valeurs de couleur
Un choix de couleur cohérent est une clé essentielle pour rendre agréable et aisée la lecture de vos pages. Parmi les méthodes éprouvées nous trouvons celles reposant sur les camaïeux et celles confrontant des couleurs contrastées ou complémentaires (comme c'est le cas sur ce wiki : gris et rouge).
Dans le premier cas on pourra donner principalement trois tons proches aux fonds, au texte et aux liens, tandis qu'une approche complémentaire pourra s'appuyer sur la façon dont un ton "nourrit" l'autre (ici, par exemple, le gris est "réchauffé" par le rouge).
Vous trouverez des liens vers des outils d'aide à la sélection colorée sur la page de la documentation sur les
CouleursDUnePageWeb.]
Recettes techniques
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