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.
