Criação de temas no DXPR Builder.

O conteúdo do construtor é HTML normal na sua página, por isso o seu tema aplica-lhe estilos como a qualquer outro conteúdo. Esta página abrange o que um tema herda, como adiciona classes ao editor e onde colocar substituições.

O que o seu tema estiliza

O conteúdo publicado do construtor herda os estilos do seu tema:

• Títulos, texto de corpo e ligações usam os estilos do seu tema.
• O esquema usa filas e colunas Bootstrap 5, por isso um tema Bootstrap 5 alinha com ele. Com qualquer outro tema, vá a DXPR Studio > DXPR Builder > General Settings e defina Sideload Bootstrap files como Bootstrap 5.
• Cada elemento tem uma classe por tipo, como az-card ou az-button, e a maioria também traz az-element; veja Arquitetura de CSS.

Adicionar classes ao editor

No info.yml do tema

Liste classes em dxpr_builder_classes no .info.yml do seu tema. Elas aparecem na lista HTML classes de cada elemento, num grupo de opções com o nome do tema, enquanto o tema está ativo:

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

A partir de um módulo

Implemente hook_dxpr_builder_classes_alter(). O nome tem de terminar em _alter; veja Referência da 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 botão

O elemento botão oferece os estilos Bootstrap Primary, Secondary, Success, Info, Warning, Danger, Link, Light e Dark. A lista é fixa no editor; o hook das pastas buttons não a muda. Para dar aos botões o aspeto da sua marca, estilize as classes btn-* do Bootstrap no seu tema, ou adicione a sua classe através de HTML classes.

Substituições de CSS

Substitua a saída do construtor no CSS do seu tema:

/* 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);
}

As definições que um editor faz no separador Style são escritas como estilos em linha. Estilos em linha vencem regras do tema que não usam !important, por isso use CSS do tema para predefinições e deixe os editores substituí-las por elemento.

O editor e o seu tema

O editor corre na página onde o campo é mostrado, ou seja dentro do seu tema público, não do tema de administração. As barras de controlos, menus e diálogos do editor trazem a classe dxpr-builder-ui e carregam a folha de estilos própria, dxpr_builder_backend.css. Regras do tema que apontam a seletores genéricos como button ou .modal ainda as alcançam; limite as suas regras às suas regiões de conteúdo para o evitar.