WebForge Sàrl

: (en développement)

<display> (en développement)

Sert à définir des variables de contexte d'affichage et des styles css pour un conteneur et de pouvoir les réutiliser facilement ailleurs dans le code.

namele nom du display, obligatoire et unique
extendshérite d'un autre display (doit être défini avant dans le code)
int-marginmarge intérieurespacement entre les éléments à l'intérieur d'un bloc, par exemple entre le texte et une images à ces côtés
bloc-marginMarge verticale entre les bloc (par défaut 1em)
bgcolorCouleur de fond (pour le rendu des images)
txtcolorCouleur du texte + calcul du fond rempli du module mise en pasge
fgcolorCouleur de premier plan pour la colorisation d'icônes, de bordures, etc... (par défaut = txtcolor)
btcolorCouleur des blocs Bouton (par défaut égal à fgcolor)
imbcolorCouleur des bordure pour l'effet d'image Cadre fin (stroke) (par défaut égal à txtcolor)
image-fxEffet d'image par défaut
justify-min-widthLargeur à partir de laquelle un texte est justifié (si en alignement automatique)
rendermettre not-empty pour faire disparaitre le conteneur (sauf en mode Edition)

Héritage et styles

Lorsqu'un display hérite d'un autre, les variables de l'enfant (l'héritier) remplacent celle du parent. Les styles du parent sont d'abord appliqués à l'élément qui utilise le display, puis les styles de l'enfant. Les héritages peuvent être chainés (grands parents, etc.) sans limites de nombre.

   <display name='default' int-margin='50' fgcolor='#f91' bgcolor='#fff' txtcolor='#000' imbcolor='#900'>
        <css padding='20px 0' />
        <css use-font='txtF' color='#000' font-size='clamp(0.85em, 2.5vw, 1em)' line-height='1.6em'/>
        <css selector='h1' color='{colorA}' use-font='txtF' font-weight='400' font-size='1.8em'/>
        <css selector='h2' color='{colorA}' use-font='txtF' font-weight='400' font-size='1.5em'/>
        <css selector='h3' color='{colorA}' use-font='txtF' font-weight='400' font-size='1.2em' margin-top='30px'/>
        <css selector='h4' color='{colorA}' use-font='txtF' font-weight='400' font-size='1.1em' margin-top='30px'/>
        <css selector='strong' color='{color3}'/>
        <css selector='a' color='white' />
        <css selector='a:hover' color='#eeeeee' />
        <css breakpoint="main" padding='20px'/>
        <css breakpoint="main" selector='.layout1' background-color='#BED1D1' padding='15px' margin='-15px'/>
        <css breakpoint="main" selector='.bloc_imglink a.left' text-align='center!important' />
        <css selector='.bloc_button' display='flex' justify-content='center' margin-top='0!important'  />
        <css selector='.bloc_button a:hover' opacity='0.7' />
        <css selector='.bloc_button a span' padding='.8px 1.4em!important' margin='0px!important' border='0px!important' color='{colorA}!important' background-color='white!important' />
        <bset for='button' type='flat' font-weight='normal' font-size='1em' />
    </display>

    <display name='flashy' extends='default' fgcolor='#f90' bgcolor='{colorA}' txtcolor='#000' titlescolor='#c90' imbcolor='#900'>
        <bset for='button' type='flat' font-weight='normal' font-size='1em' />
        <css color='#fff' />
        <css selector='h1,h2,h3,h4' color='#fff' />
    </display>
Editer