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.