box ~ mise en forme de blocs

Pour créer rapidement des pavés, cartes (cards), messages, pricelist, ...

Cette action doit être vue comme une facilité pour le rédacteur, mais aussi (et surtout) comme un outil permettant au webmaster de créer des box à l'image de son site.

➠ box : affiche une boite avec un tite, sous-titre, image, contenu et action

Cliquer pour lire la documentation

syntaxe: {up box=model | title=title}contenu HTML{/up box}
author LOMART update 2020-05-15 version v2.0 license GNU/GPLv3
  • box: model [danger, info] ou prefset
  • template = ##head## ##title-link## ##subtitle## ##image## ##/head## ##content## ##action-link##:
  • multibox = 3-2-1: nombre de blocs sur la même ligne (desktop-tablet-mobile)
  • multibox-class = fg-vspace-between-1: classe(s) pour le bloc externe
  • multibox-style: style CSS pour le bloc externe
  • class: classe(s) pour la box
  • style: style inline pour la box
  • title (titre): titre. Si vide et demandé : on prend le premier hx du contenu
  • title-tag = h4: balise pour titre
  • title-class: class user pour titre
  • title-style: style inline pour titre
  • title-link-class: class user pour titre avec lien
  • title-link-style: style inline pour titre avec lien
  • subtitle: sous-titre
  • subtitle-tag = h5: mise en forme du sous-titre
  • subtitle-class: class user pour sous-titre
  • subtitle-style: style inline pour sous-titre
  • subtitle-link-class: class user pour sous-titre avec lien
  • subtitle-link-style: style inline pour sous-titre avec lien
  • image: image. Si vide et demandée : on prend la première image du contenu
  • image-alt: texte alternatif pour l'image. Par défaut, le nom du fichier humanisé
  • image-class: class user pour image
  • image-style: style inline pour image
  • image-link-class: class user pour image avec lien
  • image-link-style: style inline pour image avec lien
  • action: texte du bouton action
  • action-tag = div: mise en forme du bouton action
  • action-class: class user pour action
  • action-style: style inline pour action
  • action-link-class: class user pour action avec lien
  • action-link-style: style inline pour action avec lien
  • link: lien. . Si vide et demandé : on prend le premier lien sur title ou image
  • link-target: _blank pour nouvelle fenetre
  • head-class: class pour le bloc entete. en général title, subtitle, image
  • head-style: style pour le bloc entete
  • body-class: class pour le bloc. en général content et action
  • body-style: style pour le bloc. en général content et action
  • css-head (base-css): style CSS inséré dans le HEAD
  • align-vertical = fg-vspace-between-1: type de repartition verticale en multibox

    Voir tous les modèles disponibles

    Pour commencer

    Le premier exemple montre plusieurs box intégrées dans un ensemble multibox.

    Si l'habitude est de commencer par un exemple simple, il m'a semblé utile de vous montrer en premier une possibilité plus élaborée.
    Cela permet de comprendre les choix qui ont guidé la conception de cette action. J'ai plusieurs fois repris cette action qui fait partie de UP depuis sa première version de l'été 2017.

    Engrenage

    Formule ARGENT

    100€/an

    Les fonctions essentielles pour les passionnés

    • Option 1
    • Option 2
    • Option 3
    • Option 4
    Engrenage or

    Formule OR

    150€/an

    Pour les professionnels exigeants, toutes les options pour une performance accrue.

    • Option 1
    • Option 2
    • Option 3
    • Option 4
    • Option 5
    • Option 6
    Engrenage bronze

    Formule BRONZE

    60€/an

    Pour découvrir ce fabuleux produit

    • Option 1
    • Option 2
    • Option 3
    {up box=pricelist | action=En savoir +}
    {title=Formule ARGENT}
    {subtitle=100€/an}
    {image=/images/actions-demo/box/engrenage.jpg}
    {link=#}
    <p>Les fonctions essentielles pour les passionnés</p>
    <ul class="ml3">
    <li>Option 1</li>
    <li>Option 2</li>
    <li>Option 3</li>
    <li>Option 4</li>
    </ul>
    {====== 2 }
    {title=Formule OR | class=+t-jaune}
    {subtitle=150€/an}
    {image=/images/actions-demo/box/engrenage-or.jpg}
    {link=#}
    <p>Pour les professionnels exigeants, toutes les options pour une performance accrue.</p>
    <ul class="ml3">
    <li>Option 1</li>
    <li>Option 2</li>
    <li>Option 3</li>
    <li>Option 4</li>
    <li>Option 5</li>
    <li>Option 6</li>
    </ul>
    {======= 3 }
    {title=Formule BRONZE}
    {subtitle=60€/an}
    {image=/images/actions-demo/box/engrenage-bronze.jpg}
    {link=#}
    <p>Pour découvrir ce fabuleux produit</p>
    {up csv2list | class=ml3}
    [ico-oui] Option 1
    [ico-oui] Option 2
    [ico-non] Option 3
    {/up csv2list}
    {/up box}

    Pour réaliser cette price-list, j'ai utilisé l'action box en mode multibox. Ce mode est détecté automatiquement si le contenu entre le shortcode ouvrant et fermant contient un shortcode séparateur (ligne 13 et 27)

    Ligne 1 : le shortcode ouvrant avec le nom du modèle comme argument principal. pricelist est le nom d'une section dans le prefs.ini et d'un partiel SCSS. En indiquant le texte pour action à ce niveau, cela évite de le spécifier pour chaque pavé.

    Ligne 2 à 5 : Pour chaque pavé, je précise le titre, sous-titre, image et lien comme shortcode secondaire

    Ligne 6 à 12 : le contenu est du code HTML

    Ligne 14 : notez l'option pour le titre. Le signe plus (+) devant le nom de la classe indique qu'elle doit être ajoutée aux classes existantes et non les remplacer.

    Ligne 33 : notez l'utilisation d'une autre action pour la mise en forme du contenu

     

    Sauf cas particulier, vous utiliserez des box plus simples. L'objectif étant de créer ces petits pavés pour mettre en évidence un contenu.

    info

    Up lego
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duarum enim vitarum nobis erunt instituta capienda. Duarum enim vitarum nobis erunt

    note

    Up lego
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quamquam tu hanc copiosiorem etiam soles dicere. Omnes enim iucundum motum, quo
    Up lego

    trombi

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nihil enim arbitror esse magna laude dignum, quod te praetermissurum credam aut
    Up lego

    crazy

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Solum praeterea formosum, solum liberum, solum civem, stultost; Maximas vero virtutes iacere

    Comme vous pouvez le constater ci-dessous, les shortcodes pour réaliser ces exemples sont identiques à l'exception du lien pour certains.

    {up box=info   | title=info   | image=images/up-lego.png} {up lorem | max-word=20} {/up box}
    {up box=chip | title=Lomart | link=//lomart.fr | image=images/lomart.jpg | class=mt2}{/up box} {up box=note | title=note | image=images/up-lego.png} {up lorem | max-word=20} {/up box} {up box=trombi | title=trombi | image=images/up-lego.png} {up lorem | max-word=20} {/up box} {up box=crazy | title=crazy | image=images/up-lego.png | action=voir la suite | link=#} {up lorem | max-word=20} {/up box}

    Le rédacteur doit uniquement se souvenir du modèle, le reste des données est toujours à fournir sous la même forme.

    Tout le travail de mise en forme est réalisé en amont par les modèles fournis par UP ou ceux conçus par le webmaster du site.
    Avec un peu d'HTML et de CSS, il est très facile de créer un nouveau modèle.

    La saisie par le rédacteur

    Pour faciliter le travail du rédacteur et permettre le multibox, 3 formes de shortcodes sont reconnues.

    Même si les 3 box ci-dessous semblent identiques, les shortcodes à l'origine sont totalement différents.

    Comme options du shortcode

    Informations

    Up lego
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ne amores quidem sanctos a sapiente alienos esse arbitrantur. Duo Reges: constructio interrete. Si est nihil
    {up box=info | class=tj
     | title=Informations
     | title-class=t-jaune
     | image=images/up-lego.png }
    {up lorem | max-word=24}
    {/up box} 

    Cette méthode est le mode habituel de UP. On passe les différents composants comme options du shortcode.

    Le contenu texte de la box est indiqué entre le shortcode ouvrant et fermant. Pour l'exemple, j'utilise l'action lorem.

    Comme shortcodes secondaires

    Informations

    Up lego
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quis Pullum Numitorium Fregellanum, proditorem, quamquam rei publicae nostrae profuit, non odit? Ex rebus enim timiditas,
    {up box=info | class=tj}
    {title=Informations | class=t-jaune}
    {image=images/up-lego.png }
    {up lorem | max-word=16}
    {/up box} 

    Pour une multibox, cette méthode permet de saisir les informations pour chacun des pavés en les séparant par des {======}.

    Un shortcode secondaire est composé du nom de l'option (title, subtitle, image, link, action), du signe égal et de son argument. Les options class et style permettent de styler individuellement un élément. Pour compléter une classe ou un style, il suffit de mettre un signe + au début.

    Ce mode a le plus haut niveau de priorité.

    Par analyse du contenu

    Informations

    Up lego
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quis non odit sordidos, vanos, leves, futtiles? Nam de summo mox, ut dixi, videbimus et ad
    {up box=info | class=tj }
    <h3 class="t-jaune">Informations</h3>
    <p><img src="/images/up-lego.png"></p>
    <p>{up lorem | max-word=24}</p>
    {/up box}

    Utilisables en multibox, les éléments titre, image et lien sont recherchés dans le contenu.

    Cette méthode "visuelle" est utilisée uniquement si le modèle de box exige un élément qui n'est pas défini autrement.

    Le niveau de priorité le plus élevé est le shortcode secondaire (2). Le 3e moyen est utilisé en dernier ressort si le modèle de box l'exige.

    Les composantes d'une box

    Les informations à fournir par le rédacteur sont à choisir parmi les suivantes. :

    • titre (title, title-tag, title-class, title-style, title-link-class, title-link-style) : le titre principal de la boîte.
    • sous-titre (subtitle, subtitle-tag, subtitle-class, subtitle-style, subtitle-link-class, subtitle-link-style)
    • image (image, image-alt, image-class, image-style, image-link-class, image-link-style) : une image qui sera prise en charge le template du modèle et son CSS.
    • action (action, action-tag, action-class, action-style, action-link-class, action-link-style) : un élément, en général en bas de la boîte pour inciter à l'achat
    • lien (link, link-target) : une URL et son mode d'ouverture
    • contenu le texte de la box est entre le shortcode ouvrant et fermant.
      Dans le cas d'une multibox, on sépare chaque box par {=====}

    Toutes les options disponibles pour un type d'informations sont notées entre parenthèses. Plus d'infos ci-dessous.

    Les options

    box

    Détermine la présentation de la box. Ce peut-être un modèle CSS ou un jeu d'option

    multibox

    Pour proposer plusieurs alternatives, il est possible de regrouper plusieurs box qui auront la même hauteur.
    L'argument de multibox est le nombre de box par ligne sur grand écran, tablette et mobile. Par défaut : 3-2-1

    Le mode multibox est automatiquement détecté par la présence de séparateurs {====} dans le contenu.

    Dans ce mode, Les options title, subtitle, image, contact et link n'ont de sens que pour fournir une valeur par défaut. Il faut utiliser des shortcodes secondaires pour définir chaque box.

    L'option align-vertical permet d'indiquer une classe à utiliser pour la justification verticale.
    Voir : CSS - Flexbox, mais il n'y a actuellement pas d'autre choix que fg-vspace-between-1 qui place le bloc titre en haut, le bouton action en bas et répartit le contenu dans l'espace restant.

    Les options multibox-class et multibox-style permettent de modifier l'aspect visuel de l'ensemble.

    class
    style

    Pour modifier les règles CSS appliquées à l'extérieur de la box

    title, subtitle, image, action, link

    Ces 5 options permettent de saisir le contenu des différentes parties de la box. Leur nom se veut représentatif du contenu recu.

    • title : l'élément titre de la box
    • subtitle : le sous-titre ou un élément important
    • image : une image dont l'affichage est géré par le CSS de l'action
    • action : il s'agit de l'indispensable "Call to action" (CTA) des experts SEO
    • link : l'URL cible de la box
    • le contenu n'est pas une option, mais le texte (code HTML) saisi entre les shortcodes.

    Les options title, subtitle et action peuvent contenir du BBCode.

    Des versions suffixés de ces options existent pour préciser leurs attributs

    • xxx-tag : la balise HTML pour le bloc de l'élément. (sauf pour image et link). 0 pour aucune balise.
    • xxx-class : la ou les classes à attribuer à l'élément
    • xxx-style : les styles pour l'élément
    • xxx-link-class : la ou les classes à attribuer à la partie lien l'élément
    • xxx-link-style : les styles pour la partie lien de l'élément

    Note : il existe également

    • image-alt : le texte alternatif à l'image. Si non spécifié, UP utilise une forme humanisé du nom du fichier.
    • link-target : par défaut le lien s'ouvre dans la même fenêtre. Mentionner cette option, correspond à _blank
    head, body

    Comme nous le verrons avec template, il s'agit de 2 blocs permettant de styler l'entête et le corps de la box à l'aide des options :

    • head-class & head-style
    • body-class & body-style
    template

    Ce concept utilisé par plusieurs actions de UP permet de définir les informations retournées ainsi que la mise en forme.

    Un template est composé de mots-clés.

    • ##title## : le titre.
      exemple : <h4 class="up-box-title">Le titre</h4>
    • ##title-link## : le titre avec un lien.
      exemple : <h4 class="up-box-title"><a href="#" class="up-box-title-link">Le titre</a></h4>
    • ##subtitle## : le sous-titre.
      exemple : <h5 class="up-box-subtitle">Le sous-titre</h4>
    • ##subtitle-link## : le titre.
      exemple : <h5 class="up-box-subtitle"><a href="#" class="up-box-subtitle-link">Le sous-titre</a></h5>
    • ##title-subtitle## : le titre et le sous-titre dans un bloc <small>.
      exemple : <h4 class="up-box-title">Le titre<small class="up-box-subtitle">et le sous-titre</small></h4>
    • ##title-subtitle-link## : le titre et le sous-titre dans un bloc <small> avec un lien.
      exemple : <h4 class="up-box-title"><a href="#" class="up-box-title-link">Le titre<small class="up-box-subtitle">et le sous-titre</small></a></h4>
      Si un des 2 éléments n'est pas argumenté, le résultat est équivalent à ##title## ou ##subtitle##
    • ##image## : le contenu de l'élément dans un bloc img.
      exemple : <img class="up-box-image" src="/images/img.png">
    • ##image-link## : le bloc image + le lien.
      exemple : <a href="#" class="up-box-image-link"><img class="up-box-image" src="/images/img.png"></a>
    • ##image-css## : l'image est utilisée pour créer une règle CSS background en mode cover pour la box.
      ##image-css-xxx## : le background sera sur le bloc indiqué. exemple : ##image-css-head##
    • ##action-link## : le bouton "Call to action" (CTA)
      exemple : <div class="up-box-action"><a href="#" class="up-box-action-link">Action</a></div>
    • ##content## : le contenu brut. aucun ajout

    Pour la mise en forme, on dispose de :

    • ##head## & ##/head## : une balise DIV avec les attributs définis par head-class & head-style
    • ##body## & ##/body## : une balise DIV avec les attributs définis par body-class & body-style

    Exemple d'utilisation, ce shortcode :

    {up box=crazy
    | title=crazy | subtitle=un modèle fou | image=images/up-lego.png | action=voir la suite | link=#
    | template=##head## ##image## ##title-subtitle## ##/head## ##body## ##content## ##action-link## ##/body##} 
    Lorem ipsum ... 
    {/up box}

    va générer le code HTML suivant :

    <div id="up-00-00" class="up-box up-box-crazy">
      <img src="/images/up-lego.png" class="up-box-image"> 
      <h4 class="up-box-title">crazy<small class="up-box-subtitle">un modèle fou</small></h4>
      <div class="up-box-body">
          Lorem ipsum ...
        <div class="up-box-action"><a href="#" class="up-box-action-link">voir la suite</a></div>
      </div>  
    </div>
    
    Il est possible d'utiliser du bbcode dans le template. Toutefois cela est déconseillé.

    Il faut s'assurer que cela n'aura pas d'impact si un élément est absent. Exemple: un saut de ligne([br]) avant un subtitle. Pour éviter cela, utilisez subtitle-tag et une règle CSS pour forcer le saut de ligne (display:block). Dans l'exemple ci-dessus, le contenu existera toujours et au pire une div n'a pas d'impact visuel.

    css-head

    Comme à son habitude, cette option permet de définir des règles CSS qui seront ajoutées dans le head de la page.

    Concevoir un modèle

    La conception peut se faire par expérimentation pour être ensuite convertie en un jeu d'options et/ou des règles CSS.

    Créer un jeu d'options

    Nous allons voir étape par étape, la création d'une box "ERROR".

    Pour plus de clarté, j'utilise le mode avec les options dans le shortcode, mais une saisie en mode wysiwyg est possible.

    J'utilise les classes proposées par UP qui ont l'avantage d'être très concises.

    Le résultat

    ERREUR

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    Le shortcode

    {up box
    | title=ERREUR
    | class=bd-rouge} Lorem ipsum dolor sit amet, consectetur adipiscing elit. {/up box}

    Les explications

    Pour débuter, on fournit un titre par défaut et un filet rouge (bd-rouge) autour de la box.

    Il va falloir améliorer le rendu, mais le principe est là

    ERREUR

    Error

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    {up box | title=ERREUR
     | image=images/actions-demo/box/error.png
     | class=bd2 bd-arrondi bd-rouge bg-jauneClair
     | title-class=bg-rouge t-jaune b}
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    {/up box}

    On améliore le style de la box en ajoutant un arrondi à une bordure plus épaisse (bd2 bd-arrondi). Le fond devient jaune clair (bg-jauneClair)

    On ajoute une petite image à l'aide de l'option image.

    Le titre est mis en gras (b) et jaune (t-jaune) sur fond rouge (bg-rouge).

    Error

    ERREUR

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    {up box
    | title=ERREUR | image=images/actions-demo/box/error.png | class=bd2 bd-arrondi bd-rouge bg-jauneClair | title-class=bg-rouge t-jaune b
    | title-style=padding: 0 10px 5px
    | image-class=left
    | body-style=padding: 0 10px | template=##image## ##title## ##body## ##content## ##/body##}
    }
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. {/up box}

    L'image serait plus à sa place devant le titre. L'ajout d'une option image-class=left permet de faire flotter l'image à gauche.

    J'ajoute une option template qui spécifie l'ordre d'apparition des éléments. ##body## va permettre d'utiliser l'option body-style pour mettre un padding au contenu.

    J'ajoute également un pading au titre.

    Error

    Attention

    Un joli message d'erreur, mais surtout très rapide à saisir

    {up box=error | title=Attention}
    Un joli message d'erreur, mais surtout très rapide à saisir
    {/up box}

    Il est possible de modifier le titre ou l'image par défaut.

    Pour simplifier la saisie, on va créer une section "error" ou "tartempion" dans le fichier prefs.ini de l'action.

    [error]
    title="ERREUR"
    image="images/actions-demo/box/error.png"
    image-class="left"
    class="bd2 bd-arrondi bd-rouge bg-jauneClair"
    title-class="bg-rouge t-jaune b"
    title-style="padding: 0 10px 5px"
    body-style="padding: 0 10px"
    template="##image## ##title## ##body## ##content## ##/body##"

    La feuille de style

    Dans certains cas, l'utilisation de classes existantes et du template ne suffit pas ou manque de souplesse. L'utilisation d'un fichier CSS serait bienvenue !

    Reprenons l'exemple précédent pour créer un modèle "error-css".

    Pour éviter que vos créations soient écrasées lors d'une mise à jour de UP, il est impératif de les mettre dans le dossier plugins/content/up/actions/box/custom/model

    Un modèle se compose de 3 fichiers :

    • nom_model.css : la feuille de style
    • nom_model.scss : le fichier SCSS pour créer la feuille de style. Optionnel, vous pouvez créer le fichier CSS directement
    • nom_model.ini : les options par défaut pour l'action (template, title-tag, class, etc). Ce fichier est optionnel si les valeurs par défaut conviennent.

    Aucune inscription n'est nécessaire. la présence de ces fichiers suffit.

    Le fichier .ini

    Son rôle est de passer les options à UP.

    Pour notre exemple, le fichier error-css.ini contient le template, le titre et image par défaut.

    title="ERREUR"
    image="images/actions-demo/box/error.png"
    template="##image## ##title## ##body## ##content## ##/body##"

    Ce fichier est nécessaire uniquement si vous avez des options à définir.

    Le fichier .scss

    Je pense que la modification d'un fichier SCSS ne vous pose pas de souci. En cas de besoin, reportez-vous à cet article : https://lomart.fr/extensions/20-scss-compiler/31-comparaison-scss-less

    Pour compiler le fichier CSS, il suffit d'appeler l'action upscsscompiler. Vous pouvez aussi utiliser le plugin SCSS Compiler ou en local l'application Windows Koala

    Si vous copiez un des modèles de UP dans le dossier custom, pensez à modifier le chemin vers les variables dans le fichier SCSS.
    Vous pouvez partir de zéro en dupliquant le fichier _model.scss.dist

    Pour notre exemple, je vais créer mon fichier error-css.scss à partir de zéro

    .up-box-error-css {
        border : 2px solid red;
        border-radius : 4px;
        background : lightYellow;
        .up-box-image {
            float:left;
            margin-right:10px;
        }
        .up-box-title{
            background : red;
            color : yellow;
            font-weight : bold;
            padding : 0 10px 5px; 
        }
        .up-box-body {
            padding : 0 10px;
        }
    }

    Important

    • Par sécurité, toutes les classes sont préfixées par up-box-
    • up-box-nom_model : la classe principale appliquée au bloc externe de la box
    • up-box-element : les règles pour chacun des éléments : image, title, subtitle, action, link, head, body

    Le shortcode :

    {up box=error-css | title=Attention}
    Un joli message d'erreur, mais surtout très rapide à saisir
    {/up box}
    

    Le résultat :

    Error

    Attention

    Un joli message d'erreur, mais surtout très rapide à saisir

    Structure CSS d'une box

    Il est indispensable de connaitre les classes attribuées à chaque élément constituant une box. Pour cela, je vais partir d'un template contenant la totalité des possibilités.

    TEMPLATE

    ---
    ---
      ##head##
        ##image##
        ##title##
        ##subtitle##
      ##/head##
      ##body##
        ##content##
        ##action-link##
      ##/body##
    ---
    ---
    

    HTML

    <div id="up-00-0" class="up-multibox-model fg-row fg-gap fg-auto-3 fg-auto-m2 fg-auto-s1 fg-vspace-between-1">
      <div class="up-box up-box-model"> 
        <div class="up-box-head">
          <img src="/IMAGES/IMAGE.JPG" class="up-box-image">
          <h4 class="up-box-title">LE TITRE</h4>
          <div class="up-box-subtitle">SOUS-TITRE</div> 
        </div>
    <div class="up-box-body"> LE CONTENU <div class="up-box-action"><a href="#" class="up-box-action-link">ACTION</a></div> </div> </div> <!-- box --> </div> <!-- multibox -->

    Dans la version HTML, j'ai surligné les classes affectées aux différentes composantes d'une box. Vous ne pouvez pas modifier leur nom.

    1. Cette ligne uniquement présente pour les multibox :
      - up-multibox-nom_modele est utile pour définir des règles spécifiques à ce mode et au modèle.
      - fg-row fg-gap fg-auto-3 fg-auto-m2 fg-auto-s1 fixe les règles pour le responsive selon les critères passés par l'option multibox.
      - fg-vspace-between-1 est le mode de justification verticale défini par l'option align-vertical
    2. il s'agit du bloc principal de la box. La classe up-box fixe les règles communes et up-box-nom_modele celles du modèle passé comme argument principal à l'action. Il est préfixé, comme toutes les classes par up-box-
      C'est ce bloc qui va recevoir les options class & style
    3. Ce bloc permet de regrouper les éléments d'entête pour la justification verticale. Il reçoit comme attribut head-class & head-style
    4. le bloc image a la classe up-box-image. Il reçoit comme attribut image-alt, image-class & image-style
    5. le titre. Le tag est celui défini par title-tag. Il reçoit title-class & title-style
    6. le sous-titre. Le tag est celui défini par subtitle-tag. Il reçoit subtitle-class & subtitle-style
    7. fin du bloc up-box-head
    8. Ce bloc permet de regrouper les éléments de contenu.
      Il est déconseillé de l'utiliser pour les modèles utilisés en multibox car il bloque la justification verticale.
      Il reçoit comme attribut body-class & body-style
    9. le contenu tel que saisi entre les shortcodes
    10. Le bloc action est inclus dans un bloc défini par action-tag qui reçoit les attributs action-class & action-style
      La balise ouvrante pour le lien reçoit les attributs définis par action-link-class & action-link-style
    11. fin du bloc up-box-body
    12. fin du bloc up-box
    13. fin du bloc up-multibox

    La répartition verticale du contenu

    Pour équilibrer le contenu en multibox, l'action utilise le concept flexbox. Par défaut tous les blocs de premiers niveaux sont répartis sur la hauteur.

    Ce principe explique pourquoi le bloc encadrant le contenu est optionnel. Les blocs répartis verticalement sont le bloc entête (##head##), tous les blocs de premier niveau du contenu entre shortcodes et le bloc action (##action##)

    Vous avez les grandes lignes pour comprendre la feuille de style de l'action box.
    Je vous invite à analyser les fichiers SCSS fournis avec l'action pour vous en inspirer.

    Dériver un modèle

    Un modèle vous convient à 2 ou 3 détails près ... il suffit de créer un jeu d'options !

    Un exemple pour comprendre le principe et vous donner quelques astuces : le modèle info serait parfait en vert et une autre icône.

    Nous allons procéder par étape en ajoutant des options au shortcode

    l'original

    Le titreLe sous titre

    Up lego Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque nostrum est-quod nostrum dico, artis est-ad ea principia, quae accepimus.

    Le shortcode

    {up box=info | title=Le titre | subtitle=Le sous titre | image=images/up-lego.png | action=En savoir + | link=#
    | style=border:#006400 2px solid; border-left-width:8px;
    | title-style=background:#006400
    | action-link-style=background:#006400
    | image-style=float:left;margin:0 10px 0 0
    | css-head=#id .up-box-title:before[content:"\27A7"]
    }
    Lorem ipsum ...
    {/up box}

    Le résultat

    Le titreLe sous titre

    Up lego

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque nostrum est-quod nostrum dico, artis est-ad ea principia, quae accepimus.

    Il nous reste à mettre cela dans notre fichier prefs.ini

    [info-vert]
    box=info
    style="border:#006400 2px solid;border-left-width:8px;"
    title-style="background:#006400"
    action-link-style="background:#006400"
    image-style="float:left;margin:0 10px 0 0"
    css-head="#id .up-box-title:before[content:'\27A7']"

    explications

    • Attention : le nom du jeu d'options ne doit pas être celui d'un modèle
    • l'icône ne peut pas être modifiée avec les options de base. Il faut utiliser css-head qui ajoute une règle CSS dans le head de la page. #id est remplacé par l'id réelle de l'instance de l'action.

    Voilà, nous avons terminé avec cette longue démo !

    Il était nécessaire de fournir les informations pour adapter les box à vos besoins et au design de votre site.

    Mais la seule chose à retenir pour l'utiliser est qu'il suffit d'indiquer le model et les informations titre, sous-titre,action et contenu. UP s'occupe du reste !