Aplicación de temas a DXPR Builder.

El contenido del constructor es HTML normal en tu página, así tu tema le da estilo como a cualquier otro contenido. Esta página cubre qué hereda un tema, cómo añade clases al editor, y dónde poner reemplazos.

A qué da estilo tu tema

El contenido publicado del constructor hereda los estilos de tu tema:

• Encabezados, texto del cuerpo y enlaces usan los estilos de tu tema.
• El diseño usa filas y columnas Bootstrap 5, así un tema Bootstrap 5 encaja con él. Con cualquier otro tema, ve a DXPR Studio > DXPR Builder > General Settings y pon Sideload Bootstrap files en Bootstrap 5.
• Cada elemento tiene una clase por tipo, como az-card o az-button, y la mayoría también lleva az-element; consulta Arquitectura CSS.

Añadir clases al editor

En el info.yml del tema

Lista clases en dxpr_builder_classes en el .info.yml de tu tema. Aparecen en la lista HTML classes de cada elemento, en un grupo de opciones con el nombre del tema, mientras el tema está activo:

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

Desde un módulo

Implementa hook_dxpr_builder_classes_alter(). El nombre debe terminar en _alter; consulta API de 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');
}

Estilos de botones

El elemento Button ofrece los estilos Bootstrap Primary, Secondary, Success, Info, Warning, Danger, Link, Light y Dark. La lista es fija en el editor; el hook de carpetas de botones no la cambia. Para dar a los botones el aspecto de tu marca, da estilo a las clases btn-* de Bootstrap en tu tema, o añade tu propia clase con HTML classes.

Reemplazos CSS

Reemplaza la salida del constructor en el CSS de tu tema:

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

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

Ajustes que hace una persona que edita en la pestaña Style se escriben como estilos en línea. Los estilos en línea superan reglas del tema que no usan !important, así usa CSS del tema para valores predeterminados y deja que las personas que editan los reemplacen por elemento.

El editor y tu tema

El editor se ejecuta en la página donde se muestra el campo, así dentro de tu tema de front-end, no el tema admin. Sus barras de controles, menús y diálogos llevan la clase dxpr-builder-ui y cargan su propia hoja de estilo, dxpr_builder_backend.css. Reglas del tema que apuntan selectores amplios como button o .modal aún pueden alcanzarlos; limita tus reglas a tus regiones de contenido para evitarlo.