Outils pour utilisateurs

Outils du site


wiki:plugins:box





Box plugin

Description

Le plugin Box permet d'inclure du texte dans des boites de différentes tailles et couleurs. Par rapport au plugin Wrap qui offre également cette possibilité, son principal avantage est de permettre d'en définir la couleur assez facilement. Ce que ne permet pas le plugin Wrap

Le plugin Box permet également d'inclure un titre et/ou une légende aux boites créées. Outre la définition de la largeur des boites, il offre le choix entre des boites aux coins carrés (comportement par défaut) ou légèrement arrondis. On peut enfin définir des boites flottantes à gauche ou à droite.

L'intérieur des boites permet d'accueillir pratiquement toute la syntaxe classique de Dokuwiki. Il même possible d'inclure d'autres boites ou des notes à l'intérieur d'une boite !


La syntaxe

La syntaxe complète :

<box width classes | texte du titre > texte à l'intérieur de la boite </box | texte de le légende >

Où :

  • width — largeur → N'importe quelle unité valide pour les CSS (feuilles de style en cascade). Pour plus de détail sur les unités CSS, vous pouvez consulter cette page.
  • classes — N'importe quel nombre de classes définies dans les styles (CSS) du gabarit (modèle) de votre site web ou de la feuille de style du plug-in pour déterminer l'apparence de la boîte…
    Plus concrètement, le plugin box dispose de plusieurs classes prédéfinies :
    • round — les boites auront des coins arrondis
    • blue — thème bleu
    • red — thème rouge
    • green — thème vert
    • orange — thème orange
    • left — boite flottante à gauche
    • right — boite flottante à droite

Quelques exemples avec la syntaxe

Une boite simple :

<box> Cette boite est un modèle simple... </box>
Cette boite est un modèle simple…


Quelques boites un peu plus complexes :

<box 80% round orange|**Le titre de la boite**>
Ceci est une boite de couleur avec un titre...</box>

Le titre de la boite

ceci est une boite de couleur avec un titre…


<box 50% left blue>
The box contents\\
Le contenu de la boite...
</box|A caption / Une légende>
~~CLEARFLOAT~~
The box contents
Le contenu de la boite…

A caption / Une légende

<box 60% round #f99 #fc9 #fcc #f60|Title - Titre>
The box contents\\
Le contenu de la boite...
<note important>**C'est important :**

<wrap em>Les couleurs de cette boite sont personnalisées !</wrap></note>
</box|Caption - Légende>

Title - Titre

The box contents
Le contenu de la boite…
C'est important :

Les couleurs de cette boite sont personnalisées !

Caption - Légende

(Voir ci-dessous comment personnaliser la couleur des boites…)

On peut mettre des boites à l'intérieur d'une boite :

<box 100% round green|**le titre de la boite principale**>

Blablabla blabla blabla...

<box 31% left round blue|title>the **first** box contents</box|caption>
<box 31% left round blue|title>the **second** box contents</box|caption>
<box 31% left round blue|title>the **third** box contents</box|caption>
~~CLEARFLOAT~~

Blablabla blabla blabla...

<box 31% left round blue|title>le contenu de la **4ème** boite</box|caption>
<box 31% left round blue|title>le contenu de la **5ème** boite</box|caption>
<box 31% left round blue|title>le contenu de la **6ème** boite</box|caption>
~~CLEARFLOAT~~

Blablabla blabla blabla...
</box>

le titre de la boite principale

Blablabla blabla blabla…

title

the first box contents

caption

title

the second box contents

caption

title

the third box contents

caption

Blablabla blabla blabla…

title

le contenu de la 4ème boite

caption

title

le contenu de la 5ème boite

caption

title

le contenu de la 6ème boite

caption

Blablabla blabla blabla…

Les 4 couleurs prédéfinies


bleu

<box blue>bleu</box>

rouge

<box red>rouge</box>

vert

<box green>vert</box>

orange

<box orange>orange</box>


Définir la largeur

Par défaut les boites occupent 50% de l'espace disponible en largeur. Vous pouvez modifier cette largeur en %, en px (pixel), en pt (point), en mm ou cm,… Ou encore tout autre unité valide pour les CSS (feuille de style en cascade) telle em, ex, pc (pica) ou in (inch). Vous utiliserez généralement des % pour définir la largeur des boites. Pour plus de détail sur les unités CSS, vous pouvez consulter cette page.


<box blue> texte </box>
<box 50% blue> texte </box>
<box 30% blue> texte </box>
<box 100% blue> texte </box>
<box 600px blue> texte </box>
<box 400pt blue> texte </box>
<box 100mm blue texte </box>
<box 10cm blue> texte </box>

Les boites "flottantes"

à gauche

<box red left>rouge, flottante à gauche</box>

à droite

<box blue right>bleu, flottante à droite</box>


ATTENTION :

Il est vivement conseillé d'installer également le plugin Clearfloat qui ajoute la macro ~~CLEARFLOAT~~ (ou ~~CL~~ en abrégé).
Cette macro permettra de retrouver un comportement normal pour les différents éléments de la page en supprimant le caractère “flottant” de ceux-ci.

Le plugin Wrap permet d'obtenir le même effet que la macro ~~CLEARFLOAT~~ avec la syntaxe <WRAP clear></WRAP>

On peut utiliser indifféremment l'une ou l'autre syntaxe, à condition bien entendu que les plugins Clearfloat et Wrap soient tout deux installés.

Démonstration du problème

Code sans la macro ~~CLEARFLOAT~~ :

<box red left 40%|**à gauche**> texte </box>
<box blue right 40%|**à droite**> texte </box>
Ce texte ici est petit et se glisse entre les blocs et les boites flottantes !

à gauche

texte

à droite

texte

Ce texte ici est petit et se glisse entre les blocs et les boites flottantes ! Pour éviter ce problème, il faut insérer la macro ~~CLEARFLOAT~~ ou la syntaxe <WRAP clear></WRAP>


Code corrigé avec ~~CLEARFLOAT~~ :

<box red left 40%|**à gauche**> texte </box>
<box blue right 40%|**à droite**> texte </box>
~~CLEARFLOAT~~
Ce texte ici est petit mais ne se glisse plus entre les blocs et les boites flottantes...

à gauche

texte

à droite

texte

Ce texte ici est petit mais ne se glisse plus entre les blocs et les boites flottantes…


Code corrigé avec <WRAP clear></WRAP> :

<box red left 40%|**à gauche**> texte </box>
<box blue right 40%|**à droite**> texte </box>
<WRAP clear></WRAP>
Ce texte ici est petit mais ne se glisse plus entre les blocs et les boites flottantes...

à gauche

texte

à droite

texte

Ce texte ici est petit mais ne se glisse plus entre les blocs et les boites flottantes…

Personnaliser la couleur

Pour personnaliser la couleur des boites, on utilise les codes de couleur hexadécimaux.

Un exemple de boite :

<box 60% round #F99 #FC9 #FCC #F60|title - titre>
the box contents\\
texte dans la boite
</box|caption, légende>

title - titre

the box contents
texte dans la boite

caption, légende

Les 4 codes de couleur hexadécimaux (abrégés1)) et leur rôles respectifs :

  1. 1er code (#F99) → intérieur de la boite : zone de texte principale
  2. 2ème code (#FC9) → zones de titre et de légende
  3. 3ème code (#FCC) → filet : entre les 2 bordures et autour des zones de titre et de légende
  4. 4ème code (#F60) → bordures : la bordure externe en trait plein et la bordure interne en trait pointillé

La syntaxe commentée :

<box 60% round #F99 #FC9 #FCC #F60 | titre> texte dans la boite </box|légende>
                 ^    ^    ^    ^
                 |    |    |    +--------> couleur des bordures
                 |    |    +--------> couleur du filet entre les 2 bordures
                 |    +--------> couleur des zones de titre et de légende
                 +--------> couleur de l'intérieur de la boite


Remarques :

  • Si on spécifie moins que 4 couleurs, la première couleur sera utilisée pour les couleurs manquantes.
  • Les caractères ABCDEF peuvent s'écrire indifféremment en majuscule ou en minuscule dans les codes hexadécimaux.

Une boite de couleur unie

Une boite de couleur unie sera obtenue en indiquant simplement le 1er code hexadécimal pour la couleur de l'intérieur de la boite ! :-)

<box 60% round #f99|title, titre>
the box contents\\
texte dans la boite
</box|caption, légende>

title, titre

the box contents
texte dans la boite

caption, légende


Une boite avec 2 couleurs définies

<box 60% round #f99 #fc9|**title, titre**>
the box contents\\
texte dans la boite
</box|caption, légende>

title, titre

the box contents
texte dans la boite

caption, légende

Points auxquels il faut être attentif

Mise en forme des titres mais pas des légendes

S'il est possible de mettre en forme (gras, italique, souligné,…) les titres et le contenu (texte principal) des boites, ce n'est pas le cas des légendes qui ne supportent aucune mise en forme :!:

<box 80% green | Titre en **gras**, //italique//, __souligné__ ou __//**combiné**//__ **!** >
Texte en **gras**, //italique//, __souligné__ ou __//**combiné**//__ **!**
</box | Légende en **gras**, //italique//, __souligné__ ou __//**combiné**//__ **!** >

Titre en gras, italique, souligné ou combiné !

Texte en gras, italique, souligné ou combiné !

Légende en **gras**, //italique//, __souligné__ ou __//**combiné**//__ **!**

N'utilisez que du texte simple sans mise en forme pour les légendes :

Titre en gras, italique, souligné ou combiné !

Texte en gras, italique, souligné ou combiné !

Légende avec du texte simple sans mise en forme...

Balise <box ... > ouvrante sur une seule ligne

Attention à bien composer la balise ouvrante sur une seule ligne !

Syntaxe erronée :

<box 80% round blue | __//**Le titre de cette boite est un peu long...

Mais <wrap em>il est important</wrap> de prendre tout ce texte en considération !!!**//__ **!** >
Texte dans la boite...

Blablabla blabla blabla...
</box| La balise ouvrante de cette boite est assez longue et on souhaite faire un retour à la ligne... >


Résultat :

<box 80% round blue | Le titre de cette boite est un peu long… Mais il est important de prendre tout ce texte en considération !!!! > Texte dans la boite…

Blablabla blabla blabla… </box| La balise ouvrante de cette boite est assez longue et on souhaite faire un retour à la ligne… >

La syntaxe n'est pas correctement interprétée !


Syntaxe corrigée :

<box 80% round blue | __//**Le titre de cette boite est un peu long... \\ Mais <wrap em>il est important</wrap> de prendre tout ce texte en considération !!!**//__ **!**>
Texte dans la boite...

Blablabla blabla blabla...
</box| La balise ouvrante de cette boite est assez longue mais elle est bien composée sur une seule ligne ! >

Le titre de cette boite est un peu long…
Mais il est important de prendre tout ce texte en considération
!!!!

Texte dans la boite…

Blablabla blabla blabla…

La balise ouvrante de cette boite est assez longue mais elle est bien composée sur une seule ligne !


Pour les légendes, le problème ne se pose pas : on peut faire des sauts de ligne et mettre autant de texte qu'on le souhaite.

Notez cependant que le texte sera affiché comme un seul paragraphe et que les éventuels sauts de ligne ne seront pas interprétés.

Exemple :

Titre de la boite…

Texte dans la boite…

Pour les légendes, le problème ne se pose pas : on peut faire des sauts de ligne et mettre autant de texte qu'on le souhaite. Blablabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla... Notez cependant que le texte sera affiché comme un seul paragraphe et que les éventuels sauts de ligne ne seront pas interprétés.

Liens

Liens externes

1)
Les codes hexadécimaux comportent normalement 3 x 2 caractères après le # mais ils peuvent être abrégés dans le cas des valeurs composées de doublons : FF5533 sera abrégé F53.
wiki/plugins/box.txt · Dernière modification: 2018/04/24 21:49 (modification externe)