Étiquette : after

[Magento 2] Utilisation de before et after sur les containers dans les layout xml

Doc officielle: Layout instructions

Le truc à retenir est que les attributs before et after applicables sur les balises container et block des layouts XML de Magento 2 ont BESOIN d’un contexte pour fonctionner. Exemple:

Pas bon:

L’attribut before ne fonctionnera PAS! Votre block cart.product.slider ne s’affichera pas ou s’affichera au mauvais endroit (ou au bon endroit sur un malentendu… jusqu’à la prochaine modification de layout que vous effectuerez).

Bon:

L’attribut before fonctionnera!

Vous avez saisi la différence entre les deux samples de code ci-dessus?

La ligne <referenceContainer name="content"> précise un contexte, une parenté. Les containers cart.product.slider.container et page.bottom.container sont des enfants directs du container content.

[CSS][SASS] Un chemin à étapes complexe avec les pseudo classes Before, After et les sélecteurs Sibling

tricky-process

L’idée ici est de mettre en place un chemin à étapes pour un tunnel d’achat sans avoir recours à JavaScript ou jQuery. La petite difficulté repose notamment dans le fait que la bordure qui se trouve sous chaque intitulé doit être affichée en 2 couleurs lorsqu’on veut signifier l’étape en cours.

Markup HTML:

SASS:

Autre déclinaison (responsive !)


Les mixins sont ceux de la grille Flexbox de Foundation 6.

[jQuery] Insérer du contenu devant, derrière et à l’intérieur des éléments avec before, after, prepend et append

Pour insérer du contenu Utiliser
Devant une div .before()
Derrière une div .after()
A l’intérieur d’une div, mais avant le contenu existant .prepend()
A l’intérieur d’une div, mais après le contenu existant .append()

Pour déplacer un bloc HTML existant complet (et non plus insérer du nouveau contenu) vers un autre emplacement dans le DOM, utiliser appendTo.

[jQuery][CSS] Menu horizontal : gérer l’apparition/disparition, au survol, de séparateurs à gauche et à droite d’un libellé

Nouvelle version en full-CSS (sans jQuery) à l’aide des pseudo-classes before/after et des sélecteurs adjacents

Source : demo JSFiddle.

Ancienne version (avec jQuery)

apparition/disparition de séparateurs au survol

Simulation : http://jsfiddle.net/frontenddeveloper/Db6AD/7/