Drupal Theming

Getting Started

Drupal has a few ways to customize html and css.

Set up the site in a development environment, and configure your IDE to edit the code (enable drupal plugins if available).

Use the example.settings.local.php file to disable asset preprocessing, and enable twig debugging in the development settings in the UI.

Templates

A lot of work can be done in twig template overrides.

Enable twig debugging to show comments above each component that tell you the available template names you can use to override the output.

Template suggestion names have levels of specificity, for example a node type or display mode.

Libraries

CSS and JS are included by defining libraries in a theme or module *.libraries.yml file, and attached to components that require them.

Tags
Theming