This learning series covered just the tip of the theming iceberg. Hopefully you're now feeling motivated to learn even more about theming. In this lesson we will review some of the other topics you will want to explore next including: advanced theming techniques, using a base theme, such as Omega, layout modules. By the end of this lesson you will by able to identify which videos you should (or could) watch next to learn more about theming Drupal.

Layout Builder is one of many different approaches to handling editorial layouts in Drupal. Now that it's stable, and part of Drupal core, we expect to see it become the dominant approach over time. However, as with most things in Drupal, there are multiple ways to solve the problem of creating component based flexible layouts that can be administered via the user interface.

It's a good idea to understand the different approaches and know what's available.

When it comes to component based design and ability to construct flexible layouts, it is important to understand the benefits and risks of the most popular techniques: Paragraphs, Bricks, entities and view modes, and Layout Builder. Understanding which approach fits the needs of your project best can be critical for its success in the future.

In this tutorial we'll look at some common approaches to administering layouts in a way that gives content editors controls including:

• Drupal core's Layout Builder
• Using core's entity reference fields and view modes
• The contributed Paragraphs module
• The contributed Bricks module

By the end of this tutorial you should have a broad overview of the different popular approaches to creating editor-controlled layouts.

In the next few tutorials, we'll pull back the veil of Views theming a bit and introduce some tools to help you wrangle Views' template files. In this tutorial, I'll introduce you to Views Theme Information and how to use this interface to find out which template files are being used to mark up your view.

Additional resources

Views — Drupal.org

Before you begin a Drupal 6 or 7 (source) to Drupal 9 or 10 (destination) migration there are a number of things you should consider. Taking the time to plan your migration will help to ensure that you're successful. In this tutorial we'll take a high-level look at:

• Evaluating your existing Drupal 6/7 site for migration feasibility
• Preparing your source Drupal 6/7 site for a migration
• Preparing the destination Drupal site you're migrating to

By the end of this tutorial you should be ready to start assessing the feasibility of performing a successful migration, and begin making a migration plan.

This tutorial will help you understand the complete life cycle of a Drupal form: receiving the request from a browser, displaying a page with a form, rendering the form as HTML, handling the submitted form, validating input, handling errors, and processing data. We'll point out the common places that module developers might want to inject additional functionality into the process. And we'll link to tutorials with more details about each integration point in a form's life cycle.

In this tutorial, we'll:

• List the steps of the life cycle of a Drupal form.
• Describe how Drupal determines which form to display, and which form handles an HTTP POST request.
• Understand the role of FormStateInterface in the life cycle of a form.

By the end of this tutorial, you should have a solid understanding of the life cycle of a form within Drupal.

Back-end developers, and Drupal site builders, often find themselves having to perform the same UI steps over and over again, like exporting configuration, importing configuration changes, running cron, processing a large queue of jobs, indexing items for Search API, and more. Performing these tasks with Drush saves time and reduces the number of clicks required.

Drush core contains commands to execute all the most common tasks. Many contributed modules provide their own Drush commands to make interaction with the module's features, easier, faster, and scriptable.

In this tutorial we'll:

• Learn about the Drush core commands for common tasks like interacting with queues, performing database backups, and importing/exporting configuration
• Demonstrate how to find the Drush commands provided by contributed modules in your project

By the end of this tutorial you'll learn some popular commands for common tasks that'll speed up your daily work.

Previously, in Implement a Functional Test, we learned how to tell BrowserTestBase to use the Standard installation profile in order to get our test passing, letting the Standard profile implicitly provide our dependencies. We mentioned that doing so probably wasn't the best decision and that we should explicitly declare those dependencies instead.

In this tutorial, we'll walk through how to explicitly declare our test's dependencies. When in doubt, it's generally considered a best practice to be as explicit about the dependencies of our tests as possible. By the end of this tutorial, you should be able to:

• Understand why we want to explicitly declare our dependencies.
• Determine what the dependencies really are and make a list of them.
• Implement each dependency in our list.
• Emerge with a thorough passing test.

Twig is the theme template engine in Drupal as of version 8. Like any code, there are guidelines and standards that dictate both the style and the structure of the code. In this tutorial we will explain how to adhere to the Drupal code standards while implementing Twig templating.

By the end of this tutorial you will be able to adhere to Drupal's coding standards when writing Twig, and know where to find more information about the guidelines when necessary.

The core structure of Drupal's Render API is the render array, which is a hierarchical associative array containing data to be rendered and properties describing how the data should be rendered. As a module developer you'll use render arrays to describe the content your module controls in order to output it on a page as HTML, or as part of a response in another format like JSON. As a theme developer, you'll manipulate render arrays in order to affect the way content is output on the page.

In this tutorial we'll learn:

• What render arrays are and why they exist
• The basic format of a render array
• What "properties" and "elements" signify in the context of a render array
• Where to find more information about how to create a render array to describe your own content

By the end of this tutorial you should be able to understand when you need to use a render array, recognize one when you see it, and know where to get more detailed information about render array formatting specifics.

Drupal's Entity system provides several hooks that allow custom code to interact with various parts of the entity life cycle.

In this tutorial we'll:

• Examine the available hooks
• Learn how to make use of them to act on several different types of operations on individual entities

By the end if this tutorial you should have a better understanding of the hooks available to developers who want to respond to entity lifecycle operations and how to use them to customize the way specific entity types work.

In this tutorial, we'll walk through the basics of how to implement a functional test by extending Drupal's BrowserTestBase class. We'll assume you've already determined that you need to write a functional test and that you've Set up a Functional Test.

In this tutorial, we'll:

• Determine the specifications of the test.
• Walk through the behavior we want to test.
• Document our test in the test class.
• Implement the testing steps.
• Decide how to deal with dependencies (for now). (We'll go into details about handling test dependencies in Implement Drupal Functional Test Dependencies.)

Before we start writing any React code, let's go over some basic concepts and terminology. Throughout this series we'll assume you're familiar with these things. They'll come up again and again as you work on projects that involve React, so it's worth taking the time to learn them.

In this tutorial we'll cover the following at a high level, and provide links to resources:

• Why choose React?
• What are React components?
• What are hooks, state, and JSX?
• The role of build tools when developing React applications

By the end of this tutorial you should have a firm grasp of the fundamental concepts and terminology necessary to start creating React applications.

Before we dive into advanced theming we are going to review the basic PHP you will need to use. This is a short review of PHP, including topics like data structures (arrays and objects), conditionals and operators, loops, and functions.

Additional resources

960 Robots

This next set of tutorials relates to controlling markup in Drupal when using the Views module. We’ll cover:

• What affects markup in Views
• Selecting an appropriate Views display format as a starting point for markup output
• Customizing field markup
• Customizing wrapper selectors and CSS classes
• Accessing theming information in Views
• Overriding Views template files

Additional resources

Views — Drupal.org

Now let's shift gears and take a look at how using Panels affects markup in Drupal. I will show you some unique-to-Panels concepts as well as how to apply Drupal theming principles to customize markup on a Drupal site that uses Panels.

In the tutorials that follow, you will learn:

• About Panels layouts
• How to add CSS classes using Panels
• How to override the panel pane template file
• What Panels means by “Style”—with a broad overview of Style Plugins and where to go for a deeper dive

Additional resources

Panels — Drupal.org
Chaos Tools Suite (CTools) — Drupal.org
Theming Basics for Drupal 7 — Drupalize.Me

Emma Jane Westby introduces the series. In this series, you'll learn how to transform a static design file into a whole Drupal theme. We'll work through three major steps.

1. Develop a style guide based on the design patterns we see in our design files.
2. Build out Drupal so that it has all of the elements we need in place.
3. Work with theming files to decorate Drupal.

Additional Resources

In addition to the lessons in this series, Emma has assembled an extensive FAQ on Drupal theming.

Drupal’s theming system gives designers complete control over how a site’s content is rendered for a web browser, and custom themes can give any site a distinctive look. But sometimes it’s useful to make minor tweaks to a site’s appearance using nothing but CSS rules. They allow designers to tweak font sizes, colors, and so on without altering the underlying HTML that defines the site’s structure. In this lesson we'll look at:

• CSS Injector module
• Explain how this works

Additional resources

Using Drupal, 2nd edition

Using Drupal source code

CSS Injector module

Drupalize.Me Guide: Using Drupal Book by O'Reilly Media

Before we can really dive in to learning Omega we need to do a couple of basic setup tasks. Mostly, we need a Drupal 7 site that has some content for us to look at while we are theming. In this lesson we're going to:

• Generate some content with devel generate module
• Install the 960 Robots theme from drupal.org
• Place some blocks in to the regions provided by the 960 Robots theme and talk a bit about what it gives us so that we can begin to understand how we might convert it to an Omega sub-theme

Under the Downloads tab, there is a copy of the final database and the files directory for this Demo site.

Additional resources

• 960 Robots theme
• Devel module

Once all of the elements are in place, it's time to get down to the real work of theming the components. In this lesson we will:

• use our style guide and checklist to find each component
• check to see if the style looks "right"
• troubleshoot broken styles so that each component looks as good as the designer's original, static files

By the end of this lesson you will be able to identify elements on a rendered Drupal page which do not have the correct styles applied, determine the source of the problem, and alter the markup or styles to correct the output displayed in a browser.

In this series, Getting Started with Responsive Web Design in Drupal, we'll take an old Drupal theme based on a 960 pixel grid, and convert it, step by step, using just good ole CSS and HTML, to be more fluid, more flexible, more responsive than ever.

Our case study is the Anytown Farmers Markets. Anytown Farmers Markets has an existing web site that uses a theme based on a 960 pixel grid. It works great on larger screens, pretty well on iPads, but on an iPhone, the text is really small and you have to pinch and zoom and horizontally scroll to get around the screen.

Our goal will be to transition the site from a fixed width two column desktop site to a fluid and flexible site whose layout, images, and type gracefully transform at practically any size screen to provide a user-friendly experience where our site's content can be enjoyed by users browsing with a more diverse set of devices.

Throughout this series, you'll learn how to use, configure, and customize the style of a Drupal contributed module that provides a responsive, mobile-friendly main menu. We'll tackle images, tables, and slideshows and explore some select solutions for making these traditionally rigid elements flex with a fluid container. In the process of converting this theme to be responsive, you'll learn to tackle some real-world, sometimes messy and often times not-so-clear-cut problems and potential solutions.

To take advantage of this series, you'll want to be comfortable with HTML and CSS and the basics of setting up a theme in Drupal 7. You don't need to know Sass or any advanced theming. This series will help you understand common problems encountered in responsive web design and how to solve them in the context of a Drupal 7 theme.

Additional resources

Code: https://github.com/DrupalizeMe/demo-rwd-7x