Drupal - Themes & Layouts

Drupal - Themes & Layouts

Themes control the visual appearance of your Drupal site, including its look, feel, and responsive behavior. Layouts determine how content is arranged on different pages. Modern Drupal provides powerful tools for both.

Drupal 10+ ships with ‘Olivero’ as the default front-end theme and ‘Claro’ as the administration theme. Many other free and premium themes are available from the Drupal.org theme repository.

Finding and Installing Themes

Step 1: Find a Theme

Visit the official Drupal themes page (https://www.drupal.org/project/project_theme). You can filter themes by Drupal version compatibility, maintenance status, and features. Choose a theme that suits your needs.

Step 2: Install the Theme

There are two primary ways to install a theme:

Method 1: Using Composer (Recommended)

Composer is the standard PHP dependency manager and the preferred way to add themes and modules to your Drupal site.

1. Open your terminal or command prompt and navigate to your Drupal project’s root directory.

2. Run the command: composer require drupal/theme_machine_name (e.g., composer require drupal/bootstrap5). Replace theme_machine_name with the actual machine name of the theme found on its Drupal.org page.

3. Composer will download the theme and its dependencies into the themes/contrib directory.

Method 2: Using the Drupal Admin UI

1. On the theme’s Drupal.org page, find the download link for the .tar.gz or .zip file for the compatible Drupal version. You can either download this file to your computer or copy its URL.

2. In your Drupal site, navigate to ‘Manage’ > ‘Appearance’ (usually /admin/appearance).

3. Click the ’+ Install new theme’ button.

4. You can either paste the copied URL into the ‘Install from a URL’ field or use the ‘Upload a module or theme archive to install’ field to upload the downloaded file. Click ‘Install’.

Drupal will upload and extract the theme into the themes/contrib directory.

Step 3: Enable and Set as Default

1. After installation, go back to the ‘Appearance’ page (‘Manage’ > ‘Appearance’).

2. Scroll down to the ‘Uninstalled themes’ section. Find your newly added theme and click its ‘Install’ link.

3. Once installed, it will move to the ‘Installed themes’ section. To make it the active theme for your site, click its ‘Set as default’ link.

Some themes have their own settings page, accessible via a ‘Settings’ link next to the theme on the Appearance page. This allows for theme-specific customizations (e.g., color schemes, logo uploads).

Managing Layouts with Layout Builder

Drupal’s core ‘Layout Builder’ module provides a powerful and intuitive visual interface for customizing the layout of content. It allows site builders to arrange fields, blocks, and other elements into sections and regions on a per-content-type basis or even for individual pieces of content.

Enabling Layout Builder for a Content Type

1. Ensure the ‘Layout Builder’ and ‘Layout Discovery’ modules are enabled (‘Manage’ > ‘Extend’).

2. Go to ‘Manage’ > ‘Structure’ > ‘Content types’ (usually /admin/structure/types).

3. For the content type you want to customize (e.g., ‘Article’), click the dropdown in the ‘Operations’ column and select ‘Manage display’.

4. Scroll to the bottom and check ‘Use Layout Builder’. You might also want to check ‘Allow each content item to have its layout customized’ if you need per-node layout overrides.

5. Click ‘Save’. A ‘Manage layout’ button will now appear.

Using Layout Builder

1. Click the ‘Manage layout’ button for the content type.

2. The Layout Builder interface will open. You can:

• Add sections: Choose from predefined layouts (e.g., one column, two columns, three columns) to structure your page.
• Add blocks within sections: Click ‘Add block’ in a region to place content. This can include content fields (like Title, Body, Image), custom blocks, views blocks, and more.
• Configure blocks: Each block can be configured (e.g., hide title, custom CSS classes).
• Drag and drop: Reorder sections and blocks easily.

3. Once satisfied with the layout, click ‘Save layout’.

This layout will now apply to all content of that type. If you enabled per-item customization, you’d see a ‘Layout’ tab when viewing or editing individual content items, allowing unique layouts for specific pages.

Theme Regions and Block Layout

While Layout Builder is powerful for main content areas, themes also define ‘regions’ (e.g., header, footer, sidebar). You can place blocks into these theme regions via ‘Manage’ > ‘Structure’ > ‘Block layout’ (usually /admin/structure/block). This is useful for site-wide elements like logos, main navigation, or sidebar blocks that appear on many pages.

Modern themes are built to be responsive, adapting their layout to different screen sizes (desktops, tablets, mobiles) using CSS media queries. Specific responsive settings are typically handled by the theme’s CSS, not through direct Drupal UI pixel adjustments as seen in some older, highly specialized themes.