Outils pour utilisateurs
Panneau latéral
drupal10:creation_theme_custom
Table des matières
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
- /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
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
- /themes/custom/mytheme/mytheme.libraries.yml
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 | | <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--
Réécrire un template
- /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>
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 :
- /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
drupal10/creation_theme_custom.txt · Dernière modification: 2023/09/03 07:46 par marclebrun
Outils de la page
Sauf mention contraire, le contenu de ce wiki est placé sous les termes de la licence suivante : CC Attribution-Share Alike 4.0 International
