WikiStyles

Auteurs (avancé)

Les WikiStyles permettent à un auteur de modifier les couleurs et d'autres attributs du texte du wiki. Un WikiStyle se définit entre deux signes % (pourcent), par exemple %color=orange% et %bgcolor=beige%.

WikiStyles de base

Couleurs

Les WikiStyles les plus simples définissent les couleurs ou la police du texte. Une dizaine de balises pour les couleurs sont définies (en anglais: black, white, red, yellow, blue, gray, silver, maroon, green, navy, purple). D'autres peuvent être ajoutés par l'administrateur (par exemple en français).

Le panier contient %red% des tomates, %purple% des aubergines, %green% des poivrons, %% et d'autres légumes.

Le panier contient des tomates, des aubergines, des poivrons, et d'autres légumes.

On peut aussi spécifier les couleurs par leur indicateur hexadécimal, en se servant du paramètre color=.

J'aimerais aussi quelques %color=#ff7f00% carottes %%.

J'aimerais aussi quelques carottes .

Pour changer la couleur de fond, on utilise bgcolor=.

Cette phrase contient %white bgcolor=green% du texte blanc sur fond vert%%.

Cette phrase contient du texte blanc sur fond vert.

Alignement du texte

Les styles peuvent changer l'alignement du texte, qui peut être justifié à gauche, à droite ou centré.

%center% Paragraphe centré. 

%right% Paragraphe\\
justifié\\
à droite.

Paragraphe centré.

Paragraphe
justifié
à droite.

Pour créer des blocs flottants, il y a les WikiStyles %lfloat% (aligné à gauche) et %rfloat% (aligné à droite), et les mêmes, encadrés, avec %lframe% et %rframe%.

%lfloat bgcolor=#dddddd% Flottant\\
à gauche. %%
%rframe% Cadre flottant\\
à droite.%%
%gray% Ce texte remplira le vide à côté des éléments flottants.

Flottant
à gauche.
Cadre flottant
à droite.
Ce texte remplira le vide à côté des éléments flottants.

Étendue

Les WikiStyles peuvent définir une étendue ; sans étendue, ils s'appliquent au texte qui les suit, jusqu'au suivant WikiStyle, ou à une balise de style vide %%, ou encore jusqu'à la fin du paragraphe.

L'attribut apply= et ses raccourcis permettent de changer l'étendue du WikiStyle:

attribut apply=raccourcile style s'applique à...
%apply=img ...%-toute image qui suit
%apply=p ...%%p ...%paragraphe courant
%apply=pre ...%-texte préformaté courant
%apply=list ...%%list ...%la liste en cours
%apply=item ...%%item ...%l'élément de liste courant
%apply=div ...%-le bloc de type DIV courant
%apply=block ...%%block ...%le bloc courant (paragraphe, liste, titre, ou DIV)

De cette façon, %p color=blue% est un raccourci pour %apply=p color=blue%.

Note : Les étendues "p", "bloc" et "list" doivent être placées sur la première ligne du bloc concerné.

* %list red bgcolor=yellow% Ce WikiStyle s'appliquera
* sur la liste entière.
----
* %item red bgcolor=yellow% Ce WikiStyle s'appliquera
* sur le premier élément.
  • Ce WikiStyle s'appliquera
  • sur la liste entière.

  • Ce WikiStyle s'appliquera
  • sur le premier élément.

Spécifier apply=block dans un WikiStyle fera en sorte que ce style s'applique au bloc entier, au lieu de s'appliquer uniquement au texte qui suit:

Ce bloc entier %apply=block bgcolor=yellow% a un fond jaune, même si le style n'apparait qu'au milieu de la ligne.  %bgcolor=pink% D'autre style 'en ligne' (non appliqués à des blocs) peuvent apparaître au milieu de la ligne,%% comme auparavant.

Ce bloc entier a un fond jaune, même si le style n'apparait qu'au milieu de la ligne. D'autre style 'en ligne' (non appliqués à des blocs) peuvent apparaître au milieu de la ligne, comme auparavant.

Le "bloc" est le paragraphe, la liste, le titre, ou le DIV dans lequel la balise se trouve.

Spécifier des styles

Une spécification de style est écrite comme suit

  %étendue style=valeur style=valeur ...%

La partie style définit quel aspect est modifié:

  • color: quelle couleur utiliser pour le texte (CSS).
  • bgcolor: Quelle couleur de fond utiliser (CSS).
  • text-align: Comment aligner le texte (CSS).
  • text-decoration: Comment décorer le texte (souligné, barré etc.) (CSS).
  • font-size: Quelle taille de police utiliser pour le texte (CSS).
  • font-family: Quelle famille de police utiliser pour le texte (CSS).
  • font-weight: Quelle épaisseur de police utiliser pour le texte (CSS).
  • font-style: Quel style de police utiliser pour le texte (CSS).
  • height: La hauteur des images (balise HTML <img>).
  • width: La largeur des images (balise HTML <img>).
  • vspace: Quel espace vertical réserver pour les images (HTML <img>).
  • hspace: Quel espace horizontal réserver pour les images (HTML <img>).
  • align: Quel alignement utiliser pour les images (HTML <img>).
  • target: A quelle fenêtre de destination un lien doit renvoyer (HTML <a>).
  • rel: Quel type de référence pour le lien (HTML <a>).

La partie valeur définit la valeur. Pour les attributs qui sont notés (CSS), ils sont envoyés comme des styles CSS; pour ceux qui sont marqués (HTML <balise>), ils sont passés comme toutes les balises HTML <balise>.

Définition et réutilisation de WikiStyles

Il est possible de donner un nom à une spécification de style. Ceci s'écrit comme

  %define=nom apply=étendue style=valeur style=valeur ...%

Et après, on utilise %nom% texte %% dans la page et %nom% remplace les associations style=valeur dans les définitions de style.

Par exemple, pour définir un style de %rouge%, on peut utiliser:

%define=rouge color=red%
Ici on trouve du texte %rouge% rouge créé avec un 'raccourci de style'.

Ici on trouve du texte rouge créé avec un 'raccourci de style'.

Les raccourcis peuvent être combinés avec d'autres styles, incluant d'autres raccourcis:

%define=rouge color=red%
%define=fondjaune bgcolor=yellow%

%rouge% Ce texte est rouge, %rouge bgcolor=#ccc% rouge sur fond gris, et %rouge fondjaune% rouge sur fond jaune.  

Ce texte est rouge, rouge sur fond gris, et rouge sur fond jaune.

On peut mettre les définitions communes de styles %define=nom...% dans les pages GroupHeaders et elles seront partagées entre les pages du groupe. Ou alors, l'administrateur du wiki peut créer des styles prédéfinis en tant que Configuration locale -- voir Styles Wiki personnalisés.

WikiStyles personnalisés

Voir Styles Wiki personnalisés.

Exemples

Voir aussi Exemples de WikiStyles.

Les auteurs peuvent définir leurs propres styles:

%block bgcolor=#fdf define=Pm%
%center bgcolor=#dfd border='3px dotted green' define=snoopy%

%Pm% Tout texte qui est écrit sur un fond pourpre est un commentaire de  [[~Pm]].

%snoopy% Ici un texte de style snoopy.

Tout texte qui est écrit sur un fond pourpre est un commentaire de Pm.

Ici un texte de style snoopy.

%define=negatif apply=block color=white bgcolor=black%
%negatif% Ceci est un paragraphe dans le style "negatif".

%define=fluo bgcolor=#DFFF00%
Voici %fluo%un passage%% marque comme %fluo%en surligneur%% pour le %fluo%mettre%% en valeur.

Ceci est un paragraphe dans le style "negatif".

Voici un passage marque comme en surligneur pour le mettre en valeur.

Notez que les balises de WikiStyles ne peuvent pas contenir des lettres accentuées.

Il est aussi possible d'utiliser les styles de liste prédéfinis %ROMAN%, %roman%, %ALPHA%, et %alpha%. Ce style doit être spécifié dans le premier item de la liste (et nous pouvons choisir le type de numérotation):

# %ROMAN% Liste numérotée
# par nombres romains
# en majuscules.
----
# %alpha% Liste numérotée
# par lettres
# en minuscules.
  1. Liste numérotée
  2. par nombres romains
  3. en majuscules.

  1. Liste numérotée
  2. par lettres
  3. en minuscules.

Il est possible de spécifier le nombre de départ :

# %roman value=19% Démarre à 19
# par nombres romains
# en minuscules.
----
# %ALPHA value=6% Démarre à 6, soit "F"
# encore
# encore
  1. Démarre à 19
  2. par nombres romains
  3. en minuscules.

  1. Démarre à 6, soit "F"
  2. encore
  3. encore

Enfin, on peut imbriquer les listes de styles différents :

# %ROMAN% niveau 1
## %alpha% niveau 2 (imbriqué)
## niveau 2
*** niveau 3 (à puce)
# niveau 1
# niveau 1
  1. niveau 1
    1. niveau 2 (imbriqué)
    2. niveau 2
      • niveau 3 (à puce)
  2. niveau 1
  3. niveau 1

On peut également spécifier l'ouverture d'un lien dans une autre fenêtre grâce à %newwin% :

   %newwin% Tous les liens de cette ligne, comme http://www.pmwiki.org 
   seront ouverts dans une nouvelle fenêtre.
    Tous les liens de cette ligne, comme http://www.pmwiki.org 
   seront ouverts dans une nouvelle fenêtre.

Enfin, il est possible de contrôler la largeur et la hauteur d'une image dans une page wiki. Ainsi cette balise.

    %height=50% http://www.example.com/some.gif

affichera some.gif redimensionné avec une hauteur de 50 pixels.

Le style %comment%comment...%% peut être utilisé pour inclure des commentaires non visibles. Pour un commentaire "multi-lignes", écrivez quelque chose comme :

  %comment% [=
    Ceci est un grand bloc
    de texte commenté
    par la balise %comment% =]

Couleurs

Voir couleurs des styles Wiki pour les exemples de couleurs


<< Tableaux évolués | Index de la documentation | Exemples de WikiStyles >>


Traduction de PmWiki.WikiStyles Page originale sur PmWikiFr.WikiStyles - Référencé par
Dernières modifications:
PmWikiFr.WikiStyles: 10 septembre 2011 à 15h40
PmWiki.WikiStyles: 24 février 2024 à 19h41