Styler les listes

Avec l'éditeur de texte de Jimdo, on peut facilement customiser les listes à puces, les égayer et les organiser. C'est ce qu'on va voir dans ce tutoriel !

 

Les types de puces

Par défaut, les puces sont des disques pleins, mais il en existe d'autres sortes.

La puce par défaut

  • item
  • item
  • item
<ul>
<li>item </li>
<li>item</li>
<li>item</li>
</ul>

Le cercle

  • item
  • item
  • item
<ul type="circle">
<li>item </li>
<li>item</li>
<li>item</li>
</ul>

Le carré plein

  • item
  • item
  • item
<ul type="square">
<li>item </li>
<li>item</li>
<li>item</li>
</ul>

La puce masquée

  • item
  • item
  • item
<ul style="list-style-type: none;">
<li>item </li>
<li>item</li>
<li>item</li>
</ul>

La marche à suivre

  1. Entrer normalement les éléments à mettre en liste dans l'éditeur de texte.
  2. Sélectionner ces éléments et cliquer sur le bouton Listes à puces de l'éditeur pour les mettre en liste.
  3. Appuyer ensuite sur le bouton HTML de l'éditeur.
  4. Dans la fenêtre qui surgit en popup, repérer la balise <ul> qui signale le début de la liste.
  5. Modifier la balise <ul> avec le code en orange des exemples ci-dessus.
  6. Cliquer sur Mettre à jour pour appliquer les modifications.
Flèche vers le haut

Le cas des puces invisibles

Dans le dernier cas où on a mis des puces invisibles, on peut alors choisir un caractère spécial comme puce. Dans ce cas, il faut écrire le caractère devant chaque item de la liste.

Le tiret

  • - item
  • - item
  • - item
<ul style="list-style-type: none;">
<li>- item</li>
<li>- item</li>
<li>- item</li>
</ul>

Le guillemet double

  • » item
  • » item
  • » item
<ul style="list-style-type: none;">
<li>&raquo; item</li>
<li>&raquo; item</li>
<li>&raquo; item</li>
</ul>

Le petit coeur

  • ♥ item
  • ♥ item
  • ♥ item
<ul style="list-style-type: none;">
<li>&hearts; item</li>
<li>&hearts; item</li>
<li>&hearts; item</li>
</ul>

La flèche

  • → item
  • → item
  • → item
<ul style="list-style-type: none;">
<li>&rarr; item</li>
<li>&rarr; item</li>
<li>&rarr; item</li>
</ul>

Le losange

  • ♦ item
  • ♦ item
  • ♦ item
<ul style="list-style-type: none;">
<li>&diams; item</li>
<li>&diams; item</li>
<li>&diams; item</li>
</ul>

D'autres caractères spéciaux

La marche à suivre

  1. Entrer normalement les éléments à mettre en liste dans l'éditeur de texte.
  2. Sélectionner ces éléments et cliquer sur le bouton Listes à puces de l'éditeur pour les mettre en liste.
  3. Appuyer ensuite sur le bouton HTML de l'éditeur.
  4. Dans la fenêtre qui surgit en popup, repérer la balise <ul> qui signale le début de la liste.
  5. Modifier la balise <ul> comme suit : <ul style="list-style-type: none;">
  6. Repérer les items de la liste signalés par les balises <li> et ajouter après chaque balise le caractère spécial de son choix.
  7. Cliquer sur Mettre à jour pour appliquer les modifications.

 

En combinant puces invisibles, caractères spéciaux et couleurs, on obtient une liste rigolote :

  • item
  • item
  • item
  • item
Flèche vers le haut

Faire une liste à puces à plusieurs niveaux

On va maintenant voir comment réaliser une liste à puces hiérarchisée comme celle-ci :

  • liste 1
    • sous-liste 1
      • item 1
    • sous-liste 1
      • item 1
      • item 2
      • item 3
  • liste 1
    • sous-liste 1
      • item 1
      • item 2
      • item

La marche à suivre en images

Screenshot : liste (étape 1)
1. Entrer les éléments de la liste
Screenshot : liste 2
2. Appuyer sur [Liste à puces]
Screenshot : liste 3
3. Ajouter les sous-éléments
Screenshot : liste 4
4. Sélectionner les sous-éléments et indenter
Screenshot : liste 4
5. Ajouter les items
Screenshot : liste 6
6. Sélectionner les items et indenter

La même liste mise en forme

La liste est customisée avec l'astuce des puces invisibles et l'utilisation de caractères spéciaux ; le tout est relevé de quelques couleurs :

  • liste 1
    • » sous-liste 1
      • item 1
    • » sous-liste 1
      • item 1
      • item 2
      • item 3
  • liste 1
    • » sous-liste 1
      • item 1
      • item 2
      • item 3

Dites-le avec des mots

Écrire commentaire

Commentaires : 7
  • #1

    topskin (samedi, 06 juin 2009 02:17)

    tres bon forum jimdo c'est bien ^^

  • #2

    Agnes (mercredi, 16 février 2011 14:45)

    Je voudrais juste changer la couleur des puces, comment fait-on ?
    Je suis super novice

  • #3

    sautron (jeudi, 28 juillet 2011 06:07)

    TRÈS bon forum bravo.
    Moi je voudrai agrandir l’écart interne du design pour kil soit un design extensible et non fix. est-ce possible? sinon comment je pourrais me procurer d'autres design que ceux qui sont déjà sur le site.
    Merci

  • #4

    rmhphotographies (dimanche, 01 avril 2012 20:06)

    une fois la liste fait ! comment peut-on la rendre cliquable pour créer des dossier d'image ?

  • #5

    Isabelle (jeudi, 04 juillet 2013 18:13)

    @rmhphotographies : pour rendre la liste cliquable, il suffit de créer des liens sur chaque item, toujours avec l'éditeur de texte. Le lien peut pointer sur une page interne au site ou sur une page externe. Pour l'utilisation de l'éditeur, reportez-vous à l'aide de Jimdo qui explique chaque bouton.

  • #6

    Nicolas Gaussin (samedi, 02 novembre 2013 14:53)

    Bonjour
    Super site vraiment :) :)
    Le lien http://www.webmonkey.com/reference/Special_Characters [en] n'est plus disponible. Est-il possible de récupérer d'autres images ailleurs ?
    Je serais particulièrement intéressé par des puces ayant un rapport avec la peinture.
    Merci d'avance

  • #7

    Isabelle (lundi, 20 janvier 2014 14:30)

    @Nicolas : le lien corrigé est maintenant celui-ci : http://www.webmonkey.com/2010/02/special_characters/ Malheureusement, les caractères spéciaux sont très limités et rien ne semble en rapport avec peinture ;(

Ruban