Estilizar conteúdo do construtor com o CSS do tema.

Learn DXPR BuilderManage the siteJe huisstijl toepassen

O conteúdo do DXPR Builder faz parte da página que o tema apresenta, por isso o CSS do tema formata-o no editor e na página publicada. Use esta página quando um aspeto deve repetir-se em muitos elementos ou páginas, ou quando as definições de elemento não o produzem. Termina com uma folha de estilos no tema e uma classe que os editores podem aplicar. Para um elemento, use o diálogo de definições.

Antes de começar

  • Precisa de acesso aos ficheiros do tema e de uma forma de os implementar.
  • Use um tema personalizado ou um subtema. Uma atualização de um tema contribuído substitui os ficheiros, e o CSS com eles.

Configuração

  1. Crie css/custom.css na pasta do tema, por exemplo themes/custom/mytheme/css/custom.css.

  2. Declare o ficheiro em mytheme.libraries.yml:

    global-styling:
  css:
    theme:
      css/custom.css: {}

  3. Carregue a biblioteca em cada página a partir de mytheme.info.yml:

    libraries:
  - mytheme/global-styling

  4. Escreva uma regra para um nome de classe próprio:

    .brand-hero {
  background: linear-gradient(135deg, #1a4d8f, #0f2a4d);
  color: #ffffff;
}

  5. Limpe a cache em Configuration > Development > Performance (/admin/config/development/performance) com Clear all caches, ou execute drush cr.

  6. No construtor, abra as definições de uma Section e adicione brand-hero em HTML classes. ID e classes de HTML mostra como escrever uma classe própria.

Os editores também podem escolher a classe na lista HTML classes quando o tema a enumera lá; consulte Classes utilitárias.

O que vê

A secção assume o gradiente e o texto branco assim que adiciona a classe, porque o editor corre na página que o tema apresenta. Os visitantes veem o mesmo após guardar a página. A classe fica guardada no HTML da página, por isso mudar a regra mais tarde atualiza cada elemento que a tem.

Classes que o DXPR Builder escreve

A classe própria é o alvo mais seguro. Estas classes também estão no HTML guardado:

Selector Matches
.az-container o invólucro de cada campo do DXPR Builder; também tem .dxpr-editor enquanto alguém o edita
.az-section cada Section; dentro fica um .container, ou .container-fluid quando Full width está ligado
.row cada Row; o DXPR Builder usa a classe própria do Bootstrap e não adiciona az-row
.col-* cada coluna, por exemplo .col-12.col-md-6; não há az-column
.az-text, .az-image, .az-button, .az-card um tipo de elemento: az- mais o nome do elemento, como .az-separator para o Divider
.az-element a maioria dos elementos de conteúdo, mas não Image, Icon ou Button

O painel Style escreve atributos style em linha, que vencem uma regra de classe na mesma propriedade. As classes utilitárias do Bootstrap estão marcadas com !important e vencem ambas.

Se o estilo não aparece

  • The class is on the element, but nothing changes. A biblioteca não está carregada, ou a cache ainda guarda o CSS antigo. Verifique que mytheme.info.yml enumera a biblioteca e limpe as caches em /admin/config/development/performance.
  • Only some properties apply. Um valor do painel Style na mesma propriedade vence. Limpe esse valor no painel Style do elemento, ou mova todo o aspeto para a classe.
  • The style shows in the editor but not for visitors. Apply text format filters to frontend content está ligado, e o formato de texto do campo remove atributos class. Desligue-o em Text Filters em /admin/dxpr_studio/dxpr_builder/settings, ou permita classes no formato.
  • A rule for .az-row or .az-column never matches. O DXPR Builder não escreve essas classes. Aponte para .row, as classes .col-* ou a classe própria.

O que se segue?