Modifier l'apparence d'un site Wikini

Vous connaissez les principes des feuilles de style en css.

Dans ce cours, voyons comment mettre en pratique ces notions avec l'exemple de Wikini.

Wikini n'a pas de squelette, l'essentiel des modifications se fera via le fichier wakka.css

Avec Web Developer : modifier le css en ligne et pré-visualiser le résultat

-> La barre d'outils "Web Developer" dans Firefox permet de modifier en ligne les feuilles de style et de pré-visualiser le résultat.

Exemple


Lorsque le résultat semble satisfaisant, il ne reste plus qu'à sauvegarder (en cliquant sur l'icône disquette) puis à envoyer ce fichier via FTP, sur notre hébergement. On remplace alors le fichier CSS qui définissait auparavant le style de notre site Internet.

Le fichier wakka.css

• le fichier wakka.css contient toutes les règles qui concourent à la mise en forme graphique de WikiNi.

=> En connaissant les principales propriétés CSS, vous pouvez ainsi très facilement changer la couleur, la taille de la police, des titres (H1, H2, H3...), la couleur du fonds, des liens, le style des liste à puces...

Quelques éléments à modifier facilement

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

Quelques éléments à modifier facilement

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

Quelques éléments à modifier facilement

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

Quelques éléments à modifier facilement

Modifier les liens
Pour changer la couleur des liens, Il suffit de modifier la ligne

• a { color: #993333; }
• de votre fichier css en changeant #993333 pour la couleur de votre choix.

Avec Web Developer : faire apparaître les blocs qui composent la page

On peut entourer (onglet "outline") et faire apparaître le nom des blocs (onglet "Information")

Exemple :

Ressources

---

 Produire et gérer du contenu Programmer et développer tutoriel