Drupal 8 | Themes y subthemes

Video de Youtube
URL de Video remoto

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

      Llegados a este punto, nos toca ocuparnos del aspecto de nuestro proyecto, para ofrecer una presentación de acuerdo a nuestras expectativas, debemos tomar en cuenta que esta web deberá verse en diferentes dispositivos y que es muy importante prestar atención en todos los detalles para que nada "se rompa" a nivel gráfico cuando el usuario la visite, por ejemplo desde un Ipod. 

     En Drupal, la parte que controla es aspecto de nuestra web está a cargo de los "Temas" o "Themes", que son el conjunto de archivos necesarios para realizar este tipo de configuración.

Curso Drupal 8 | www.drupaladicto.com - Consultor especializado en Drupal y Symfony

     Drupal ofrece desde su Página Oficial, la posibilidad de descargar toda clase de Temas, para que podamos utilizarlos y modificarlos, según las necesidades del proyecto. Hoy en día, debido al aumento del uso de dispositivos móviles, es prácticamente obligatorio, diseñar webs que sean adaptables a cualquiera de estos dispositivos, esto es conocido como diseño "Responsivo" o "Responsive".

     Dentro de las alternativas gratuitas, disponibles para Drupal, está el Theme Mayo, que ofrece una alternativa relativamente muy sencilla, de implementar una web con diseño responsivo, sin la necesidad de manipular nada de código.

     Su configuración al completo se hace a través de la interfaz de Drupal, donde una vez descargado e instalado, sólo nos faltará personalizarlo mediante unos cuantos clics, hasta obtener el resultado que andamos buscando o al menos el más aproximado a éste.

 

Curso Drupal 8 | www.drupaladicto.com - Consultor especializado en drupal y symfony

     Para trabajar con módulos o temas en Drupal, pueden emplearse varios métodos, aunque a partir de la versión 8, se recomienda el uso del gestor de paquetes Composer, porque nos facilitará todos los procesos de instalación, descarga y dependencias; en este caso, voy a enseñarte la forma tradicional, hacemos clic derecho sobre el en enlace comprimido del archivo y seleccionaremos copiar enlace.

 

Curso Drupal 8 | www.drupaladicto.com - Consultor especializado en drupal y symfony

     Luego nos iremos a Drupal, en la url "/admin/appearance", donde seleccionaremos la opción Instalar nuevo tema. Si ya tienes instalado el módulo Admin Toolbar, podrás hacerlo tal y como se muestra en la imagen.

 

Curso Drupal 8 | www.drupaladicto.com - Consultor especializado en drupal y symfony

     A continuación, pegaremos en la siguiente pantalla, la url que hemos copiado y haremos clic en el botón Instalar.

 

Curso Drupal 8 | www.drupaladicto.com - Consultor especializado en Drupal y Symfony

     Una vez terminado el proceso de instalación del Theme, podremos activarlo llendo a la url "/admin/appearance", donde se muestran todos los Themes disponibles para su activación, además de los que están activados actualmente y el Theme que utiliza drupal para su interfaz de administración.

     Si nos desplazamos a la parte inferior de esta pantalla, encontraremos el Theme Mayo, dentro del listado de Themes Desinstalados, y podremos Instalarlo como Theme principal haciendo clic en el enlace debajo de su imagen.

 

Curso Drupal 8 | www.drupaladicto.com - Consultor especializado en Drupal y Symfony

     Después de activar el Theme, es recomendable que Vaciemos la Cache de Drupal para que podamos ver todos los cambios ejecutados en nuestro proyecto.

     Si nos vamos a la página principal de nuestro proyecto, podremos comprobar el cambio inmediatamente, además de validar el aspecto que se mostrará en dispositivos de varios tamaños.

 

Curso Drupal 8 | www.drupaladicto.com - Consultor especializado en Drupal y Symfony

     Otra opción con la que contamos para personalizar el aspecto de nuestras webs de Drupal, es el Theme Bootstrap, en este caso, específicamente hemos optado por, crear nuestro propio tema personalizado o Subtheme, tomando como base, el Theme Bootstrap Barrio, ya que además de heredar las características del Bootstrap 4 original, permite la aplicación de varias configuraciones mediante la interfaz, como hicimos con el Theme Barrio.

 

Curso Drupal 8 | www.drupaladicto.com - Consultor especializado en Drupal y Symfony

     Esta vez, para trabajar con la creación y configuración de nuestro Subtheme, utilizaremos el gestor de paquetes Composer, que comentábamos al principio de este artículo.

     Para realizar esta clase de operaciones, abriremos la consola y, una vez colocados dentro de la carpeta de nuestro proyecto, podremos ejecutar el siguiente comando para que comience la descarga de los archivos que vamos a utilizar:

 

Curso Drupal 8 | www.drupaladicto.com - Consultor especializado en Drupal y Symfony

     Siempre que utilicemos el gestor de paquetes Composer para descargar nuestros Themes o Módulos, creará automáticamente, si no existe, una carpeta llamada Contrib, referente a módulos o Themes contribuidos de Drupal. De esta forma mantiene separados los módulos y Themes, cuyo contenido no deberíamos modificar nunca directamente, del resto de módulos y Themes creados a partir de ellos y modificados por nosotros.

 

Curso Drupal 8 | www.drupaladicto.com - Consultor especializado en Drupal y Symfony

     A continuación, nos dirigiremos a la Página Oficial de Bootstrap Barrio, para leer y seguir los pasos necesarios en la creación del Subtheme.

 

Curso Drupal 8 | www.drupaladicto.com - Consultor especializado en Drupal y Symfony

     Después de copiar los datos en el archivo create_subtheme.sh y seguir el resto de los pasos descritos en su página oficial, tendremos que llamar al archivo desde nuestra consola para que genere todos los demás componentes necesarios en nuestro nuevo Subtheme.

 

Curso Drupal 8 | www.drupaladicto.com - Consultor especializado en Drupal y Symfony

     En el momento en que termina la ejecución del archivo llamado desde nuestra consola, si volvemos a las carpetas de Drupal, dentro de la Carpeta "themes/contrib", podremos ver nuestro Subtheme listo para ser activado, desde url "/admin/appearance", tal y como hicimos anteriormente con el Theme Mayo.

     Encontraremos en la parte inferior de la pantalla, todos los themes disponibles para ser utilizados en nuestro proyecto y, dentro del listado de Themes desinstalados, estará, si todo ha ido bien, nuestro Theme personalizado.

 

Curso Drupal 8 | www.drupaladicto.com - Consultor especializado en Drupal y Symfony

     Ahora podrás comprobar que tu nuevo Subtheme, además de tener diseño Responsivo, te brinda la posibilidad de personalizarlo al completo, para darle un aspecto funcional, práctico y novedoso a tus proyectos en Drupal.

 

Curso Drupal 8 | www.drupaladicto.com - Consultor especializado en Drupal y Symfony