Bootstrap 4 em Drupal 8/9 com Bootstrap Barrio

Vamos usar o Bootstrap 4 no Drupal 8/9 com o Bootstrap Barrio. O tema Bootstrap Barrio para Drupal 8/9 integra o Bootstrap 4 (ou Bootstrap 5 se você quiser) com o seu site Drupal.

Bootstrap é um framework muito popular para construir sites. Ele fornece aos designers e desenvolvedores uma linguagem comum para se comunicar, tornando o processo de desenvolvimento muito mais fácil.

Criar um subtema do Barrio é um processo simples. Este tutorial irá explorar as opções básicas de configuração do tema, que são gerenciadas através de uma interface gráfica de usuário completa.

Continue lendo para saber como!

Passo #1.- Instale o tema

Antes de começarmos, certifique-se de que seu site tenha pelo menos um artigo, para que você possa fazer uma comparação após alterar as configurações do tema. Coloque também um bloco dentro da barra lateral da região em segundo lugar (Estrutura > Layout do bloco > Colocar bloco).

• Abra a aplicação terminal do seu sistema operativo.
• Coloque o cursor na raiz da sua instalação do Drupal.
• Tipo : compositor requer drupal/bootstrap_barrio

Isso fará o download da versão estável mais recente do tema para: /web/themes/contrib/bootstrap_barrio

Passo # 2.- Crie um subtema

• Coloque o cursor no diretório do tema bootstrap_barrio
• Tipo :

 chmod +x scripts/create_subtheme.sh
 ./scripts/create_subtheme.sh

 chmod +x scripts/create_subtheme.sh
 ./scripts/create_subtheme.sh

Isso tornará o script chamado create_subtheme dentro da pasta de scripts executável e também o executará.

O script solicitará um nome de máquina e um nome descritivo para seu subtema personalizado.

Insira os valores que melhor se adequam a você. Lembre-se que o nome da máquina deve estar em letras minúsculas e não pode conter espaços.

Esta etapa é opcional:

• Abra o diretório do seu subtema (/web/themes/custom/mytheme) em um editor de código
• Substitua todas as instâncias de `Bootstrap Barrio` por `Nome do seu tema`
• Salve todos os arquivos

Aqui, estamos apenas alterando o texto descritivo, portanto, não haveria nenhum problema se você deixasse isso como está.

Passo #3.- As configurações do Bootstrap Barrio

• Clique em Aparência no back-end do seu site Drupal
• Role para baixo até o seu tema personalizado
• Clique em Instalar e defina como padrão

Uma vez que o tema foi instalado,

• Clique no link Configurações do tema

Você verá um grupo de guias verticais no lado esquerdo da tela com as seguintes opções:

1. Layout (guia ativa)
2. Componentes
3. Afixo
4. Espião de rolagem
5. Fontes e ícones
6. Cores

Esquema

Por padrão, a aba `Layout` está ativa. A primeira opção `Container` especifica se os elementos do seu site terão uma largura fixa, ou ao contrário serão exibidos em todo o tamanho da tela. Deixe esta opção intocada até agora.

Dentro da seção `Região`, é possível atribuir classes CSS personalizadas às regiões do site.

• Adicione sua própria classe personalizada a uma região específica

• Feche a seção "Região"
• Abra 'Posição da barra lateral'
• Altere o valor de 'Posição das barras laterais' para a esquerda
• Abra o 'Primeiro layout da barra lateral' e o 'Primeiro layout da barra lateral'
• Altere os valores para 3 cols e 2 cols respectivamente

Componentes

• Clique na guia vertical "Componentes"
• Altere o elemento Button para o formato de estrutura de tópicos
• Marque Aplicar estilo img-fluid a todas as imagens de conteúdo

Isso fará com que as imagens inseridas por meio do botão de imagem do editor de conteúdo sejam responsivas por padrão. A imagem será reduzida para caber no tamanho da tela.

A seção `Estrutura da barra de navegação` trata do tamanho do contêiner da barra de navegação. Você tem que diferenciar entre duas navbars (navbar-top e navbar). Navbar é o menu de navegação principal do seu site.

• Altere a posição da barra de navegação para fundo fixo e a cor do link da barra de navegação para escuro
• Verifique a barra de navegação deslizante na seção `Comportamento da barra de navegação`, para exibir um menu principal deslizante em telas pequenas

As 3 últimas seções da opção de configuração `Componentes` referem-se à posição das mensagens entregues pelo sistema interno de mensagens do Drupal, as abas para tarefas locais (como a aba de edição de conteúdo) e a aparência dos elementos do formulário. Deixe essas opções intocadas.

Afixo

Com o affix, é possível fixar um elemento, ou seja, definir o valor da propriedade position do CSS para fixed.

Espião de rolagem

Scrollspy é usado para atualizar automaticamente os links de um menu de navegação, com base na posição do cursor, ou seja, se você rolar para cima ou para baixo no site. Este tópico será abordado em um tutorial futuro.

Fontes e ícones

Aqui você tem opções para escolher entre diferentes combinações de fontes do Google Fonts para o texto do seu site. Além disso, você pode escolher entre conjuntos de ícones predefinidos para usar em suas postagens.

• Escolha a combinação de fontes e o conjunto de ícones de sua preferência

Cores

Você tem aqui opções para personalizar a cor das mensagens internas do Drupal. Existem opções para customizar as tabelas do site, por exemplo, as geradas com o módulo Views.

Se você continuar rolando para baixo, você encontrará o 'Esquema de cores' para o seu subtema. Você pode personalizar as cores do texto e do plano de fundo das regiões de tema padrão.

Você pode personalizar a cor de cada elemento ao seu gosto e bloqueá-lo, usando o ícone de cadeado.

Exibição do elemento da página, imagem do logotipo e favicon

Estas são opções padrão em todos os temas Drupal.

Carregar biblioteca

Você pode escolher entre várias bibliotecas Bootswatch online prontas para usar para aprimorar a aparência do seu tema com apenas um clique. Vale a pena conferir essas opções.

É possível escolher aqui se você deseja carregar o Bootstrap (Bootstrap CSS e JS) localmente ou via CDN. Esta configuração não deve ser alterada aqui. É muito melhor alterar o código no arquivo .info.yml .

• Clique em Salvar configuração

Dê uma olhada no seu site. Este tutorial não pretende ensinar design de interface do usuário, mas sim explicar as possibilidades disponíveis com o tema Barrio.

No entanto, agora você pode começar com um design e tentar adaptar o tema a ele.

Espero que tenham gostado deste tutorial. Obrigado por ler!