Bootstrap 4 en Drupal 8/9 con Bootstrap Barrio

Vamos a usar Bootstrap 4 en Drupal 8/9 con Bootstrap Barrio. El tema Bootstrap Barrio para Drupal 8/9 integra Bootstrap 4 (o Bootstrap 5 si lo desea) con su sitio Drupal.

Bootstrap es un marco muy popular para crear sitios web. Proporciona a los diseñadores y desarrolladores un lenguaje común para comunicarse, lo que facilita mucho el proceso de desarrollo.

Crear un subtema de Barrio es un proceso sencillo. Este tutorial explorará las opciones básicas de configuración del tema, que se administran a través de una interfaz gráfica de usuario completa.

¡Sigue leyendo para aprender cómo!

Paso #1.- Instala el tema

Antes de comenzar, asegúrese de que su sitio tenga al menos un artículo, para que pueda hacer una comparación después de cambiar la configuración del tema. Coloque también un bloque dentro de la barra lateral de la región en segundo lugar (Estructura> Diseño de bloque> Colocar bloque).

• Abre la aplicación terminal de tu sistema operativo.
• Coloque el cursor en la raíz de su instalación de Drupal.
• Tipo : compositor requiere drupal/bootstrap_barrio

Esto descargará la última versión estable del tema a: /web/themes/contrib/bootstrap_barrio

Paso #2.- Crear un Subtema

• Coloque el cursor en el directorio del tema bootstrap_barrio
• Tipo :

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

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

Esto hará que el script llamado create_subtheme dentro de la carpeta de scripts sea ejecutable, y también lo ejecutará.

El script le pedirá un nombre de máquina y un nombre descriptivo para su subtema personalizado.

Introduzca los valores que más le convengan. Recuerde que el nombre de la máquina debe estar en minúsculas y no puede contener espacios.

Este paso es opcional:

• Abra el directorio de su subtema (/web/themes/custom/mytheme) en un editor de código
• Reemplace todas las instancias de `Bootstrap Barrio` con `Nombre de su tema`
• Guardar todos los archivos

Aquí, solo estamos cambiando el texto descriptivo, por lo que no habría ningún problema si dejara esto como está.

Paso # 3.- La configuración de Bootstrap Barrio

• Haga clic en Apariencia en el backend de su sitio Drupal
• Desplácese hacia abajo hasta su tema personalizado
• Haga clic en Instalar y establecer como predeterminado

Una vez instalado el tema,

• Haga clic en el enlace Configuración del tema

Verá un grupo de pestañas verticales en el lado izquierdo de la pantalla con las siguientes opciones:

1. Diseño (pestaña activa)
2. Componentes
3. Afijo
4. Espía de desplazamiento
5. Fuentes e iconos
6. Colores

Disposición

Por defecto, la pestaña `Diseño` está activa. La primera opción `Contenedor` especifica si los elementos de su sitio tendrán un ancho fijo, o por el contrario se mostrarán en todo el tamaño de la pantalla. Deje esta opción intacta por ahora.

Dentro de la sección `Región`, es posible asignar clases de CSS personalizadas a las regiones del sitio.

• Agregue su propia clase personalizada a una región en particular

• Cerrar la sección `Región`
• Abrir `Posición de la barra lateral`
• Cambie el valor de `Posición de las barras laterales` a Izquierda
• Abra 'Primer diseño de la barra lateral' y 'Primer diseño de la barra lateral'
• Cambie los valores a 3 cols y 2 cols respectivamente

Componentes

• Haga clic en la pestaña vertical `Componentes`
• Cambiar el elemento Botón al formato de esquema
• Marque Aplicar estilo img-fluid a todas las imágenes de contenido

Esto hará que las imágenes que insertes a través del botón de imagen del editor de contenido respondan por defecto. La imagen se reducirá para adaptarse al tamaño de la pantalla.

La sección `Estructura de la barra de navegación` se ocupa del tamaño del contenedor de la barra de navegación. Debe diferenciar entre dos barras de navegación (navbar-top y navbar). La barra de navegación es el menú de navegación principal de su sitio.

• Cambie la posición de la barra de navegación a Fondo fijo y el color del enlace de la barra de navegación a Oscuro
• Marque Barra de navegación deslizante en la sección "Comportamiento de la barra de navegación", para mostrar un menú principal deslizante en pantallas pequeñas

Las 3 últimas secciones de la opción de configuración `Componentes` se refieren a la posición de los mensajes entregados por el sistema de mensajes interno de Drupal, las pestañas para las tareas locales (como la pestaña de edición de contenido) y la apariencia de los elementos del formulario. Deje estas opciones intactas.

Afijo

Con afijo, es posible fijar un elemento, es decir, establecer el valor de la propiedad de posición de CSS en fijo.

Desplazamiento

Scrollspy se utiliza para actualizar automáticamente los enlaces de un menú de navegación, según la posición del cursor, es decir, si se desplaza hacia arriba o hacia abajo en el sitio. Este tema se tratará en un tutorial futuro.

Fuentes e iconos

Aquí tienes opciones para elegir entre diferentes combinaciones de fuentes de Google Fonts para el texto de tu sitio. Además, puede elegir entre conjuntos de iconos predefinidos para usar en sus publicaciones.

• Elija la combinación de fuentes y el conjunto de iconos de su agrado

Colores

Aquí tienes opciones para personalizar el color de los mensajes internos de Drupal. Hay opciones para personalizar las tablas del sitio, por ejemplo, las generadas con el módulo Vistas.

Si continúa desplazándose hacia abajo, encontrará el `Esquema de colores` para su subtema. Puede personalizar el texto y los colores de fondo de las regiones temáticas predeterminadas.

Puedes personalizar el color de cada elemento a tu gusto y bloquearlo, usando el icono de candado.

Visualización de elementos de página, imagen de logotipo y Favicon

Estas son opciones predeterminadas en todos los temas de Drupal.

Cargar biblioteca

Puede elegir entre múltiples bibliotecas de Bootswatch listas para usar en línea para mejorar la apariencia de su tema con solo un clic. Vale la pena revisar estas opciones.

Es posible elegir aquí si desea cargar Bootstrap (Bootstrap CSS y JS) localmente o mediante un CDN. Esta configuración no debe modificarse aquí. Es mucho mejor cambiar el código en el archivo .info.yml .

• Haga clic en Guardar configuración

Eche un vistazo a su sitio. Este tutorial no pretende enseñarle el diseño de la interfaz de usuario, sino explicar las posibilidades disponibles con el tema Barrio.

Sin embargo, ahora puedes partir de un diseño e intentar adaptar el tema a él.

Espero que les haya gustado este tutorial. ¡Gracias por leer!