Introduction to Drupal Theming

When working with Drupal, one of the key skills to learn is theming. While modules add functionality, themes control how your website looks and feels. In simple terms, a theme is the design layer that determines layout, colors, typography, and overall user experience. Whether you want a clean corporate site or a bold creative design, theming is where it all happens.

Understanding the Basics

A Drupal theme is made up of several parts:

• .info.yml file – defines the theme’s name, libraries, and basic settings.
• Twig templates – control the HTML structure of your site.
• CSS and JavaScript – add styles and interactivity.
• Libraries.yml – manages CSS and JS assets.

Knowing these components gives you the foundation to start theming effectively.

Step 1: Choose a Base Theme

Drupal allows you to create a theme from scratch, but beginners often start with a base theme. Popular ones include:

• Classy (ships with Drupal, offers many template files).
• Stable (minimal markup, good for custom builds).
• Bootstrap or Barrio (community-contributed, responsive, and feature-rich).

A base theme saves time by giving you a pre-built structure, while still allowing customization.

Step 2: Create a Sub-Theme

Instead of modifying a base theme directly, the best practice is to build a sub-theme. This way, your changes won’t be lost when the base theme is updated.

Here’s the basic process:

1. Copy the sub-theme example folder provided by the base theme.
2. Rename it and edit the .info.yml file to set your theme’s name.

3. Declare the base theme in the .info.yml file. Example:

   base theme: classy 

4. Clear caches in Drupal so the new theme is recognized.

After enabling it in the admin dashboard, you’ll see your new sub-theme available.

Step 3: Modify Templates and Styles

Once your theme is active, you can start customizing:

• Override templates like page.html.twig or node.html.twig by copying them into your theme’s folder and editing them.
• Add your CSS and JavaScript in the libraries.yml file, then attach it to your theme.
• Use Drupal’s built-in debugging ($settings['twig_debug'] = TRUE; in services.yml) to identify which templates are being used.

Step 4: Experiment and Iterate

The best way to learn theming is by experimenting. Change colors, adjust layouts, and try overriding different templates. Small tweaks will help you understand how Drupal renders content.

In conclusion, getting started with Drupal theming might feel overwhelming at first, but the process becomes clearer once you break it down into steps: pick a base theme, create a sub-theme, and then customize templates and styles. With time and practice, you’ll be able to shape Drupal into any design you imagine—whether that’s a simple blog or a full enterprise site. Have fun learning Drupal Theming!