Si no ves el video, puedes refrescar el navegador, presionando (Ctrl+Shift+R | Ctrl+F5 o Shift+F5), o abrirlo directamente desde el Canal de Youtube... HAZ CLIC AQUI

      A pesar de que Bootstrap ha evolucionado considerablemente en los últimos años, mejorando su implementación, así como ampliando las opciones disponibles, para facilitar el diseño de páginas web que puedan adaptarse a todos los dispositivos, todavía existen en el mercado muchas webs que funcionan perfectamente con la implementación de la versión 3 de Bootstrap.

Por esta razón, en este artículo te voy a contar cómo crear un Subtema o tema personalizado, utilizando Bootstrap 3 para tu web de Drupal 9. Aunque también podrás implementarlo de la misma forma en cualquier proyecto Drupal 8.

Descarga y Activación:

Para descargar y activar cualquier módulo de Drupal tienes varias opciones:

     Descarga:

          1.- La forma recomendada a partir de Drupal 8, es utilizando el gestor de paquetes Composer, ejecutando en tu consola el comando:

composer require drupal/bootstrap

          2.- Descargándolo manualmente el módulo desde la página oficial del Módulo Gutenberg y una vez descargado y colocado en carpeta "modules/contrib", si haz descargado todos tus módulos manualmente, deberías crear la carpeta "contrib", para que puedas diferenciar entre tus módulos personalizados y los que están disponibles directamente en la Página oficial de Drupal.
 

     Activación:

          1.- Utilizando la herramienta de consola Drush, la opción "-y" activará todos los sub-modulos automáticamente

drush en bootstrap -y

Cómo crear un subtema basado en Bootstrap 3

     Paso 1: Copiar el modelo starterkits

     Una vez descargado el Tema Bootstrap 3, tendremos que ir a la carpeta llamada starterkits y dentro encontraremos la carpeta que nos servirá como modelo para crear un subtema con todas las características heredadas, llamada "THEMENAME".

     Copiaremos esta carpeta y la colocaremos al mismo nivel del tema principal, dentro de la ubicación "themes/custom". 

     Si no tienes la carpeta custom creada, deberías crearla para facilitar la organización de tu código, separando los módulos y temas contribuidos, de los que son diseñados o modificados por ti.

     Paso 2: Sustituir la palabra THEMENAME por el nombre de tu Subtema.

     Ahora que ya tienes la carpeta modelo llamada "THEMENAME", copiada dentro de la ubicación "themes/custom", tendrás que sustituir esta palabra en todos los archivos, tanto en el nombre como en su interior, donde esté presente.

     Te recomiendo que empieces una por una, desde la parte superior, y vayas comprobando el interior de cada archivo al que le hayas cambiado el nombre, antes de continuar con los demás cambios.

     Si no sustituyes el nombre en todos los archivos necesarios o en su interior, es posible que no puedas activar el subtema o te falle una vez activado. Tómate el tiempo que necesites para renombrarlo todo, antes de activar el tema.

     IMPORTANTE!!!

     Cuando estés renombrando todos los archivos dentro de la carpeta "THENENAME", presta especial atención en el llamado: "THEMENAME.starterkit.yml", ya que en este, además de sustituir la palabra "THENENAME", deberás sustituir "starterkit" por info, quedando el nombre completo del archivo, por ejemplo "drupadicto.info.yml", y luego asegúrate, como en el resto de archivos, de renombrar en su interior.

     Paso 3: Activación y configuración del tema

      En el momento en que ya tengas sustituido el nombre en todos los archivos correspondientes, podrás activar el tema para que sea el predeterminado en tu proyecto Drupal 9. 

     Para ello, tendrás que dirigirte a la url "/admin/appearance", donde encontrarás el listados de todos los temas disponibles, activados o no.

     Si te vas a la parte inferior, encontrarás los temas desinstalados, donde uno de ellos debería ser el tuyo. De lo contrario, vuelve a revisar tus archivos, porque te habrá faltado algún lugar dónde sustituir el nombre adecuadamente y por eso no te lo reconoce Drupal.

     Finalmente, cuando hayas activado tu Subtema, podrás realizar varias configuraciones, específicas según tus necesidades, desde las pestañas de la parte superior izquierda, que aparecerán al hacer clic en configuración, justo al lado de la imagen de tu tema.

    Entre estas configuraciones, cabe destacar la posibilidad de seleccionar del listado de "Diseños predefinidos", para facilitar un cambio de aspecto rápido, vistoso y además responsive para tu web.

Si no ves el video, puedes refrescar el navegador, presionando (Ctrl+Shift+R | Ctrl+F5 o Shift+F5), o abrirlo directamente desde el Canal de Youtube... HAZ CLIC AQUI

     Bootstrap sigue siendo una de las mejores alternativas, al momento de maquetar webs responsivas, ya que no necesitas tener conocimientos avanzados, para lograr maquetar de manera rápida, atractiva y funcional cualquier proyecto web.

     Al combinar las características y funcionalidades con Drupal, con Bootstrap, podrás realizar casi cualquier tipo de proyecto web, sin invertir demasiado tiempo, en añadirle una apariencia que cumpla con todos los estándares necesarios actualmente, para que obtengas los mejores resultados a nivel de la experiencia de usuario, posicionamiento, etc.

     En este tutorial, te explicaré todo lo que necesitarás acerca de la instalación del tema Bootstrap 5 y de cómo puedes generar, un subtema o tema personalizado para tus proyectos de Drupal 9 o superiores, sin tener que avandonar la interfaz de usuario de Drupal.

   Requerimientos:

• Tener un proyecto de Drupal 9 o superior funcionando.
• Tener acceso a la consola.
• Tener la posibilidad de ejecutar Composer, para la descarga e instalación de temas y módulos.

   Descarga e instalación de Bootstrap 5 para Drupal.

     Paso 1 - Descarga del Theme Bootstrap 5

        Una vez tengamos nuestro proyecto de Drupal 9 en funcionamiento, lo próximo será visitar la Página Oficial de Bootstrap 5, y a continuación, copiaremos el comando de instalación, para pegarlo y ejecutarlo en nuestra consola.     

      Una vez terminada la descarga, podrás comprobar que se han descargado todos los archivos necesarios, visitando en tu proyecto Drupal 9, la carpeta ubicada en "/web/themes/contrib", con el nombre bootstrap5.

   Paso 2 - Instalación del tema base

     Para poder generar el subtheme basado en Bootstrap 5, primero tendremos que activarlo. Para ello, nos dirigiremos a la página de configuración de los Themes en Drupal, ubicada en la url "/admin/appearance", donde veremos el listado de los módulos descargados, instalados y no instalados.

     Como sólo queremos instalar el Theme Bootstrap 5, porque lo necesitamos para generar el Subtheme, nos desplazaremos en la misma pantalla, hasta encontrarlo en el listado de módulos desinstalados y haremos clic en la opción Activar.

   Paso 3 - Generar el Subtheme o Tema personalizado

     La mayor ventaja, con respecto a otras versiones anteriores de Bootstrap para Drupal, es la opción de generar el Subtheme, sin la necesidad de avandonar la interfaz de usuario, ni ejecutar código a nivel de la consola, como require cuando trabajamos con Bootstrap Barrio.

     Para generar un Subtheme, haremos clic en el enlace de configuración, de Bootstrap 5, nos desplazaremos hasta el final de la página y buscaremos la pestaña llamada Subtheme, una vez desplegada la pestaña, podremos ver las opciones relacionadas con la ubicación, el nombre del subtheme y el nombre del sistema o nombre máquina.

   Paso - Comprobación

     Tan pronto como hayamos hecho clic en el botón Crear, se generarán los archivos de nuestro Subtheme, en la ubicación detallada al principio de la pestaña, es decir, dentro de "themes/custom"; si abrimos los archivos del proyecto, podremos verificar, que efectivamente, tendremos una carpeta con el nombre del subtheme y todos los archivos para su funcionamiento, una vez se haya activado.

     Para activar el nuevo Subtheme, solo tendremos que volver a la página de configuración, ubicada en "/admin/appearance", donde esta vez, encontraremos el recién generado subtheme, con todas las opciones de su tema base, donde podremos configurarlo y, además, añadir otras opciones específicas, disponibles en la pantalla de configuración de éste.

     Una vez tengamos añadidas todas las personalizaciones adicionales, podremos volver a nuestra página principal y comprobaremos dichos cambios.

     También podremos agregar más cambios, a través de los archivos CSS o Sass, que se han generado durante el proceso.

     Si quieres saber cómo trabajar con los Themes y Subthemes en Drupal, tienes disponbile este curso gratuito, donde he recopilado los principales videos y documentación relacionada, para que puedas profundizar, de forma rápida y aplicar lo aprendido en tus proyectos:

     Para acceder al curso, HAZ CLIC AQUI