Themes are the part of Drupal that you, and anyone else visiting your Drupal powered application, see when they view any page in their browser. You can think of a theme as a layer, kind of like a screen, that exists between your Drupal content and the users of your site. Whenever a page is requested Drupal does the work of assembling the content to display into structured data which is then handed off to the presentation layer to determine how to visually represent the data provided.
In this tutorial we'll:
- Explain what a Drupal theme is.
- Explain the role of a Drupal themer in the process of building a Drupal site.
- Get a high level overview of the types of files/code that themes are made of.
By the end of this tutorial you should be able to explain what a Drupal theme is, and the kind of work a Drupal theme developer will be expected to do.
Explain what the role of a theme is, and the kind of code they are composed of.
Themes in Drupal sites
Rather than starting from scratch, Drupal themes start from an existing HTML framework and make changes as needed by overriding and changing just the necessary templates. Some themes only need to modify a few select bits, while others may choose to override nearly everything. Either way, if it's HTML, you can change it with a theme.
In order for this to work, every component in Drupal that needs to display something in the browser provides a simple, minimal, HTML template for that element. Whether it's the content of a node, the site logo displayed in the header, or even the header region itself, the required HTML is rendered from a template. These templates can be overridden by a theme in order to change the markup they generate.
Themes are used to:
- Change the HTML markup of anything in Drupal
- Add CSS styles to change the layout, color, or typography on one or more pages
Without having to write any code for a theme you can:
- Install, enable, and configure an existing theme through the Drupal interface
- Download and install new themes from Drupal.org
Once you're ready to start creating your own custom theme or modifying an existing theme you'll want to know about:
- The structure and organization of a theme's files
- Describing your theme with an info file
- Using base themes
- Defining regions
- The Twig template language
- Overriding template files
- Using PHP for additional preprocessing of dynamic content
- Our Favorite HTML and CSS Resources -- Do you need to brush up on HTML or CSS? You'll get the most out of our Drupal theming tutorials if you already have a good foundation with these basic web technologies. This list contains some of our favorite resources and references around the Internet related to HTML and CSS.
- YAML -- As a themer, you'll need to know how to create, edit, and understand YAML syntax.
In this tutorial we learned that themes are the part of Drupal that someone sees and interacts with when the visit any of the pages of your Drupal site. This includes content editors working in the sites administration section. Themes are built using a combination of Drupal-specific files and common web assets. In the Drupal community developers who work on themes are commonly called themers or theme developers.
Further your understanding
- What types of files can you expect to find in a Drupal theme? How does this relate to front-end development you've done in the past?
- What should someone study to become a theme developer?
- Theming Drupal 8 (Drupal.org)
- Search for contributed Drupal themes (Drupal.org)
- A Drupal 8 theming guide (github.com/sqndr)