Une action pour personnaliser les listes. L'idée me trottait dans la tête dès les premières versions de UP, mais je ne voyais pas comment la coder pour allier souplesse et simplicité. Grâce aux variables CSS, j'ai pu concilier ces 2 impératifs.

Ne soyez pas effrayé par la longueur de cette démonstration.

Cette action peut être utilisée simplement avec les options de base.

listup facilite l'utilisation du CSS. Pour des listes élaborées, je vous conseille de créer un jeu d'options ou des bullets

🆙 listup : Personnaliser des listes simples et ordonnées

Cliquer pour lire la documentation

syntaxe {up listup=style puce} list UL/OL {/up listup}
@version: UP-2.6 @author: Lomart @license: GNU/GPLv3 @tags: editor
  • listup: style des puces (séparateur point-virgule) par niveaux (markers) (séparateur virgule)

Valeurs par défaut

  • ul-default = square;t-c1: type liste par défaut
  • ol-default = decimal;t-c1: type liste numérotée par défaut

Style CSS

  • id: identifiant
  • class: classe(s) pour bloc principal
  • style: class ou style inline pour bloc principal
  • style-*: class ou style pour les niveaux des puces
  • css-head (base-css): style ajouté dans le HEAD de la page

Divers

  • start: indice pour début liste numérotée
  • valid-type = rounded-alpha,squared-alpha,circled-decimal,rounded-decimal,decimal-leading-zero,lower-alpha,upper-alpha,lower-roman,upper-roman: types de liste (numérotée) autorisés
  • fonticon = FontAwesome: police d'icônes installée sur le site

Un exemple simple

Personnaliser une liste, c'est d'abord modifier la forme et la couleur de la puce (bullet).

Tous les exemples ci-dessous affichent la même liste saisie avec un éditeur wysiwyg entre des shortcodes UP. Pour alléger la démo, j'indiquerais uniquement le shortcode ouvrant avec un commentaire succinct. Chaque point sera vu en détail dans lla suite de cette démo.

  • item liste UL
  • item liste UL
  • item liste UL
{up listup}

Sans argument, on utilise les informations de l'option ul-default si la liste incluse entre les shortcodes est définie par une balise UL

  1. item liste OL
  2. item liste OL
  3. item liste OL
{up listup}

Sans argument, on utilise les informations de l'option ol-default si la liste incluse entre les shortcodes est définie par une balise OL

  • un
  • deux
  • trois
{up listup=+;color:red}

Un caractère (maxi 3). La couleur est indiquée par une règle CSS classique. Les différents arguments sont séparés par un point-virgule.

  • un
  • deux
  • trois
{up listup=UxBB;t-c1}

Un caractère Unicode saisi sous la forme Ux... On utilise la classe UP t-c1 pour la couleur

  • un
  • deux
  • trois
{up listup=\f1aa;t-orange}

le code d'un caractère de la police d'icônes installée sur le site (Awesome par défaut). Voir les codes sur la page Icônes Font-Awesome

  • un
  • deux
  • trois
{up listup=pdf.png}

une image du dossier icon de l'action si aucun chemin n'est indiqué

  • un
  • deux
  • trois
{up listup=star}

un type proposé par l'action ou le webmaster. Les types de base square, circle et disc sont surchargés par cette méthode. Voir prefs.ini

  • un
  • deux
  • trois
{up listup=decimal ; prefix:"Etape " ; suffix:" : "}

liste numérotée avec possibilité de préfixe et suffixe

  • un
  • deux
  • trois
{up listup=squared-alpha; font-size:1.5rem}

un style de compteur proposé par l'action : squared-alpha, rounded-alpha, squared-decimal, rounded-decimal

Attention, pour utiliser les exemples de cette page sur votre site, vous devez renommer le fichier plugins/content/up/actions/listup/custom/prefs.ini.dist en prefs.ini

Les types de puces disponibles

L'information principale est la forme de la puce qui peut être l'un des types ci-dessous

  • un à trois caractères simples (ex: + ou <->) ou UTF8/Unicode (ex: ⭐) saisi dans un éditeur wysiwyg
  • un code de caractère Unicode ou entité HTML saisis sous la forme neutre : UxBB (»)
  • un caractère de la police d'icônes installée sur le site. Le code du caractère doit être saisi sous la forme neutre : \f1aa pour l'icône Joomla (). Voir les codes sur Icônes Font-Awesome
  • une image (ex: bullet.png). si le chemin n'est pas indiqué, l'image doit être dans le dossier icon de l'action. Elle sera affichée à sa taille d'origine.
  • un type géré par l'action ou un de ceux ajoutés par le webmaster dans la section bullets du fichier prefs.ini. square, disc et circle sont traités comme des caractères Unicode pour bénéficier de plus de possibilités CSS
  • un type de liste ordonnées standards parmi ceux autorisés par l'option valid-types : decimal-leading-zero, lower-alpha, upper-alpha, lower-roman, upper-roman
  • un type de liste ordonnées LISTUP : rounded-alpha, squared-alpha, circled-decimal, rounded-decimal
  • le type decimal est pris en charge par l'action pour permettre l'ajout d'un préfixe et suffixe
  • decimals va numéroter les éléments de listes imbriquées sur plusieurs niveaux sous la forme : 1.1.1

Style de la puce

Dans les exemples ci-dessus, vous avez sans doute remarqué l'utilisation de style css et des classes t-color et bg-color de UP.

Il est possible de modifier quelques attributs de la puce en indiquant des styles CSS séparés par des points-virgules. Pour faciliter la saisie et respecter les couleurs du site, les classes UP commençant par t- (couleur du texte) ou par bg- (couleur de l'arrière-plan) sont utilisables.

  • un
  • deux
  • trois
{up listup=Ux2605;t-red;bg-yellow;border:{up color=green} 2px solid}

Le paramètre principal reçoit 4 arguments séparés par des points-virgules :

  • Ux2605 pour utiliser le caractère Unicode étoile.
  • la classe t-red (ou t-rouge) pour la couleur du texte
  • la classe bg-yellow (ou bg-jaune) pour le fond.
  • un style CSS pour la bordure verte. Pour respecter la charte du site, la couleur est spécifiée avec l'action COLOR Il est possible d'utiliser directement la variable CSS avec var(--green) ou le code couleur habituel.

La liste des propriétés CSS et des classes reconnues est consultable ICI

Personnaliser une ligne

Il est souvent utile de mettre en évidence une ligne en changeant son type de puce ou simplement la couleur de celle-ci.

Pour cela, il suffit de mettre le même code que pour l'option principale entre crochets au début de la ligne concernée.

  • la puce par défaut
  • texte rouge
  • texte orange
  • texte rouge sur fond orange
{up listup}
- la puce par défaut - [t-red]texte rouge
- [color:orange]texte orange
- [t-red;background:orange]texte rouge sur fond orange {/up listup}
  • la puce par défaut
  • un caractère Unicode rouge
  • une fonticon orange
  • une image
{up listup}
    - la puce par défaut
    - [Ux2605;t-red]un caractère Unicode rouge
    - [\f1aa;t-orange]une fonticon orange
    - [pdf.png]une image
{/up listup}
  • un
  • deux
  • trois
{up listup=decimal-leading-zero}[t-red]un
    - [font-weight:bold;t-blue]deux
    - trois
{/up listup}

IMPORTANT

Les exemples de code sont simplifiés pour être plus didactiques. Il est impossible de faire un copier-coller directement.

Le contenu entre les shortcodes doit être converti en liste simple ou ordonnée à l'aide des boutons de votre éditeur préféré.

Si vous utilisez le bouton editor de UP, je vous conseille de saisir les shortcodes ouvrant et fermant, puis de saisir la liste.

Si vous ne comprenez pas pourquoi un shortcode ne fonctionne pas comme attendu, passez en mode code.

La démo sur ce site

{up listup}
- la puce par défaut - [t-red]texte rouge
- [color:orange]texte orange
- [t-red;background:orange]texte rouge sur fond orange {/up listup}

L'exemple en mode code

<p>{up listup}</p>
  <ul>
    <li>la puce par défaut</li>
    <li>[t-red]texte rouge</li>
    <li>[color:orange]texte orange</li>
    <li>[t-red;background:orange]texte rouge sur fond orange</li>
  </ul>
<p>{/up listup}</p>

 

Les listes incluses

Je vous laisse consulter les démos pour en comprendre le principe.

Par défaut

  • un
    • un-1
      • un-1-1
  • deux
    • deux-1
    • deux-2
{up listup}
les listes imbriquées {/up listup}

Sans indication, toutes les listes utilisent le style par défaut

Avec les options style-x

  • un
    • un-1
      • un-1-1
  • deux
    • deux-1
    • deux-2
{up listup
| style-1=t-red
| style-2=circle;t-green
| style-3=star;t-red;bg-yellow}

Le style pour chaque niveau est défini dans une option style-x

Dans l'argument principal

  • un
    • un-1
      • un-1-1
  • deux
    • deux-1
    • deux-2
{up listup=t-red, circle;t-green, star;t-red;bg-yellow}
les listes imbriquées {/up listup}

Moins lisible, le style de chaque niveau est spécifié, séparé par une virgule, comme argument principal

Héritage

  • un
    • un-1
      • un-1-1
  • deux
    • deux-1
    • deux-2
{up listup=circle;t-green}
les listes imbriquées {/up listup}

Attention, le style d'un niveau enfant n'hérite pas des propriétés du niveau précédent.

  1. un
    1. un-1
      1. un-1-1
  2. deux
    1. deux-1
    2. deux-2
{up listup=decimal;t-red, square;t-green}
les listes imbriquées {/up listup}

Le type peut être changé pour un niveau. Comme en CSS, le type ne dépend pas du type UL ou OL

  1. un
    1. un-1
      1. un-1-1
  2. deux
    1. deux-1
    2. deux-2
      1. deux-2-1
{up listup=decimals;t-red, square;t-green, t-pink}
les listes imbriquées {/up listup}

Seule exception, le type decimals est imposé à tous les descendants. C'est indispensable pour la gestion du compteur.

Listes numérotées

Comme pour les listes simples, il suffit d'indiquer le type comme argument principal du shortcode. En toute logique, il n'est pas possible de changer le type pour une ligne.

Les types de base

Les principaux types proposés en standard par le CSS sont disponibles.

decimal-leading-zero

  1. un
  2. deux
  3. trois

lower-alpha

  1. un
  2. deux
  3. trois

upper-alpha

  1. un
  2. deux
  3. trois

lower-roman

  1. un
  2. deux
  3. trois

upper-roman

  1. un
  2. deux
  3. trois

note : la démo "decimal-leading-zero" force le début à 9 avec l'option start

Pour utiliser un des autres types standards, il suffit d'ajouter son nom dans l'option valid-type du fichier custom/prefs.ini ou localement dans le shortcode.
Un exemple avec le type lower-greek

{up listup=lower-greek
| valid-type=lower-greek} - un - deux - trois {/up listup}
  1. un
  2. deux
  3. trois

Les type CSS de UP

L'action propose 4 types de listes définies dans son fichier CSS. Vous pouvez en ajouter d'autres en surchargeant le fichier CSS dans le dossier custom de l'action.

rounded-alpha

  1. un
  2. deux
  3. trois

squared-alpha

  1. un
  2. deux
  3. trois

circled-decimal

  1. un
  2. deux
  3. trois

rounded-decimal

  1. un
  2. deux
  3. trois

decimal

Le type le plus connu est pris en charge par l'action pour permettre l'ajout optionnel d'un préfixe et/ou d'un suffixe

version de base

  1. un
  2. deux
  3. trois
{up listup=decimal}

avec prefix

  1. un
  2. deux
  3. trois
{up listup=decimal;prefix:"Point "}

avec prefix et suffixe

  1. un
  2. deux
  3. trois
{up listup=decimal;prefix:"Point ";suffix:" / "}

Note : Par défaut, le suffixe est un point. Pour le supprimer, il suffit de mettre suffix:""


decimals

(avec un s à la fin) Il permet une numérotation sur des listes imbriquées.Les préfixes et suffix sont admis.

En dehors du type, il est possible de personnaliser les lignes. A la différence des autres types de listes, les descendants héritent des propriétés du parent.

{up listup=decimals;prefix:"Point ";suffix:":" | start=3}
    1. un
        1. [bg-yellow]un
            1. un
            2. [t-red]deux
        3. trois 2. deux 3. trois 2. deux 3. trois {/up listup}
  1. un
    1. un
      1. un
      2. deux
      3. trois
    2. deux
    3. trois
  2. deux
  3. trois

Notes: l'option start (voir ci-dessous) est prise en charge pour la liste de premier niveau

start : indice début d'une liste ordonnée

Il est parfois nécessaire de débuter une liste avec un indice autre que 1.

Listup propose une option start qui permet d'indiquer l'indice de départ pour toutes les listes ordonnées de niveau 1 :

  • celles d'origine : decimal-leading-zero,lower-alpha,upper-alpha,lower-roman,upper-roman
  • les listes CSS ajoutées par listup : rounded-alpha,squared-alpha,circled-decimal,rounded-decimal
  • celles gérées par listup pour la prise en charge des préfixes et suffixes : decimal, decimals

Attention, start est une option et pas un argument de l'option principale.

  1. trois
    1. trois
    2. quatre
    3. cinq
  2. quatre
  3. cinq
{up listup=prefix:"Point ";suffix:" : "
| start=3}

La liste par défaut : decimal est gérée par listup

  1. trois
  2. quatre
  3. cinq
{up listup=upper-roman
| start=3}

Un type standard géré par le CSS

  1. trois
  2. quatre
  3. cinq
{up listup=squared-alpha;font-size:1.5rem
| start=3}

Un des types CSS ajoutés par l'action listup

Les propriétés utilisables

A ce point de la démo, vous en savez suffisamment pour utiliser l'action listup.

Avant les démos abordant les différents cas, ce tableau fait la synthèse des propriétés utilisables dans les arguments pour l'option principale, les options style-* et entre crochets au début des items.

Selon le type de listes, toutes les propriétés ne sont pas disponibles  :

  • Std : les listes ordonnées gérées en CSS pur.
  • In :  celles gérées par l'action avec une position inside
  • Out : celles gérées par l'action avec une position outside

Le type d'une liste est déduit à partir des informations type de liste et position de votre shortcode.

Sauf indications contraires, les propriétés sont traitées comme les propriétés CSS de mêmes noms. Elles acceptent donc les mêmes valeurs.

type/propriété Std In out Description
type de la puce
type standard un type de liste ordonnées parmi ceux autorisés par l'option valid-types : rounded-alpha, squared-alpha, circled-decimal, rounded-decimal, decimal-leading-zero, lower-alpha, upper-alpha, lower-roman, upper-roman.
caractère(s) un à trois caractères simples (ex: + ou <->) ou UTF8/Unicode (ex: ⭐) saisi dans un éditeur wysiwyg
caractère Unicode le code du caractère sous la forme neutre : UxBB (»)
caractère icofont caractère de la police d'icônes installée sur le site. Le code du caractère doit être saisi sous la forme neutre : \f1aa pour le logo Joomla (). Voir les codes pour la police font-Awesome
image (ex: bullet.png). si le chemin n'est pas indiqué, l'image doit être dans le dossier icon de l'action
type action un type proposé par l'action ou un de ceux ajoutés par le webmaster dans la section bullets du fichier prefs.ini
square, disc ou circle ces types standards sont traités comme des caractères Unicode pour bénéficier de plus de possibilités CSS
decimal / decimals le type standard decimal est géré par le code de l'action pour prendre en charge les préfixes et suffixes.
position latérale de la puce  voir la démo
position la position du texte par rapport à la puce : inside | outside
uniquement pour decimal et decimals
prefix texte affiché avant le compteur pour les listes ordonnées
suffix texte affiché après le compteur pour les listes ordonnées
espace autour de chaque ligne
margin-top marge au-dessus de chaque item de la liste
margin-bottom marge au-dessous de chaque item de la liste
margin-left marge à gauche de chaque item de la liste
margin-right marge à droite de chaque item de la liste
espace entre la puce et le texte
gap espace entre la puce et le texte de l'item
police de la puce
color couleur du texte de la puce. Il est possible d'utiliser une classe UP.
Exemple : color:red ou t-red. Attention au respect min/maj pour le nom des couleurs
font-size taille de la police utilisée pour la puce
font-weight graisse pour la puce : lighter, normal, bold, bolder ou valeur numérique de 1 à 1000
font-family police de caractère utilisée pour la puce. Exemple: font-family:cursive
line-height hauteur de la boîte d'une ligne.
vertical-align alignement vertical de la puce par rapport au texte de l'item.
background
text-align justification de la puce dans le bloc de fond. left | center | right
background attribut CSS accepté par la propriété background. exemple : #369 ou url(images/image.jpg)
Une classe UP (ex: bg-bleu) revient à écrire background:var(--bleu). Attention au respect min/maj pour le nom des couleurs"
background-size utile si background est une image.  cover | contain
border attribut CSS. exemple : 1px solid red
border-radius attribut CSS. exemple : 4px
padding espace autour de la puce. attribut CSS. par défaut : 0 2px
width force la largeur du bloc de fond
height forc la hautgeur du bloc de fond
trait vertical si position outline
line-border style de la ligne au format css. Exemple: 1px solid red. plus d'info
line-top décalage haut par rapport au bloc parent
line-bottom décalage bas par rapport au bloc parent
line-left décalage gauche par rapport au bloc parent
line-right décalage droite par rapport au bloc parent

Vous pouvez consulter et télécharger une version plus technique de ce tableau :

Les options

Comme toutes les actions de UP, vous disposez d'options pour modifier le comportement de listup.

options description
listup l'option principale reçoit le type et les styles des puces séparés par des points-virgules.
Pour décrire plusieurs niveaux, il faut utiliser la virgule comme séparateur.
style-* cette option propose une alternative pour décrire les différents niveaux de puces. style-1 à style-12
class classe(s) pour bloc principal UL ou OL
style class ou style inline pour bloc principal UL ou OL
ul-default type par défaut pour le listes UL. exemple : square;t-red Attention : si vous utilisez cette option comme valeur par défaut [options] dans le prefs.ini.
ol-default type par défaut pour le listes numérotées OL. exemple : decimal;t-red Attention : si vous utilisez cette option comme valeur par défaut [options] dans le prefs.ini.
valid-type seuls les types CSS indiqués ici sont pris en compte.
par défaut : rounded-alpha, squared-alpha, circled-decimal, rounded-decimal, decimal-leading-zero, lower-alpha, upper-alpha, lower-roman, upper-roman
fonticon nom de la police d'icônes installée sur le site. Par défaut : FontAwesome
start permet d'indiquer l'indice pour débuter une liste numérotée.
css-head style ajouté dans le HEAD de la page

 Attention : si vous utilisez cette option comme valeur par défaut [options] dans le prefs.ini, tous les styles et types indiqués le sont individuellement. Un exemple pour comprendre :

[options]
ul-default="square;t-c1;position:outside"

Avec les options par défaut ci-dessus, le shortcode {up listup=disc;t-red}, la position sera toujours celle définie dans [options] alors que nativement dans l'action la position est inside. Cela peut surprendre si la définition de la valeur par défaut est faite à postériori. Cela oblige a reprendre tous les shortcodes actif sur le site.

Démonstration des paramètres

On peut se contenter de modifier le type de la liste et sa couleur, mais d'autres paramètres permettent de rendre vos listes encore plus percutantes.

Il est préférable de connaître le CSS pour utiliser ces réglages. L'idéal étant de créer des jeux d'options pour les types de listes utilisées sur votre site

🆙 créer un jeu d'options (prefset)

position

Position de la liste et justification du contenu

inside (par défaut)

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Et hercule-fatendum est enim, quod sentio -mirabilis est apud illos contextus rerum.
    • An hoc usque quaque, aliter in vita? Res tota, Torquate, non doctorum hominum, velle post mortem epulis celebrari memoriam sui nominis.
  • deuxième ligne
  • troisième ligne
{up listup=arrow;position:inside | class=bg-bleuPale}

outside

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Et hercule-fatendum est enim, quod sentio -mirabilis est apud illos contextus rerum.
    • An hoc usque quaque, aliter in vita? Res tota, Torquate, non doctorum hominum, velle post mortem epulis celebrari memoriam sui nominis.
  • deuxième ligne
  • troisième ligne
{up listup=arrow;position:outside | class=bg-bleuPale}

Marges autour des lignes

margin-top, margin-bottom, margin-left, margin-right : ces 4 options permettent de définir les marges autour de chacune des lignes de la liste.

Sur les démos, elles sont matérialisées par la bordure rouge et le bloc UL avec un fond bleu.

Pour ajouter des marges ou paddings au bloc UL, utilisez l'option class ou style.

margin-top 

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Et hercule-fatendum est enim, quod sentio -mirabilis est apud illos contextus rerum.
    • An hoc usque quaque, aliter in vita? Res tota, Torquate, non doctorum hominum, velle post mortem epulis celebrari memoriam sui nominis.
  • deuxième ligne
  • troisième ligne
{up listup=margin-top:2rem | class=bg-bleuPale li-border}

margin-bottom

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Et hercule-fatendum est enim, quod sentio -mirabilis est apud illos contextus rerum.
    • An hoc usque quaque, aliter in vita? Res tota, Torquate, non doctorum hominum, velle post mortem epulis celebrari memoriam sui nominis.
  • deuxième ligne
  • troisième ligne
{up listup=margin-bottom:2rem| class=bg-bleuPale}

margin-left & margin-right

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Et hercule-fatendum est enim, quod sentio -mirabilis est apud illos contextus rerum.
    • An hoc usque quaque, aliter in vita? Res tota, Torquate, non doctorum hominum, velle post mortem epulis celebrari memoriam sui nominis.
  • deuxième ligne
  • troisième ligne
{up listup=margin-left:3rem; margin-right:3rem | class=bg-bleuPale li-border}
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Et hercule-fatendum est enim, quod sentio -mirabilis est apud illos contextus rerum.
    • An hoc usque quaque, aliter in vita? Res tota, Torquate, non doctorum hominum, velle post mortem epulis celebrari memoriam sui nominis.
  • deuxième ligne
  • troisième ligne

Héritage 

Attention, les listes incluses n'héritent pas des propriétés du niveau parent.

Il faut les redéfinir dans l'argument principal (comme dans la démo ci-contre) 

{up listup=margin-top:2rem, margin-top:2rem | class=bg-bleuPale li-border}

ou avec les options style-*

{up listup=margin-top:2rem | style-2=margin-top:2rem | class=bg-bleuPale li-border}

gap : espace entre la puce et le texte

Cette option permet de définir la distance entre la puce et les textes pour les listes inside et outside. Non disponible pour les types standards

La valeur par défaut étant différente selon le type de liste, il faut toujours se modifier la propriété lue avec l'inspecteur de code.

  • première ligne
  • deuxième ligne
  • troisième ligne
{up listup=gap:0 | class=bg-bleuPale}
  • première ligne
  • deuxième ligne
  • troisième ligne
{up listup=gap:1rem | class=bg-bleuPale}
  • première ligne
  • deuxième ligne
  • troisième ligne
{up listup=gap:-1rem | class=bg-bleuPale}

vertical-align : position verticale de la puce

Il est parfois nécessaire de justifier verticalement la position du texte d'une ligne par rapport à sa puce. Non disponible pour les types standards

La valeur par défaut étant différente selon le type de liste, il faut toujours se modifier la propriété lue avec l'inspecteur de code.

  • première ligne
  • deuxième ligne
  • troisième ligne
{up listup=vertical-align:0 | class=bg-bleuPale li-border}
  • première ligne
  • deuxième ligne
  • troisième ligne
{up listup=vertical-align:1rem | class=bg-bleuPale li-border}
  • première ligne
  • deuxième ligne
  • troisième ligne
{up listup=vertical-align:-1rem | class=bg-bleuPale li-border}

La police

Plusieurs paramètres permettent de personnaliser les puces texte (caractère classique ou unicode)

Pour voir les modifications, la liste sans paramétrage

  • une lettre - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Et hercule-fatendum est enim, quod sentio -mirabilis est apud illos contextus rerum.
  • un caractère Unicode
  • un caractère "graphique" Unicode
  • un caractère d'une fonte d'icône
{up listup
| class=bg-bleuPale} [x] une lettre - Lorem ipsum dolor ... rerum. [UxBB] un caractère Unicode [Ux270B] un caractère "graphique" Unicode [\f1aa] un caractère d'une fonte d'icône {/up listup}

La même liste avec font-size:2rem et font-family:cursive.

vertical-align:-0.35rem permet de compenser/ajuster la hauteur entre la puce (2rem) et le texte (1rem)

  • une lettre - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Et hercule-fatendum est enim, quod sentio -mirabilis est apud illos contextus rerum.
  • un caractère Unicode
  • un caractère "graphique" Unicode
  • troisième ligne
{up listup=font-size:2rem;
font-family:times;
vertical-align:-0.35rem | class=bg-bleuPale}

Avec l'ajout du paramètre font-weight pour mettre en gras les caractères.

line-height définit la hauteur de la ligne pour la puce et non celle du texte. A manier avec précaution !

  • une lettre - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Et hercule-fatendum est enim, quod sentio -mirabilis est apud illos contextus rerum.
  • un caractère Unicode
  • un caractère "graphique" Unicode
  •  un caractère d'une fonte d'icône
{up listup=font-size:2rem;
font-family:times;
vertical-align:-0.35rem;
font-weight:bold;
line-height:1.6 | class=bg-bleuPale}

Attention aux justifications en position outside

En position inside pour comparaison

avec uniquement un font-size et sa justification avec vertical-align

  • une lettre - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Et hercule-fatendum est enim, quod sentio -mirabilis est apud illos contextus rerum.
  • un caractère Unicode
  • un caractère "graphique" Unicode
  •  un caractère d'une fonte d'icône
{up listup=font-size:2rem;
vertical-align:-0.35rem | class=bg-bleuPale}

idem en position outside

il va être nécessaire d'ajuster les espaces !

  • une lettre - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Et hercule-fatendum est enim, quod sentio -mirabilis est apud illos contextus rerum.
  • un caractère Unicode
  • un caractère "graphique" Unicode
  •  un caractère d'une fonte d'icône
{up listup=position:outside;
font-size:2rem;
vertical-align:-0.35rem; | class=bg-bleuPale}

Les corrections

On ajoute un espace horizontal entre la puce et le texte avec gap et une marge basse aux lignes avec margin-bottom

  • une lettre - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Et hercule-fatendum est enim, quod sentio -mirabilis est apud illos contextus rerum.
  • un caractère Unicode
  • un caractère "graphique" Unicode
  •  un caractère d'une fonte d'icône
{up listup=position:outside;
font-size:2rem;
           vertical-align:-0.35rem;
           gap:-2rem;
margin-bottom:1rem; | class=bg-bleuPale}

Un trait vertical

Si la liste est définie avec une position outside, il est possible de relier les puces par une ligne.

Les paramètres dédiés à cet usage sont : line-border, line-left, line-right, line-top et line-bottom.

  • première ligne
  • deuxième ligne plus longue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • troisième ligne. Et hercule-fatendum est enim, quod sentio -mirabilis est apud illos contextus rerum.
{up listup=position:outside; 
line-border:1px solid red}

En plus de la position outside, il faut définir le type de la ligne en CSS selon la syntaxe habituelle de la propriété CSS border

  • première ligne
  • deuxième ligne plus longue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • troisième ligne. Et hercule-fatendum est enim, quod sentio -mirabilis est apud illos contextus rerum.
{up listup=position:outside;
line-border: 0.4rem solid plum;
line-left: 11px;
font-size:1rem}

En modifiant l'épaisseur de la ligne, on peut obtenir des effets intéressants.

  • première ligne
  • deuxième ligne plus longue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • troisième ligne. Et hercule-fatendum est enim, quod sentio -mirabilis est apud illos contextus rerum.
{up listup=position:outside;
line-border:1px solid red;
line-right:0;
line-left:0;
line-top:0;
line-bottom:0}

Le trait est en réalité le contour d'un bloc. Il est donc possible de jouer sur la position des 4 côtés pour obtenir un autre effet.

Ajouter un fond

Cette possibilité n'est pas disponible pour les listes ordonnées standards (autres que décimal et decimals)

Un fond est introduit par le mot background ou une classe UP commençant par bg-.

position inside

  • la couleur du shortcode
  • couleur définie par une classe UP. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • une couleur dégradée.
{up listup=Ux2665;background:#F00; font-size:2rem}
    - la couleur du shortcode
    - [bg-yellow] couleur définie par une classe UP. ...
    - [background:linear-gradient(plum, orange)] une couleur dégradée. 
{/up listup}

La propriété background accepte les arguments habituels CSS.

position outside

  • la couleur du shortcode
  • couleur définie par une classe UP. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • une couleur dégradée.
{up listup=position:outside; gap:-2rem; Ux2665;background:#F00; font-size:2rem; margin-bottom:10px}

En position outside, la puce étant extérieure à la liste, nous devons modifier l'espacement entre la puce et le texte

Taille fixe du fond

  • la couleur du shortcode
  • couleur définie par une classe UP.
  • une couleur dégradée.
{up listup=position:outside; width:2rem; height:2rem; gap:-2.5rem; margin-left:2.5rem; Ux2665; background:#F00; font-size:2rem; margin-bottom:10px}

On peut forcer la taille du fond avec les paramètres height et width

Cela entraine la redéfinition de l'espace entre la puce et le texte avec les paramètres gap et margin-left

Padding : espace intérieur

  • la couleur du shortcode
  • couleur définie par une classe UP.
  • une couleur dégradée.
{up listup=position:outside; padding:0 1rem; gap:-3.5rem; margin-left:3.5rem; Ux2665; background:#F00; font-size:2rem; margin-bottom:10px}

Il est possible d'ajuster les dimensions du fond en augmentant l'espace intérieur autour de la puce avec le paramètre padding

Ajuster les paramètres gap et margin-left en fonction du padding et de la taille du caractère de la puce

Gestion des images

Une image utilisée comme type de puce dans le shortcode est toujours affichée à sa taille d'origine.

Pour modifier ses dimensions, il faut la définir comme image de fond.

note: pour la démo, les images ont une taille de 100x100px et la largeur de la liste, matérialisée par une bordure en pointillé, est réduite.

Par défaut, en position inside

  • l'image définie dans le shortcode
  • une autre image
  • l'image définie dans le shortcode en plus grand
{up listup=UxA0; background:url({up php=echo JURI::root();}/images/lomart.jpg); width:30px; height:30px; vertical-align:middle; margin-bottom:5px
 | style=max-width:200px;border:1px dotted #333}
    l'image définie dans le shortcode
    [background:url(/images/up-lego.jpg)]une autre image
    [height:3rem;width:3rem]l'image définie dans le shortcode en plus grand
{/up listup}

L'argument principal du shortcode contient :

  • un espace (caractère Unicode UxA0) pour avoir uniquement le fond
  • une image de 100x100px
  • la dimension souhaitée
  • un alignement vertical du texte sur le milieu de l'image
  • une marge de 5px au-dessous de chaque image

La même liste en position outside demande quelques ajustements

  • l'image définie dans le shortcode
  • une autre image
  • l'image définie dans le shortcode en plus grand
{up listup=position:outside; margin-top:10px; margin-left:3.5rem; gap:-3.5rem; UxA0;background: url(/{up php=echo JURI::root();}images/lomart.jpg);width:30px;height:30px; vertical-align:middle
| style=margin-bottom:30px;max-width:200px;border:1px dotted #333}
    l'image définie dans le shortcode
    [background:url(images/up-lego.jpg)]une autre image
    [height:3rem;width:3rem]l'image définie dans le shortcode en plus grand
{/up listup}

L'argument principal est modifié comme suit :

  • la marge basse est remplacée par une marge haute
  • un gap négatif gap:-3.5rem éloigne le texte de l'image
  • un margin-left margin-left:3.5rem compense le décalage du gap

En fonction du serveur, il peut être nécessaire d'indiquer l'URL complète de l'image.

J'utilise l'action PHP et une constante Joomla pour récupérer la partie serveur de l'URL de l'image.

background:url({up php=echo JURI::root();}images/lomart.jpg);

Prefs.ini : bullets

Pour simplifier l'utilisation de cette action, utilisez le fichier custom/prefs.ini.

Vous pouvez vous inspirer du fichier prefs.ini.dist dans le sous-dossier custom de l'action

; PREFERENCES WEBMASTER

; ce fichier permet au wenmaster de spécifier
; - les valeurs par défaut des options dans la section [options]
; - des jeux d'options en créeant une nouvelle section
; - de saisir des données spécifiques (clé) à une action. voir doc de l'action concernée

; Cas particulier : annulation des valeurs précédentes
; pour une valeur texte ou numérique : laisser vide
; pour une valeur logique : saisir 1 ou 0

; ATTENTION : mettre entre guillemets doubles si caractères spéciaux. Doubler des doubles guillemets pour les utiliser

[options]
;ul-default ="circle;t-red"

[num]
listup="decimals;t-red;font-size:2rem;bg-yellow;border:solid darkRed 1px"
prefix="Pt "
suffix=" : "

[bullets]
oui="\2713;t-green"
non="\2717;color:red"
diamond="\25C6"
triangle="\25B8"
star="\2605;t-yellow"
plus="\271A;t-green"
minus="\2501;t-red"
arrow="\27A7"
raquo="\BB"
step="decimal;font-size:1.5rem;t-red"
red-square="square;t-red;border:var(--red) 2px solid"

jeux d'options

Comme pour toutes les actions, il est possible de définir un jeu d'options. 🆙 créer un jeu d'options (prefset) 

Voici un exemple pour créer une liste numérotée qui a du style

La section du prefs.ini

[num]
listup="decimal;t-red;font-size:1.5rem;bg-yellow;border:solid darkRed 1px;prefix:\"Pt \";suffix:\" : \""
class="bg-jauneClair"
css-head="#id li[border:2px dotted plum;margin:2px 0;padding:2px]"

Le shortcode

{up listup=num}
    un
    deux
    trois
{/up listup}

Le résultat

  • un
  • deux
  • trois

Toutefois, son utilisation est impossible pour personnaliser une ligne en ajoutant son code entre crochets au début.

bullets

La section "bullets" du fichier prefs.ini permet de mémoriser les paramètres pour une puce sous un nom de code. Il suffit d'indiquer le code, le signe égal suivi entre guillemets des arguments que vous auriez mis entre crochets au début de la ligne.

La section "bullets"

[bullets]
oui="\2713;t-green"
non="\2717;color:red"
diamond="\25C6"
triangle="\25B8"
star="\2605;t-yellow"
plus="\271A;t-green"
minus="\2501;t-red"
arrow="\27A7"
raquo="\BB"
step="decimal;font-size:1.5rem;t-red"
red-square="square;t-red;border:var(--red) 2px solid"

Le shortcode

{up listup}
    [oui]oui
    [non]non
    [diamond]diamond
    [triangle]triangle
    [STAR]star
    [plus]plus
    [minus]minus
    [arrow]arrow
    [raquo]raquo
    [step]step
    [red-square]red-square
{/up listup}

Le résultat

  • oui
  • non
  • diamond
  • triangle
  • star
  • plus
  • minus
  • arrow
  • raquo
  • step
  • red-square

 

Le mot-clé peut être utilisé comme argument dans le shortcode, à condition de faire attention au mécanisme d'héritage (cascade).

Dans l'exemple ci-dessous, la puce/bullet "star" définit une couleur qui sera utilisée pour toutes les lignes qui ne la précise pas.

prefs.ini

[bullets]
star="\2605;t-yellow"
arrow="\27A7" plus="\271A;t-green"

Le shortcode

{up listup=star}
    puce définie dans le shortcode (star)
    [arrow]arrow - hérite de la couleur de star
[arrow;color:red]redéfinition locale de la couleur [plus]plus - redéfinit sa couleur {/up listup}

Le résultat

  • puce définie dans le shortcode (star)
  • arrow - hérite de la couleur de star
  • redéfinition locale de la couleur
  • plus - redéfinit sa couleur
Attention : les fichiers INI n'acceptent pas certains mots comme mots-clés : null, yes, no, true, false, on et off

Explications sur le CSS

Si vous êtes curieux de comprendre les méthodes CSS utilisées par cette action, ce chapitre est fait pour vous.

L'action utilise 3 classes CSS qui sont affectées aux balises UL ou OL.

  1. upli-type est utilisé pour les listes numérotées qui utilisent les types standards du HTML. La personnalisation est faite par la pseudo-classe ::wrapper des balises enfants LI. Cela limite les possibilités aux propriétés liées au texte (color, font-size, font-family, font-weight, ...). C'est pour cela que les types decimal, square, disc et circle sont pris en charge par les 2 autres classes.
  2. upli-bg-inside donne plus de liberté pour les fonds et bordures. Elle simule la propriété list-style-position:inside
  3. upli-bg-outside similaire à la précédente, elle est utilisée pour simuler la position outside.
    Ces 2 dernières classes utilisent la pseudo-classe ::before qui autorise plus de propriétés pour la personnalisation.

L'inconvénient des pseudo-classes est qu'il est impossible de les utiliser dans un style inline. Il faut créer de multiples classes dans le head de la page.

J'ai trouvé une approche intéressante avec les variables CSS. Il est possible de modifier l'attribut d'une propriété utilisée dans la pseudo-classe ::wrapper ou ::before directement dans l'attribut style de la balise UL ou LI.
Un petit exemple pour saisir la méthode en sachant que la valeur de la variable CSS est toujours celle définie au plus proche de l'utilisation.

Le code HTML

<ul id="demo" style="--text-color:blue">
  <li>ma puce est bleue</li>
  <li style="--text-color:red">et la mienne est rouge</li>
  <li>la mienne est toujours bleue</li>
</ul>

Le code CSS

#demo li:wrapper {
  color: var(--text-color);
}

Le résultat

  • ma puce est bleue
  • et la mienne est rouge
  • la mienne est toujours bleue

head-css : astuces

Pour personnaliser les lignes, il faut utiliser l'option css-head disponible pour toutes les actions.

🆙 L'option CSS-HEAD

Voici quelques exemples pour montrer les méthodes à utiliser pour agir sur le contenu de la liste et sur la puce.

  • première ligne
  • deuxième ligne
  • troisième ligne
{up listup=arrow
 |css-head=#id li[padding:4px 10px;background:tan]
           #id li:nth-child(2)[color:red]
           #id li:hover[background:yellow;padding:4px 0]}
    [t-red]première ligne
    [Ux2605;t-orange]deuxième ligne
    troisième ligne
{/up listup}
  • #id li cible toutes les lignes de cette instance de liste pour ajouter un fond et un padding
  • pour modifier le style d'une ligne (pas de sa puce), il faut utiliser une pseudo-classe comme nth-child
  • le sélecteur #id li:hover permet de modifier la couleur de fond et la marge lors du survol d'une ligne.
  • pour modifier la puce d'une ligne, utilisez la méthode proposée par cette action. Voir personnaliser une ligne

  • première ligne
  • deuxième ligne
  • troisième ligne
{up listup=arrow
 | css-head=ul#id[background:plum] 
            #id li[margin:3px;border-radius:50px;background:lightGreen] 
            #id li:nth-child(odd)[background:lightBlue]
            #id li:hover:before[color:red]
#id li:hover[background:steelblue;color:white]} [t-red]première ligne [Ux2605;t-orange]deuxième ligne troisième ligne {/up listup}
  • ul#id ajoute un fond prune à l'ensemble de la liste
  • #id li modifie le style de chacune des lignes (pas de sa puce)
  •  #id li:nth-child(odd) va modifier la couleur de fond des lignes impaires
  • #id li:hover:before. permet de modifier la puce au survol.
    Attention, il est  impératif de mettre la pseudo-class hover avant before. Les listes simples utilisent la pseudo-classe marker. Inspecter le code sur votre site pour connaitre le mode utilisé.
  • #id li:hover. couleur du texte et du fond de la ligne au survol

La démo de cette action est enfin terminée. J'espère ne pas avoir perdu trop de monde en route 😉

Pour information, cette page fait appel 125 fois aux actions UP