Pasar al contenido principal

Cómo Crear un Subtema en Drupal 8

Enviado por Jorge Montoya el Dom, 12/07/2020 - 10:58

Los subtemas heredan los recursos de su tema padre. Si quieres construir tu sitio con Bartik, el cual es el tema por defecto en una instalación de Drupal, deberás crear un subtema. De esa forma, puedes sobre-escribir el código CSS, JS o las plantillas en el subtema, sin tener que preocuparte sobre perder esos cambios al momento de actualizar el tema padre.

¡Sigue leyendo para aprender cómo!

Paso #1.- Crear la Estructura de Archivo Básica

para poder crear un subtema en Drupal, solo necesitas 2 archivos:

  • mi_subtema.info.yml
  • mi_subtema_libraries.yml

Estos archivos deben estar ubicados en un directorio llamado mi_subtema dentro del directorio themes de tu instalación Drupal.

Crear un subtema en Drupal 8

 

Aquí tienes dos posibilidades:

  • /themes/mi_subtema/
  • /themes/custom/mi_subtema

Drupal localizará el tema de cualquier forma.

  • Crea una carpeta llamada bartikssen dentro del directorio themes de tu instalación Drupal.
  • Crea 2 archivos vacíos dentro de este directorio llamados:
    • bartikssen.info.yml
    • bartikssen.libraries.yml

Lo único que debes saber sobre archivos .yml (YAML) por ahora, es que son cool por ser fáciles de entender para los humanos y pueden ser utilizados para "mapear" y representar datos.

Crear un subtema en Drupal 8

 

Paso #2.- Herencia de Tema

Como ya sabes, la ventaja de un subtema es básicamente que puedes utilizar todas las características de un tema funcional por completo (codificado sin costo monetario por alguna o algunas amables personas) y arreglarlo a tu gusto con tu propio CSS, JS o con modificaciones a las plantillas.

  • Abre themes/bartikssen/bartikssen.info.yml en tu editor de texto favorito.
  • Abre core/bartik/bartik.info.yml.
  • Selecciona el contenido de las líneas 14-47 de bartik.info.yml (versión Drupal 8.8.5).
  • Copia y pega este código en bartikssen.info.yml
  • Cierra bartik.info.yml
Crear un subtema en Drupal 8
  • Selecciona las líneas 10-14 (ckeditor_stylesheets) y bórralas.
  • Selecciona la línea 5 (package) y bórrala.
  • Descomenta la línea ‘version’
  • Cambia los valores de acuerdo a la imagen a continuación.
  • Guarda bartikssen.info.yml
Crear un subtema en Drupal 8

 

Algo que se debe anotar aquí es que pudiste haber dejado las regiones por fuera de este archivo y Drupal hubiera asignado las regiones que tiene el sistema por defecto. Ahora puedes trabajar con todas las regiones disponibles en Bartik en tu propio tema, puedes borrar algunas de ellas y trabajar con las regiones restantes o puedes incluso adicionar más regiones de las disponibles en Bartik a tu propio tema (las regiones disponibles en Bartik son más que suficientes, para ser sincero).

Nota además que el tema base de Bartikssen es Bartik, mientras que el tema base de Bartik es Classy. Eso quiere decir que Bartikssen es un subtema de un subtema.

Como puedes ver, se ha declarado una librería llamada global-styling dentro del archivo info.yml. Esta librería debe ser incluida en el archivo de librerías.

  • Abre bartikssen.libraries.yml
  • Copia y pega este código:
global-styling:
  version: 1.x
  css:
    theme:
      css/style.css: {}
  js:
    js/script.js: {}

Ten presente que el sangrado de líneas es un aspecto clave en los archivos .yml, así que conserva la indentación como se muestra en el código de ejemplo.

Crear un subtema en Drupal 8

 

Paso #3.- El Código CSS y JavaScript

Aún debemos crear la estructura de archivos y directorios para el código CSS y JavaScript.

  • Crea un directorio llamado css y ubica un archivo vacío llamado style.css dentro del mismo.
  • Crea un directorio llamado js y ubica un archivo vacío llamado script.js dentro del mismo.
Crear un subtema en Drupal 8

 

Crear un subtema en Drupal 8

 

Paso #4.- Activar el Subtema

  • Clic sobre Apariencia
  • Desplázate hacia abajo y encuentra Bartikssen.
  • Clic sobre Instalar y seleccionar de modo predeterminado.
Crear un subtema en Drupal 8
  •  Clic sobre la pestaña de configuraciones.
  • Selecciona la pestaña de Bartikssen en el segundo nivel.
  • Carga una imagen de logotipo.
  • Clic sobre Guardar configuración.
Crear un subtema en Drupal 8

 

Paso #5.- Añadir Estilos CSS a un Subtema en Drupal

  • Abre style.css.
  • Copia y pega este código:
body {
    font-family: sans-serif;
    color: #616161;
}

h1 {
  color: #616161;
}

#header,
.sidebar {
    background-color: darkslategray;
    background-image: none;
}
  •  Guarda el archivo.
  • Clic sobre Configuración > Rendimiento.
  • Clic sobre Vaciar todas las cachés.
  • Ve a la página de inicio de tu sitio.
Crear un subtema en Drupal 8

 

¡Felicidades! Haz creado un subtema de Bartik. Con la misma lógica podrías crear por ejemplo 2 subtemas de Bartikssen llamados Bartikgrandssen_1 y Bartkgrandssen_2 y personalizarlos a tu gusto. Esa es la muy conocida flexibilidad de Drupal.

Por cierto, este mismo proceso aplica para crear un subtema de cualquier otro tema en Drupal.

Para saber más acerca de subtemas revisa aquí.

Si quieres leer más acerca de las regiones por defecto en Drupal, en caso de no definirlas en el archivo .info, revisa esta página.

Espero que te haya gustado este tutorial. ¡Gracias por leer!

Añadir nuevo comentario

HTML Restringido

  • Etiquetas HTML permitidas: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Saltos automáticos de líneas y de párrafos.
  • Las direcciones de correos electrónicos y páginas web se convierten en enlaces automáticamente.

Puntos clave