Drupal 8 custom theme from scratch

Drupal 8 Custom theme folder structure


Minimum requirement


The theme name info yml file

careful about the spacess

Example 1 :  ‘<space><space><space>example/example-css’  (insted of example-css you can give any name but you need to specify same in theme libraries yml file)

Example 2 : ‘<space><space>header:<space>Header block’ here after ‘:<space>’ space is not mandatory


Keys (ref:-drupal.org)

The following keys provide meta-data about your theme, and define some of the basic functionality.

  • name: Fluffiness (eg:-The Example)
    Required. The human readable name will appear on the Appearance page, where you can activate your theme.
  • description:(eg:- This is sample theme for Drupal 8 🙂 ).
    Required. The description is also displayed on the Appearance page.
  • type: theme
    Required. The type key indicates the type of extension, e.g. module, theme or profile. For themes this should always be set to “theme”.
  • core: 8.x
    Required. The core key specifies the version of Drupal core that your theme is compatible with.
  • The libraries key can be used to add asset libraries — which can contain both CSS and JS assets — to all pages where the theme is active.
  • Regions are declared as children of the regions key. Note that region keys are not preceded by a dash. You are required to have a content region.

Theme name library yml file (Ref : drupal.org)

Here we will define the actual path of the css and java script file

page.html.twig (ref: drupal.org)

Default theme implementation to display a single page

You can see a screenshot.png file in the theme folder (inside example folder) this image is used to display the theme image in admin panel


You can write your own css file and js file, and also you can create your own favicon.ico, logo.png that are i am not adding here .

*Note:- If your file changes (eg:-css and js or other fildes) are not reflecting in browser do clear cache (login to your admin area configuration->Development->Performance->Clear all caches)



Author: bm on June 13, 2016
Category: Drupal 8

Your comment:

Your Name


Last articles