Drupal Themes – Basics of Theming

Drupal theming is the process of defining how your website looks and feels. It allows developers and site builders to control layout, design, and the overall user experience while separating content from presentation. A Drupal theme provides the layer that dictates how content is displayed to users, ensuring flexibility, consistency, and a custom look tailored to your brand.

1. Theme Basics

In Drupal, a theme consists of files that work together to determine the presentation of a site. These files include:

• .info.yml file – Contains metadata about the theme (name, description, regions, libraries).

• libraries.yml file – Defines CSS and JavaScript files used in the theme.

• Twig templates – Control the markup structure of different elements.

• CSS & JS files – Handle styling and interactivity.

2. Twig Templates

Twig is the template engine introduced in Drupal 8 and later. It provides a secure and flexible way to customize HTML markup. Each part of a Drupal site (nodes, blocks, views, fields, etc.) has its own Twig template, which you can override in your theme to modify output.

Examples of Twig templates:

• page.html.twig – Controls the layout of a page.

• node.html.twig – Defines how a content type is displayed.

• block.html.twig – Customizes block output.

3. Theme Regions

Regions are predefined areas in a theme where content and blocks can be placed. Common regions include:

• Header – Site branding, navigation, or logo.

• Content – Main body area for nodes, views, and articles.

• Sidebar – For menus, filters, or additional widgets.

• Footer – Copyright info, links, or secondary navigation.

Site administrators can assign blocks to these regions through the Drupal admin UI, giving flexibility in layout without altering code.

4. Theme Inheritance (Base and Sub-Themes)

Drupal allows creating:

• Base Themes – Provide a foundation theme with styling and templates.

• Sub-Themes – Inherit from base themes, allowing customization while retaining updates from the parent.

Popular base themes:

• Stable – Provides clean markup with minimal CSS.

• Classy – Adds extra classes for easier theming.

• Contrib themes like Bootstrap or Gin can also be used as bases.

5. Adding Custom Styles and Scripts

Through the libraries.yml file, you can attach your own CSS and JS to enhance styling and interactivity. These libraries are then declared in the .info.yml file or added via hook_page_attachments() in a custom module.

6. Other Aspects of Theming

• Responsive Design – Ensuring themes work seamlessly across devices.

• Accessibility – Designing for all users, including those with disabilities.

• Theme Debugging – Enabling Twig debugging in services.yml helps identify which template to override.

• Preprocess Functions – Allow adding variables and logic to Twig templates.

Drupal theming is a powerful system that combines structured templates, flexible regions, and custom styling to create a unique user experience. By understanding regions, Twig templates, and sub-theme inheritance, you can fully control your site’s appearance while keeping it responsive, accessible, and easy to maintain.

Drupal Theming Quick Reference Guide