Theming Drupal

Defining a theme with an .info.yml file

Define a Drupal theme with an .info.yml file.

Drupal theme folder structure

A theme is a collection of files that define the presentation layer. You can also create one or more "sub-themes" or variations on a theme.

Adding Regions to a Theme

What is required to add regions to a theme

Adding assets (CSS, JS) to a Drupal theme via *.libraries.yml

In Drupal, stylesheets (CSS) and JavaScript (JS) are loaded through the same system for modules (code) and themes, for everything: asset.

Twig in Drupal

Twig is the default template engine for Drupal.

• Working With Twig Templates
• Twig Template naming conventions
• Comparison of PHPTemplate and Twig theming paradigms
• Discovering and Inspecting Variables in Twig Templates
• Debugging Twig templates
• Debugging compiled Twig templates
• Locating Template Files with Debugging
• Filters - Modifying Variables In Twig Templates
• Functions in Twig templates
• Macros in Twig Templates
• Twig best practices - preprocess functions and templates
• Create custom twig templates from custom module
• Extending templates
• Profiling a Twig template

Creating sub-themes

Sub-themes are just like any other theme, with one difference: They inherit the parent theme's resources. There are no limits on the

Sub-theming: Using Stable/Stable 9 as a base theme

Themes may extend the Stable themes to ensure their generated markup is not changed by Drupal updates.

Classy themes css selectors

Document all css class selectors that are in the classy theme Drupal8 RC 2

Using Single-Directory Components

Single-Directory Components (SDC) are Drupal's implementation of reusable HTML, CSS, and JavaScript UI components.

• About single-directory components
• Quickstart
• Creating a single-directory component
• Using your new single-directory component
• Annotated example component.yml
• API for Single-Directory Components
• What are Props and Slots in Drupal SDC Theming?
• Modules that extend Single-Directory Components
• Frequently Asked Questions

Including Default Image Styles With Your Theme

Drupal has a powerful image manipulation system that allows for the creation of image styles that can perform various effects on an image

Including Partial Templates

Themers often separate templates into multiple partial templates for maintainability, then include them as needed.

Using attributes in templates

Attribute objects are used in Twig templates to pass in variables like CSS classes, storing sets of HTML attributes and providing methods

Preprocessing and modifying attributes in a .theme file

You can affect output of certain HTML via preprocess functions. For example, if you wanted to add a class to a menu

Working with breakpoints in Drupal

The Breakpoints module standardizes the use of breakpoints and enables modules and themes to expose or use each others’ breakpoints.

Creating advanced theme settings

In the Drupal administration section, each theme has its own settings page at admin/appearance/settings/themeName. And this page has a form

Theming differences between Drupal 6, 7, 8, 9 & 10

This is a list of some of the most noteworthy changes in Drupal 8 that affect theming.

Upgrading classes on 7.x themes to Drupal 8 or later

Changes to core classes

Drupal Twig conversion instructions (tpl.php to html.twig)

This document was used during much of the Twig conversion process for Drupal 8 and could be useful to you too for updating your own themes

Creating automation tools for custom themes (Gulpjs)

Using automation tools simplifies the task of creating themes. Here we are going to use gulpjs to create an automation tool for a custom

Sub-Theme inheritance

Which properties of a base theme do and don't get inherited by a sub-theme.

Update the throbber

Update the spinning blue wheel in the right side of ajax forms with a little CSS.

Z-indexes in Drupal 8+

A table showing all elements with z-indexes in Drupal 8 core themes, modules and libraries.

Add meta description and title programmatically

How to tweak the meta tags with custom code