frendeitpt

listup

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)
  • class: classe(s) pour bloc principal
  • style: class ou style inline pour bloc principal
  • style-*: class ou style pour les niveaux des puces
  • start: indice pour début liste numérotée
  • ul-default = square;t-c1: type liste par défaut
  • ol-default = decimal;t-c1: type liste numérotée par défaut
  • 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
  • css-head (base-css): style ajouté dans le HEAD de la page

    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