¿Cómo crear un sub-tema para Drupal?

Drupal es un CMS super potente y muy flexible. Cuenta con muchísimas virtudes, como por ejemplo su escalabilidad, su fuerte seguridad y lo fácil que es de interpretar por los desarrolladores. Habiendo dicho esto, crear un tema en Drupal no es cosa sencilla (comparado con otros CMS como por ejemplo WordPress).

En este artículo no vamos a hablar sobre cómo crear un tema en Drupal. Eso daría para muchísimos artículos que, si nos lo pedís, los llevaremos a cabo. En este tutorial nos queremos centrar en la labor de crear un sub-tema, es decir, crearemos un nuevo tema de un tema existente. ¿Te atrae la idea? Pues sigue leyendo...

¿Qué es un sub-tema?

Un sub-tema es un tema creado en base a un tema que ya existe. Utiliza todos los recursos (css, js, etc.) del tema existente (tema padre), y dependiendo de lo que necesites, podrá tener nuevas funcionalidades. Por ejemplo, imagina que te gusta el tema Bartik (tema que viene por defecto en Drupal 7 y 8). Aún así, te gustaría que el color de fondo y la fuente tipográfica fuese distinta. Para llevar a cabo esta tarea, facilmente puedes crear un sub-tema en cuestión de minutos.

¿Cómo crear un sub-tema?

Como he dicho antes, crear un sub-tema es muy sencillo. Para ello, vamos a llevar a cabo el ejemplo que he comentado antes. Vamos a crear un sub-tema del tema Bartik.

En Drupal, todos los temas se ubican en la carpeta /theme. Crea una carpeta dentro y dale un nombre descriptivo. Por supuesto, debe ser el nombre del sub-tema. Nosotros la llamaremos noprog.

Dentro de la carpeta noprog, crea un fichero llamado noprog.info.yml. Si le has puesto otro nombre a tu carpeta, pues cambia el noprog por el nombre que le hayas dado.

Para crear el sub-tema de Bartik, copia el siguiente código y pégalo en noprog.info.yml y guárdalo.

name: noprog 
type: theme
description: noprog theme, a  sub-theme of Bartik
base theme: bartik
core: '8.x'

libraries:
  - noprog/noprog-styling

ckeditor_stylesheets:
  - css/base/elements.css
  - css/components/captions.css
  - css/components/table.css
  - css/components/text-formatted.css

regions:
header: 'Header'
primary_menu: 'Primary menu'
secondary_menu: 'Secondary menu'
page_top: 'Page top'
page_bottom: 'Page bottom'
highlighted: Highlighted
featured_top: 'Featured top'
breadcrumb: Breadcrumb
content: Content
sidebar_first: 'Sidebar first'
sidebar_second: 'Sidebar second'
featured_bottom_first: 'Featured bottom first'
featured_bottom_second: 'Featured bottom second'
featured_bottom_third: 'Featured bottom third'
footer_first: 'Footer first'
footer_second: 'Footer second'
footer_third: 'Footer third'
footer_fourth: 'Footer fourth'
footer_fifth: 'Footer fifth'

Crea el fichero noprog.libraries.yml en el mismo directorio donde has ubicado el fichero .info.yml. Pega el siguiente código

noprog-styling:
css:
    theme:
      style/test.css: {}

Esto indica a Drupal que debe utilizar el fichero test.css. Este fichero debe estar localizado dentro de la carpeta /style que debe estar dentro de la carpeta de noprog que creamos anteriormente. Del mismo modo, podemos agregar archivos JavaScript adicionales a nuestro sub-tema.

Ahora vamos a crear nuestro fichero test.css donde he mencionado antes (/themes/noprog/style/test.css). Ahí puedes agregar reglas CSS que sobreescribirán a las del tema Bartik. Este es nuestro CSS de prueba:

body {
    font: 18px Tahoma, sans-serif;
    color: white
}
.content {
    background: black;
}