ajouter un texte dans un coin de la page ou d'un bloc
{up corner=texte}syntaxe 2 (bloc) :
{up corner=texte}contenu du bloc{/up corner}- corner: texte affiché dans le coin ou ruban
position, taille et style du corner
- position = top-left: angle sous la forme top-left ou tl
- width (l,largeur,w) = 100px: coté du carré
- height (h,hauteur) = 100px: coté du carré
- angle = 45: angle en valeur absolue
- shadow: ajoute une ombre 'orientée' au corner. La valeur indiquée est la force de l'ombre
- color = #ffffff: couleur du texte
- bgcolor = #ff0000: couleur de fond du coin
- style: styles CSS (non proposés ci-dessus) pour le coin
- class: idem style
si le corner est clicable
- url: lien
- target = _blank: ou _self pour ouvrir le site dans le même onglet
style du bloc si le shortcode a un contenu
- bloc-class: classe(s) pour bloc
- bloc-style: style inline pour bloc
style et options secondaire
- id: identifiant
- css-head (base-css): règles CSS définies par le webmaster (ajout dans le head)
- filter: chaine de conditions. Voir documentation filter
Cette action permet de mettre des coins et des rubans aux angles de la page ou d'un bloc de contenu.
Aux coins de la page
Pour ajouter un coin à un des 4 angles de votre site, il suffit d'un simple shortcode. Voici le code et mes commentaires pour les 4 coins.
{up corner=Nouveau}Le plus simple en haut à gauche
Dans sa version la plus épurée, voici le premier coin avec comme seul argument, le texte à afficher.
{up corner=coin[br]de ciel
| position=top-right
| w=150px
| bgcolor=url(/images/actions-demo/corner/ciel-45.jpg)
| color=yellow
| shadow=5
| style= font-size:24px; padding-bottom:10px
| url=//lomart.fr
}
Le coin de ciel bleu
Le texte accepte le HTML. position spécifie le coin. Ici top-right, mais tr, haut-droit ou hd seraient reconnus. w, valeur raccourcie de width, est la largeur du coin dont le fond bgcolor est défini avec une image, le texte est de corner-color. shadow ajoute une ombre dont la force est proportionnelle à l'argument. style permet une personnalisation poussée. URL est l'adresse du site qui sera ouvert dans un nouvel onglet. Pour rester sur la même page, il suffit de mettre l'option target avec ou sans la valeur _self.
{up corner=lang[en=NEW;fr=Nouveau;de=NEU]
| position=bas-gauche
| h=20
| bgcolor=#369
| style=border:2px solid yellow;line-height:15px}en bas à gauche, un ruban bleu
h est la hauteur du coin. Ce qui permet de faire un ruban. style nous permet d'ajouter un filet jaune et de centrer le texte par line-height.
Le texte est indiqué sous la forme d'une liste de traduction de UP. Elle commence par lang[, puis les différentes traductions. Si le pays du poste client n'est pas reconnu, l'anglais est utilisé ou la premiere proposition.
{up corner=un peu penché !
| position=bd
| h=30 | w=200 | angle=20
| style=padding-top:5px}Tous les angles sont permis
angle permet de choisir l'inclinaison du coin (45) par défaut). w et h sont adaptés pour accueillir la totalité du texte.
style permet d'ajuster la position du texte
Pour résumé
- Un shortcode sans contenu affiche le coin par rapport à la page
- le coin est en haut à gauche par défaut. Il faut utiliser l'option position avec les coordonnées de l'angle choisi. ex: hg, haut-gauche, tl, top-left
- la largeur est de 100px par défaut. width ou b permet de l'adapter aux besoins
- la hauteur est de 100px par défaut. vous pouvez la modifier avec height ou h
- UP fait les calculs pour orienter et centrer au mieux les textes. Vous pouvez l'ajuster avec style et les propriétés padding et line-height.
Un bloc de contenu
Qui n'a pas eu besoin de faire un texte d'accroche avec ce fameux badge en angle !
SUPER PRODUIT
proident, magna ad do aliquip elit, Ut enim mollit sed labore Lorem ut irure sint esse nisi quis aute dolor non sit consectetur cillum est id anim ea dolore adipiscing incididunt velit et dolore aliqu{up corner=PROMO
| bloc-class=p2 bg-jaune
| filter=datemax:20221231}
<h2 class="tr mt0">SUPER PRODUIT</h2>
<p>{up lorem | max-char=200}</p>
{/up corner}
Le shortcode pour afficher ce bloc promo est très court. Nous utilisons les valeurs par défaut de l'action pour le coin : angle haut-gauche, texte blanc sur fond rouge avec une largeur de 100px
- bloc-class cible le bloc de contenu en lui ajoutant un padding et une bordure rouge
- filter indique la date à martir de laquelle le coin ne sera plus affiché. Voir l'option filter
Si vous voulez limiter l'affichage du bloc, encapsuler cette action dans une action filter.
Il existe aussi une option datemin - Le contenu du bloc sans oublier de fermer le shortcode par {/up corner}
Quelques exemples
nouveau
Une image à la place ou en plus du texte
La possibilité de saisir du HTML pour le texte du coin permet d'ajouter une image.
UP permet la 'traduction' d'une image en utilisant cette forme d'argument : {up corner=lang[en=<img src="/flag-gb.png">;fr=<img src="/flag-fr.png">
bloc-class ajout d'un fond beige, d'un padding général léger avec un plus large à gauche.
{up corner=
<img src="/images/actions-demo/corner/sun.png">[br]nouveau
| shadow=2
| bloc-class=bg-beige p1 pl3}
... le contenu du bloc ...
{/up corner}
gauche
Encore plus fort : plusieurs coins
Les UP-actions adorent jouer aux poupées russes.
Le premier shortcode définit le coin haut-gauche et la couleur de fond du bloc.
Le style est utilisé pour réduire l'interligne et recentrer le texte verticalement
Le deuxième shortcode précise que le coin sera en bas à droite. C'est aussi lui qui encapsule le contenu, donc nous ajoutons un padding.
{up corner=haut[br]gauche
| bloc-class=bg-beige
| style=line-height:14px;padding-bottom:4px
}
{up corner=bas droit
| position=BD
| bloc-class=p3
}
... le contenu ...
{/up corner}
{/up corner}
{up icon=Ux1F199}
🡇
Avec des caractères Unicode
Les caractères unicode sont faciles à mettre en oeuvre pour agrémenter vos pages.
- Pour le coin haut-gauche, j'utilise le caractère unicode UP avec un font-size de 200%. J'aurais pu jouer sur le padding-bottom pour le mettre dans le corner, mais j'aime bien cette présentation. URL est la cible du clic. On reste dans la même page puisque target est spécifié. Pour le coin bas-droite, je style directement dans le texte pour le coin.
Pour info, les smileys sont aussi des caractères unicode mis en place par une action csv2list
{up corner={up icon=Ux1F199}
| bloc-class=bg-beige
| class=fs200
| url=//up.lomart.fr | target}
{up corner=bas droit[br]<b class="t-jaune fs200">{up icon=Ux1f847}</b>
| position=BD
| bloc-class=p3}
... le contenu ...
{/up corner}
{/up corner}version 1.8
- filter : exécute l'action dans certaines conditions. 🆙 Filter : liste des conditions
- bbcode : l'option principale autorise la saisie de simili-HTML
upactionslist (1) addcsshead (1) corner (10) lorem (1) icon (2) csv2list (1) modal (1) jcontent-info (1)
- Détails