Ahora que ya hemos creado nuestro tipo de contenido LandingPage, es el momento ideal, para comenzar a personalizar su aspecto, en Drupal, el responsable de la presentación gráfica de los contenidos es el Theme o el Subtheme que tengamos instalado. Por defecto, Drupal ya viene con varios themes, disponibles, que podríamos personalizar mediante la interfaz de usuario, pero en nuestro ejercicio, vamos a generar un Subtheme, basándonos en el theme Bootstrap barrio, que hemos descargado previamente, como parte de los requerimientos, que analizamos en el primer capítulo del curso.
Diferencia entre Theme y Subtheme
Como he mecionado antes, el theme es el encargado de la parte gráfica, entonces, ¿por qué no lo activamos y modificamos su código directamente?, es importante que sepas, que NUNCA DEBES MODIFICAR DIRECTAMENTE EL CÓDIGO DE UN THEME O DE UN MÓDULO EN DRUPAL, la razón, es que si haces eso, perderías todos los cambios al actualizar Drupal, ya que en cada actualización, suele repararse fucionalizades fallidas o se optimiza el código, eliminando aquellos fragmentos y funciones desactualizadas.
Por esta razón, cuando quieras realizar personalizaciones en un Theme, debes generar un Subtheme, en el que podrás tener disponibles, la funcionalizades del theme o base theme, y al mismo tiempo, añadir tus propios cambios de CSS o del comportamiento de tus plantillas.
Cómo generar un subtheme Bootstrap barrio desde consola
Paso 1 - Permisos y posición
Lo primero que necesitaremos hacer, antes de poder generar un subtheme, desde la consola, es colocarnos en la carpeta themes, de nuestra instalación de Drupal.
Así, que arrancaremos nuestros contenedores de Docker, si estás siguiendo el curso exactamente como yo, y a continuación, te colocarás en la carpeta donde deberías tener bootstrap_barrio.
Dentro de la carpeta bootstrap_barrio, existe un archivo, con el código que nos permitirá generar el subtheme, pero antes de poder ejecutarlo, debemos asegurarnos de que cuenta con los persmisos necesarios, así que el siguiente paso será añadirlo, utilizando el siguiente código:
chmod +x scripts/create_subtheme.sh
Paso 2 - Generar el subtheme
Una vez hayamos otorgado los permisos al archivo, podremos ejecutar el código que nos generará el subtheme, para ello, sin movernos de dónde estamos, escribiremos el comando:
./scripts/create_subtheme.sh
A continuación, veremos en la consola, una serie de preguntas relacionada con los datos de nuestro subtheme, que deberemos ir completando hasta el final del proceso.
La primera de las preguntas, está relacionada con el nombre_maquina de nuestro subtheme o tema personalizado, tal y como podemos ver en el texto de ejemplo, el nombre puede estar compuesto por una o varias palabras, unidas por un guion bajo. En mi caso, utilizaré landing_theme como nombre para mi subtheme, pero tú puedes utilizar el que prefieras.
Al contestar la primera pergunta, haremos clic y veremos en la pantalla, la siguiente, que está relacionada con el nombre que se añadirá en el archivo .info.yml, y que veremos al entrar al listado de themes disponibles en la url "/admin/appearance", esta vez, podremos escribirlo cómo queramos.
En mi caso, yo utilizaré Landing Page Theme
Si abrimos nuestro proyecto en el navegador y buscamos en la url "/admin/appearance", encontraremos en el apartado de Themes desinstalados, el nuevo subtheme que acabamos de generar desde la consola.
Activación y personalización de configuración
Ahora es el momento de activar el sutheme, comprobar que no hay ningún error en nuestro Drupal, y por ahora, lo único que vamos a modificar de la configuración por defecto es el uso del Contenedor Fluido, para que la cabecera de nuestra LandingPage, ocupe todo el ancho de la pantalla, tal y como se define en la propuesta gráfica.
Ahora que ya tenemos nuestro subtheme activado sin ningún error, es el momento de crear una LandingPage, con todos los datos de prueba, para comenzar con su personalización, una vez hayamos creado este primer contenido, activaremos el modo debug de Drupal, para saber el nombre de la plantilla correspodiente al tipo de contenido y a continuación, comenzaremos a modificarla e ir añadiendo los valores y campos correspondientes, siguiendo nuestra estructura inicial.
Para conocer más acerca de cómo trabajar con Themes y plantillas en Drupal, HAZ CLIC AQUÍ
Para conocer los pasos de activación del modo debug o depurador de Drupal HAZ CLIC AQUI