Documentation en français du builder Oxygen

Personnaliser le rendu des extensions

Pour personnaliser une extension WordPress, Selector Detector doit être activé (depuis l’écran d’administration WordPress : Oxygen > Settings).

Selector Detector permet à Oxygen de personnaliser des contenus extérieurs à Oxygen, comme par exemple :

  • les produits WooCommerce
  • les sujets d’un forum bbPress
  • les pages boutique WooCommerce : mon compte, panier d’achat, commandes, paiement…
  • l’historique de téléchargements de Easy Digital Downloads
  • etc.

Rendu d’extensions avec du contenu interne ou des données dynamiques

Lorsqu’une extension génère une page de contenu dynamique, cela implique généralement que l’affichage, la disposition, de ce contenu est géré par un ’modèle’, un template, interne à l’extension.

Par exemple, si l’on prend une page Panier, on reconnaîtra très rapidement à sa disposition s’il s’agit de celle générée par WooCommerce ou non. Et qu’on aimerait peut-être vouloir changer les couleurs du tableau, l’apparence des boutons, des champs de saisie, voire même totalement modifier l’agencement des éléments !

C’est ce que permet le Selector Detector (Détecteur de Sélecteurs CSS)

Pour personnaliser les styles de rendu d’une extension, ouvrez le Template appliqué à la page de l’extension.

  1. Sélectionnez Oxygen > Templates,
  2. Cliquez sur le titre du template concerné pour l’ouvrir dans Oxygen.
  3. Via la liste déroulante Preview, sélectionnez la page de l’extension.
  4. Cliquez n’importe où dans la zone d’affichage de l’extension, ou cliquez sur l’élément Inner Content ou Dynamic Data qui génère le contenu de l’extension.
  5. Dans la barre de gauche, tout en bas, cliquez sur le bouton Style Output pour personnaliser l’extension.

Extension incorporée via un shortcode, widget ou Code Block

Lorsqu’une extension est incorporée à une page à l’aide d’un shortcode, d’un widget ou d’un élément de Code Block, sélectionnez l’élément puis cliquez sur le bouton Style Output en bas de l’onglet Primary afin d’accéder aux styles.

Si aucun bouton Style Output n’est disponible, c’est que le détecteur de sélecteur (Selector Detector ) n’est pas activé.

Greg C. / Ph. Reskator

Besoin d’un complément d’information ? Retrouvez-nous sur le groupe de soutien
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram