Themes define the regions that are available for site administrators to place blocks in, creating a layout framework within which the components that compose a page can be placed. Deciding what regions to create requires knowledge of how Drupal works and a clear vision of the design you're trying to achieve.

In this tutorial we'll learn:

Customizing the available regions in your theme is likely one of the first things you'll do when creating your own themes. Doing so gives you complete control over where content is displayed on the page, and the markup involved. Adding regions to a theme is a two-step process that involves editing your theme's .info.yml file and updating your page.html.twig file.

In this tutorial we'll learn how to:

One important aspect of theme administration is the configuration of global and theme-specific settings. In this tutorial, you will learn where theme settings are configured in Drupal's administrative interface, the difference between global and theme-specific settings, and what each global setting refers to on a base installation of Drupal 8 with a custom theme installed.

Global settings for themes

Global settings apply to certain common theming elements such as a theme's logo, shortcut icon, and how user pictures are displayed in posts or comments.

Some, but not all, themes come with administrator-configurable settings that you can change through the UI. These might allow you to upload your own logo, choose between a couple of different pre-defined layouts, or turn features of a theme on or off. In this tutorial we'll look at where you can find these theme settings if they exist, and how to go about changing them.

In Drupal 8, CSS and JavaScript are loaded bundled together as asset libraries, and then these libraries are loaded via either themes or modules. Asset libraries can contain one or more CSS assets, one or more JS assets and one or more JS settings. In this tutorial we'll cover what asset libraries are, what they contain, and the problem that they are trying to solve.

New asset libraries can be defined by either modules or themes. In order to define a new asset library you need to create the requisite CSS and JavaScript files, and a new THEMENAME.libraries.yml, or MODULENAME.libraries.yml file that aggregates them together and provides metadata about the library itself and any dependencies.

In this tutorial we'll:

Libraries can be attached to all pages, a subset of pages, or to elements in a render array. This allows you to have some assets that are global, and others that are only loaded on an as-needed basis.

In this tutorial, we'll look at attaching asset libraries:

Themes in Drupal can be configured to inherit settings, templates, and other assets from a parent theme. This allows theme developers to use a different set of markup as the starting point for their theme, organize various theme assets into a more maintainable structure, and more.

In this tutorial we'll:

In this tutorial, we will take a look at Drupal's core base themes, with a focus on Stable and Classy.

There are several themes that ship with Drupal 8 core (Bartik, Classy, Seven, Stable and Stark). Bartik is the default user-facing theme, or the theme you first see when you install Drupal using the standard profile. Seven is the default administration theme. When you visit the admin pages on a new Drupal installation you'll see the Seven theme in action. That leaves us with three remaining themes: Classy, Stable and Stark.

Make your theme a subtheme of a "base" theme, allowing it to inherit all the base theme's templates and other properties. When creating Drupal themes it is common to use the Classy theme provided with Drupal core as a base theme to jumpstart your development.

In this tutorial we'll learn how to:

This tutorial demonstrates how to locate the template file that is currently being used to render an element and override it in your own theme. This is an important skill for anyone who wants to make changes to Drupal's default HTML markup.

In this tutorial we'll:

Knowing how to inspect the variables available within a template file enables you to discover all of the dynamic content in a Twig file, not just that which is already being used.

In this tutorial, we'll learn how to use {{ dump() }}, kint(), vardumper(), and XDebug to inspect variables in a template file.

Goal

Discover and inspect variables available in any template file.

When determining which template file to use to theme an element, Drupal uses the list of theme hook suggestions to look for the best match. This allows for fine-grained control over how things appear based on dynamic state and contextual information in your application. The list of theme hook suggestions varies for each base template, so we need a way to figure out our options.

In this tutorial we'll look at:

Preprocess functions are specially named functions that allow themes and modules to perform additional manipulation of variables used in a Twig template file.

In this tutorial we'll learn how to:

Themes and modules can alter the list of theme hook suggestions in order to add new ones, remove existing ones, or reorder the list. This powerful feature allows for the definition of custom logic in your application that can tell Drupal to use different templates based on your own unique needs. You might for example; use a different page template for authenticated users, or a custom block template for someone's birthday.

In this tutorial we'll cover:

Hooks allow modules to alter and extend the behavior of Drupal core, or another module. They are one of the various ways that code components in Drupal can communicate with one another. Using hooks a module developer can change how core or another module works -- without changing the existing code. As a Drupal developer, understanding how to implement and invoke hooks is essential.

In this tutorial we'll:

Hooks allow module developers to execute custom code at key moments during Drupal's request processing life cycle. They can be used to react to actions or conditions, alter forms and existing configuration, and extend Drupal in various ways. Knowing how to implement a hook is an essential skill for any Drupal developer.

In this tutorial we'll walk through the process of locating the documentation for a specific hook, and then implementing it. All hooks are implemented in the same way, so once you know how to implement one, you'll be able to implement any.

The Responsive Image module provides a process for transforming images uploaded through image fields into responsive images. This is accomplished through the configuration of responsive image styles. The configuration form for adding and editing responsive image styles is quite extensive. In this tutorial, we'll go through this form and learn what each option entails. By the end of this lesson, you should have a good understanding of the various options in the responsive image style configuration form.

You might already be familiar with image styles in Drupal. Image styles are a popular and commonly used feature of Drupal because they enable your site's content creators to upload an image once, but have it displayed at various sizes and resolutions depending on its context. Image styles are configured and then applied to an image field's display settings, whether using view modes, Views field settings, or other contexts.

In this tutorial, we're going to add a responsive image style to an image field on the Article content type. This will add the srcset and sizes attributes to the output <img> element, providing media conditions, width descriptors, and a set of image sources for the browser to choose from, depending on the user device's viewport size.

Drupal 8 comes with all of its caching features enabled by default. This improves response time, but can be frustrating for themers as it makes it harder to preview the changes you make to template files.

In this tutorial we'll look at: