corner ~ badge et ruban dans un angle

ajouter un texte dans un coin de la page ou d'un bloc

➠ corner : Affiche un texte sur ruban dans un angle

Cliquer pour lire la documentation

syntaxe 1 (body) : {up corner=texte}
syntaxe 2 (bloc) : {up corner=texte}contenu du bloc{/up corner}
author LOMART version 1.0 license GNU/GPLv3
  • corner: texte affiché dans le coin ou ruban
  • 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
  • filter: chaine de conditions. Voir documentation filter
  • datemax: vrai jusqu'à cette date AAAAMMJJHHMM
  • datemin: vrai à partir de cette date AAAAMMJJHHMM
  • shadow = 0: ajoute une ombre 'orientée' au corner. La valeur indiquée est la force de l'ombre
  • color = white: couleur du texte
  • bgcolor = red: couleur de fond du coin
  • class: classes pour le coin
  • style: style CSS pour le coin
  • url: lien
  • target = _blank: ou _self pour ouvrir le site dans le même onglet
  • bloc-class: classe(s) pour bloc
  • bloc-style: style inline pour bloc
  • base-css: règles CSS définies par le webmaster (ajout dans le head)

    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 es 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=150
    | 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 !

    PROMO

    SUPER PRODUIT

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Iam illud quale tandem est, bona praeterita non effluere sapienti, mala meminisse non oportere? Nam adhuc, meo fortasse vitio, quid ego quaeram

    {up corner=PROMO 
    | bloc-class=p2 bg-jaune
    | filter=datemax:20221231}
      <h2 class="tr">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}
    
    haut
    gauche
    bas droit
    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}
    
    🆙
    bas droit
    🠟
    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=&#x1F199;
     | bloc-class=bg-beige
     | class=fs200
     | url=//up.lomart.fr | target}
       {up corner=bas droit<br><b class="t-jaune fs200">&#129055;</b> 
        | position=BD
        | bloc-class=p3}
          ... le contenu ...
       {/up corner}
    {/up corner}
    Pour insérer un caractère unicode, référez-vous à la page "Unicode - Top 100"