Box - modèles

Tous les éléments

{up box=note
 | title=Le titre
 | subtitle=Le sous titre
 | image=images/up-lego.png
 | action=En savoir +
 | link=#
}
Lorem ipsum dolor sit amet, ...
{/up box}

Sans image

{up box=note
 | title=Le titre
 | subtitle=Le sous titre
 | action=En savoir +
 | link=#
}
Lorem ipsum dolor sit amet, ...
{/up box}

Uniquement titre et contenu sans lien

{up box=note
 | title=Le titre
}
Lorem ipsum dolor sit amet, ...
{/up box}

+ un exemple de personnalisation du style par le rédacteur dans le shortcode ou par la création d'un jeu d'options dérivé.

• class=bd-rouge bg-jauneClair
• title-class=bg-rouge

• body-class=t-brun
• title-style=border-top:2px tan dotted

Lomart

{up box=chip
 | title=Lomart
 | image=images/lomart.jpg
 | link=//lomart.fr
 | link-target}

Lomart

{up box=lomart-chip}

lomart-chip étant une section de prefs.ini

[lomart-chip]
box="chip"
title="Lomart"
image="images/lomart.jpg"
link="//lomart.fr"
link-target="_blank"
title-link-class=t-blanc t-hover-jaune
class=bg-brun t-blanc
image-class=bd-blanc bd2 bd-hover-jaune

head-class=bg-rouge t-jaune
body-class=bg-vert

{up box=cutout
| title=Henri IV | subtitle=Roi de France[br][small]2 août 1589 – 14 mai 1610 [/small] | image=images/actions-demo/box/henri-4.jpg
| link=//fr.wikipedia.org/wiki/Henri_IV_(roi_de_France) | link-target
| title-style=background:#fb9d;font-size:4vw;mix-blend-mode:hard-light;color:#660
}
Dynastie ...
{/up box}

Le motclé ##image-css-head## insère l'image comme fond du bloc head.

Le titre et le sous-titre sont dans le bloc titre.
La couleur de fond en hexadécimal équivaut à rgba(255,187,153,0.81)
Le texte reste sur une seule ligne (sauf BR). Pour être responsif, la taille de la police est exprimée en vw. A vous de l'adapter au contexte de votre site.
mix-blend-mode est le mode de fusion du texte avec l'image. normal pour aucune.

head-class=bg-rouge t-blanc
class=bd-rouge

Le même modèle avec l'image à droite.

Il a suffi d'ajouter cette option :

image-style=float:right;margin:0 0 0 10px

Vous pouvez créer un jeu d'option "image-droite" pour simplifier l'utilisation.

style=border-color:red
title-style=background:red

class=rotate-3 mt1 mb2
title-class=t-vertFonce
head-style=border-color:greenYellow

style=background:url(/images/up-bg.png) center center
head-class=bd-blanc

class=rotate3 bd0
style=clip-path: polygon(0% 0%, 1% 12%, 0% 23%, 1% 36%, 1% 48%, 0% 58%, 3% 75%, 0% 90%, 0% 100%, 17% 98%, 29% 99%, 43% 99%, 53% 95%, 66% 96%, 77% 95%, 90% 93%, 99% 90%, 100% 84%, 99% 71%, 100% 67%, 99% 55%, 100% 42%, 98% 29%, 100% 19%, 99% 10%, 100% 1%, 99% 0%, 90% 0%, 85% 2%, 71% 0%, 62% 0%, 50% 0%, 43% 0%, 36% 1%, 26% 0%, 16% 1%, 11% 0%, 6% 0%)

class=bg-beige bd-brun bd2
title-class=bg-brun t-beige

{up box=profile
 | title=Henri IV
 | subtitle=Roi de France[br][small]2 août 1589 – 14 mai 1610[/small]
 | image=images/actions-demo/box/henri-4.jpg
 | action=En savoir +
 | link=//fr.wikipedia.org/wiki/Henri_IV_(roi_de_France)
 | link-target
}
Dynastie : Maison de Bourbon
Nom de naissance : Henri de Bourbon
Date de naissance : 13 décembre 1553
Date de décès : 14 mai 1610 (à 56 ans)
{/up box}

Les options en plus pour le résultat de droite

class=bd-brun bg-beige
style=box-shadow:none
title-class=t-brun
subtitle-class=t-brun
action-class=bg-brun

class=rotate3 bd-rougeFonce
style=bg-rougeFonce t-blanc

title-class=tr