Drupal 8 custom theme from scratch

Drupal 8 Custom theme folder structure

drupalcustomtheme

Minimum requirement

drupalcustomtheme-min

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

drupal-8-exampletheme

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

drupal-8-exampletheme

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)

 

🙂

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

Your comment:

Your Name

Comment:




Last articles