Cuando creamos una web con Drupal, muchas veces utilizaremos un theme o tema de los ya existentes y lo adaptaremos un poco a nuestras necesidades, aunque si queremos realizar un diseño muy personalizado en nuestro sitio, lo mejor, aunque no lo más sencillo, es crear un theme propio y personalizado, aunque para ello hagan falta nociones más técnicas.
Primero de todo empezaremos creando una carpeta con el nombre de nuestro tema dentro de la carpeta /themes/custom de nuestra instalación.
En este caso vamos a crear un tema que se llama mitema.
Dentro de esta carpeta crearemos un fichero que se llamará : mitema.info.yml y escribiremos lo siguiente :
name: mitema
type: theme
description: 'mitema Custom Theme.'
package: Other
core_version_requirement: ^8 || ^9
base theme : classy
Como véis aqui simplemente indicamos el nombre, el tipo, una descripción, la versión de Drupal y el tema en el que se basa.
El siguiente paso es crear un fichero que se llame mitema.libraries.yml y en él pondremos lo siguiente :
global-styling:
version: 1.x
js:
js/script.js: {}
css:
base:
css/style.css: {}
Aquí indicamos en que ruta tendremos nuestro fichero de javascript y el de css.
Una vez indicado volvemos a nuestro fichero info.yml para añadir :
libraries:
- mitema/global-styling
El siguiente paso que debemos hacer es indicar las regiones de nuestro tema, para ello en nuestro fichero info.yml añadimos lo siguiente:
regions:
branding: Branding
navigation: Main navigation
search: Search
featured: Featured
content: Content
right_sidebar: Right sidebar
footer_first: Footer First
footer_second: Footer Second
footer_third: Footer Third
footer_bottom: Footer Bottom
Ahora deberemos crear los ficheros js/script.js y el css/style.css . Y para empezar podemos empezar a añadir nuestras clases en el fichero de CSS.
El siguiente paso es crear la estructura de nuestra página, si no indicamos el fichero, se utilizará el que tiene por defecto Drupal o bien nuestro tema base.
Este fichero se llamará page.html.twig y lo ubicaremos en template/system y en el podemos poner algo como así:
<header aria-label="Site header" class="header" id="header" role="banner">
{{ page.branding }}
</header>
<section class="main" id="main">
<main aria-label="Site main content" class="content" id="content" role="main">
{{ page.content }}
</main>
</section>
<footer aria-label="Site footer" class="footer" id="footer" role="contentinfo">
{{ page.footer_first }}
</footer>
Podemos mirar más ejemplos en los diferentes ficheros page.html.twig que encontraremos tanto en las carpetas de core como en la de otros temas que tengamos instalados.
Por último, iremos a nuestra página de administración, buscaremos los temas (Apariencia), instalaremos nuestro nuevo tema y lo activaremos como nuestro tema predeterminado.
Tip final : En el caso que veamos que nuestro page.html.twig o estructura de la página no se está cargando bien, debemos limpiar la cache de nuestro Drupal desde el menú de administración en la sección de Configuración.