Classes utilitárias.

Aprender DXPR BuilderGerir o siteAdaptar à sua marca

Cada elemento tem um campo HTML classes com uma lista de classes nomeadas. Os utilitários do Bootstrap 5 e as sombras estão incluídos de origem. O tema pode adicionar um grupo próprio através do ficheiro .info.yml, e um módulo através de um hook de alteração. Esta página explica o que a lista contém e como registar classes próprias, para os editores escolherem um aspeto da marca pelo nome em vez de escreverem nomes de classes.

Aplicar uma classe

  1. Abra as definições do elemento e encontre HTML classes no fim do painel General.
  2. Clique na caixa e escolha uma classe da lista. Escrever na caixa filtra a lista.
  3. Para introduzir uma classe que não está na lista, clique em Edit as text e escreva-a.
  4. Clique em Save no diálogo e depois em Save na barra de ferramentas do construtor.

As classes vão para o atributo class do elemento no HTML guardado. ID e classes de HTML explica utilizações comuns aos editores.

O que a lista contém

O editor constrói a lista ao arrancar. Junta três fontes, por esta ordem:

  1. A lista incluída. Tem um grupo Drop shadows, um grupo curto Bootstrap classes e os utilitários do Bootstrap 5, agrupados por função: Display & Visibility, Responsive Visibility, Margins, Padding, Text Colors e mais.
  2. Um grupo para cada tema instalado cujo .info.yml tenha uma chave dxpr_builder_classes. O grupo usa o nome do tema como etiqueta.
  3. Alterações de módulos, consulte Registar classes a partir de um módulo.

A lista de classes de HTML aberta no painel General de um elemento Text, deslocada até ao grupo com o nome DXPR Theme com entradas como Inline Form e Background color: DXPR Theme accent1

Assim, cada site tem classes para espaçamento, como mt-3 e px-4, para apresentação, como d-none, e para texto, como text-center e fw-bold. Nada precisa de configurar para elas.

Registar classes num tema

Adicione um mapeamento dxpr_builder_classes ao .info.yml do tema. Cada chave é um nome de classe, ou vários separados por espaços; cada valor é a etiqueta que os editores veem. O DXPR Theme regista as classes assim:

dxpr_builder_classes:
  dxpr-theme-form-inline: 'Inline Form'
  dxpr-theme-util-background-accent1: 'Background color: DXPR Theme accent1'
  dxpr-theme-util-border-accent1: 'Border color: DXPR Theme accent1'

  1. Adicione o mapeamento a themes/custom/mytheme/mytheme.info.yml:

    dxpr_builder_classes:
  brand-card: 'Brand card'
  brand-card shadow-lg: 'Brand card with shadow'

  2. Escreva o CSS das classes numa biblioteca que o tema carrega em todas as páginas; consulte CSS personalizado.

  3. Limpe as caches com drush cr, para o Drupal voltar a ler o ficheiro de informação.

  4. Abra as definições de um elemento e confirme que HTML classes mostra um grupo com o nome do tema e as duas entradas.

Cada tema instalado com a chave adiciona o grupo, não apenas o tema predefinido. O grupo usa sempre o nome do tema; o ficheiro de informação não o pode mudar.

Registar classes a partir de um módulo

Um módulo próprio pode adicionar classes, ou remover classes que um tema registou, com um hook de alteração. Não pode remover as entradas incluídas do Bootstrap, porque o editor adiciona-as no navegador. O código está em Referência da API de hooks.

Versão do Bootstrap

A lista incluída é do Bootstrap 5. Se o tema não carrega o Bootstrap 5, defina Sideload Bootstrap files como Bootstrap 5 em Bootstrap em DXPR Studio > DXPR Builder > General Settings, para as classes terem CSS por trás. Consulte Desempenho para saber o que isso carrega.

Se as classes não aparecem

  • Your theme's group is missing from HTML classes. O Drupal ainda usa a cópia antiga do ficheiro de informação do tema. Clique em Clear all caches em Configuration > Development > Performance (/admin/config/development/performance), ou execute drush cr.
  • A theme with the key adds no group. Só contam os temas instalados. Instale o tema em Appearance (/admin/appearance); não precisa de ser o tema predefinido.
  • The element looks the same after you pick a class. Não há CSS dessa classe carregado na página. Adicione as regras a uma biblioteca que o tema carrega, consulte CSS personalizado. Para classes do Bootstrap, consulte Versão do Bootstrap.

O que se segue?