What is the theme folder structure in Drupal 8?

In Drupal 8, themes are collections of files that define how your website looks. They control page layout, colours, fonts, text styling, and much more.

Themes can be created from scratch, downloaded from the Drupal repository, or purchased from third-party vendors. Theme files must be placed in the Drupal 8 themes folder before they can be activated on your site. Drupal also includes a number of pre-installed themes, which are located in the core/themes folder of your installation.

Drupal’s developers recommend placing downloaded or other “contributed” themes in a sub-folder, named “contrib” and your own themes in a folder named “custom”. Each theme should then be placed in its own folder. Note that the folder name:

  • Must be lowercase.
  • Must start with a letter.
  • Must use an underscore (_) instead of spaces.

A typical Drupal installation file and folder structure could look like the following:

|-core
  |  |-modules
  |  |-themes
  |  |  |-bartik
  |  |  |-seven
  ..
  |-modules
  |-themes
  |  |-contrib
  |  |  |-heaven
  |  |  |-bold
  |  |  |-rouge
  |  |-custom
  |  |  |-pixelnine

Theme folder structure

Within each theme folder, the file structure could look like the following example:

|-pixelnine.breakpoints.yml  
  |-pixelnine.info.yml  
  |-pixelnine.libraries.yml  
  |-pixelnine.theme  
  |-config  
  |   |-install  
  |   |   |-pixelnine.settings.yml  
  |   |-schema  
  |   |   |-pixelnine.schema.yml  
  |-css  
  |   |-style.css  
  |-js  
  |   |-pixelnine.js  
  |-images  
  |   |-buttons.png  
  |-logo.png  
  |-screenshot.png  
  |-templates  
  |   |-maintenance-page.html.twig  
  |   |-node.html.twig

Common theme filetypes

Drupal 8 themes use the following common filetypes and folders:

  • *.info.yml

Defines meta data, libraries, and block regions. This is the only required file in the theme.

  • *.libraries.yml
    Defines JavaScript and CSS libraries that can be loaded by the theme.
  • *.breakpoints.yml
    Defines where responsive theme designs need to change, in order to be correctly presented on different devices.
  • *.theme

A PHP file that contains the conditional logic and data (pre)processing of the output for the theme.

  • css/

Typically holds Cascading Style Sheet (CSS) files with formatting rules for the theme. CSS files must be defined in libraries.yml and can be overridden or removed in info.yml.

  • js/

Holds Javascript files used in the theme. Like CSS files, these must be defined in libraries.yml.

  • images/

Images files used in the theme are stored in this folder.

  • png

A screenshot preview of the theme, used to illustrate the theme entry in the Drupal Appearance page.

  • svg

The theme’s logo file, stored in SVG (Scalable Vector Graphics) format. Logos can also be uploaded at Appearance > Settings.

  • templates/
    Provide HTML markup and some presentation logic.

If you notice any problems or if you need any help, please open a new support ticket from your HostPapa Dashboard. More details on how to open a support ticket can be found here.

Related Articles

Get online with our affordable web hosting

Get online with our affordable web hosting

Learn more now
HostPapa Mustache