[WebGenerAction] Personnaliser son WikiBabe

Vous pouvez déjà modeler l'intérieur de vos pages wiki en recopiant sur d'autres wikis des codes HTML tous faits. Si cette personnalisation ne vous suffit pas, voici comment faire de WikiBabe un site unique conforme à vos désirs du menu du haut au logo du bas.

Notez que ce qui suit s'applique à WikiBabe mais est aussi valable ou facilement transposable aux solutions TipiWiki, MiniWiki, ainsi que PhpWiki1.2.2 qui est la source de base des trois autres.

Fonds de pages

Vous pouvez ajouter un fond à tout le site en plaçant dans le dossier "images" une image nommée : fondsite.gif

Ce fond est imposé par l'instruction url(images/fondsite.gif) du BODY dans le fichier style.css

Le fichier style.css est appelé dans chacune des quatres pages-types par l'instruction :

Si vous supprimez le fichier ou l'instruction, les paramètres dans BODY de chaque page sont activés.

Si vous effacez cette instruction en haut d'un fichier (browse.html pour les pages ordinaires de navigation par exemple), vous pouvez donc personnaliser les 4 types de pages en plaçant simplement dans le dossier images des images (fondpagenavig.jpg par exemple) nommées respectivement :

fondpagenavig.jpg (pages de navigation browse.html)

fondpagemodif.jpg (pages de modification editpage.html)

fondpagemessage.jpg (pages de message message.html)

fondpagerepere.jpg (pages de reperes editlinks.html)

Logo de bas de page

Le signe @ en haut et en bas de page est un lien vers l'accueil. Il est affiché par la page browse.html avec l'instruction :

<a href="###SCRIPTURL###" title="Retour à l'accueil">@</a>

Pour y mettre votre logo qui s'appelle par exemple monlogo.jpg et que vous avez mis dans le dossier images, remplacez @ par :

<img src="images/monlogo.jpg" alt="retour accueil" border="0">

Logo signature

Une image d'atome apparait comme signature du message qui confirme la modification de la page. Vous pouvez la changer en mettant une autre image sous le même nom signaturedusite.gif dans le dossier images.

Si vous voulez changer de format d'image, monimage.jpg par exemple, modifiez le nom figurant dans le fichier config.php (dossier lib) dans la ligne :

Votre propre stock image img et musique son

Actuellement vous avez accès, via deux liens en bas du cadre de mofication, aux stocks img et son du site tipiwiki.

Si votre hébergeur permet de visualiser les fichiers contenus dans les dossiers (free, lycos, pas levillage), vous pouvez créez vos propres stocks. Vous pouvez aussi comme pour tipiwiki utiliser un stock sur un autre de vos sites et utiliser alors son adresse.

Créez les dossiers img et son et remplissez-les de fichiers images (gif jpg png...) et de fichiers de musique ou son (mid wav mp3...)

Apparences générales : style.css

Modifiez le fichier style.css pour changer le style appliqué sur tout le WikiBabe.

INSTRUCTION	TRADUCTION	PARAMETRES POSSIBLES
text decoration :	decoration texte	none underline overline line-through blink
font-family :	police-famille	Arial Times Helvetica courrier albertus ...
font-style :	police-style	normal italic oblique
font-weight :	epaisseur de police	lighter normal bold 100 200 ... 900 (bolder)
font-size :	police-taille	12pt 14px 80% 110% xx-small medium large ...
color :	couleur de texte	#RRVVBB ou gray white silver ...
background-color :	couleur de fond	#RRVVBB ou gray white silver ...ou transparent
background-repeat :	Répétition image fond	repeat repeat-x repeat-y no-repeat
background-position :	Position image fond	100 500 ou 30% 60% ou top right ou center center ...
padding :	écartement	1px 6pt 4% 15% ...
padding-top :	écartement haut	aussi : padding-right -left -bottom
margin :	marge	comme padding
width :	largeur	auto 100px 90% 100% 110% ...
text-align :	alignement du texte	left right center justify
vertical-align :	alignement vertical	top middle bottom ...

/* style.css WikiBabe LePetitPrince 01 05 2002 usage libre */ // Famille de police des textes Verdana // Taille des textes 100% // Couleur des textes #000000 (noir) // Couleur de fond des pages #FFFFFF ou bien... // ...image de fond des pages images/fondsite.gif // fixed: le texte glisse dessus // Couleurs de la barre de défilement ascenseur BODY{ font-family:Verdana; font-size:100%; color:#000000; background:#FFFFFF url(images/fondsite.gif) repeat fixed; scrollbar-face-color: #FFFFFF; scrollbar-shadow-color: #000000; scrollbar-highlight-color: D8ECFF; scrollbar-3dlight-color: F0FCFF; scrollbar-darkshadow-color: #0D81B9; scrollbar-track-color: #FFFFFF; scrollbar-arrow-color: #0D81B9; } a:link { // Lien non visité (avant clic) text-decoration: none; police-style: normal; font-weight: bold; color: #306498; background-color: transparent; } a:visited { // Lien visité (après clic) text-decoration: none; font-style: normal; font-weight: bold; color: #000066; background-color: transparent; } a:hover { // Lien au survol de la souris text-decoration: 'underline overline'; font-style: normal; font-weight: bold; color: #AA0000; background-color: transparent; } a:active { // Lien actif (au clic) text-decoration: none; font-style: normal; font-weight: bold; color: #FF7800; background-color: transparent; } a.offsite { // Lien externe http (non visité) text-decoration: none; font-style: normal; font-weight: normal; color: #006600; background-color: transparent; }

Nom de la page d'accueil

Le nom de la page d'accueil (sur laquelle on arrive en premier) est WikiBabe. On prend naturellement ce nom pour le nom du site. Vous devriez donc la changer en MonSite ou UnAutreNom comme par exemple TableauNoir :

Créez une page TableauNoir et Recopiez-y le contenu de votre page WikiBabe actuelle.

Dans le fichier display.php (dossier lib), remplacez WikiBabe par TableauNoir, puis rechargez-le en FTP sur votre site à la place de l'ancien.
$pagename = gettext("WikiBabe") ;
devient donc :
$pagename = gettext("TableauNoir") ;

AcTu : les dernières pages modifiées (recentchanges)

La page AcTu met à jour automatiquement une liste journalière des dernières pages modifiées. Un lien "diff" (ou sinon "new") montre les derniers changements sur chaque page (+ pour ligne ajoutée, - pour ligne enlevée). Cette page est définie dans les codes.

Vous pouvez modifier le nom de la page qui assure cette fonction, en par exemple DernieresModifications.

Créez cette page et tapez au minimum dedans quatre soulignés ____ (le wiki les prend comme repère pour envoyer les dates).

Dans le fichier savepage.php (dossier lib), remplacez AcTu par DernieresModifications dans les 2 lignes :

LisTe : les X pages les plus visitées (mostpopular)

La page LisTe affiche les 100 pages les plus visitées et les nombres de visites. Vous pouvez afficher cette liste sur n'importe quelle page en y tapant l'instruction : %%Mostpopular%%

Vous pouvez modifier le nombre de pages listées en modifiant dans le fichier config.php la ligne :

4 pages : Naviguer EditerPage EditerLiens Messages

Toutes les apparences générales de style et de forme sont donc fixées dans les fichiers .html du dossier templates, 4 pages HTML assez courtes utilisées comme 4 masques (templates ou squelettes). Elles fixent les formes d'affichage selon ce qu'on est en train de faire :

browse.html
fixe la forme des pages Wikis en navigation courante quand on se promène sur les pages du Wiki

editpage.html
fixe la forme des pages Wikis en modification (edition) après clic sur Modifier (EditText) dans une page de navigation (browse.html). Pas de fonctions d'admin, juste des liens et une fonction input dans laquelle vous pouvez modifier en particulier la taille du cadre de modification (rows, cols).

editlinks.html
fixe la forme des pages "Repères" (References) après clic sur Repères (EditLinks) dans une page de Modification (editpage.html). Cette page est très peu utilisée, il vaut mieux se contenter de mettre des raccourcis dans les cadres de modification.

Plus loin : Instructions PhpWiki

Si vous voulez jouer avec la logique du wiki pour revoir en profondeur le fonctionnement des menus, des liens et autres opérateurs, voici quelques explications.

Les 4 pages-type HTML sont classiques mais avec quelques instructions particulières entourées de 3 dièzes ### (comme les BOUCLES de SPIP) ###CONTENT### représente par exemple le corps de la page wiki qui sera affichée. Elles sont modifiables avec un éditeur de texte simple (ConTEXT est recommandé).

Lors de modifications on prendra soin de conserver la structure "en blocs" de ces instructions, de laisser sur une seule ligne ce qui y est déjà, et de ne pas introduire d'espaces mais plutôt utiliser son équivalent :

###CONTENT###
Le contenu courant d'une page. Ce peut être la page Wiki elle-même ou un résultat de recherche ou un message particulier.

###PAGE###
Nom de la page. Ne pas utiliser dans les liens (Tout caractère spécial HTML est remplacé par son "entity").

###ALLOWEDPROTOCOLS###
Types de liens autorisés. Par defaut dans WikiBabe : http|https|mailto|

<A HREF="###SCRIPTURL###">accès (par défaut) à une page</A>

<A HREF="###SCRIPTURL###?###PAGEURL###">la page courante</A>

<A HREF="###SCRIPTURL###?MaPage">page MaPage</A>

<head><title>Wiki ###PAGE###</title></head>

Ce qui s'affiche dans une page est décidé par les instructions conditionnelles suivantes, qui s'appliquent à xxx qui peut être soit ADMIN (en mode admin), soit COPY (pour la copie), soit LOCK (verrouillée).

Ligne : ###IF xxx###
Si la condition 'xxx' est fausse, ce qui suit n'est pas exécuté.

Ligne : ###IF !xxx###
Si la condition 'xxx' est vraie, ce qui suit n'est pas exécuté.

Bloc : ###IF :xxx### .... ###ENDIF :xxx###
Si la condition 'xxx' est fause, alors tout ce qui est compris entre le début et la fin n'est pas exécuté.

Bloc : ###IF : !xxx### .... ###ENDIF : !xxx###
Si la condition 'xxx' est vraie, alors tout ce qui est compris entre le début et la fin n'est pas exécuté.

COPY
Si la page est déjà en archive. Utilisé habituellement pour afficher/masquer le lien EditCopy (voir la page du précédent auteur, ce lien est enlevé dans WikiBabe mais si ça vous tente...) dans editpage.html

ADMIN
Si l'utilisateur est en ADMIN. Utilisé pour afficher/masquer des liens de modifications dans browse.html

LOCK
Si la page courante est verrouillée et donc ne peut être modifiée (éditée). Utilisées dans browse.html et editpage.html

###1###, ###2###, ....
Instructions de Repères (references). Jusqu'à la valeur NUM_LINKS les instructions seront substituées. NUM_LINKS est défini dans lib/config.php

###LASTAUTHOR###
Auteur de la "dernière" modification. (Adresse IP ou nom d'hote (hostname).

###VERSION###
Numéro de version (revision) de la page. Aussi utilisé pour détecter des mises à jour "concurrente" d'une page. Voir entrée cachée dans template EDITPAGE pour comment l'utiliser.