Themes in Drupal

Themes change the appearance of a Drupal site, knowing how they work, how to install and uninstall them, and understanding theme settings is a vital skill for any Drupal user.

This course covers what themes are, how to download, install, and uninstall them, and how to configure both global and theme-specific settings. Learners will also explore how to add visual elements like screenshots to themes and understand the purpose and features of core themes like Stark.

Key topics

  • Learn what themes are, and their use-case
  • Download, install, and uninstall a contributed theme
  • How to change a theme’s settings
  • Global and theme-specific settings
  • Explore core provided themes
  • Adding a screenshot to your theme
Tutorials in this course
Categories
Drupal 8, 9, and 10
More information

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.

Drupal themes are created by front-end developer. Frequently referred to as themers, or theme developers. Themes consist of standard web assets like CSS, JavaScript, and images, combined with Drupal-specific templates for generating HTML markup, and YAML files for telling Drupal about the file and features that make up each individual theme.

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.

Categories
Drupal 8, 9, and 10
More information

Before visitors to your site will see the pages displayed using a theme the theme needs to be installed and set as the default. This is true whether it's a custom theme you wrote yourself, or a contributed theme you downloaded from Drupal.org. Installing themes can be done either via the user interface, or using Drush. Once a theme is installed, users of your site will see all public facing page rendered using that theme. Themes that are no longer being used can safely be uninstalled.

In this tutorial we'll:

  • Demonstrate how to install a theme and make it the default using both the UI and Drush.
  • Learn to differentiate between installed themes, default themes, and uninstalled themes.
  • Configure our site to use an administration theme for the administrative pages.

By the end of this tutorial you should be able to install a theme and make it the one visitors to your site see by default.

Categories
Drupal 8, 9, and 10
More information

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 with a custom theme installed.

Categories
Drupal 8, 9, and 10
More information

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.

Categories
Drupal 8, 9, and 10
More information

Contributed and custom themes can ship with a thumbnail screenshot that will be used to represent the theme when listing themes in the administration UI.

In this tutorial you'll learn how to:

  • Prepare your site for the screenshot
  • Create a screenshot of your theme
  • Define a screenshot file for your theme in the THEMENAME.info.yml file
Categories
Drupal 8, 9
More information

Bartik is a core theme in Drupal. As a default theme for Drupal, it serves as an instructive example of a well-developed responsive theme. In this tutorial, we'll tour and explore Bartik, identify its primary features, and explain the use case for the Bartik theme and what you can learn from it.

Categories
Drupal 8, 9
More information

Stark is one of the themes bundled with Drupal. It is intentionally bare bones and its purpose is to help Drupal theme and module developers get to the heart of Drupal's system templates. In this tutorial, we'll explore Stark and its primary features and discuss the various reasons for utilizing the Stark theme.

This course appears in the following guides:
Theming
Learn to control the look, feel, and markup of a Drupal site in a theme.

Frontend Theming