Cramnurbel

Cette page est en lecture seule. Vous pouvez afficher le texte source, mais ne pourrez pas le modifier. Contactez votre administrateur si vous pensez qu'il s'agit d'une erreur.
====== 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 :

<code>
themes
    custom
        mytheme
            css
                style.css
            js
                main.js
            templates
                page.html.twig
            mytheme.info.yml
            mytheme.libraries.yml
</code>

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

<code yaml /themes/custom/mytheme/mytheme.info.yml>
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
</code>

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 =====

<code yaml /themes/custom/mytheme/mytheme.libraries.yml>
global-css:
  version: VERSION
  css:
    theme:
      css/main.css: {}
  js:
    js/main.js: {}
  dependencies:
    - core/jquery
</code>

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

<code>
x-- core/modules/system/templates/html.html.twig
|
|   <html>
|       <head>
|       </head>
|
|       <body>
|
|       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--
|
|       </body>
|   </html>
|
x--
</code>

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

<code twig /themes/custom/mytheme/templates/page.html.twig>
<!-- région "header" -->
<div class="header">
    {{page.header}}
</div>
<!-- région "content" -->
<div class="content">
    {{page.content}}
</div>
<!-- région "footer" -->
<div class="footer">
    {{page.footer}}
</div>
</code>

===== 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.

<code>
themes
    custom
        mytheme
            css
                bootstrap.min.css
                style.css
            js
                bootstrap.min.js
                main.js
</code>

Référencer ces fichiers dans la librairie :

<code yaml /themes/custom/mytheme/mytheme.libraries.yml>
global-css:
  version: VERSION
  css:
    theme:
      css/bootstrap.min.css: {}
      css/main.css: {}
  js:
    js/bootstrap.min.js: {}
    js/main.js: {}
  dependencies:
    - core/jquery
</code>
Cramnurbel

Outils pour utilisateurs

Outils du site

Outils de la page
