====== Création d'un thème personnalisé ====== ===== Création du dossier ===== Nom du thème créé : **mytheme** * Créer le dossier **/themes/custom/mytheme** * Y créer l'arborescente suivante :


themes
    custom
        mytheme
            css
                style.css
            js
                main.js
            templates
                page.html.twig
            mytheme.info.yml
            mytheme.libraries.yml

===== Configuration du Thème =====


name: My Great Theme
description: This is my first theme project
type: theme
base theme: stable9
core_version_requirement: ^10

regions:
  header: Header
  content: Content
  sidebar_left: Sidebar Left
  sidebar_right: Sidebar Right
  footer: Footer

libraries:
  - mytheme/global-css

Le thème est basé sur **stable9** afin de garantir que la base du thème évolue en même temps que les évolutions de Drupal. Si on se basait sur rien il faudrait soi-même adapter à chaque évolution de Drupal. ===== Librairies =====


global-css:
  version: VERSION
  css:
    theme:
      css/main.css: {}
  js:
    js/main.js: {}
  dependencies:
    - core/jquery

===== Structure des templates du core =====


x-- core/modules/system/templates/html.html.twig
|
|   
|       
|       
|
|       
|
|       x-- core/modules/toolbar/templates/toolbar.html.twig
|       |
|       x--
|
|       x-- core/modules/system/templates/off-canvas-page_wrapper.html.twig
|       |
|       |   x-- core/modules/system/templates/page.html.twig
|       |   |
|       |   x--
|       |
|       x--
|
|       
|   
|
x--

===== Réécrire un template =====




    {{page.header}}



    {{page.content}}



    {{page.footer}}

===== Intégrer Bootstrap ===== Doc de Bootstrap 5.0 : [[https://getbootstrap.com/docs/5.0]] Télécharger **Bootstrap** sur [[https://getbootstrap.com/docs/5.3/getting-started/download/]] * Prendre la version **Compiled CSS and JS** * => **bootstrap-5.3.1-dist.zip** * Décompresser ce fichier vers un dossier Copier **bootstrap.min.css** et **bootstrap.min.js** et les copier dans les dossiers **css** et **js** du thème.


themes
    custom
        mytheme
            css
                bootstrap.min.css
                style.css
            js
                bootstrap.min.js
                main.js

Référencer ces fichiers dans la librairie :


global-css:
  version: VERSION
  css:
    theme:
      css/bootstrap.min.css: {}
      css/main.css: {}
  js:
    js/bootstrap.min.js: {}
    js/main.js: {}
  dependencies:
    - core/jquery