Frontend Theming
Guide
Theming Cheat Sheet
Guide
In this lesson, we’ll take a look at how to modify the HTML output from Views, explore some of the default templates that Views provides, and learn about the various permutations of names we can give our template files to override output for everything from a large set of Views to a single field on a single View. We’ll also discuss the difference between displays, styles, rows, and fields when it comes to theming a View.
Like most output in Drupal, Views relies on Twig templates for a significant amount of its rendering. In this tutorial we'll identify where you can find the default Views templates within your file system, what the common templates are for, and how to name your templates so that they are applied to specific views.
By the end of this tutorial, you should be able to:
- Identify where to find default views templates
- Understand which templates apply to what part of a view
- Get a sense of the template suggestions and how to use them to limit where your custom templates are applied
- Identify a view's machine name
- Identify a display's machine name
- Identify a field's machine name
Legacy Theme Development
Guide
This chapter goes through the process of adding a specific form id to the theme registry with the hook_theme() function, which allows the creation of a new function that targets a specific form. Specifically in this chapter, comment_form is added to the theme registry so that we can create a ninesixtyrobots_comment_form() function in order to add a column to the comment form so that the name and subject fields are displayed side-by-side.
Additional resources
Provides an overview of what is covered in the Theming Basics series and gives a preview of what is yet to be covered within the Advanced Theming video.
In this lesson we're going to learn about the front end development strategy of theming by components. This strategy relies on being able to break a design into individual components. Elsewhere on the Web this technique has been described as “atomic design” or “interface pattern pairing”. No matter what you call it, developing a pattern library of components is going to make it a lot easier to convert your design to a theme. This is an overview lesson that explains the strategy we'll be using in future lessons. More specifically, we'll look at:
- two popular pattern libraries
- an overview of how pages are built by Drupal so they can be rendered in a browser
By the end of this lesson you'll be able to identify components from a static design file by referencing a pattern library.
Additional resources
SMACSS (Scalable and Modular Architecture for CSS)
One of the challenges that comes with Layout Builder is increased complexity of front-end development. Layout Builder offers site administrators increased flexibility regarding the placement and use of fields and blocks; a theme developer needs to account for this. Depending on how Layout Builder is used, this could mean a small number of new combinations, or virtually infinite combinations. Therefore, predicting and theming all of these combinations becomes a difficult but necessary task in order to ensure maintainability and overall design consistency.
In this tutorial we'll look at some things we've found helpful to consider when theming Layout Builder including:
- Design, and theme, atomic components
- Limit the number of possible combinations of fields by using entity view modes
- Handle edge cases
By the end of this tutorial you should have a better understanding of how using Layout Builder can impact theme development, and how to account for it.
In this series, we talk about template.php, the file where all your functions live. We’ll also discuss preprocess functions and overriding theming functions. You’ll learn how to create new variables and override existing ones using template.php. With these tools you can allow your theme to have complete control of outputted HTML.
In this video you’ll learn when to use a tpl.php file or your template.php file, and we’ll look at differences between them. We’ll also review the three main steps of theming.
Additional resources
New Series: Theming Basics in Drupal 7
Blog postWe've just finished posting a new video series introducing you to Drupal Theming in Drupal 7. "Theming" describes the process of customizing the look and feel of your Drupal site, which involves working with Drupal's templating system at the basic level, and writing customized theming functions in PHP at the more advanced level.
Release Day: Our Drupal 8 Theming Guide
Blog postToday, we're super excited to publish our Drupal 8 Theming guide, a collection of tutorials that will teach you everything you need to know to create amazing Drupal 8 themes. We've put hundreds of hours into researching, digesting and understanding the Drupal 8 theme system. We've poured over the existing documentation and helped to update it whenever we could. We've read the code that makes it all possible, we've dissected core and contributed themes, and talked with front-end developers at Lullabot about their experiences, in order to learn about best practices and unique challenges. And then we boiled it all down into the ultimate Drupal 8 theming guide.
I'm sure you've heard by now that PHPtemplate is being replaced by Twig in Drupal 8. If you're a front end developer, you may be excited or afraid about how this will affect you. Let's take a look at the guiding principles behind the Twig initiative and where you can find documentation for theming in Drupal 8.
Set up a local development environment to practice Drupal theme development exercises in our course, Hands-On Theming Exercises for Drupal.
By the end of this tutorial, you should be able to:
- Install Drupal on your computer, so you can edit files in your theme.
- Generate dummy content, so that you have different kinds of pages to theme.
By default, individual forms in Drupal are not output using Twig template files. It's possible to associate a form with a Twig template file by creating a new theme hook, and then referencing that theme hook from the $form array that defines the form. Doing so allows theme developers to customize the layout of the elements in the form using HTML and CSS.
This is useful when you want to change the layout of the entire form. For example, putting the elements into 2 columns. If you want to change individual elements in the form, you can often do so by overriding element specific Twig template files.
In this tutorial, we'll:
- Learn how to create a new theme hook that can be used to theme an element in a render array.
- Associate the
$formwe want to theme with the new theme hook we created. - Create a Twig template file for the theme hook that will allow us to lay out the form elements using custom HTML.
By the end of this tutorial, you should be able to associate a Twig template file with any form in Drupal, so that you can customize its layout using HTML and CSS.
Theming Basics for Drupal 7 will provide a solid foundation for translating designs into Drupal themes. You'll learn to work with .info and tpl.php template files, how to add CSS and JavaScript, how to work with the render system new in Drupal 7, how to override templates, create regions, and use the Theme Developer tool. You'll start with the original HTML, CSS and JavaScript template files that were provided by the designer so that you can follow along in translating the design into a Drupal 7 theme. The video explains Drupal's design vernacular, concepts, and special needs. We'll show you how to associate the proper CSS & Javascript files, add all of the necessary regions, and control the HTML output through page and node-specific templates. You'll learn about the best tools and strategies for controlling the look and feel of your Drupal website.
This series will cover the basics of Drupal theming while the more advanced theming topics of working with the template.php file will be covered in the Advanced Theming for Drupal 7 series. These videos pair with each other, and will finish the complete implementation of the 960 Robots theme used in both videos. You can download the theme we're building from Drupal.org: 960 Robots.
Examples in this video are based on Drupal 7 and its variants.
In this introduction video, we set the stage for the Theming Basics series. We give an overview of what Drupal theming is, the common files we will work with, and the overall steps involved. Then we start off by defining and taking a look at the .info file and HTML template (tpl.php) files. We talk about regions and theme features, introduce the render() function, and explain dynamic templates. While we are teaching Drupal 7 theming, we also make sure to point out the important differences between Drupal 6 and 7.