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}
##title## ##title-link## ##subtitle## ##subtitle-link## ##title-subtitle## ##title-subtitle-link##
##link## ##target##
##image## ##image-link## ##image-css## ##image-css-xxx##
##action-link## ##action-text##
##content##
##head## & ##/head## : une balise DIV avec les attributs définis par head-class & head-style
##body## & ##/body##
@author: LOMART @version: UP-1.9.5 @license: GNU/GPLv3 @tags: Layout-static
  • box: model [danger, info] ou prefset
  • template (item-template) = ##head## ##title-link## ##subtitle## ##image## ##/head## ##content## ##action-link##: modèle
  • 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

box

  • id:
  • class: classe(s) pour la box
  • style: style inline pour la box

title

  • 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

  • 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: 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

  • 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

  • link: lien. . Si vide et demandé : on prend le premier lien sur title ou image
  • link-target: _blank pour nouvelle fenêtre

header

  • head-class: class pour le bloc entête. en général title, subtitle, image
  • head-style: style pour le bloc entête

body

  • 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

general

  • css-head (base-css): style CSS inséré dans le HEAD
  • align-vertical = fg-vspace-between-1: type de repartition verticale en multibox
Version 1.9.5
refonte complête. Possibilité de template et de multibox
Version 2.5
ajout mot-clé : ##link## ##target## ##action-text##

 

Version 2.5 Ajout des mots-clés : ##link##, ##link-target## et ##action-text##

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 interne

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. Ac tamen hic mallet non dolere. Videmusne ut pueri ne verberibus quidem

note

Up lego
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nemo igitur esse beatus potest. Duo Reges: constructio interrete. Non est enim
Up lego

trombi

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Piso igitur hoc modo, vir optimus tuique, ut scis, amantissimus. Quod mihi
Up lego

crazy

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Qui bonum omne in virtute ponit, is potest dicere perfici beatam vitam

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. Ergo, inquit, tibi Q. Nummus in Croesi divitiis obscuratur, pars est tamen divitiarum. Eadem nunc mea
{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. Quando enim Socrates, qui parens philosophiae iure dici potest, quicquam tale fecit? Sin laboramus, quis est,
{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. Bona autem corporis huic sunt, quod posterius posui, similiora. Hoc simile tandem est? Atque haec coniunctio
{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##
  • ##link## : la valeur saisie dans l'option link. Attention : le mot-clé doit être entre guillemets doubles
    ##target##
    : la valeur saisie dans l'option link-target
    utilisation : [a href=\"##link##\" target='##target##']##action-text##[/a]
  • ##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>
    ##action-text##
    : le texte saisi dans l'option action
  • ##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 !

Pour info, cette page utilise 48 action(s) :
upactionslist (1) readmore (2) csv2def (2) tabslide (1) toc (1) box (17) csv2list (1) modal (3) flexauto (3) lorem (7) tooltip (2) icon (3) flexbox (4) jcontent-info (1)