Definiendo un archivo .info.yml para nuestro tema en drupal 8

Para empezar a desarrollar un tema en drupal 8 necesitas crear un archivo NOMBRETEMA.info.yml que provee meta etiquetas que permiten hacer saber a drupal de tu tema (theme). Esto es algo similar a como los archivos para modulos y perfiles de instalacion son definidos, por lo cual es necesario establecer la clave (key) llamada 'type' (tipo) en el archivo .info.yml para diferenciar al tema.

Te daremos una muestra de ejemplo de este archivo y una introduccion a lo que contiene este archivo.

Crea un archivo .info.yml

Crea un archivo .info.yml en la raiz de tu tema. En drupal 8 los temas que desarrolles los debes colocar en esta estructura:

  |-core
  |  |-modules
  |  |-themes
  |  |  |-bartik
  |  |  |-seven
  ..
  |-modules
  |-themes
  |  |-contrib
  |  |  |-zen
  |  |  |-basic
  |  |  |-bluemarine
  |  |-custom (Aqui podrias crear tu nuevo tema)
  |  |  |-tema_personalizado

El tema (theme) que vamos a crear en este ejemplo se llamara tema_personalizado. El nombre del archivo .info.yml debera tener el mismo nombre que el directorio de nuestro tema, en nuestro caso sera tema_personalizado.info.yml. Luego de agregar este archivo el tema deberia ser listado en la administracion de drupal 8. La ruta para ver los temas disponibles es la siguiente: http://example.com/admin/appearance.

Este es el archivo tema_personalizado.info.yml

name: Tema Personalizado
type: theme
description: Tema personalizado para drupal 8.
core: 8.x
libraries:
  - tema_personalizado/global-styling
stylesheets-remove:
  - '@classy/css/components/tabs.css'
  - core/assets/vendor/normalize-css/normalize.css
regions:
  header: Header
  content: Content
  sidebar_first: 'Sidebar first'
  footer: Footer

 Keys (Claves)

La siguiente clave provee meta etiquetas acerca del tema para definir funcionalidades basicas

name: Fluffiness
Este es un campo requerido. Un nombre comprensible por cualquier persona, este aparecera en la pagina de administracion de drupal 8 donde podra ser activado.
 
description: Definicion del tema, una breve descripcion de lo que trata tu tema.
Este es un campo requerido

type: theme
Este es un campo requerido. El tipo de clave indica el tipo de extension por ejemplo si sera un tema, modulo o perfil. En el caso que desarrolles temas el type siempre sera "theme"

base theme: classy
Este es un campo requerido. El tema puede heredar los recursos de otro tema

core: 8.x
Este es un campo requerido. El core key especifica la version de drupal con la cual tu tema es compatible

version: 8.x-1.0
Este es el identificador de tu version del tema, no deberia ser especificado manualmente.

screenshot: fluffiness.png
Con esta clave puedes especificar una imagen previa de como se vera tu tema. Este screenshot se muestra en la pagina de appearance en la administracion de drupal 8.

libraries:
  - fluffiness/global-styling
Este key permite agregar librerias pueden ser utilizadas que pueden contener archivos CSS y JavaScript en todas las paginas donde el tema este activo.

 
Si este key se define de la siguiente manera:


global-styling:
  version: 1.x
  css:
    theme:
      css/style.css: {}
      css/print.css: { media: print }


Entonces esto resultara en agregar esto al html 


<link rel="stylesheet" href="css/style.css" media="all" />
<link rel="stylesheet" href="css/print.css" media="print" />


stylesheets-remove:
  - core/assets/vendor/normalize-css/normalize.css # 1
  - '@classy/css/components/tabs.css' # 2

#1: La clave stylesheets-remove elimina cualquier enlace a archivos CSS agregados por otro tema o modulo. La ruta completa del archivo CSS puede ser especificada en caso exista otro archivo con el mismo nombre.

#2: Existen casos en los cuales los archivos CSS o JavaScript core de drupal necesitan ser eliminados. En casos donde el archivo es parte de una libreria que pertenece a un modulo o tema un token puede ser utilizado. Nota que cuando se utiliza el token (@)  necesita estar entre comillas porque es una palabra reservada en YAML.







regions:
  header: Header
  content: Content # required!
  sidebar_first: 'Sidebar first'
  footer: Footer

Las regiones son declaradas como hijos de la key regions. Es requerido tenes una region de contenido.