Thémer DXPR Builder.

Le contenu du constructeur est du HTML ordinaire dans votre page : votre thème le met en forme comme tout autre contenu. Cette page explique ce qu’un thème hérite, comment il ajoute des classes à l’éditeur et où placer les surcharges.

Ce que votre thème met en forme

Le contenu publié du constructeur hérite des styles de votre thème :

• Les titres, le texte courant et les liens utilisent les styles de votre thème.
• La mise en page utilise des lignes et des colonnes Bootstrap 5, donc un thème Bootstrap 5 s’aligne avec elle. Avec tout autre thème, allez dans DXPR Studio > DXPR Builder > General Settings et réglez Sideload Bootstrap files sur Bootstrap 5.
• Chaque élément a une classe par type, comme az-card ou az-button, et la plupart portent aussi az-element ; voir Classes dans le balisage enregistré.

Ajouter des classes à l’éditeur

Dans le fichier info.yml du thème

Listez les classes sous dxpr_builder_classes dans le fichier .info.yml de votre thème. Elles apparaissent dans la liste HTML classes de chaque élément, dans un groupe d’options nommé d’après le thème, tant que le thème est activé :

# mytheme.info.yml
dxpr_builder_classes:
  brand-header: 'Brand header style'
  brand-cta: 'Call to action style'
  bg-gradient-primary: 'Primary gradient background'

Depuis un module

Implémentez hook_dxpr_builder_classes_alter(). Le nom doit se terminer par _alter ; voir Référence de l’API des hooks.

/**
 * Implements hook_dxpr_builder_classes_alter().
 */
function mymodule_dxpr_builder_classes_alter(&$classes) {
  $classes['optgroup-custom'] = t('Custom Styles');
  $classes['custom-card'] = t('Custom card');
  $classes['custom-hero'] = t('Custom hero');
}

Styles de boutons

L’élément Bouton propose les styles Bootstrap Primary, Secondary, Success, Info, Warning, Danger, Link, Light et Dark. La liste est figée dans l’éditeur ; le hook des dossiers de boutons ne la modifie pas. Pour donner à vos boutons l’aspect de votre marque, personnalisez les classes btn-* de Bootstrap dans votre thème, ou ajoutez votre propre classe via HTML classes.

Surcharges CSS

Surchargez le rendu du constructeur dans le CSS de votre thème :

/* Section padding */
.az-section {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

/* Card shadows */
.az-card {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

Les réglages qu’un rédacteur fait dans l’onglet Style sont écrits comme styles en ligne. Les styles en ligne l’emportent sur les règles du thème qui n’utilisent pas !important : utilisez donc le CSS du thème pour les valeurs par défaut et laissez les rédacteurs les surcharger par élément.

L’éditeur et votre thème

L’éditeur s’exécute sur la page où le champ est affiché, donc dans votre thème frontal, pas dans le thème d’administration. Ses barres de contrôle, menus et boîtes de dialogue portent la classe dxpr-builder-ui et chargent leur propre feuille de style, dxpr_builder_backend.css. Les règles du thème qui ciblent des sélecteurs larges comme button ou .modal peuvent quand même les atteindre ; limitez vos règles à vos régions de contenu pour éviter cela.