Last updated October 6, 2017
Theming8.4.x

What is a theme and how do I get started making one for my site? This tutorial introduces the concept of theming at a very high level and points to additional tutorials about more specific aspects of theme development in order to help people get started.

What Is a Theme?

Themes are what make a Drupal website look the way it does. Themers, or theme developers, use HTML, CSS, JavaScript, and other front-end assets in order to implement a design for their site. Each individual theme is a collection of files that define the presentation layer for your application. Themes are generally one of the first places where code is customized for a Drupal site, and are in many cases unique to the specific site they were created for.

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
  • Use JavaScript to enhance the user experience

Most themes will combine changes to HTML markup with new CSS files that provide the layout and overall graphical treatment of a site, and JavaScript that modifies the ways users interact with the content of the page. Combine all of this, and you can make Drupal look, and feel, like anything you can imagine.

Without having to write any code for a theme you can:

Once you're ready to start creating your own custom theme or modifying an existing theme you'll want to know about:

Background knowledge

Themers are expected to be masters of HTML and CSS. Experience with JavaScript is often important. To fully understand and edit template files, build onto the foundation of a Drupal theme some basic PHP, a bit of YAML, and programming concepts such as variables and conditional statements.

  • 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.
  • JavaScript Resources on MDN -- The Mozilla Developer Network (MDN) provides reference and tutorial documentation for many web technologies. Check out their beginning, intermediate, and advanced JavaScript tutorials, a comprehensive JavaScript reference section, and links to web-based tools for writing and debugging JavaScript code.
  • YAML -- As a themer, you'll need to know how to create, edit, and understand YAML syntax.

Additional resources

Learning objectives

  • Explain to someone else what a Drupal theme is.
  • Explain the role of a Drupal themer in the process of building a Drupal site.
  • What types of files/code does a themer deal with?